feat: optimize About button layout and enhance static file caching strategy

context/match-ui.md

@@ -24,7 +24,8 @@
 ### 전투 화면 레이아웃 (HUD)
 - **팀 Badge**: 좌측 HUD 레일에 배치되며, 클릭 시 해당 팀의 생존 유닛 중 무작위 1명으로 시점을 고정합니다.
 - **킬로그**: 처치자와 피처치자를 좌우로 배치하고, 피처치자 아이콘에 빨간 X를 겹쳐 사망 관계를 명확히 표시합니다.
-- **모바일 레이아웃**: 실제 전투 시작 시 모바일에서는 옵션 drawer를 자동으로 접고, 상단 팀 HUD는 옵션 버튼 폭을 제외한 영역에 두 줄 4열로 맞춰 4개 이후 팀도 잘리지 않게 합니다. 모바일 팀 카드 선택 표시는 내부 테두리로 처리해 외곽선이 잘려 보이지 않게 합니다. 킬로그는 전투 캔버스 바로 아래에 배치하되 방문자 카운터 안전 여백을 남겨 하단 카운터와 충돌하지 않게 합니다.
+- **하단 메타 정보**: 전투 화면 우측 하단(`arena-meta` 컨테이너)에 방문자 카운터와 About 버튼이 Pill(알약) 형태로 디자인이 통일되어 나란히 고정 배치됩니다. 드로어가 열려도 동일한 위치를 유지합니다.
+- **모바일 레이아웃**: 실제 전투 시작 시 모바일에서는 옵션 drawer를 자동으로 접고, 상단 팀 HUD는 옵션 버튼 폭을 제외한 영역에 두 줄 4열로 맞춰 4개 이후 팀도 잘리지 않게 합니다. 모바일 팀 카드 선택 표시는 내부 테두리로 처리해 외곽선이 잘려 보이지 않게 합니다. 킬로그는 전투 캔버스 바로 아래에 배치하되 하단 메타 정보(방문자 카운터/About)와 겹치지 않게 안전 여백을 확보합니다.
 - **모바일 옵션 drawer**: 전투 중 펼친 옵션 drawer는 닉네임 입력 높이와 컨트롤 간격을 줄여 전투 시작/재시작/일시정지 버튼이 작은 화면에서도 한 번에 보이도록 합니다.
 - **승리 연출**: 승리 시 Web Audio 기반 팡파르와 CSS 애니메이션(광선, 컨페티)을 결합해 화려하게 연출합니다. 전투 종료 시 옵션 drawer를 접어 결과 배너가 설정 폼과 충돌하지 않게 하며, 결과 배너는 일정 시간 후 자동으로 사라지거나 클릭 시 즉시 닫힙니다. 무승부는 더 차분한 톤을 사용합니다.
 
@@ -35,7 +36,7 @@
 ## 4. About 다이얼로그
 
 - **`src/ui/aboutDialog.js`**:
-    - 메인 대기 화면과 전투 화면에서 공통으로 노출되는 `#about-button`을 제어합니다.
+    - 대기 화면과 전투 화면 우측 하단에 상시 노출되는 `#about-button`과 `#visitor-count`를 관리합니다.
-    - About 다이얼로그는 기본으로 개발자정보 탭을 보여주고, 개인정보처리방침 탭에서 DB에 저장된 Markdown 원문을 안전한 DOM 노드로 렌더링합니다.
+    - 다이얼로그는 개발자정보와 개인정보처리방침 탭으로 구성됩니다.
-    - 브라우저는 `GET /api/about` 읽기 전용 API로 서버 시작 시 캐시된 About 콘텐츠를 가져오며, API 실패 시 개발자 기본값과 빈 정책 안내 문구로 폴백합니다.
+    - **자체 Markdown 렌더러**: 개인정보처리방침 탭은 자체 구현된 렌더러를 통해 출력되며, 굵게(`**`), 기울임(`*`), 인라인 코드(`` ` ``), 인용구(`>`), 구분선(`---`), 헤딩(`#`) 및 리스트(`-`) 문법을 안전하게(HTML 이스케이프) 지원합니다.
-    - 전투 화면 모바일 레이아웃에서는 About 버튼과 방문자 카운터가 하단에서 겹치지 않도록 kill log 여백 계산에 포함합니다.
+    - 브라우저는 `GET /api/about` API로 서버에 캐시된 콘텐츠를 가져오며, 실패 시 폴백 값을 표시합니다.

context/server.md

@@ -37,6 +37,11 @@
 
 ## 2. 주요 로직 구현 세부 사항
 
+### 정적 파일 캐싱 전략
+운영 모드(`npm start`)에서 `@fastify/static`을 통해 `dist/` 폴더의 자산을 서빙할 때 효율적인 캐싱을 수행합니다.
+1. **`index.html`**: 항상 최신 상태를 유지해야 하므로 `no-cache, no-store, must-revalidate`를 설정해 브라우저가 매번 서버에 변경 사항을 확인하도록 합니다.
+2. **기타 자산(JS, CSS, 이미지 등)**: 빌드 시 고유 해시가 포함되거나 변경 빈도가 낮은 정적 파일은 `public, max-age=604800, immutable` (7일) 설정을 통해 브라우저 캐시를 적극적으로 활용합니다.
+
 ### 유니크 방문자 체크
 브라우저가 직접 MongoDB에 연결하지 않고, Fastify API가 MongoDB 커넥션 풀을 유지합니다.
 1. 프론트엔드가 앱 로드 시 `POST /api/visitors/check`를 호출합니다.

server/index.js

@@ -56,10 +56,19 @@ if (isProduction) {
     root: distPath,
     prefix: "/",
     cacheControl: true,
-    maxAge: 3600000 * 24 * 7, // 7일간 캐시 유지
+    maxAge: 3600000 * 24 * 7,
     immutable: true,
     lastModified: true,
     etag: true,
+    setHeaders: (res, path) => {
+      // index.html은 캐싱하지 않음 (업데이트 반영을 위해)
+      if (path.endsWith("index.html")) {
+        res.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+        return;
+      }
+      // 나머지 정적 자산(이미지, js, css 등)은 강력 캐싱
+      res.setHeader("Cache-Control", "public, max-age=604800, immutable");
+    },
   });
 
   app.setNotFoundHandler((request, reply) => {

todo.md

@@ -164,10 +164,12 @@
     - 대기 화면과 전투 화면에 공통 About 버튼을 추가하고 개발자정보/개인정보처리방침 탭 다이얼로그를 연결.
     - 수정 API는 만들지 않고, 브라우저 표시용 `GET /api/about` 읽기 전용 API만 추가.
 
-26. 전투 화면 'About' 버튼 위치 최적화 (완료)
+26. 전투 화면 'About' 버튼 위치 최적화 및 정적 자산 캐싱 강화 (완료)
 - **조치 사항**:
     - `index.html`에서 `about-button`과 `visitor-count`를 `arena-meta` 컨테이너로 통합하여 `arena-shell` 내부로 배치.
     - `styles.css`에서 `arena-meta`에 flex 레이아웃을 적용하여 전투 중 방문자 수 표시와 About 버튼이 나란히 배치되도록 수정.
-    - 전투 중 드로어(옵션 패널)가 열릴 때 `arena-meta` 전체가 드로어 왼쪽으로 자연스럽게 이동하도록 반응형 스타일 적용.
+    - `server/index.js`에서 프로덕션 환경(`--production`) 시 정적 자산에 대해 강력한 캐싱(7일 유지, immutable) 및 명시적 Cache-Control 헤더 주입 로직 추가.
-    - 모바일 환경에서도 두 요소가 겹치지 않고 하단 여백을 공유하며 적절히 배치되도록 미디어 쿼리 보정.
+    - `index.html`에 이모지 데이터 URI를 활용한 파비콘 설정을 추가하여 404 오류 해결.
+    - `src/ui/aboutDialog.js`의 Markdown 렌더러를 고도화하여 Bold, Italic, Code, Blockquote 등 핵심 문법 지원.
+