v0.1.16 - 토스트 축소 및 D-DAY 구조 정리

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.15`
+- 현재 기준 버전: `v0.1.16`
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
 
 ## 기준 디자인
@@ -124,6 +124,9 @@
 - 로그인 상태에서 특정 날짜의 플래너 내용을 완전히 비우면, 서버 저장 대신 해당 날짜 엔트리를 삭제하도록 정리했다.
 - 현재는 로그인 전 플래너 진입을 막고, 인증 후에만 실제 플래너/통계 화면을 사용하도록 변경했다.
 - 클라우드 저장 상태는 헤더가 아니라 오른쪽 하단의 작은 토스트 형태로 표시되도록 변경했다.
+- 저장 완료 토스트는 한 줄짜리의 작은 상태 문구로 줄여서 존재감을 낮췄다.
+- D-DAY는 본문 직접 입력보다 별도 목표 목록에서 선택한 대표 목표를 보여주는 방식이 적합하다는 방향으로 정리했다.
+- 목표가 없을 때는 본문 D-DAY를 숨기고, 오른쪽 패널의 `D-DAY 사용` 메뉴에서 목표를 검색/선택하게 하는 UX가 현재 추천안이다.
 - 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.
 - Docker Compose는 프론트엔드와 백엔드를 함께 올리는 기준으로 설계하되, NAS 환경에 맞는 볼륨과 재시작 정책도 함께 고려한다.
 

TODO.md

@@ -40,6 +40,8 @@
 - [ ] 선택한 목표 기준으로 `D-DAY`가 자동 계산되게 한다.
 - [ ] 우측 요약 패널의 `PREV SNAPSHOT`, `READ NEXT`를 실제 데이터 기반으로 연결한다.
 - [ ] 다음날 할 일 자동 제안 규칙을 정리한다.
+- [ ] 오른쪽 패널에 `D-DAY 사용` 토글과 목표 검색/선택 UI를 추가한다.
+- [ ] 목표를 여러 개 생성하고 날짜별 대표 목표를 선택할 수 있게 한다.
 
 ## 4단계: 데이터 구조와 저장
 
@@ -84,6 +86,8 @@
 ## 메모
 
 - D-DAY는 현재 보류 상태다. 목표 패널 설계 후 연결한다.
+- D-DAY는 본문에 직접 입력하는 방식보다, 별도 목표 목록에서 선택한 대표 목표를 보여주는 구조가 더 적합하다.
+- 목표가 없는 경우 본문 D-DAY 영역은 숨기고, 오른쪽 패널의 `D-DAY 사용` 메뉴에서 검색/선택하도록 유도한다.
 - `TIME TABLE` 드래그는 단순 사각형 선택이 아니라 시간 셀 단위의 연속 선택으로 해석한다.
 - 현재는 `localStorage`로 개발을 진행하지만, 적절한 시점에 DB를 붙여 사용자별 저장 구조로 확장해야 한다.
 - 현재 `localStorage` 저장 로직은 분리 가능한 형태로 정리 중이며, 이후 API/DB adapter로 교체하기 쉽게 유지한다.

package-lock.json

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

package.json

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

src/App.vue

@@ -1333,15 +1333,12 @@ onMounted(() => {
     >
       <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"
+        class="pointer-events-none fixed bottom-5 right-5 z-40 max-w-[240px] rounded-full border border-stone-200/70 bg-white/80 px-3 py-2 shadow-[0_10px_24px_rgba(28,25,23,0.08)] backdrop-blur"
       >
         <p
-          class="text-[10px] font-bold tracking-[0.18em]"
+          class="text-[11px] font-semibold tracking-[0.04em]"
           :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>