v0.1.0

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.0.8`
+- 현재 기준 버전: `v0.1.0`
 
 ## 기준 디자인
 
@@ -32,6 +32,7 @@
 - STATS 완료율은 전체 15칸이 아니라, 실제로 입력된 TASKS만 기준으로 계산한다.
 - `TIME TABLE`은 드래그로 10분 블록을 연속 선택할 수 있다.
 - `TIME TABLE`은 우클릭 드래그 시 선택된 블록을 지우는 방식으로도 편집할 수 있다.
+- `TIME TABLE` 숫자 영역은 선택/드래그로 텍스트가 잡히지 않도록 막아두었다.
 - `TOTAL TIME`은 타임테이블에서 선택된 블록 수를 기준으로 자동 계산된다.
 - 달력은 연/월 이동이 가능하며, 현재 보이는 월과 선택된 날짜 상태를 분리해서 관리한다.
 - 달력 상단은 월 좌우 화살표, 클릭형 연도 선택, `TODAY` 버튼 구조로 동작한다.
@@ -40,6 +41,10 @@
 - 플래너 상태는 `localStorage`에 저장되며, 날짜별 기록과 선택 날짜, 달력 보고 있던 월까지 복원된다.
 - 상단 전환 버튼으로 `PLANNER / STATS` 화면을 오갈 수 있다.
 - 통계 화면에서는 전체 집중 시간, 평균 완료율, 기록 일수, 최근 7일 흐름, 최근 기록, 베스트 데이를 보여준다.
+- 통계 화면은 시작일/종료일을 직접 선택해 그 기간 기준으로 지표를 다시 계산할 수 있다.
+- `NEXT DAY` 영역의 요일도 본문 날짜와 같은 규칙으로 주말 색상이 적용된다.
+- 플래너 화면에서는 `PRINT DAY` 버튼으로 현재 선택 날짜 문서를 바로 출력할 수 있다.
+- 인쇄 시에는 현재 선택된 하루 플래너 본문만 남기고, 헤더/사이드패널/통계 화면은 숨긴다.
 
 ## 확정된 결정사항
 

TODO.md

@@ -62,6 +62,7 @@
 - [x] 통계 페이지 요구사항을 정리한다.
 - [x] 통계 페이지 라우팅 또는 화면 전환 구조를 설계한다.
 - [x] 집중 시간, 완료율, 연속 기록 같은 핵심 지표를 정의한다.
+- [x] 사용자가 시작일과 종료일을 선택해서 기간별 통계를 볼 수 있게 한다.
 - [ ] 사용자 개인 통계 화면 기준을 정리한다.
 
 ## 6단계: 계정 및 서비스 확장
@@ -69,7 +70,7 @@
 - [ ] 회원 가입 / 로그인 방식 후보를 정리한다.
 - [ ] 사용자별 문서 분리 저장 구조를 설계한다.
 - [ ] 공유가 아닌 개인 보관용 서비스 흐름으로 요구사항을 정리한다.
-- [ ] 향후 출력 기능을 위한 인쇄 레이아웃 요구사항을 정리한다.
+- [x] 향후 출력 기능을 위한 인쇄 레이아웃 요구사항을 정리한다.
 
 ## 메모
 

package-lock.json

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

package.json

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

src/App.vue

@@ -9,6 +9,8 @@ const screenMode = ref('planner')
 const viewMode = ref('focus')
 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))))
+const statsRangeEnd = ref(toKey(new Date()))
 
 const hours = [
   '6', '7', '8', '9', '10', '11', '12',
@@ -136,6 +138,10 @@ function toDateValue(value, fallback = new Date()) {
   return Number.isNaN(nextDate.getTime()) ? new Date(fallback) : nextDate
 }
 
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}
+
 function buildFallbackRecord(date) {
   return {
     dday: 'D-00 FOCUS',
@@ -221,10 +227,17 @@ function restoreDateState() {
 
     if (savedState.calendarViewDate) {
       calendarViewDate.value = toDateValue(savedState.calendarViewDate, selectedDate.value)
-      return
+    } else {
+      calendarViewDate.value = new Date(selectedDate.value)
     }
 
-    calendarViewDate.value = new Date(selectedDate.value)
+    if (savedState.statsRangeStart) {
+      statsRangeStart.value = savedState.statsRangeStart
+    }
+
+    if (savedState.statsRangeEnd) {
+      statsRangeEnd.value = savedState.statsRangeEnd
+    }
   } catch (error) {
     console.warn('저장된 날짜 상태를 불러오지 못했습니다.', error)
   }
@@ -404,19 +417,37 @@ const plannerEntries = computed(() =>
     .sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey)),
 )
 
+const normalizedStatsRange = computed(() => {
+  const todayKey = toKey(new Date())
+  const startKey = statsRangeStart.value || todayKey
+  const endKey = statsRangeEnd.value || todayKey
+
+  if (startKey <= endKey) {
+    return { startKey, endKey }
+  }
+
+  return { startKey: endKey, endKey: startKey }
+})
+
+const rangeEntries = computed(() =>
+  plannerEntries.value.filter(([key]) =>
+    key >= normalizedStatsRange.value.startKey && key <= normalizedStatsRange.value.endKey,
+  ),
+)
+
 const totalFocusedMinutes = computed(() =>
-  plannerEntries.value.reduce((total, [, record]) => total + getFocusedMinutes(record), 0),
+  rangeEntries.value.reduce((total, [, record]) => total + getFocusedMinutes(record), 0),
 )
 
 const totalRecordedTasks = computed(() =>
-  plannerEntries.value.reduce(
+  rangeEntries.value.reduce(
     (total, [, record]) => total + record.tasks.filter((task) => task.title.trim()).length,
     0,
   ),
 )
 
 const completedRecordedTasks = computed(() =>
-  plannerEntries.value.reduce(
+  rangeEntries.value.reduce(
     (total, [, record]) => total + record.tasks.filter((task) => task.title.trim() && task.checked).length,
     0,
   ),
@@ -443,7 +474,7 @@ const overviewCards = computed(() => [
   },
   {
     label: 'RECORDED DAYS',
-    value: `${plannerEntries.value.length}일`,
+    value: `${rangeEntries.value.length}일`,
     caption: '기록이 남아 있는 날짜 수',
   },
   {
@@ -466,21 +497,23 @@ function createDateLabel(dateKey) {
 }
 
 const weeklyRecords = computed(() => {
-  const entries = Array.from({ length: 7 }, (_, index) => {
-    const date = new Date(selectedDate.value)
-    date.setDate(selectedDate.value.getDate() - (6 - index))
-    const record = getPlannerRecord(date)
-    const focusedMinutes = getFocusedMinutes(record)
+  const entries = rangeEntries.value.map(([key, record]) => {
+    const date = toDateValue(key)
     const weekdayShort = ['일', '월', '화', '수', '목', '금', '토'][date.getDay()]
+    const focusedMinutes = getFocusedMinutes(record)
 
     return {
-      key: toKey(date),
+      key,
       weekday: weekdayShort,
       focusedMinutes,
       focusedTime: formatMinutes(focusedMinutes),
     }
   })
 
+  if (entries.length === 0) {
+    return []
+  }
+
   const maxMinutes = Math.max(...entries.map((entry) => entry.focusedMinutes), 60)
 
   return entries.map((entry) => ({
@@ -490,7 +523,7 @@ const weeklyRecords = computed(() => {
 })
 
 const recentRecords = computed(() =>
-  [...plannerEntries.value]
+  [...rangeEntries.value]
     .sort(([leftKey], [rightKey]) => rightKey.localeCompare(leftKey))
     .slice(0, 5)
     .map(([key, record]) => ({
@@ -503,11 +536,11 @@ const recentRecords = computed(() =>
 )
 
 const bestDay = computed(() => {
-  if (plannerEntries.value.length === 0) {
+  if (rangeEntries.value.length === 0) {
     return null
   }
 
-  const [bestKey, bestRecord] = [...plannerEntries.value].reduce((bestEntry, currentEntry) => {
+  const [bestKey, bestRecord] = [...rangeEntries.value].reduce((bestEntry, currentEntry) => {
     const [, bestRecordValue] = bestEntry
     const [, currentRecordValue] = currentEntry
 
@@ -523,7 +556,7 @@ const bestDay = computed(() => {
 })
 
 watch(
-  [plannerRecords, selectedDate, calendarViewDate],
+  [plannerRecords, selectedDate, calendarViewDate, statsRangeStart, statsRangeEnd],
   () => {
     if (typeof window === 'undefined') {
       return
@@ -546,6 +579,8 @@ watch(
       JSON.stringify({
         selectedDate: selectedDate.value.toISOString(),
         calendarViewDate: calendarViewDate.value.toISOString(),
+        statsRangeStart: normalizedStatsRange.value.startKey,
+        statsRangeEnd: normalizedStatsRange.value.endKey,
         records: serializableRecords,
       }),
     )
@@ -564,12 +599,16 @@ function clearTaskLabels(record) {
     task.label = ''
   })
 }
+
+function printSelectedPlanner() {
+  window.print()
+}
 </script>
 
 <template>
   <main class="min-h-screen px-4 py-6 text-ink sm:px-6 lg:px-10">
-    <div class="mx-auto flex max-w-[1680px] flex-col gap-6">
-      <header class="flex flex-col gap-4 rounded-[28px] border border-white/60 bg-white/70 p-5 backdrop-blur sm:p-6">
+    <div class="print-root mx-auto flex max-w-[1680px] flex-col gap-6">
+      <header class="print-hidden flex flex-col gap-4 rounded-[28px] border border-white/60 bg-white/70 p-5 backdrop-blur sm:p-6">
         <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
           <div class="space-y-2">
             <p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">10 Minute Planner</p>
@@ -633,6 +672,14 @@ function clearTaskLabels(record) {
                 NEXT DAY
               </button>
             </div>
+            <button
+              v-if="screenMode === 'planner'"
+              type="button"
+              class="rounded-full border border-stone-200 bg-white px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
+              @click="printSelectedPlanner"
+            >
+              PRINT DAY
+            </button>
           </div>
         </div>
       </header>
@@ -641,27 +688,29 @@ function clearTaskLabels(record) {
         v-if="screenMode === 'planner' && viewMode === 'focus'"
         class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]"
       >
-        <PlannerPage
-          :date-main="selectedDateDisplay.main"
-          :date-weekday="selectedDateDisplay.weekday"
-          :date-weekday-tone="selectedDateDisplay.weekdayTone"
-          :dday="planner.dday"
-          :comment="planner.comment"
-          :total-time="formatTotalTime(planner)"
-          :tasks="planner.tasks"
-          :memo="planner.memo"
-          :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-label="updateMemoLabel(planner, $event)"
-          @update:memo="updateMemo(planner, $event)"
-          @update:timetable="updateTimetable(planner, $event)"
-        />
+        <div class="print-target">
+          <PlannerPage
+            :date-main="selectedDateDisplay.main"
+            :date-weekday="selectedDateDisplay.weekday"
+            :date-weekday-tone="selectedDateDisplay.weekdayTone"
+            :dday="planner.dday"
+            :comment="planner.comment"
+            :total-time="formatTotalTime(planner)"
+            :tasks="planner.tasks"
+            :memo="planner.memo"
+            :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-label="updateMemoLabel(planner, $event)"
+            @update:memo="updateMemo(planner, $event)"
+            @update:timetable="updateTimetable(planner, $event)"
+          />
+        </div>
 
-        <aside class="flex flex-col gap-4">
+        <aside class="print-hidden flex flex-col gap-4">
           <section class="border border-stone-200 bg-white/80 p-5">
             <p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">PREV SNAPSHOT</p>
             <div class="space-y-3">
@@ -742,7 +791,8 @@ function clearTaskLabels(record) {
               <p class="text-[11px] font-bold tracking-[0.22em] text-ink">NEXT DAY</p>
               <div class="mt-5 space-y-3">
                 <p class="text-lg font-semibold tracking-[-0.04em] text-stone-900">
-                  {{ secondaryDateDisplay.main }} {{ secondaryDateDisplay.weekday }}
+                  <span>{{ secondaryDateDisplay.main }}</span>
+                  <span class="ml-1" :class="secondaryDateDisplay.weekdayTone">{{ secondaryDateDisplay.weekday }}</span>
                 </p>
                 <p class="text-[11px] font-semibold tracking-[0.08em] text-stone-600">
                   내일의 첫 작업은 "{{ secondaryPlanner.tasks[0]?.title || '새 작업 추가' }}" 로 시작합니다.
@@ -758,54 +808,63 @@ function clearTaskLabels(record) {
         class="overflow-x-auto rounded-[32px] border border-white/60 bg-white/40 p-4 sm:p-6"
       >
         <div class="flex min-w-[1260px] gap-6">
-          <PlannerPage
-            :date-main="selectedDateDisplay.main"
-            :date-weekday="selectedDateDisplay.weekday"
-            :date-weekday-tone="selectedDateDisplay.weekdayTone"
-            :dday="planner.dday"
-            :comment="planner.comment"
-            :total-time="formatTotalTime(planner)"
-            :tasks="planner.tasks"
-            :memo="planner.memo"
-            :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-label="updateMemoLabel(planner, $event)"
-            @update:memo="updateMemo(planner, $event)"
-            @update:timetable="updateTimetable(planner, $event)"
-          />
-          <PlannerPage
-            :date-main="secondaryDateDisplay.main"
-            :date-weekday="secondaryDateDisplay.weekday"
-            :date-weekday-tone="secondaryDateDisplay.weekdayTone"
-            :dday="secondaryPlanner.dday"
-            :comment="secondaryPlanner.comment"
-            :total-time="formatTotalTime(secondaryPlanner)"
-            :tasks="secondaryPlanner.tasks"
-            :memo="secondaryPlanner.memo"
-            :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-label="updateMemoLabel(secondaryPlanner, $event)"
-            @update:memo="updateMemo(secondaryPlanner, $event)"
-            @update:timetable="updateTimetable(secondaryPlanner, $event)"
-          />
+          <div class="print-target">
+            <PlannerPage
+              :date-main="selectedDateDisplay.main"
+              :date-weekday="selectedDateDisplay.weekday"
+              :date-weekday-tone="selectedDateDisplay.weekdayTone"
+              :dday="planner.dday"
+              :comment="planner.comment"
+              :total-time="formatTotalTime(planner)"
+              :tasks="planner.tasks"
+              :memo="planner.memo"
+              :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-label="updateMemoLabel(planner, $event)"
+              @update:memo="updateMemo(planner, $event)"
+              @update:timetable="updateTimetable(planner, $event)"
+            />
+          </div>
+          <div class="print-hidden">
+            <PlannerPage
+              :date-main="secondaryDateDisplay.main"
+              :date-weekday="secondaryDateDisplay.weekday"
+              :date-weekday-tone="secondaryDateDisplay.weekdayTone"
+              :dday="secondaryPlanner.dday"
+              :comment="secondaryPlanner.comment"
+              :total-time="formatTotalTime(secondaryPlanner)"
+              :tasks="secondaryPlanner.tasks"
+              :memo="secondaryPlanner.memo"
+              :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-label="updateMemoLabel(secondaryPlanner, $event)"
+              @update:memo="updateMemo(secondaryPlanner, $event)"
+              @update:timetable="updateTimetable(secondaryPlanner, $event)"
+            />
+          </div>
         </div>
       </section>
 
       <StatsDashboard
         v-else
+        class="print-hidden"
         :overview-cards="overviewCards"
         :weekly-records="weeklyRecords"
         :recent-records="recentRecords"
         :best-day="bestDay"
         :selected-date-label="`${selectedDateDisplay.main} ${selectedDateDisplay.weekday}`"
+        :range-start="normalizedStatsRange.startKey"
+        :range-end="normalizedStatsRange.endKey"
+        @update:range-start="statsRangeStart = $event"
+        @update:range-end="statsRangeEnd = $event"
       />
     </div>
   </main>

src/components/PlannerPage.vue

@@ -230,7 +230,10 @@ onBeforeUnmount(() => {
             class="flex h-[30px] border-b"
             :class="index === hours.length - 1 ? 'border-ink' : 'border-line'"
           >
-            <div class="flex h-full w-[30px] items-center justify-center border-r border-ink text-[9px] text-ink">
+            <div
+              class="flex h-full w-[30px] touch-none select-none items-center justify-center border-r border-ink text-[9px] text-ink"
+              @pointerdown.prevent
+            >
               {{ hour }}
             </div>
             <div

src/components/StatsDashboard.vue

@@ -12,6 +12,14 @@ defineProps({
     type: Array,
     required: true,
   },
+  rangeStart: {
+    type: String,
+    required: true,
+  },
+  rangeEnd: {
+    type: String,
+    required: true,
+  },
   bestDay: {
     type: Object,
     default: null,
@@ -21,10 +29,43 @@ defineProps({
     required: true,
   },
 })
+
+const emit = defineEmits(['update:range-start', 'update:range-end'])
 </script>
 
 <template>
   <section class="grid gap-6">
+    <article class="rounded-[28px] border border-white/60 bg-white/80 p-5 shadow-paper backdrop-blur">
+      <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <p class="text-[11px] font-bold tracking-[0.22em] text-stone-500">RANGE</p>
+          <h2 class="mt-2 text-2xl font-semibold tracking-[-0.05em] text-stone-900">
+            원하는 기간 기준으로 통계 보기
+          </h2>
+        </div>
+        <div class="grid gap-3 sm:grid-cols-2">
+          <label class="flex flex-col gap-2 text-[11px] font-bold tracking-[0.14em] text-stone-500">
+            START DATE
+            <input
+              :value="rangeStart"
+              type="date"
+              class="rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-400"
+              @input="emit('update:range-start', $event.target.value)"
+            />
+          </label>
+          <label class="flex flex-col gap-2 text-[11px] font-bold tracking-[0.14em] text-stone-500">
+            END DATE
+            <input
+              :value="rangeEnd"
+              type="date"
+              class="rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-stone-400"
+              @input="emit('update:range-end', $event.target.value)"
+            />
+          </label>
+        </div>
+      </div>
+    </article>
+
     <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
       <article
         v-for="card in overviewCards"
@@ -43,7 +84,7 @@ defineProps({
           <div>
             <p class="text-[11px] font-bold tracking-[0.22em] text-stone-500">WEEKLY FLOW</p>
             <h2 class="mt-2 text-2xl font-semibold tracking-[-0.05em] text-stone-900">
-              최근 7일 기록 흐름
+              선택 기간 기록 흐름
             </h2>
           </div>
           <p class="text-[11px] font-semibold tracking-[0.06em] text-stone-500">
@@ -51,11 +92,11 @@ defineProps({
           </p>
         </div>
 
-        <div class="mt-8 grid grid-cols-7 gap-3">
+        <div class="mt-8 flex gap-3 overflow-x-auto pb-2">
           <div
             v-for="record in weeklyRecords"
             :key="record.key"
-            class="flex flex-col items-center gap-3"
+            class="flex min-w-[56px] flex-col items-center gap-3"
           >
             <div class="flex h-40 items-end">
               <div

src/style.css

@@ -20,3 +20,40 @@
     @apply outline-none;
   }
 }
+
+@media print {
+  html,
+  body {
+    background: #ffffff !important;
+  }
+
+  body {
+    min-height: auto;
+  }
+
+  .print-hidden {
+    display: none !important;
+  }
+
+  .print-root {
+    max-width: none !important;
+    padding: 0 !important;
+    gap: 0 !important;
+  }
+
+  .print-target {
+    display: block !important;
+    width: 100% !important;
+    max-width: none !important;
+    box-shadow: none !important;
+    border: 0 !important;
+    background: #ffffff !important;
+    padding: 0 !important;
+  }
+
+  .print-target article {
+    max-width: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+  }
+}