v0.1.28 - 사이드 레이아웃 재정리와 2페이지 인쇄 보정

2026-04-22 12:10:21 +09:00
6 changed files with 78 additions and 75 deletions
--- a/HANDOFF.md
+++ b/HANDOFF.md
@@ -4,7 +4,7 @@

 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
- 현재 기준 버전: `v0.1.27` 준비 중
+- 현재 기준 버전: `v0.1.28` 준비 중
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`

 ## 기준 디자인
@@ -167,6 +167,9 @@
 - 집중 보기에서 오른쪽 패널 폭을 넓혀 `1920x1080` 기준 활용도를 높였고, `TASK LABELS / D-DAY / CALENDAR`는 상단 고정 영역으로 올렸다.
 - `STATS`와 `NEXT DAY`는 반반 카드가 아니라 각각 한 줄씩 쓰도록 바꿔서 날짜 길이에 따라 높이가 흔들리는 문제를 줄였다.
 - 미니 달력은 42칸 기준으로 렌더링하고, 요일 헤더를 `SUN ~ SAT` 순서로 고정해서 일요일 시작 달력 기준을 더 명확하게 맞췄다.
+- 집중 보기 오른쪽 패널은 다시 정리해서 `왼쪽 컬럼: CALENDAR / TASK LABELS / D-DAY`, `오른쪽 컬럼: STATS / NEXT DAY`, `하단 전체 폭: READ NEXT / PREV SNAPSHOT` 구조로 맞췄다.
+- 달력은 과하게 키우지 않고 컴팩트한 크기를 유지한 채, 우측 정보 패널 내부 배치만 다시 조정하는 쪽으로 방향을 잡았다.
+- `PRINT 2-UP`은 브라우저/프린터 기본 여백 차이로 오른쪽 페이지가 잘릴 수 있어서, 프레임 폭과 스케일을 조금 더 보수적으로 줄여 안정성을 높였다.
 - 비로그인 랜딩 카드는 상단 고정이 아니라 화면 중앙에 오도록 정렬을 수정했다.
 - 현재 환경에서는 Docker 데몬이 꺼져 있어서 `docker compose build` 실검증은 하지 못했고, 데몬 시작 후 다시 확인이 필요하다.
 - 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "ten-minute-planner",
-  "version": "0.1.27",
+  "version": "0.1.28",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "ten-minute-planner",
-      "version": "0.1.27",
+      "version": "0.1.28",
      "dependencies": {
        "vue": "^3.5.13"
      },
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "ten-minute-planner",
  "private": true,
-  "version": "0.1.27",
+  "version": "0.1.28",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src/App.vue
+++ b/src/App.vue
@@ -1522,7 +1522,7 @@ onMounted(() => {

      <section
        v-else-if="screenMode === 'planner' && viewMode === 'focus'"
-        class="print-hidden grid gap-6 xl:h-full xl:min-h-0 xl:grid-cols-[minmax(0,1fr)_440px] 2xl:grid-cols-[minmax(0,1fr)_520px]"
+        class="print-hidden grid gap-6 xl:h-full xl:min-h-0 xl:grid-cols-[minmax(0,1fr)_460px] 2xl:grid-cols-[minmax(0,1fr)_640px]"
      >
        <div class="scrollbar-hide print-target rounded-[28px] border border-white/60 bg-white/45 p-4 shadow-[0_18px_60px_rgba(28,25,23,0.06)] xl:h-full xl:min-h-0 xl:overflow-y-auto xl:pr-3">
          <PlannerPage
@@ -1548,10 +1548,9 @@ onMounted(() => {
        </div>

        <aside class="scrollbar-hide print-hidden rounded-[28px] border border-white/60 bg-white/50 p-3 shadow-[0_18px_60px_rgba(28,25,23,0.06)] xl:h-full xl:min-h-0 xl:overflow-y-auto">
-          <div class="flex flex-col gap-4 rounded-[22px] p-2">
-          <div class="sticky top-0 z-10 -mx-1 rounded-[26px] bg-[linear-gradient(180deg,rgba(245,241,233,0.98)_0%,rgba(245,241,233,0.94)_78%,rgba(245,241,233,0)_100%)] px-1 pb-4 pt-1 backdrop-blur-sm">
-            <div class="grid gap-4 2xl:grid-cols-2">
-              <section class="2xl:col-span-2">
+          <div class="grid gap-4 rounded-[22px] p-2 2xl:grid-cols-[280px_minmax(0,1fr)] 2xl:items-start">
+            <div class="grid gap-4">
+              <section class="2xl:w-[280px]">
                <MiniCalendar
                  :month-label="monthLabel"
                  :year-label="yearLabel"
@@ -1570,7 +1569,7 @@ onMounted(() => {
                  <div>
                    <p class="text-[11px] font-bold tracking-[0.22em] text-ink">TASK LABELS</p>
                    <p class="mt-2 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
-                      ON이면 왼쪽 라벨을 01, 02 형태로 채우고 OFF이면 비워 둡니다.
+                      번호가 필요한 날만 빠르게 채우고, 필요 없으면 바로 비울 수 있습니다.
                    </p>
                  </div>
                  <button
@@ -1592,7 +1591,7 @@ onMounted(() => {
                  <div>
                    <p class="text-[11px] font-bold tracking-[0.22em] text-ink">D-DAY 사용</p>
                    <p class="mt-2 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
-                      목표 검색과 기간 설정은 GOALS 화면에서 관리하고, 여기서는 현재 날짜에 D-DAY를 보여줄지 여부만 제어합니다.
+                      현재 날짜에 적용된 목표가 있을 때만 본문 D-DAY 표시를 켜고 끌 수 있습니다.
                    </p>
                  </div>
                  <button
@@ -1632,64 +1631,65 @@ onMounted(() => {
                </div>
              </section>
            </div>
-          </div>

-          <section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
-            <p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">PREV SNAPSHOT</p>
-            <div class="space-y-3">
-              <p
-                v-for="item in prevSnapshotItems"
-                :key="item"
-                class="border-b border-stone-200 pb-3 text-[11px] font-semibold tracking-[0.08em] text-stone-700 last:border-b-0 last:pb-0"
-              >
-                {{ item || ' ' }}
-              </p>
+            <div class="grid gap-4">
+              <section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
+                <article>
+                  <p class="text-[11px] font-bold tracking-[0.22em] text-ink">STATS</p>
+                  <div class="mt-5 space-y-4">
+                    <div>
+                      <p class="text-[28px] font-semibold tracking-[-0.05em] text-stone-900">{{ completionRate }}%</p>
+                      <p class="text-[11px] font-semibold tracking-[0.08em] text-stone-500">TASK COMPLETION</p>
+                    </div>
+                    <div>
+                      <p class="text-[22px] font-semibold tracking-[-0.04em] text-stone-900">{{ formatTotalTime(planner) }}</p>
+                      <p class="text-[11px] font-semibold tracking-[0.08em] text-stone-500">FOCUSED TIME</p>
+                    </div>
+                  </div>
+                </article>
+              </section>
+
+              <section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
+                <article>
+                  <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">
+                      <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.find((task) => task.title.trim())?.title || '새 작업 추가' }}" 로 시작합니다.
+                    </p>
+                  </div>
+                </article>
+              </section>
            </div>
-          </section>

-          <section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
-            <p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">READ NEXT</p>
-            <div class="space-y-3">
-              <p
-                v-for="item in readNextItems"
-                :key="item"
-                class="border-b border-stone-200 pb-3 text-[11px] font-semibold tracking-[0.08em] text-stone-700 last:border-b-0 last:pb-0"
-              >
-                {{ item || ' ' }}
-              </p>
-            </div>
-          </section>
-
-          <section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
-            <article>
-              <p class="text-[11px] font-bold tracking-[0.22em] text-ink">STATS</p>
-              <div class="mt-5 space-y-4">
-                <div>
-                  <p class="text-[28px] font-semibold tracking-[-0.05em] text-stone-900">{{ completionRate }}%</p>
-                  <p class="text-[11px] font-semibold tracking-[0.08em] text-stone-500">TASK COMPLETION</p>
-                </div>
-                <div>
-                  <p class="text-[22px] font-semibold tracking-[-0.04em] text-stone-900">{{ formatTotalTime(planner) }}</p>
-                  <p class="text-[11px] font-semibold tracking-[0.08em] text-stone-500">FOCUSED TIME</p>
-                </div>
-              </div>
-            </article>
-          </section>
-
-          <section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
-            <article>
-              <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">
-                  <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.find((task) => task.title.trim())?.title || '새 작업 추가' }}" 로 시작합니다.
+            <section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)] 2xl:col-span-2">
+              <p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">READ NEXT</p>
+              <div class="grid gap-3 sm:grid-cols-3 2xl:grid-cols-3">
+                <p
+                  v-for="item in readNextItems"
+                  :key="item"
+                  class="rounded-2xl border border-stone-200 bg-[#fbf7f0] px-4 py-4 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-700"
+                >
+                  {{ item || ' ' }}
                </p>
              </div>
-            </article>
-          </section>
+            </section>
+
+            <section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)] 2xl:col-span-2">
+              <p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">PREV SNAPSHOT</p>
+              <div class="grid gap-3 sm:grid-cols-3 2xl:grid-cols-3">
+                <p
+                  v-for="item in prevSnapshotItems"
+                  :key="item"
+                  class="rounded-2xl border border-stone-200 bg-white px-4 py-4 text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-700"
+                >
+                  {{ item || ' ' }}
+                </p>
+              </div>
+            </section>
          </div>
        </aside>
      </section>
--- a/src/components/MiniCalendar.vue
+++ b/src/components/MiniCalendar.vue
@@ -42,7 +42,7 @@ function selectYear(year) {
 <template>
  <section class="rounded-[24px] border border-stone-200 bg-white/82 p-5 shadow-[0_12px_36px_rgba(28,25,23,0.05)]">
    <div class="relative mb-4 flex items-start justify-between gap-4">
-      <div>
+      <div class="min-w-0">
        <h2 class="text-[11px] font-bold tracking-[0.22em] text-ink">CALENDAR</h2>
        <div class="mt-2 flex items-center gap-3">
          <button
@@ -52,7 +52,7 @@ function selectYear(year) {
          >
            ←
          </button>
-          <div class="flex items-center gap-2">
+          <div class="flex min-w-0 items-center gap-2">
            <p class="text-base font-semibold tracking-[-0.04em] text-stone-900">{{ monthLabel }}</p>
            <button
              type="button"
@@ -73,7 +73,7 @@ function selectYear(year) {
      </div>
      <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"
+        class="shrink-0 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="emit('go-today')"
      >
        TODAY
@@ -118,7 +118,7 @@ function selectYear(year) {
    </div>
    <div class="mb-3 grid grid-cols-7 gap-2 text-center text-[10px] font-bold tracking-[0.12em] text-stone-400">
      <span
-        v-for="weekday in ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']"
+        v-for="weekday in ['일', '월', '화', '수', '목', '금', '토']"
        :key="weekday"
      >
        {{ weekday }}
--- a/src/style.css
+++ b/src/style.css
@@ -88,15 +88,15 @@

  .print-paper--double {
    display: grid !important;
-    grid-template-columns: repeat(2, 141mm);
+    grid-template-columns: repeat(2, 139mm);
    justify-content: center;
    align-content: center;
-    column-gap: 3mm;
+    column-gap: 4mm;
  }

  body[data-print-layout='double'] .print-paper {
-    width: 287mm;
-    height: 198mm;
+    width: 285mm;
+    height: 196mm;
  }

  body[data-print-layout='single'] .print-paper--single .print-sheet-frame {
@@ -113,8 +113,8 @@
  }

  body[data-print-layout='double'] .print-paper--double .print-sheet-frame {
-    width: 141mm;
-    height: 198mm;
+    width: 139mm;
+    height: 196mm;
  }

  .planner-sheet {
@@ -134,7 +134,7 @@
    width: 762px !important;
    max-width: none !important;
    transform-origin: top left;
-    transform: scale(0.694);
+    transform: scale(0.684);
    box-shadow: none !important;
    background: #ffffff !important;
  }