v0.0.9

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