v0.1.14 - 서버 삭제 동기화 추가

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.12`
+- 현재 기준 버전: `v0.1.14`
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
 
 ## 기준 디자인
@@ -119,6 +119,9 @@
 - 현재 프론트는 인증만 연결된 상태이고, 플래너 저장은 아직 `localStorage` 기준이다.
 - 로그인 상태에서는 플래너 수정 시 날짜별 서버 저장을 예약하고, 로그인 직후에는 서버 데이터를 먼저 가져오도록 연결하기 시작했다.
 - 현재는 로컬 저장도 계속 유지하면서 서버 저장을 병행하는 과도기 구조다.
+- 로그인 시 서버 플래너 데이터로 `plannerRecords`를 교체하고, 로그아웃 시에는 로컬 저장 기반 데이터로 다시 복귀하도록 정리했다.
+- 이로 인해 다른 사용자 로그인 시 이전 로컬 데이터가 서버 계정 데이터와 섞일 위험을 줄였다.
+- 로그인 상태에서 특정 날짜의 플래너 내용을 완전히 비우면, 서버 저장 대신 해당 날짜 엔트리를 삭제하도록 정리했다.
 - 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.
 - Docker Compose는 프론트엔드와 백엔드를 함께 올리는 기준으로 설계하되, NAS 환경에 맞는 볼륨과 재시작 정책도 함께 고려한다.
 

backend/src/routes/planner.js

@@ -162,4 +162,35 @@ export async function registerPlannerRoutes(app) {
       },
     }
   })
+
+  app.delete('/api/planner/:entryDate', async (request, reply) => {
+    const user = await requireAuthenticatedUser(request, reply)
+
+    if (!user) {
+      return
+    }
+
+    const dateResult = dateSchema.safeParse(request.params.entryDate)
+
+    if (!dateResult.success) {
+      return reply.code(400).send({
+        message: '날짜 형식이 올바르지 않습니다.',
+      })
+    }
+
+    const deletedEntries = await db
+      .delete(plannerEntries)
+      .where(
+        and(
+          eq(plannerEntries.userId, user.id),
+          eq(plannerEntries.entryDate, dateResult.data),
+        ),
+      )
+      .returning()
+
+    return {
+      message: deletedEntries.length > 0 ? '플래너가 삭제되었습니다.' : '삭제할 플래너가 없습니다.',
+      deleted: deletedEntries.length > 0,
+    }
+  })
 }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ten-minute-planner",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ten-minute-planner",
-      "version": "0.1.12",
+      "version": "0.1.14",
       "dependencies": {
         "vue": "^3.5.13"
       },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ten-minute-planner",
   "private": true,
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -12,10 +12,11 @@ import {
   readAuthState,
   signup,
 } from './lib/authClient'
-import { fetchPlannerEntries, savePlannerEntry } from './lib/plannerApi'
+import { deletePlannerEntry, fetchPlannerEntries, savePlannerEntry } from './lib/plannerApi'
 import {
   createInitialPlannerRecords,
   persistPlannerState,
+  readPlannerStorageState,
   restorePlannerUiState,
 } from './lib/plannerStorage'
 
@@ -557,6 +558,7 @@ watch(
       calendarViewDate: calendarViewDate.value,
       statsRangeStart: normalizedStatsRange.value.startKey,
       statsRangeEnd: normalizedStatsRange.value.endKey,
+      includeRecords: !isAuthenticated.value,
     })
   },
   { deep: true },
@@ -607,7 +609,6 @@ async function applyAuthSuccess(data) {
     user: data.user,
   })
   await hydratePlannerRecordsFromApi()
-  queueSyncAllPlannerRecords()
   closeAuthDialog()
 }
 
@@ -672,6 +673,31 @@ function logout() {
   syncStatus.value = 'local'
   syncMessage.value = '로컬 저장 모드'
   clearAuthState()
+  restoreLocalPlannerRecords()
+}
+
+function replacePlannerRecords(nextRecords) {
+  Object.keys(plannerRecords).forEach((key) => {
+    delete plannerRecords[key]
+  })
+
+  Object.entries(nextRecords).forEach(([key, record]) => {
+    plannerRecords[key] = record
+  })
+}
+
+function restoreLocalPlannerRecords() {
+  replacePlannerRecords(createInitialPlannerRecords(plannerSeed, normalizeRecord))
+
+  const savedState = readPlannerStorageState()
+
+  if (savedState.selectedDate) {
+    selectedDate.value = toDateValue(savedState.selectedDate, selectedDate.value)
+  }
+
+  if (savedState.calendarViewDate) {
+    calendarViewDate.value = toDateValue(savedState.calendarViewDate, selectedDate.value)
+  }
 }
 
 function findRecordKey(record) {
@@ -685,14 +711,6 @@ function clearPendingSyncTimers() {
   syncTimers.clear()
 }
 
-function queueSyncAllPlannerRecords() {
-  Object.entries(plannerRecords).forEach(([key, record]) => {
-    if (hasPlannerContent(record)) {
-      schedulePlannerSync(key)
-    }
-  })
-}
-
 function schedulePlannerSyncForRecord(record) {
   const recordKey = findRecordKey(record)
 
@@ -721,7 +739,7 @@ function schedulePlannerSync(recordKey) {
     try {
       const record = plannerRecords[recordKey]
 
-      if (!record || !hasPlannerContent(record)) {
+      if (!record) {
         if (syncTimers.size === 0) {
           syncStatus.value = 'cloud'
           syncMessage.value = '클라우드 동기화 연결됨'
@@ -729,6 +747,16 @@ function schedulePlannerSync(recordKey) {
         return
       }
 
+      if (!hasPlannerContent(record)) {
+        await deletePlannerEntry(authToken.value, recordKey)
+
+        if (syncTimers.size === 0) {
+          syncStatus.value = 'cloud'
+          syncMessage.value = '클라우드에서 삭제됨'
+        }
+        return
+      }
+
       await savePlannerEntry(authToken.value, recordKey, {
         ...record,
         tasks: record.tasks.map((task) => ({ ...task })),
@@ -760,11 +788,14 @@ async function hydratePlannerRecordsFromApi() {
 
   try {
     const result = await fetchPlannerEntries(authToken.value)
+    const remoteRecords = {}
 
     result.entries.forEach((entry) => {
-      plannerRecords[entry.entryDate] = normalizeRecord(entry.payload)
+      remoteRecords[entry.entryDate] = normalizeRecord(entry.payload)
     })
 
+    replacePlannerRecords(remoteRecords)
+
     syncStatus.value = 'cloud'
     syncMessage.value = '클라우드 동기화 연결됨'
   } catch (error) {

src/lib/plannerApi.js

@@ -49,3 +49,10 @@ export async function savePlannerEntry(token, entryDate, payload) {
     },
   })
 }
+
+export async function deletePlannerEntry(token, entryDate) {
+  return request(`/api/planner/${entryDate}`, {
+    method: 'DELETE',
+    token,
+  })
+}

src/lib/plannerStorage.js

@@ -13,6 +13,10 @@ function readStorageState() {
   }
 }
 
+export function readPlannerStorageState() {
+  return readStorageState()
+}
+
 export function createInitialPlannerRecords(seedRecords, normalizeRecord) {
   const baseRecords = Object.fromEntries(
     Object.entries(seedRecords).map(([key, record]) => [key, normalizeRecord(record)]),
@@ -62,31 +66,37 @@ export function persistPlannerState({
   calendarViewDate,
   statsRangeStart,
   statsRangeEnd,
+  includeRecords = true,
 }) {
   if (typeof window === 'undefined') {
     return
   }
 
-  const serializableRecords = Object.fromEntries(
-    Object.entries(plannerRecords).map(([key, record]) => [
-      key,
-      {
-        ...record,
-        tasks: record.tasks.map((task) => ({ ...task })),
-        memo: record.memo.map((item) => ({ ...item })),
-        timetable: [...record.timetable],
-      },
-    ]),
-  )
+  const previousState = readStorageState()
+  const nextState = {
+    ...previousState,
+    selectedDate: selectedDate.toISOString(),
+    calendarViewDate: calendarViewDate.toISOString(),
+    statsRangeStart,
+    statsRangeEnd,
+  }
+
+  if (includeRecords) {
+    nextState.records = Object.fromEntries(
+      Object.entries(plannerRecords).map(([key, record]) => [
+        key,
+        {
+          ...record,
+          tasks: record.tasks.map((task) => ({ ...task })),
+          memo: record.memo.map((item) => ({ ...item })),
+          timetable: [...record.timetable],
+        },
+      ]),
+    )
+  }
 
   window.localStorage.setItem(
     STORAGE_KEY,
-    JSON.stringify({
-      selectedDate: selectedDate.toISOString(),
-      calendarViewDate: calendarViewDate.toISOString(),
-      statsRangeStart,
-      statsRangeEnd,
-      records: serializableRecords,
-    }),
+    JSON.stringify(nextState),
   )
 }