10:42 - Oikos Finance UI 개선 세션 인사이트

Problem: WeekMonthNav에서 주차 이동이 현재 월 내부로만 제한되어 있었다. 월 경계를 넘어 이전/다음 주로 이동하려면 별도로 월을 먼저 바꿔야 했고, 사용자 흐름이 끊겼다. 또한 Docker 빌드가 로컬에서 통과한 TypeScript 코드에서 TS6133 unused variable 오류로 실패하는 문제가 있었다.

Solution:

  1. 월 경계 자동 이동: weekIdx === 0이면 navigateMonth(-1), weekIdx === last이면 navigateMonth(1) 호출. 키보드 단축키(←/→)와 버튼 모두 동일하게 처리. 부모의 기존 useEffect가 월 전환 후 자동으로 해당 주를 선택하므로 추가 로직 불필요.
  2. TS 빌드 불일치 해결: 로컬 npx tsc --noEmit은 tsconfig.json(noUnusedLocals 없음), Docker는 tsconfig.app.json(noUnusedLocals: true)를 참조해 동작이 달랐다. package.json에 "typecheck": "tsc -p tsconfig.app.json --noEmit" 추가 → 배포 전 npm run typecheck로 사전 검증.
  3. UI 컨텍스트 일치: 연간 집행률 진행바는 현재 월에만 표시. 과거 월 조회 시 YTD 데이터는 현재 시점 기준이라 맥락 불일치 발생 → 숨김 처리. 잠금 아이콘은 WeekMonthNav 주차 레이블에만, 개별 항목에서는 제거.

Result:

  • 주차 이동이 월 경계를 자연스럽게 넘나들어 탐색 흐름 개선
  • npm run typecheck로 Docker 빌드 실패를 로컬에서 사전 차단 가능
  • 데이터가 의미있는 컨텍스트에서만 UI 표시 → 정보 노이즈 감소
  • 핵심 원칙: "상태 표시는 가장 적절한 단일 위치에", "UI 컴포넌트는 현재 데이터가 유효한 컨텍스트에서만 렌더링"