v0.1.11 - 인증 UI 연결

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.10`
+- 현재 기준 버전: `v0.1.11`
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
 
 ## 기준 디자인
@@ -26,6 +26,8 @@
 - 메인 화면 셸: `src/App.vue`
 - 플래너 종이 레이아웃: `src/components/PlannerPage.vue`
 - 우측 달력 컴포넌트: `src/components/MiniCalendar.vue`
+- 프론트 인증 모달: `src/components/AuthDialog.vue`
+- 프론트 인증 클라이언트: `src/lib/authClient.js`
 - 백엔드 엔트리 포인트: `backend/src/server.js`
 - 백엔드 DB 스키마: `backend/src/db/schema.js`
 - 백엔드 인증 라우트: `backend/src/routes/auth.js`
@@ -47,6 +49,8 @@
 - 상단 날짜 표시에서는 토요일의 `(토)`만 파란색, 일요일의 `(일)`만 빨간색으로 표시한다.
 - 플래너 상태는 `localStorage`에 저장되며, 날짜별 기록과 선택 날짜, 달력 보고 있던 월까지 복원된다.
 - `localStorage` 접근 로직은 `src/lib/plannerStorage.js`로 분리하기 시작했고, 이후 API/DB adapter로 교체하기 쉬운 구조로 정리 중이다.
+- 프론트는 헤더에서 `LOGIN` / `SIGN UP` 모달을 열 수 있고, 로그인 상태면 닉네임과 `LOGOUT` 버튼을 표시한다.
+- 인증 토큰과 현재 사용자 정보는 프론트 로컬 저장소에 따로 유지하고, 앱 시작 시 `/api/auth/me`로 세션 복원을 시도한다.
 - 루트에서 `npm run dev:backend`, `npm run db:generate`, `npm run db:migrate`로 백엔드 명령을 호출할 수 있다.
 - 상단 전환 버튼으로 `PLANNER / STATS` 화면을 오갈 수 있다.
 - 통계 화면에서는 전체 집중 시간, 평균 완료율, 기록 일수, 최근 7일 흐름, 최근 기록, 베스트 데이를 보여준다.
@@ -111,6 +115,8 @@
 - 현재는 SQLite로 시작하되, 확장 시 PostgreSQL로 옮길 수 있게 Drizzle 기반 스키마를 유지한다.
 - 현재 인증 방식은 Bearer 토큰 기반의 간단한 세션 구조이며, 추후 쿠키/리프레시 토큰 전략으로 확장할 수 있다.
 - 다음 프론트 단계에서는 `src/lib/plannerStorage.js`를 유지하되, 인증 이후 백엔드 저장소 adapter를 추가해서 `localStorage`와 전환 가능하게 만드는 흐름이 좋다.
+- 현재 프론트는 인증만 연결된 상태이고, 플래너 저장은 아직 `localStorage` 기준이다.
+- 다음 단계는 `plannerStorage`에 백엔드 adapter를 추가해서 로그인 시 서버 저장을 우선 사용하도록 연결하는 것이다.
 - 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.
 - Docker Compose는 프론트엔드와 백엔드를 함께 올리는 기준으로 설계하되, NAS 환경에 맞는 볼륨과 재시작 정책도 함께 고려한다.