v0.1.36 - 사이드 소개 영역 서비스 톤으로 정리

HANDOFF.md

@@ -4,7 +4,7 @@
 
 - 프로젝트명: 10 Minute Planner 웹 UI
 - 기술 스택: Vue 3 + Vite + TailwindCSS + JavaScript
-- 현재 기준 버전: `v0.1.35` 준비 중
+- 현재 기준 버전: `v0.1.36` 준비 중
 - Git 원격 저장소: `https://git.sori.studio/zenn/planner.sori.studio.git`
 
 ## 기준 디자인
@@ -186,6 +186,8 @@
 - 사용자 노출 메뉴 문구는 `보기 방식 / 날짜 이동 / 인쇄 / 1페이지 + 정보 / 2페이지 펼침 / 이전 날 / 다음 날 / 1장 인쇄 / 2장 인쇄`처럼 한글 중심으로 정리하기 시작했다.
 - 2페이지 펼침 보기 배율 계산에서 데스크톱 여유 폭을 더 보수적으로 잡아, `1920px` 근처에서 우측 페이지가 잘려 가로 스크롤이 생기던 문제를 줄이는 방향으로 조정했다.
 - 달력 날짜 버튼은 셀 안쪽에 고정 크기 원형 버튼으로 다시 배치해서 모바일에서 서로 겹쳐 보이는 현상을 줄였다.
+- 좌측 상단 소개 영역은 개발 설명 문장을 빼고, 서비스 소개용 짧은 카피와 배지 스타일로 다시 구성했다.
+- 달력 날짜 버튼은 의도상 원형이며, 현재는 `size` 고정 기준으로 다시 맞춰서 타원처럼 보이는 인상을 줄이는 방향으로 정리했다.
 - 비로그인 랜딩 카드는 상단 고정이 아니라 화면 중앙에 오도록 정렬을 수정했다.
 - 현재 환경에서는 Docker 데몬이 꺼져 있어서 `docker compose build` 실검증은 하지 못했고, 데몬 시작 후 다시 확인이 필요하다.
 - 이미지 저장 기능은 추후 `print-only` 또는 별도 export 전용 레이아웃을 기준으로 구현하면 화면/인쇄/공유 결과를 맞추기 쉽다.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ten-minute-planner",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ten-minute-planner",
-      "version": "0.1.35",
+      "version": "0.1.36",
       "dependencies": {
         "vue": "^3.5.13"
       },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ten-minute-planner",
   "private": true,
-  "version": "0.1.35",
+  "version": "0.1.36",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -1441,14 +1441,23 @@ onBeforeUnmount(() => {
         class="scrollbar-hide print-hidden rounded-[28px] border border-white/60 bg-white/70 p-5 backdrop-blur sm:p-6 xl:h-full xl:overflow-y-auto"
       >
         <div class="space-y-6">
-          <div class="space-y-2">
-            <p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">10 Minute Planner</p>
-            <h1 class="text-2xl font-semibold tracking-[-0.04em] text-stone-900">
-              다이어리처럼 보이되,<br>앱답게 빠르게 이동하는 플래너
-            </h1>
-            <p class="text-sm font-medium leading-6 text-stone-600">
-              A5 본문을 최대한 넓게 쓰기 위해 상단 헤더 대신 왼쪽 사이드 내비게이션 구조로 정리했습니다.
-            </p>
+          <div class="overflow-hidden rounded-[28px] border border-stone-200 bg-[linear-gradient(145deg,rgba(255,255,255,0.96),rgba(246,238,228,0.92))] p-5 shadow-[0_18px_40px_rgba(28,25,23,0.06)]">
+            <div class="flex items-center justify-between gap-3">
+              <p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">10 Minute Planner</p>
+              <span class="rounded-full border border-stone-200 bg-white/80 px-3 py-1 text-[10px] font-bold tracking-[0.18em] text-stone-500">
+                DAILY FLOW
+              </span>
+            </div>
+            <div class="mt-6 space-y-3">
+              <h1 class="text-[28px] font-semibold leading-[1.1] tracking-[-0.06em] text-stone-900">
+                오늘의 흐름을
+                <br>
+                가볍게 기록하세요
+              </h1>
+              <p class="max-w-[18rem] text-[13px] font-semibold leading-6 tracking-[0.02em] text-stone-600">
+                짧게 적고, 바로 체크하고, 날짜를 넘기며 하루의 리듬을 이어가는 플래너입니다.
+              </p>
+            </div>
           </div>
 
           <section class="rounded-[24px] border border-stone-200 bg-white/80 p-4">
@@ -1614,14 +1623,23 @@ onBeforeUnmount(() => {
               </button>
             </div>
 
-            <div class="space-y-2">
-              <p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">10 Minute Planner</p>
-              <h1 class="text-2xl font-semibold tracking-[-0.04em] text-stone-900">
-                다이어리처럼 보이되,<br>앱답게 빠르게 이동하는 플래너
-              </h1>
-              <p class="text-sm font-medium leading-6 text-stone-600">
-                A5 본문을 최대한 넓게 쓰기 위해 상단 헤더 대신 왼쪽 사이드 내비게이션 구조로 정리했습니다.
-              </p>
+            <div class="overflow-hidden rounded-[28px] border border-stone-200 bg-[linear-gradient(145deg,rgba(255,255,255,0.96),rgba(246,238,228,0.92))] p-5 shadow-[0_18px_40px_rgba(28,25,23,0.06)]">
+              <div class="flex items-center justify-between gap-3">
+                <p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">10 Minute Planner</p>
+                <span class="rounded-full border border-stone-200 bg-white/80 px-3 py-1 text-[10px] font-bold tracking-[0.18em] text-stone-500">
+                  DAILY FLOW
+                </span>
+              </div>
+              <div class="mt-6 space-y-3">
+                <h1 class="text-[28px] font-semibold leading-[1.1] tracking-[-0.06em] text-stone-900">
+                  오늘의 흐름을
+                  <br>
+                  가볍게 기록하세요
+                </h1>
+                <p class="max-w-[18rem] text-[13px] font-semibold leading-6 tracking-[0.02em] text-stone-600">
+                  짧게 적고, 바로 체크하고, 날짜를 넘기며 하루의 리듬을 이어가는 플래너입니다.
+                </p>
+              </div>
             </div>
 
             <section class="rounded-[24px] border border-stone-200 bg-white/80 p-4">