v0.0.6

src/App.vue

@@ -20,6 +20,10 @@ function createEmptyTimetable() {
   return Array.from({ length: timetableCellCount }, () => false)
 }
 
+function createTaskLabel(index) {
+  return `${index + 1}`.padStart(2, '0')
+}
+
 function createTimetableFromRanges(ranges) {
   const timetable = createEmptyTimetable()
 
@@ -37,21 +41,21 @@ const plannerSeed = {
     dday: 'D-12 LAUNCH',
     comment: '집중 작업 3개만 남기고, 10분 단위로 흐름을 끊지 않기.',
     tasks: [
-      { id: '01', title: '홈 화면 정보 구조 정리', checked: true },
-      { id: '02', title: '플래너 페이지 헤더 상태 연결', checked: true },
-      { id: '03', title: '타임테이블 액티브 블록 설계' },
-      { id: '04', title: '우측 캘린더 빠른 이동 구현' },
-      { id: '05', title: '전날 요약 영역 문구 다듬기' },
-      { id: '06', title: '다음날 할 일 자동 제안 시나리오' },
-      { id: '07', title: '통계 카드 레이아웃 정리' },
-      { id: '08', title: '모바일 스택 레이아웃 점검' },
-      { id: '09', title: '체크박스 인터랙션 연결' },
-      { id: '10', title: '페이지 넘김 애니메이션 방향 검토' },
-      { id: '11', title: 'Tailwind 토큰 정리' },
-      { id: '12', title: 'Vue 컴포넌트 분리 기준 정하기' },
-      { id: '13', title: '빈 상태 문구 작성' },
-      { id: '14', title: '주간 리듬 회고 메모 추가' },
-      { id: '15', title: '디자인 QA 체크리스트 정리' },
+      { label: '01', title: '홈 화면 정보 구조 정리', checked: true },
+      { label: '02', title: '플래너 페이지 헤더 상태 연결', checked: true },
+      { label: '03', title: '타임테이블 액티브 블록 설계' },
+      { label: '04', title: '우측 캘린더 빠른 이동 구현' },
+      { label: '05', title: '전날 요약 영역 문구 다듬기' },
+      { label: '06', title: '다음날 할 일 자동 제안 시나리오' },
+      { label: '07', title: '통계 카드 레이아웃 정리' },
+      { label: '08', title: '모바일 스택 레이아웃 점검' },
+      { label: '09', title: '체크박스 인터랙션 연결' },
+      { label: '10', title: '페이지 넘김 애니메이션 방향 검토' },
+      { label: '11', title: 'Tailwind 토큰 정리' },
+      { label: '12', title: 'Vue 컴포넌트 분리 기준 정하기' },
+      { label: '13', title: '빈 상태 문구 작성' },
+      { label: '14', title: '주간 리듬 회고 메모 추가' },
+      { label: '15', title: '디자인 QA 체크리스트 정리' },
     ],
     memo: [
       '오른쪽 패널은 정보 확인과 이동이 한 번에 되도록 유지.',
@@ -78,21 +82,21 @@ const plannerSeed = {
     dday: 'D-11 LAUNCH',
     comment: '초반 90분은 구현, 후반은 문장과 사용성 정리에 사용.',
     tasks: [
-      { id: '01', title: '통계 섹션 수치 실제 계산 연결', checked: true },
-      { id: '02', title: '날짜 선택 시 상태 동기화' },
-      { id: '03', title: '다음날 할 일 템플릿 개선' },
-      { id: '04', title: '2페이지 보기 비교 카피 작성' },
-      { id: '05', title: '주간 흐름 카드 추가' },
-      { id: '06', title: '메모 영역 편집 UX 개선' },
-      { id: '07', title: '프린트 스타일 초안 점검' },
-      { id: '08', title: '색 대비 보정' },
-      { id: '09', title: '우측 패널 축약 버전 검토' },
-      { id: '10', title: '마감용 체크리스트 분리' },
-      { id: '11', title: '키보드 탐색 흐름 다듬기' },
-      { id: '12', title: '데이터 구조 문서화' },
-      { id: '13', title: '테스트 날짜 더미 세트 늘리기' },
-      { id: '14', title: '브랜드 푸터 위치 확정' },
-      { id: '15', title: '빈 상태 일러스트 여부 결정' },
+      { label: '01', title: '통계 섹션 수치 실제 계산 연결', checked: true },
+      { label: '02', title: '날짜 선택 시 상태 동기화' },
+      { label: '03', title: '다음날 할 일 템플릿 개선' },
+      { label: '04', title: '2페이지 보기 비교 카피 작성' },
+      { label: '05', title: '주간 흐름 카드 추가' },
+      { label: '06', title: '메모 영역 편집 UX 개선' },
+      { label: '07', title: '프린트 스타일 초안 점검' },
+      { label: '08', title: '색 대비 보정' },
+      { label: '09', title: '우측 패널 축약 버전 검토' },
+      { label: '10', title: '마감용 체크리스트 분리' },
+      { label: '11', title: '키보드 탐색 흐름 다듬기' },
+      { label: '12', title: '데이터 구조 문서화' },
+      { label: '13', title: '테스트 날짜 더미 세트 늘리기' },
+      { label: '14', title: '브랜드 푸터 위치 확정' },
+      { label: '15', title: '빈 상태 일러스트 여부 결정' },
     ],
     memo: [
       '한 화면에 모든 정보를 모으되 시선 이동은 짧게.',
@@ -136,7 +140,7 @@ function buildFallbackRecord(date) {
     dday: 'D-00 FOCUS',
     comment: '',
     tasks: Array.from({ length: 15 }, (_, index) => ({
-      id: `${index + 1}`.padStart(2, '0'),
+      label: createTaskLabel(index),
       title: '',
       checked: false,
     })),
@@ -150,6 +154,11 @@ function buildFallbackRecord(date) {
 function normalizeRecord(record) {
   return {
     ...record,
+    tasks: record.tasks.map((task, index) => ({
+      label: task.label ?? task.id ?? createTaskLabel(index),
+      title: task.title ?? '',
+      checked: Boolean(task.checked),
+    })),
     timetable: Array.isArray(record.timetable) && record.timetable.length === timetableCellCount
       ? [...record.timetable]
       : createEmptyTimetable(),
@@ -252,6 +261,10 @@ function updateComment(record, value) {
   record.comment = value
 }
 
+function updateTaskLabel(record, { index, value }) {
+  record.tasks[index].label = value
+}
+
 function updateTaskTitle(record, { index, value }) {
   record.tasks[index].title = value
 }
@@ -276,6 +289,18 @@ function hasPlannerContent(record) {
     record.timetable.some(Boolean),
   )
 }
+
+function fillTaskLabelsWithNumbers(record) {
+  record.tasks.forEach((task, index) => {
+    task.label = createTaskLabel(index)
+  })
+}
+
+function clearTaskLabels(record) {
+  record.tasks.forEach((task) => {
+    task.label = ''
+  })
+}
 </script>
 
 <template>
@@ -345,6 +370,7 @@ function hasPlannerContent(record) {
           :hours="hours"
           :timetable="planner.timetable"
           @update:comment="updateComment(planner, $event)"
+          @update:task-label="updateTaskLabel(planner, $event)"
           @update:task-title="updateTaskTitle(planner, $event)"
           @toggle:task="toggleTask(planner, $event)"
           @update:memo="updateMemo(planner, $event)"
@@ -365,6 +391,29 @@ function hasPlannerContent(record) {
             </div>
           </section>
 
+          <section class="border border-stone-200 bg-white/80 p-5">
+            <p class="mb-3 text-[11px] font-bold tracking-[0.22em] text-ink">TASK LABELS</p>
+            <p class="text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
+              왼쪽 라벨은 직접 입력할 수 있고, 필요하면 아래 버튼으로 순번을 한 번에 채울 수 있습니다.
+            </p>
+            <div class="mt-4 flex flex-wrap gap-2">
+              <button
+                type="button"
+                class="rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+                @click="fillTaskLabelsWithNumbers(planner)"
+              >
+                번호 채우기
+              </button>
+              <button
+                type="button"
+                class="rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+                @click="clearTaskLabels(planner)"
+              >
+                라벨 비우기
+              </button>
+            </div>
+          </section>
+
           <section class="border border-stone-200 bg-white/80 p-5">
             <p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">READ NEXT</p>
             <div class="space-y-3">
@@ -386,6 +435,7 @@ function hasPlannerContent(record) {
             :marked-keys="markedDateKeys"
             @shift-month="shiftCalendarMonth"
             @shift-year="shiftCalendarYear"
+            @go-today="selectDate(new Date())"
             @select="selectDate"
           />
 
@@ -431,6 +481,7 @@ function hasPlannerContent(record) {
             :hours="hours"
             :timetable="planner.timetable"
             @update:comment="updateComment(planner, $event)"
+            @update:task-label="updateTaskLabel(planner, $event)"
             @update:task-title="updateTaskTitle(planner, $event)"
             @toggle:task="toggleTask(planner, $event)"
             @update:memo="updateMemo(planner, $event)"
@@ -446,6 +497,7 @@ function hasPlannerContent(record) {
             :hours="hours"
             :timetable="secondaryPlanner.timetable"
             @update:comment="updateComment(secondaryPlanner, $event)"
+            @update:task-label="updateTaskLabel(secondaryPlanner, $event)"
             @update:task-title="updateTaskTitle(secondaryPlanner, $event)"
             @toggle:task="toggleTask(secondaryPlanner, $event)"
             @update:memo="updateMemo(secondaryPlanner, $event)"