v0.1.15 - 로그인 필수 및 동기화 토스트

v0.1.14 - 서버 삭제 동기화 추가
v0.1.13 - 로컬·클라우드 데이터 분리
2026-04-21 18:24:39 +09:00 · 2026-04-21 18:20:33 +09:00 · 2026-04-21 18:16:50 +09:00
8 changed files with 266 additions and 76 deletions
--- a/HANDOFF.md
+++ b/HANDOFF.md
@@ -4,7 +4,7 @@

 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
- 현재 기준 버전: `v0.1.12`
+- 현재 기준 버전: `v0.1.15`
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`

 ## 기준 디자인
@@ -119,6 +119,11 @@
 - 현재 프론트는 인증만 연결된 상태이고, 플래너 저장은 아직 `localStorage` 기준이다.
 - 로그인 상태에서는 플래너 수정 시 날짜별 서버 저장을 예약하고, 로그인 직후에는 서버 데이터를 먼저 가져오도록 연결하기 시작했다.
 - 현재는 로컬 저장도 계속 유지하면서 서버 저장을 병행하는 과도기 구조다.
+- 로그인 시 서버 플래너 데이터로 `plannerRecords`를 교체하고, 로그아웃 시에는 로컬 저장 기반 데이터로 다시 복귀하도록 정리했다.
+- 이로 인해 다른 사용자 로그인 시 이전 로컬 데이터가 서버 계정 데이터와 섞일 위험을 줄였다.
+- 로그인 상태에서 특정 날짜의 플래너 내용을 완전히 비우면, 서버 저장 대신 해당 날짜 엔트리를 삭제하도록 정리했다.
+- 현재는 로그인 전 플래너 진입을 막고, 인증 후에만 실제 플래너/통계 화면을 사용하도록 변경했다.
+- 클라우드 저장 상태는 헤더가 아니라 오른쪽 하단의 작은 토스트 형태로 표시되도록 변경했다.
 - 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.
 - Docker Compose는 프론트엔드와 백엔드를 함께 올리는 기준으로 설계하되, NAS 환경에 맞는 볼륨과 재시작 정책도 함께 고려한다.

--- a/TODO.md
+++ b/TODO.md
@@ -96,4 +96,5 @@
 - 현재 백엔드는 사용자별 플래너 단건 저장/조회와 범위 조회 API까지 포함한다.
 - 프론트에는 로그인/회원가입 모달과 현재 사용자 상태 표시가 추가되었다.
 - 로그인 상태일 때는 서버 저장을 우선 사용하는 흐름으로 전환 중이다.
+- 로그인 전에는 플래너 본문을 사용하지 못하도록 막고, 인증 후 사용 흐름으로 정리했다.
 - 구현할 때마다 완료된 항목은 체크하고, 큰 결정사항은 `HANDOFF.md`에도 함께 반영한다.
--- a/backend/src/routes/planner.js
+++ b/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,
+    }
+  })
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "ten-minute-planner",
-  "version": "0.1.12",
+  "version": "0.1.15",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "ten-minute-planner",
-      "version": "0.1.12",
+      "version": "0.1.15",
      "dependencies": {
        "vue": "^3.5.13"
      },
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "ten-minute-planner",
  "private": true,
-  "version": "0.1.12",
+  "version": "0.1.15",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src/App.vue
+++ b/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'

@@ -30,6 +31,7 @@ const authToken = ref('')
 const currentUser = ref(null)
 const syncStatus = ref('local')
 const syncMessage = ref('')
+const syncToastVisible = ref(false)
 const selectedDate = ref(new Date())
 const calendarViewDate = ref(new Date(selectedDate.value))
 const statsRangeStart = ref(toKey(new Date(new Date().setDate(new Date().getDate() - 6))))
@@ -51,6 +53,7 @@ const timetableCellCount = hours.length * 6
 let printPageStyleElement = null
 let isHydratingRemoteRecords = false
 const syncTimers = new Map()
+let syncToastTimer = null

 function createEmptyTimetable() {
  return Array.from({ length: timetableCellCount }, () => false)
@@ -557,6 +560,7 @@ watch(
      calendarViewDate: calendarViewDate.value,
      statsRangeStart: normalizedStatsRange.value.startKey,
      statsRangeEnd: normalizedStatsRange.value.endKey,
+      includeRecords: !isAuthenticated.value,
    })
  },
  { deep: true },
@@ -575,6 +579,30 @@ function clearTaskLabels(record) {
  schedulePlannerSyncForRecord(record)
 }

+function setSyncFeedback(status, message, options = {}) {
+  const {
+    visible = true,
+    duration = 1600,
+    sticky = false,
+  } = options
+
+  syncStatus.value = status
+  syncMessage.value = message
+
+  if (syncToastTimer) {
+    window.clearTimeout(syncToastTimer)
+    syncToastTimer = null
+  }
+
+  syncToastVisible.value = visible
+
+  if (visible && !sticky) {
+    syncToastTimer = window.setTimeout(() => {
+      syncToastVisible.value = false
+    }, duration)
+  }
+}
+
 function resetAuthForm() {
  authForm.nickname = ''
  authForm.email = ''
@@ -600,14 +628,12 @@ function updateAuthField({ field, value }) {
 async function applyAuthSuccess(data) {
  authToken.value = data.token
  currentUser.value = data.user
-  syncStatus.value = 'cloud'
-  syncMessage.value = '클라우드 동기화 연결됨'
+  setSyncFeedback('cloud', '클라우드 동기화 연결됨')
  persistAuthState({
    token: data.token,
    user: data.user,
  })
  await hydratePlannerRecordsFromApi()
-  queueSyncAllPlannerRecords()
  closeAuthDialog()
 }

@@ -649,8 +675,7 @@ async function restoreAuthSession() {
  try {
    const result = await fetchCurrentUser(savedAuth.token)
    currentUser.value = result.user
-    syncStatus.value = 'cloud'
-    syncMessage.value = '클라우드 동기화 연결됨'
+    setSyncFeedback('cloud', '클라우드 동기화 연결됨')
    persistAuthState({
      token: savedAuth.token,
      user: result.user,
@@ -659,8 +684,9 @@ async function restoreAuthSession() {
  } catch (error) {
    authToken.value = ''
    currentUser.value = null
-    syncStatus.value = 'local'
-    syncMessage.value = '로컬 저장 모드'
+    setSyncFeedback('local', '로그인 후 클라우드 저장을 사용할 수 있습니다.', {
+      visible: false,
+    })
    clearAuthState()
  }
 }
@@ -669,9 +695,35 @@ function logout() {
  clearPendingSyncTimers()
  authToken.value = ''
  currentUser.value = null
-  syncStatus.value = 'local'
-  syncMessage.value = '로컬 저장 모드'
+  setSyncFeedback('local', '로그인 후 클라우드 저장을 사용할 수 있습니다.', {
+    visible: false,
+  })
  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 +737,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)

@@ -712,8 +756,9 @@ function schedulePlannerSync(recordKey) {
    window.clearTimeout(syncTimers.get(recordKey))
  }

-  syncStatus.value = 'syncing'
-  syncMessage.value = '클라우드 저장 중...'
+  setSyncFeedback('syncing', '클라우드 저장 중...', {
+    sticky: true,
+  })

  const timerId = window.setTimeout(async () => {
    syncTimers.delete(recordKey)
@@ -721,10 +766,18 @@ function schedulePlannerSync(recordKey) {
    try {
      const record = plannerRecords[recordKey]

-      if (!record || !hasPlannerContent(record)) {
+      if (!record) {
        if (syncTimers.size === 0) {
-          syncStatus.value = 'cloud'
-          syncMessage.value = '클라우드 동기화 연결됨'
+          setSyncFeedback('cloud', '클라우드 동기화 연결됨')
+        }
+        return
+      }
+
+      if (!hasPlannerContent(record)) {
+        await deletePlannerEntry(authToken.value, recordKey)
+
+        if (syncTimers.size === 0) {
+          setSyncFeedback('cloud', '클라우드에서 삭제됨')
        }
        return
      }
@@ -737,12 +790,12 @@ function schedulePlannerSync(recordKey) {
      })

      if (syncTimers.size === 0) {
-        syncStatus.value = 'cloud'
-        syncMessage.value = '클라우드에 저장됨'
+        setSyncFeedback('cloud', '클라우드에 저장됨')
      }
    } catch (error) {
-      syncStatus.value = 'error'
-      syncMessage.value = error.message || '클라우드 저장에 실패했습니다.'
+      setSyncFeedback('error', error.message || '클라우드 저장에 실패했습니다.', {
+        duration: 3200,
+      })
    }
  }, 500)

@@ -755,21 +808,25 @@ async function hydratePlannerRecordsFromApi() {
  }

  isHydratingRemoteRecords = true
-  syncStatus.value = 'syncing'
-  syncMessage.value = '클라우드 데이터를 불러오는 중...'
+  setSyncFeedback('syncing', '클라우드 데이터를 불러오는 중...', {
+    sticky: true,
+  })

  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)
    })

-    syncStatus.value = 'cloud'
-    syncMessage.value = '클라우드 동기화 연결됨'
+    replacePlannerRecords(remoteRecords)
+
+    setSyncFeedback('cloud', '클라우드 동기화 연결됨')
  } catch (error) {
-    syncStatus.value = 'error'
-    syncMessage.value = error.message || '클라우드 데이터를 불러오지 못했습니다.'
+    setSyncFeedback('error', error.message || '클라우드 데이터를 불러오지 못했습니다.', {
+      duration: 3200,
+    })
  } finally {
    isHydratingRemoteRecords = false
  }
@@ -803,7 +860,9 @@ async function printSelectedPlanner(layout = 'single') {
 }

 onMounted(() => {
-  syncMessage.value = '로컬 저장 모드'
+  setSyncFeedback('local', '로그인 후 클라우드 저장을 사용할 수 있습니다.', {
+    visible: false,
+  })
  restoreAuthSession()
 })
 </script>
@@ -830,12 +889,6 @@ onMounted(() => {
                  <p class="text-sm font-semibold tracking-[0.02em] text-stone-900">
                    {{ currentUser.nickname }}
                  </p>
-                  <p
-                    class="text-[10px] font-bold tracking-[0.12em]"
-                    :class="syncStatus === 'error' ? 'text-red-500' : syncStatus === 'syncing' ? 'text-blue-500' : 'text-stone-500'"
-                  >
-                    {{ syncMessage }}
-                  </p>
                </div>
                <button
                  type="button"
@@ -846,13 +899,6 @@ onMounted(() => {
                </button>
              </template>
              <template v-else>
-                <div class="px-2">
-                  <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">MODE</p>
-                  <p class="text-sm font-semibold tracking-[0.02em] text-stone-900">LOCAL</p>
-                  <p class="text-[10px] font-bold tracking-[0.12em] text-stone-500">
-                    {{ syncMessage }}
-                  </p>
-                </div>
                <button
                  type="button"
                  class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
@@ -869,7 +915,10 @@ onMounted(() => {
                </button>
              </template>
            </div>
-            <div class="inline-flex rounded-full border border-stone-200 bg-stone-100 p-1">
+            <div
+              v-if="isAuthenticated"
+              class="inline-flex rounded-full border border-stone-200 bg-stone-100 p-1"
+            >
              <button
                type="button"
                class="rounded-full px-4 py-2 text-xs font-bold tracking-[0.14em] transition"
@@ -887,7 +936,10 @@ onMounted(() => {
                STATS
              </button>
            </div>
-            <div class="inline-flex rounded-full border border-stone-200 bg-stone-100 p-1">
+            <div
+              v-if="isAuthenticated"
+              class="inline-flex rounded-full border border-stone-200 bg-stone-100 p-1"
+            >
              <button
                type="button"
                class="rounded-full px-4 py-2 text-xs font-bold tracking-[0.14em] transition"
@@ -905,7 +957,10 @@ onMounted(() => {
                2 PAGE SPREAD
              </button>
            </div>
-            <div class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-2 py-2">
+            <div
+              v-if="isAuthenticated"
+              class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-2 py-2"
+            >
              <button
                type="button"
                class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
@@ -922,7 +977,7 @@ onMounted(() => {
              </button>
            </div>
            <div
-              v-if="screenMode === 'planner'"
+              v-if="isAuthenticated && screenMode === 'planner'"
              class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-2 py-2"
            >
              <button
@@ -945,7 +1000,64 @@ onMounted(() => {
      </header>

      <section
-        v-if="screenMode === 'planner' && viewMode === 'focus'"
+        v-if="!isAuthenticated"
+        class="print-hidden rounded-[32px] border border-white/60 bg-white/65 p-6 shadow-[0_24px_80px_rgba(28,25,23,0.08)] sm:p-8"
+      >
+        <div class="mx-auto flex max-w-3xl flex-col gap-6 text-center">
+          <div class="space-y-3">
+            <p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">Members Only</p>
+            <h2 class="text-3xl font-semibold tracking-[-0.05em] text-stone-900 sm:text-4xl">
+              로그인 후 플래너를 작성하고<br>
+              클라우드에 안전하게 저장하세요
+            </h2>
+            <p class="mx-auto max-w-2xl text-sm leading-7 text-stone-600 sm:text-base">
+              이제 플래너는 사용자 계정 기준으로 문서와 통계가 연결됩니다. 로그인하지 않은 상태에서는 데이터가 섞일 수 있어
+              작성 화면을 열지 않도록 변경했습니다.
+            </p>
+          </div>
+
+          <div class="grid gap-4 rounded-[28px] border border-stone-200 bg-[#fbf7f0] p-5 text-left sm:grid-cols-3">
+            <article class="rounded-2xl border border-stone-200 bg-white px-4 py-5">
+              <p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">ACCOUNT</p>
+              <p class="mt-3 text-sm font-semibold leading-6 text-stone-800">
+                회원가입 후 사용자별 플래너와 통계를 분리해서 관리합니다.
+              </p>
+            </article>
+            <article class="rounded-2xl border border-stone-200 bg-white px-4 py-5">
+              <p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">CLOUD SAVE</p>
+              <p class="mt-3 text-sm font-semibold leading-6 text-stone-800">
+                작성 내용은 날짜별로 서버에 저장되고, 다른 기기에서도 이어볼 수 있습니다.
+              </p>
+            </article>
+            <article class="rounded-2xl border border-stone-200 bg-white px-4 py-5">
+              <p class="text-[10px] font-bold tracking-[0.18em] text-stone-500">PRINT & STATS</p>
+              <p class="mt-3 text-sm font-semibold leading-6 text-stone-800">
+                로그인 기반 데이터로 통계와 출력 흐름을 안정적으로 맞춰갑니다.
+              </p>
+            </article>
+          </div>
+
+          <div class="flex flex-col items-center justify-center gap-3 sm:flex-row">
+            <button
+              type="button"
+              class="rounded-full border border-stone-300 bg-white px-6 py-3 text-xs font-bold tracking-[0.18em] text-stone-700 transition hover:border-stone-500 hover:text-stone-900"
+              @click="openAuthDialog('login')"
+            >
+              LOGIN
+            </button>
+            <button
+              type="button"
+              class="rounded-full bg-stone-900 px-6 py-3 text-xs font-bold tracking-[0.18em] text-white transition hover:bg-stone-700"
+              @click="openAuthDialog('signup')"
+            >
+              SIGN UP
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <section
+        v-else-if="screenMode === 'planner' && viewMode === 'focus'"
        class="print-hidden grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]"
      >
        <div class="print-target">
@@ -1127,7 +1239,7 @@ onMounted(() => {
        @update:range-end="statsRangeEnd = $event"
      />

-      <section class="print-only">
+      <section v-if="isAuthenticated" class="print-only">
        <div v-if="printLayout === 'single'" class="print-paper print-paper--single">
          <div class="print-sheet-frame">
            <PlannerPage
@@ -1210,5 +1322,29 @@ onMounted(() => {
      @switch-mode="authMode = $event; authMessage = ''"
      @update:field="updateAuthField"
    />
+
+    <transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="translate-y-2 opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="transition duration-200 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="translate-y-2 opacity-0"
+    >
+      <div
+        v-if="isAuthenticated && syncToastVisible"
+        class="pointer-events-none fixed bottom-5 right-5 z-40 max-w-xs rounded-2xl border border-stone-200/80 bg-white/92 px-4 py-3 shadow-[0_16px_40px_rgba(28,25,23,0.12)] backdrop-blur"
+      >
+        <p
+          class="text-[10px] font-bold tracking-[0.18em]"
+          :class="syncStatus === 'error' ? 'text-red-500' : syncStatus === 'syncing' ? 'text-blue-500' : 'text-stone-500'"
+        >
+          {{ syncStatus === 'syncing' ? 'SYNC' : syncStatus === 'error' ? 'ERROR' : 'CLOUD' }}
+        </p>
+        <p class="mt-1 text-sm font-semibold leading-6 text-stone-800">
+          {{ syncMessage }}
+        </p>
+      </div>
+    </transition>
  </main>
 </template>
--- a/src/lib/plannerApi.js
+++ b/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,
+  })
+}
--- a/src/lib/plannerStorage.js
+++ b/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),
  )
 }
Author	SHA1	Message	Date
zenn	1e58c58373	v0.1.15 - 로그인 필수 및 동기화 토스트	2026-04-21 18:24:39 +09:00
zenn	20564ba34b	v0.1.14 - 서버 삭제 동기화 추가	2026-04-21 18:20:33 +09:00
zenn	a53ef4cc6f	v0.1.13 - 로컬·클라우드 데이터 분리	2026-04-21 18:16:50 +09:00