From f718342b93db601c13cc7c0d0301236cb5ae6f94 Mon Sep 17 00:00:00 2001 From: zenn Date: Tue, 21 Apr 2026 18:06:24 +0900 Subject: [PATCH] =?UTF-8?q?v0.1.11=20-=20=EC=9D=B8=EC=A6=9D=20UI=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HANDOFF.md | 8 +- TODO.md | 1 + package-lock.json | 4 +- package.json | 2 +- src/App.vue | 160 +++++++++++++++++++++++++++++++++- src/components/AuthDialog.vue | 129 +++++++++++++++++++++++++++ src/lib/authClient.js | 81 +++++++++++++++++ 7 files changed, 380 insertions(+), 5 deletions(-) create mode 100644 src/components/AuthDialog.vue create mode 100644 src/lib/authClient.js diff --git a/HANDOFF.md b/HANDOFF.md index 484f083..bb97930 100644 --- a/HANDOFF.md +++ b/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 환경에 맞는 볼륨과 재시작 정책도 함께 고려한다. diff --git a/TODO.md b/TODO.md index 82aaf2a..ab2a203 100644 --- a/TODO.md +++ b/TODO.md @@ -94,4 +94,5 @@ - 현재 백엔드는 `backend/` 폴더에 `Fastify + Drizzle + SQLite` 기준 초안이 추가되었다. - 현재 백엔드는 회원가입, 로그인, 현재 사용자 확인용 기본 인증 API까지 포함한다. - 현재 백엔드는 사용자별 플래너 단건 저장/조회와 범위 조회 API까지 포함한다. +- 프론트에는 로그인/회원가입 모달과 현재 사용자 상태 표시가 추가되었다. - 구현할 때마다 완료된 항목은 체크하고, 큰 결정사항은 `HANDOFF.md`에도 함께 반영한다. diff --git a/package-lock.json b/package-lock.json index e04415c..73d681d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ten-minute-planner", - "version": "0.1.10", + "version": "0.1.11", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ten-minute-planner", - "version": "0.1.10", + "version": "0.1.11", "dependencies": { "vue": "^3.5.13" }, diff --git a/package.json b/package.json index 453bee1..f995b0d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ten-minute-planner", "private": true, - "version": "0.1.10", + "version": "0.1.11", "type": "module", "scripts": { "dev": "vite", diff --git a/src/App.vue b/src/App.vue index 551f0d6..24b0756 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,8 +1,17 @@ diff --git a/src/components/AuthDialog.vue b/src/components/AuthDialog.vue new file mode 100644 index 0000000..f11382d --- /dev/null +++ b/src/components/AuthDialog.vue @@ -0,0 +1,129 @@ + + + diff --git a/src/lib/authClient.js b/src/lib/authClient.js new file mode 100644 index 0000000..91e8945 --- /dev/null +++ b/src/lib/authClient.js @@ -0,0 +1,81 @@ +const AUTH_STORAGE_KEY = 'ten-minute-planner-auth' +const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:3001' + +function buildHeaders(token, extraHeaders = {}) { + return { + 'Content-Type': 'application/json', + ...(token ? { Authorization: `Bearer ${token}` } : {}), + ...extraHeaders, + } +} + +async function request(path, { method = 'GET', token, body } = {}) { + const response = await fetch(`${API_BASE_URL}${path}`, { + method, + headers: buildHeaders(token), + body: body ? JSON.stringify(body) : undefined, + }) + + const data = await response.json().catch(() => ({})) + + if (!response.ok) { + throw new Error(data.message || '요청 처리 중 문제가 발생했습니다.') + } + + return data +} + +export function readAuthState() { + if (typeof window === 'undefined') { + return { token: '', user: null } + } + + try { + return JSON.parse(window.localStorage.getItem(AUTH_STORAGE_KEY) ?? '{"token":"","user":null}') + } catch (error) { + console.warn('저장된 인증 상태를 불러오지 못했습니다.', error) + return { token: '', user: null } + } +} + +export function persistAuthState({ token, user }) { + if (typeof window === 'undefined') { + return + } + + window.localStorage.setItem( + AUTH_STORAGE_KEY, + JSON.stringify({ + token, + user, + }), + ) +} + +export function clearAuthState() { + if (typeof window === 'undefined') { + return + } + + window.localStorage.removeItem(AUTH_STORAGE_KEY) +} + +export async function signup({ email, password, nickname }) { + return request('/api/auth/signup', { + method: 'POST', + body: { email, password, nickname }, + }) +} + +export async function login({ email, password }) { + return request('/api/auth/login', { + method: 'POST', + body: { email, password }, + }) +} + +export async function fetchCurrentUser(token) { + return request('/api/auth/me', { + token, + }) +}