v0.1.35 - 사용자 노출 문구 한글화와 펼침 폭 보정

2026-04-22 17:38:57 +09:00
parent 4e1263348e
commit 2462d79053
6 changed files with 43 additions and 37 deletions
--- a/HANDOFF.md
+++ b/HANDOFF.md
@@ -4,7 +4,7 @@

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

 ## 기준 디자인
@@ -182,6 +182,10 @@
 - 모바일 구간에서는 TASKS / MEMO 행 높이와 좌우 패딩을 조금 줄여 입력 밀도를 낮췄고, 타임테이블은 필요할 때만 최소 가로 스크롤이 생기도록 바뀌었다.
 - 미니 달력은 모바일 구간에서 패딩, 월 이동 버튼, 요일 헤더, 날짜 셀 크기를 한 단계 더 줄여서 카드 내부 밀도를 정리했다.
 - 연도 선택 팝오버는 좁은 화면에서 카드 전체 폭을 활용하고, 넓은 화면에서는 기존 우측 드롭다운 폭을 유지한다.
+- 플래너 본문 안의 `TOTAL TIME` 라벨도 `총 시간`으로 바꿔서 영어 라벨을 줄였다.
+- 사용자 노출 메뉴 문구는 `보기 방식 / 날짜 이동 / 인쇄 / 1페이지 + 정보 / 2페이지 펼침 / 이전 날 / 다음 날 / 1장 인쇄 / 2장 인쇄`처럼 한글 중심으로 정리하기 시작했다.
+- 2페이지 펼침 보기 배율 계산에서 데스크톱 여유 폭을 더 보수적으로 잡아, `1920px` 근처에서 우측 페이지가 잘려 가로 스크롤이 생기던 문제를 줄이는 방향으로 조정했다.
+- 달력 날짜 버튼은 셀 안쪽에 고정 크기 원형 버튼으로 다시 배치해서 모바일에서 서로 겹쳐 보이는 현상을 줄였다.
 - 비로그인 랜딩 카드는 상단 고정이 아니라 화면 중앙에 오도록 정렬을 수정했다.
 - 현재 환경에서는 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.34",
+  "version": "0.1.35",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "ten-minute-planner",
-      "version": "0.1.34",
+      "version": "0.1.35",
      "dependencies": {
        "vue": "^3.5.13"
      },
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "ten-minute-planner",
  "private": true,
-  "version": "0.1.34",
+  "version": "0.1.35",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src/App.vue
+++ b/src/App.vue
@@ -718,7 +718,7 @@ const focusSidebarGridClass = computed(() =>
    : 'grid-cols-1',
 )
 const spreadScale = computed(() => {
-  const reservedWidth = windowWidth.value >= 1280 ? 410 : 96
+  const reservedWidth = windowWidth.value >= 1280 ? 532 : 120
  const availableWidth = Math.max(windowWidth.value - reservedWidth, 980)
  const baseWidth = 1548
  const nextScale = Math.min(1, availableWidth / baseWidth)
@@ -1531,7 +1531,7 @@ onBeforeUnmount(() => {
          </section>

          <section v-if="isAuthenticated && screenMode === 'planner'" class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
-            <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">VIEW</p>
+            <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">보기 방식</p>
            <div class="mt-4 grid gap-2">
              <button
                type="button"
@@ -1539,7 +1539,7 @@ onBeforeUnmount(() => {
                :class="viewMode === 'focus' ? 'bg-stone-900 text-white' : 'bg-stone-100 text-stone-500'"
                @click="setViewMode('focus')"
              >
-                1 PAGE + INFO
+                1페이지 + 정보
              </button>
              <button
                type="button"
@@ -1547,47 +1547,47 @@ onBeforeUnmount(() => {
                :class="viewMode === 'spread' ? 'bg-stone-900 text-white' : 'bg-stone-100 text-stone-500'"
                @click="setViewMode('spread')"
              >
-                2 PAGE SPREAD
+                2페이지 펼침
              </button>
            </div>
          </section>

          <section v-if="isAuthenticated && screenMode === 'planner'" class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
-            <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">DAY MOVE</p>
+            <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">날짜 이동</p>
            <div class="mt-4 grid gap-2">
              <button
                type="button"
                class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                @click="shiftDate(-1)"
              >
-                PREV DAY
+                이전 날
              </button>
              <button
                type="button"
                class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                @click="shiftDate(1)"
              >
-                NEXT DAY
+                다음 날
              </button>
            </div>
          </section>

          <section v-if="isAuthenticated && screenMode === 'planner'" class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
-            <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">PRINT</p>
+            <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">인쇄</p>
            <div class="mt-4 grid gap-2">
              <button
                type="button"
                class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                @click="printSelectedPlanner('single')"
              >
-                PRINT 1-UP
+                1장 인쇄
              </button>
              <button
                type="button"
                class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                @click="printSelectedPlanner('double')"
              >
-                PRINT 2-UP
+                2장 인쇄
              </button>
            </div>
          </section>
@@ -1680,7 +1680,7 @@ onBeforeUnmount(() => {
            </section>

            <section v-if="screenMode === 'planner'" class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
-              <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">VIEW</p>
+              <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">보기 방식</p>
              <div class="mt-4 grid gap-2">
                <button
                  type="button"
@@ -1688,7 +1688,7 @@ onBeforeUnmount(() => {
                  :class="viewMode === 'focus' ? 'bg-stone-900 text-white' : 'bg-stone-100 text-stone-500'"
                  @click="setViewMode('focus')"
                >
-                  1 PAGE + INFO
+                  1페이지 + 정보
                </button>
                <button
                  type="button"
@@ -1696,47 +1696,47 @@ onBeforeUnmount(() => {
                  :class="viewMode === 'spread' ? 'bg-stone-900 text-white' : 'bg-stone-100 text-stone-500'"
                  @click="setViewMode('spread')"
                >
-                  2 PAGE SPREAD
+                  2페이지 펼침
                </button>
              </div>
            </section>

            <section v-if="screenMode === 'planner'" class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
-              <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">DAY MOVE</p>
+              <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">날짜 이동</p>
              <div class="mt-4 grid gap-2">
                <button
                  type="button"
                  class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                  @click="shiftDate(-1)"
                >
-                  PREV DAY
+                  이전 날
                </button>
                <button
                  type="button"
                  class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                  @click="shiftDate(1)"
                >
-                  NEXT DAY
+                  다음 날
                </button>
              </div>
            </section>

            <section v-if="screenMode === 'planner'" class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
-              <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">PRINT</p>
+              <p class="text-[10px] font-bold tracking-[0.16em] text-stone-500">인쇄</p>
              <div class="mt-4 grid gap-2">
                <button
                  type="button"
                  class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                  @click="printSelectedPlanner('single')"
                >
-                  PRINT 1-UP
+                  1장 인쇄
                </button>
                <button
                  type="button"
                  class="rounded-2xl border border-stone-200 px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                  @click="printSelectedPlanner('double')"
                >
-                  PRINT 2-UP
+                  2장 인쇄
                </button>
              </div>
            </section>
--- a/src/components/MiniCalendar.vue
+++ b/src/components/MiniCalendar.vue
@@ -125,27 +125,29 @@ function selectYear(year) {
      </span>
    </div>
    <div class="grid grid-cols-7 gap-1.5 sm:gap-2">
-      <button
+      <div
        v-for="day in days"
        :key="day.key"
-        type="button"
-        class="aspect-square min-h-[34px] rounded-full border text-[10px] font-semibold transition sm:min-h-[40px] sm:text-[11px]"
-        :class="[
-          day.key === selectedKey
-            ? 'border-ink bg-ink text-white'
-            : 'border-stone-200 bg-stone-50 text-stone-700 hover:border-stone-400 hover:bg-white',
-          day.isCurrentMonth ? '' : 'opacity-35',
-        ]"
-        @click="emit('select', day.date)"
+        class="flex items-center justify-center"
      >
-        <span class="relative flex h-full w-full items-center justify-center">
+        <button
+          type="button"
+          class="relative flex size-8 items-center justify-center rounded-full border text-[10px] font-semibold transition sm:size-10 sm:text-[11px]"
+          :class="[
+            day.key === selectedKey
+              ? 'border-ink bg-ink text-white'
+              : 'border-stone-200 bg-stone-50 text-stone-700 hover:border-stone-400 hover:bg-white',
+            day.isCurrentMonth ? '' : 'opacity-35',
+          ]"
+          @click="emit('select', day.date)"
+        >
          <span>{{ day.label }}</span>
          <span
            v-if="markedKeys.includes(day.key)"
            class="absolute bottom-[3px] h-1 w-1 rounded-full bg-red-500 sm:h-[5px] sm:w-[5px]"
          />
-        </span>
-      </button>
+        </button>
+      </div>
    </div>
  </section>
 </template>
--- a/src/components/PlannerPage.vue
+++ b/src/components/PlannerPage.vue
@@ -147,7 +147,7 @@ onBeforeUnmount(() => {
          />
        </div>
        <div class="relative min-h-[82px] w-full border-t border-ink px-[10px] pt-[10px] lg:w-[210px]">
-          <span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">TOTAL TIME</span>
+          <span class="absolute -top-2 left-0 bg-paper px-[2px] text-muted">총 시간</span>
          <p class="pt-5 text-[11px] tracking-[0.2em] text-ink sm:pt-6 sm:text-sm">{{ totalTime }}</p>
        </div>
      </div>