Jukrap

Created by Ju-cheol Park

🤖 One quick ask: could you take a look at my ai-agent-playbook? It collects my personal AI agent skills and AGENTS.md templates.

Work

I organized work experience across web, mobile apps, Android, and developer tooling. Each item shows scope, technical decisions, and verified results.

Work Index

WebLogistics Management WebMobileMobile Label Print AppToolingProject Kickoff Documentation ToolWebChart Editing Web ToolWebFinancial Operations AdminAndroidField PDA Android AppAndroidLegacy WebView Android AppHybridHybrid App Feature IntegrationLegacy WebLegacy Web Panel Split

Case Notes

WebOperations / Performance

Logistics Management Web

2026.04 ~ 2026.06 · End-to-end build

Built logistics management flows for lookup, reservations, Excel, and printing.

Built a logistics management web app covering lookup, reservation intake, status views, contacts, Excel handling, and label printing. The focus was keeping business workflows stable across desktop and mobile contexts.

  • React
  • TypeScript
  • Vite
  • React Router
  • TanStack Query
  • Zustand
  • XLSX
  • Vitest
2,405.50 kB -> 616.59 kB
Initial load bundle
route-level code splitting and spreadsheet-library lazy loading
815.10 kB -> 204.38 kB
gzip size
about 74.9% reduction on the same baseline
123 files / 657 tests
Verification record
largest related verification record

Scope

  • logistics lookup, reservation intake, status, and contact routes
  • responsive tables, nested modals, date/dropdown UI
  • Excel upload/download, preview, and payload conversion
  • PC print and mobile WebView print paths

Contribution

  • Split non-initial screens and spreadsheet handling out of the initial entry path.
  • Kept mock data and remote API adapter boundaries separate for independent checks.
  • Separated PC browser, mobile browser, and mobile-app WebView print paths.

Outcome

  • Reduced the initial load bundle from 2,405.50 kB to 616.59 kB through route splitting and spreadsheet-library lazy loading.
  • Checked overflow, modal clipping, and dropdown behavior across viewports.
  • This became the clearest example of building and stabilizing a logistics management workflow.

Verification

  • Checked key screens across 390px to 1366px widths.
  • Checked modal, table, and dropdown display states.
  • Recorded 123 files / 657 tests on related work.
MobileLogistics Management WebView / Printer SDK

Mobile Label Print App

2026.04 ~ 2026.06 · End-to-end build

Wrapped the logistics management web in a mobile WebView and connected native printer SDK work.

Built the mobile path for the logistics management web, using WebView for the business screen and Android native modules for Bluetooth label printing. It is closer to a mobile operations shell than a standalone printer app.

  • Expo
  • React Native
  • Expo Router
  • React Native WebView
  • Android native module
  • TypeScript
  • Zustand
Bluetooth permission
Mobile print setup
runtime permission flow on recent Android
dev/prod split
App delivery flow
URL, app id, and installation artifact baselines
Real device output
Output verification
checked with actual device output

Scope

  • logistics management WebView entry and develop/production URL split
  • JavaScript-to-native print payloads
  • Android native Bluetooth print module
  • installation and update-check flows

Contribution

  • Defined the request/response contract between WebView actions and the native module.
  • Connected Bluetooth device lookup, status checks, and print commands.
  • Adjusted real-device local development so WebView and API calls did not point to the wrong loopback host.

Outcome

  • Kept web payloads separate from native output layout mapping.
  • Verified the feature as real hardware integration, not just a web button.
  • Aligned development and production installation baselines for field setup.

Verification

  • Checked Bluetooth output on a real Android device.
  • Reproduced and verified recent Android permission issues.
  • Checked WebView bridge and native print request flows.
ToolingAI API / developer productivity

Project Kickoff Documentation Tool

2026.04 · End-to-end build

Built a tool that drafts kickoff documents from project material and repository evidence.

Built a tool that combines kickoff material with local repository evidence to draft requirement, feature, and screen-level documents. The AI API is used for draft generation and partial rewrites after rule-based evidence collection.

  • Node.js
  • TypeScript
  • React
  • AI Agent workflow
  • Vite
  • pnpm
  • Vitest
Evidence scan -> AI draft
Generation flow
drafts generated from scanned evidence
xlsx workbook
sheet-style output
review requirements, features, and screens as tables
AI cell rewrite
After-review edits
regenerate selected sheet/cell items after review

Scope

  • local repository scan and evidence JSON
  • preview, detailed artifacts, and previous run reopening
  • workbook editing for requirements and functional/screen specs
  • Markdown, JSON, ZIP, and xlsx export

Contribution

  • Used rule-based scanner output as the input to the generation step.
  • Added table-based review and editing instead of generating only long text.
  • Reduced revision scope through selected cell rewrite flows.

Outcome

  • Turned kickoff analysis and document drafting into repeatable run-based work.
  • Kept evidence, preview, human review, and export in one workflow.
  • Kept the tool focused on practical project kickoff work.

Verification

  • Checked scanning, AI draft generation, and workbook export flows.
  • Checked selected-cell rewrite and previous-result reopening.
  • Checked build/test baselines.
WebVisualization / editor UI

Chart Editing Web Tool

2026.03 ~ 2026.04 · End-to-end build

Built chart preview, option editing, and WebGL/GLSL background rendering for an editor tool.

Built data field mapping, chart previews, option panels, drag/drop, and tooltip behavior for an editable visualization workflow.

  • React
  • TypeScript
  • Vite
  • Chart.js
  • WebGL/GLSL (OpenGL-style)
  • OGL (WebGL library)
  • react-chartjs-2
  • TanStack Query
  • Zustand
  • MSW
  • Vitest
6-tab settings panel
Settings structure
options separated by editing area
Chart.js + WebGL/GLSL
Rendering base
chart preview and OGL(WebGL)-based editor background
Vitest / MSW
Verification base
interaction and data-flow checks

Scope

  • field/value mapping and chart preview
  • option panels, collapsible panels, and tooltips
  • drag/drop editing UX
  • WebGL/GLSL shader-based editor background renderer

Contribution

  • Kept chart rendering and panel state connected through a clearer option model.
  • Aligned preview output and option labels so users could understand the current configuration.
  • Built multiple WebGL/GLSL fragment shader background modes using pointer, time, and resolution uniforms.

Outcome

  • Framed the work as an editor experience, not just chart rendering.
  • Showed visualization, state management, complex settings UI, and WebGL shader rendering in one case.
  • Moved beyond library usage into option-model and editing UX integration.

Verification

  • Checked preview rendering, option changes, and panel collapse behavior.
  • Checked drag/drop, tooltip, and field mapping behavior.
  • Checked mock-backed data flows.
WebAdmin UI / migration

Financial Operations Admin

2026.03 · End-to-end build

Built data-heavy admin screens around state-driven React flows.

Built financial operations admin screens around tables, filters, modals, and session flows while moving DOM-driven behavior toward React state.

  • React
  • TypeScript
  • Vite
  • React Router
  • TanStack Query
  • TanStack Virtual
  • Zustand
4 -> 1
DOM manipulation reduction example
sidebar state example from presentation material
React Router
screen flow
route and session behavior for business screens

Scope

  • table/filter UI
  • domain pages
  • modals
  • session flow

Contribution

  • Organized reusable table/filter/modal patterns.
  • Reduced direct DOM manipulation toward state-based rendering.
  • Built route and session flow foundations for business screens.

Outcome

  • Made data-heavy admin screens easier to maintain in React.
  • Separated complex business UI into table, filter, modal, and session units.

Verification

  • Checked table, filter, modal, and session flows at screen level.
AndroidBuild recovery / field input

Field PDA Android App

2026.03 ~ 2026.04 · Maintenance / feature work

Separated operational signing from current build recovery.

Recovered build and runtime flows for an Android app used on field devices, narrowing issues around Gradle/JDK conflicts, signing, scan/input flows, and initial data sync.

  • Android Java
  • Gradle/AGP
  • Scanner SDK
Build recovery
Gradle/JDK cleanup
separated local builds from operational signing
Field input
scan/device flow
checked login, initial sync, and input stages separately
dev/release
Build paths
including an operational signing fallback

Scope

  • Gradle, AGP, JDK, and Kotlin dependency conflicts
  • development/release builds with conditional signing
  • scanner invocation, field input, login, and initial sync
  • field-device runtime compatibility

Contribution

  • Separated signing availability from whether developers could build locally.
  • Split login failure and initial data sync failure into observable stages.
  • Focused first on field input and scanner flows that could block actual work.

Outcome

  • Recovered a state where developers could build and verify the app again.
  • Avoided broad runtime changes while modernizing the build path.
  • Established a conservative maintenance pattern for field-device Android apps.

Verification

  • Checked development and production build paths.
  • Checked login, initial data, scan, and input flows.
  • Checked Android builds and key field-input flows.

Additional Work

Android

2026.03 ~ 2026.04

Maintenance / feature work

Static web / OS compatibility

Legacy WebView Android App

Checked an old WebView app against a modern Android build setup.

Reviewed build, WebView behavior, file handling, back navigation, and OS compatibility for a static-web-based Android app while keeping changes narrow.

  • Android Java
  • WebView
  • Gradle/AGP
  • OkHttp
  • RxJava2
Hybrid

2026.06

Maintenance / feature work

WebView / Spring MVC / Android QA

Hybrid App Feature Integration

Integrated feature, routing, file picker, and QA flows across WebView and legacy web.

Worked on email checks, image inspection, bottom-tab routing, WebView bridge behavior, file selection, and real-device QA while keeping external API keys behind server-side proxy contracts.

  • Android WebView
  • Cordova
  • Spring MVC
  • jQuery
  • Java
Legacy Web

2026.06

Maintenance / feature work

JSP / jQuery

Legacy Web Panel Split

Separated regression baselines for document and board-style panels.

Reviewed JSP/jQuery document panels, board-style lists, menu routing, page loaders, and browser regression baselines to clarify change impact.

  • JSP
  • jQuery
  • Server-rendered web