기성 캘린더 라이브러리로 충족하기 어려운 15분 단위 Snap과 반복 일정 예외 규칙(이번만/이후 모두)을 포함한 Drag & Drop 인터랙션을 직접 구현
반복 일정을 Drag한 뒤 원래 위치로 되돌아가는 문제를 화면 상태 → Query Cache → API 요청 단계로 추적해 상태 동기화 문제를 찾아 해결
프로젝트 컨벤션·도메인 규칙·리뷰 기준을 주입한 AI 에이전트 환경을 직접 구성해 반복 구현과 리팩토링에 활용
프로젝트 구조·네이밍·API Layer 패턴과 주요 변경 이력을 문서화해 후속 개발자가 기존 설계 결정과 변경 맥락을 추적할 수 있도록 인계
React 19
TypeScript
Vite
TanStack Query
Zustand
Tailwind CSS 4
Radix UI
dnd-kit
react-window
SK가스 MI 플랫폼 구축 — LNG 시장 분석·시나리오 플랫폼
2026.04 – 2026.06 · 3개월Frontend (한수원 프로젝트와 병행)
시나리오 목록·상세·Design 영역을 기존 플랫폼 구조에 맞춰 퍼블리싱부터 API 연동까지 개발
뉴스 박스 Drag 상태와 차트 렌더링이 결합돼 Drag할 때마다 전체 차트가 다시 그려지던 구조를 별도 레이어로 분리해 Drag 중 차트 재렌더링을 제거
구형 화면과 시나리오 그룹 구조를 신규 설계에 맞게 재편하며 레거시 코드 5,000줄 이상 제거
가격 예측 데이터의 Excel 업로드 과정에서 파일 수·용량·확장자·실제 형식·파일명을 검증하는 파이프라인을 구축해 잘못된 데이터의 시스템 유입을 차단
여러 상세 화면에 중복돼 있던 UI 구조를 공통 컴포넌트로 분리해 프로젝트 내 동일한 구조로 통합
React 19
TypeScript
Vite
Emotion
MUI
TanStack Query
Chart.js
ReactFlow
대한전선 변전소 자산관리 시스템 — 케이블 진단·감시 SW
2025.04 – 2026.02 · 11개월Frontend
기존 전력설비 통합관리 플랫폼의 코드베이스를 분석해 대한전선의 측정·진단·이력 요구사항에 맞게 이식하고, 실시간 통신 구조와 전역 상태 설계를 재구성
초당 약 1,200건의 실시간 장비 데이터를 처리하는 화면이 장시간 운영 후 메모리 부족으로 중단되는 문제를 분석 — 상태 관리 라이브러리 내부에 남는 캐시와 차트에 누적되는 과거 데이터를 원인으로 규명하고 캐시 정책과 차트 갱신 방식을 변경해 연속 운영 환경에서 발생하던 크래시를 제거
케이블 부분방전(PD) 진단 데이터를 Trend·Heatmap·3D로 시각화하는 실시간 모니터링·알람 화면과 변전소 단선도 작화 Editor 개발
차트 이미지가 포함된 일일·월간 진단 리포트를 자동 생성하도록 구현해 운영자의 수기 리포트 작성 과정 자동화
진단 리포트 양식과 화면 요구사항을 도메인 담당자와 협의하고 사용자·관리자 가이드를 작성해 실제 운영 환경으로 인계
React 18
TypeScript
Vite
Recoil
TanStack Query
ECharts
echarts-gl
ReactFlow
docxtemplater
42dot Sirius Web — 자율주행 차량 운영 관리 플랫폼(FMS)
2024.06 – 2024.10 · 5개월Frontend
여러 지도 화면에서 공통으로 사용할 수 있도록 Zoom·Drawing·현재 위치 등의 기능을 옵션으로 조합할 수 있는 공통 지도 컴포넌트를 설계
운영구역(GeoFence)을 지도에서 직접 생성·편집하는 Drawing Tool을 구현하고 허용 범위 검증, 범위 이탈 시 Rollback, Undo 기능 지원
정류장이 허용 운영구역 내부에만 배치되도록 공간 제약을 검증하고, 지도 Drag를 이용한 주행 경로 생성·편집 기능 구현
담당 도메인의 QA 이슈를 처리하며 지역 범위, 정류장-지역 간 정합성, 노선 등록·수정 과정의 데이터 제약 처리
React 18
TypeScript
Vite
Zustand
TanStack Query
stompjs
MapLibre GL
vanilla-extract
TMAP 공항버스·셔틀 플랫폼 / 운행 관리 시스템
2022.11 – 2024.12 · 26개월Frontend + Spring Batch Scheduler
노선·시간표·기사·예약·결제를 관리하는 운영 Admin과 고객·임직원·기사용 서비스를 개발하고 26개월간 운영 담당
환불 수수료 원단위 절사, 부분 취소 시 미탑승 인원 반영, 0원 결제·탈퇴 회원 환불 등 예약·결제·정산의 예외 케이스를 포함한 환불 로직 구현
버스가 예약 정류장을 통과하면 미사용 승차권을 바우처로 전환하고 안내 문자를 발송하는 No-show 처리와, 일별 노선·회차·시간표를 생성하는 작업을 Spring Batch로 자동화
예약·결제 Flow, QR 승차권 발권·검표, 실시간 차량 위치 지도 등 실제 사용자 서비스 개발
쿠폰의 할인 조건·회차별 적용 등 정책 변경을 기획과 조율해 반영하고, 장애 대응 및 신규 노선 추가 절차를 Runbook으로 작성해 장기간 운영 과정에서 발생한 운영 지식을 문서화
Vue 3
TypeScript
Quasar
Pinia
Vite
Java 11
Spring Boot
Spring Batch
PROJECTS
Today's Meal — 식단 기록·공유 및 실시간 게임 서비스
운영 중
Frontend · Backend · Infra 전체 개발
기획부터 Frontend·Backend·Infra 구축, 배포와 실제 운영까지 전 영역 담당
실시간 통신을 목적에 따라 분리해 멀티플레이어 게임은 WebSocket, 알림은 SSE 기반으로 설계
Gemini API를 이용해 음식 사진에서 영양 정보를 추출하고, Browser-side 이미지 압축으로 업로드 트래픽과 서버 부하 절감