사이트 메타 정보와 파비콘 추가

2026-04-27 13:22:34 +09:00
parent 3dd3109c8b
commit e1c4a90249
6 changed files with 37 additions and 1 deletions
--- a/HANDOFF.md
+++ b/HANDOFF.md
@@ -38,6 +38,7 @@
 - 백엔드 Dockerfile: `backend/Dockerfile`
 - nginx 프록시 설정: `deploy/nginx/default.conf`
 - 실행 가이드 문서: `README.md`
+- 사이트 기본 메타 태그와 파비콘/링크 이미지: `index.html`, `public/favicon.png`, `public/og-image.png`
 - Tailwind 설정은 완료되어 있으며, 이 프로젝트의 스타일링 기준으로 유지한다.
 - 현재 선택 날짜는 시스템 날짜 기준으로 시작한다.
 - `COMMENT`, `TASKS`, `MEMO`는 화면에서 바로 편집할 수 있다.
@@ -181,6 +182,7 @@
 - `BEST DAY`는 선택 기간 안에서 집중 시간이 가장 긴 날짜를 고르고, `RECENT RECORDS`는 선택 기간 안의 기록을 날짜 내림차순으로 최대 5개 보여준다.
 - `CARRYOVER TASK` 선택 모달은 ESC로 닫힌다. 이월 배지의 시작일 안내는 오른쪽 패널 메시지 대신 배지 옆 팝업으로 표시한다.
 - 통계의 `BEST DAY`, `RECENT RECORDS` 기준 설명은 본문 문장 대신 물음표 가이드 팝업으로 제공한다.
+- 운영 링크 미리보기용 title/description/Open Graph/Twitter Card 메타 태그를 추가했다. 파비콘은 `public/favicon.png`, 링크 카드 이미지는 `public/og-image.png`를 사용한다.

 ## 갱신 규칙

--- a/TODO.md
+++ b/TODO.md
@@ -88,6 +88,7 @@
 - [ ] 공유를 위한 이미지 저장 기능을 추가한다.
 - [x] Docker 배포 구조를 정리한다.
 - [x] UGREEN NAS 기준 `docker-compose.yml` 초안을 작성한다.
+- [x] 운영 링크 미리보기용 사이트 제목/소개글 메타 태그와 파비콘을 추가한다.
 - [x] 백엔드 기본 스캐폴딩을 추가한다.
 - [x] PostgreSQL 전환 초안을 적용한다.
 - [x] 로그인 화면 문구와 관리자 정보 노출 지점을 일반 사용자 기준으로 정리한다.
--- a/index.html
+++ b/index.html
@@ -3,7 +3,33 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>10분 플래너</title>
+    <meta name="theme-color" content="#f5f2eb" />
+    <meta
+      name="description"
+      content="10분 단위로 하루를 기록하고 계획하는 차분한 종이 다이어리형 플래너입니다."
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="ko_KR" />
+    <meta property="og:site_name" content="10 Minute Planner" />
+    <meta property="og:title" content="10 Minute Planner" />
+    <meta
+      property="og:description"
+      content="10분 단위로 하루를 기록하고 계획하는 차분한 종이 다이어리형 플래너입니다."
+    />
+    <meta property="og:image" content="/og-image.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="1731" />
+    <meta property="og:image:height" content="909" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="10 Minute Planner" />
+    <meta
+      name="twitter:description"
+      content="10분 단위로 하루를 기록하고 계획하는 차분한 종이 다이어리형 플래너입니다."
+    />
+    <meta name="twitter:image" content="/og-image.png" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>10 Minute Planner</title>
  </head>
  <body class="bg-stone-100">
    <div id="app"></div>
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="10 Minute Planner">
+  <rect width="64" height="64" rx="14" fill="#f5f2eb"/>
+  <rect x="15" y="9" width="34" height="46" rx="3" fill="#fffaf1" stroke="#3f3a34" stroke-width="2"/>
+  <path d="M22 20h20M22 29h20M22 38h20" stroke="#8c7b6a" stroke-width="2" stroke-linecap="round"/>
+  <path d="M18 9v46" stroke="#c74b3f" stroke-width="3" stroke-linecap="round"/>
+  <text x="32" y="51" fill="#3f3a34" font-family="Arial, sans-serif" font-size="13" font-weight="700" text-anchor="middle">10</text>
+</svg>
--- a/public/og-image.png
+++ b/public/og-image.png