v0.0.1

2026-04-21 12:30:44 +09:00
commit 6ae64d2a13
15 changed files with 3292 additions and 0 deletions
--- a/src/components/PlannerPage.vue
+++ b/src/components/PlannerPage.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+type PlannerTask = {
+  id: string
+  title: string
+  checked?: boolean
+}
+
+type PlannerProps = {
+  dateLabel: string
+  dday: string
+  comment: string
+  totalTime: string
+  tasks: PlannerTask[]
+  memo: string[]
+  hours: string[]
+  brand?: string
+}
+
+defineProps<PlannerProps>()
+</script>
+
+<template>
+  <article
+    class="flex w-full max-w-[762px] flex-col gap-3 bg-paper px-6 py-6 text-[10px] font-bold tracking-[0.16em] text-ink shadow-paper sm:px-12 sm:py-12"
+  >
+    <div class="flex flex-col gap-4 py-[18px]">
+      <div class="flex gap-4">
+        <div class="relative h-[90px] w-[394px] flex-1 border-t border-ink px-[10px] pt-[10px]">
+          <span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">YEAR / MONTH / DAY</span>
+          <p class="pt-6 text-xs tracking-[0.24em] text-ink sm:text-sm">{{ dateLabel }}</p>
+        </div>
+        <div class="relative h-[90px] w-[210px] border-t border-ink px-[10px] pt-[10px]">
+          <span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">D-DAY</span>
+          <p class="pt-6 text-xs tracking-[0.24em] text-ink sm:text-sm">{{ dday }}</p>
+        </div>
+      </div>
+      <div class="flex gap-4 border-b border-ink pb-[18px]">
+        <div class="relative h-[90px] w-[394px] flex-1 border-t border-ink px-[10px] pt-[10px]">
+          <span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">COMMENT</span>
+          <p class="pt-6 text-[11px] font-semibold normal-case tracking-[0.08em] text-stone-700 sm:text-xs">
+            {{ comment }}
+          </p>
+        </div>
+        <div class="relative h-[90px] w-[210px] border-t border-ink px-[10px] pt-[10px]">
+          <span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">TOTAL TIME</span>
+          <p class="pt-6 text-xs tracking-[0.24em] text-ink sm:text-sm">{{ totalTime }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex gap-4 py-[10px]">
+      <div class="flex w-[394px] flex-1 flex-col gap-9">
+        <section class="relative">
+          <div class="absolute -top-[9px] left-0 bg-paper px-[2px] text-muted">TASKS</div>
+          <div class="border-t border-ink">
+            <div
+              v-for="(task, index) in tasks"
+              :key="task.id"
+              class="flex h-[38px] items-center border-b"
+              :class="index % 5 === 4 || index === tasks.length - 1 ? 'border-ink' : 'border-line'"
+            >
+              <div class="h-full w-[62px] border-r border-dashed border-ink px-2 py-2 text-[9px] text-stone-500">
+                {{ task.id }}
+              </div>
+              <div class="flex min-w-0 flex-1 items-center px-3">
+                <span class="truncate text-[11px] font-semibold normal-case tracking-[0.06em] text-stone-800">
+                  {{ task.title }}
+                </span>
+              </div>
+              <div class="flex h-full w-[42px] items-center justify-center p-[10px]">
+                <span
+                  class="block h-full w-full border border-dashed"
+                  :class="task.checked ? 'border-ink bg-stone-100' : 'border-ink/60'"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="relative">
+          <div class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">MEMO</div>
+          <div class="border-t border-ink">
+            <div
+              v-for="(memoItem, index) in memo"
+              :key="`${memoItem}-${index}`"
+              class="flex h-[38px] items-center border-b"
+              :class="index === memo.length - 1 ? 'border-ink' : 'border-line'"
+            >
+              <div class="h-full w-[62px] border-r border-dashed border-ink" />
+              <div class="flex-1 px-3 text-[11px] font-semibold normal-case tracking-[0.06em] text-stone-700">
+                {{ memoItem }}
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <section class="relative w-[210px] shrink-0">
+        <div class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">TIME TABLE</div>
+        <div class="border-t border-ink">
+          <div
+            v-for="(hour, index) in hours"
+            :key="`${hour}-${index}`"
+            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">
+              {{ hour }}
+            </div>
+            <div
+              v-for="quarter in 6"
+              :key="quarter"
+              class="h-full w-[30px] border-r border-dashed border-line last:border-r-0"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <div class="flex justify-end">
+      <p class="text-[10px] tracking-[0.18em] text-ink">{{ brand ?? 'SORI.STUDIO' }}</p>
+    </div>
+  </article>
+</template>