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/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>