공개 화면 테마와 패널 구조 보정

docs/changelog.md

@@ -1,5 +1,11 @@
 # 업데이트 요약
 
+## v0.0.3
+
+- 공개 화면의 라이트/다크 색상 토큰을 추가.
+- 좌우 사이드바가 헤더 아래 전체 높이를 차지하도록 레이아웃 보정.
+- Thred 참고 화면에 가깝게 헤더, 히어로, 사이드바 임시 콘텐츠를 보강.
+
 ## v0.0.2
 
 - Nuxt 3 기반 프로젝트 실행 구조를 추가.

docs/history.md

@@ -1,5 +1,13 @@
 # 의사결정 이력
 
+## 2026-04-29 v0.0.3
+
+### 공개 화면 테마와 패널 구조 보정
+
+참고 화면 기준으로 공개 화면은 단순한 흰색 페이지가 아니라 헤더 아래 좌측 사이드바, 중앙 본문, 우측 사이드바가 각각 전체 화면 높이를 차지하는 패널 구조로 정했다. 사이드바 콘텐츠가 적어도 패널 자체는 `calc(100vh - 57px)` 높이를 유지한다.
+
+색상은 초반부터 라이트/다크 모드 기준을 잡기 위해 CSS 변수로 관리한다. 기본 배경, 패널, 라인, 텍스트, 보조 텍스트, 입력, 강조 버튼 색상을 분리해 이후 디자인 조정 시 Tailwind 클래스 전체를 갈아엎지 않도록 했다.
+
 ## 2026-04-29 v0.0.2
 
 ### Nuxt 통합 백엔드 구조 결정

docs/spec.md

@@ -18,9 +18,16 @@
 | 요소 | 크기/속성 |
 |------|-----------|
 | Header | 높이 57px |
-| Left Aside | 너비 287px, 패딩 12px 12px 12px 0 |
+| Left Aside | 너비 287px, 최소 높이 calc(100vh - 57px), 패딩 12px 12px 12px 0 |
 | Main | 너비 720px, 패딩 32px 24px (헤더), 16px 24px (섹션) |
-| Right Aside | 너비 287px, 패딩 20px 0 20px 20px |
+| Right Aside | 너비 287px, 최소 높이 calc(100vh - 57px), 패딩 20px 0 20px 20px |
+
+### 공개 화면 색상
+
+- 라이트/다크 모드는 CSS 변수로 관리
+- 기본 배경, 패널, 라인, 텍스트, 보조 텍스트, 입력, 강조 버튼 색상을 분리
+- 시스템 다크 모드는 `prefers-color-scheme: dark` 기준으로 우선 대응
+- Thred 참고 화면처럼 사이드바와 본문은 같은 화면 안에서 구분되는 패널과 라인으로 표현
 
 ### Post 페이지
 
@@ -228,6 +235,6 @@ APP_PORT=43118
 
 ## 버전 관리
 
-- 현재 버전: v0.0.2
+- 현재 버전: v0.0.3
 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정

docs/todo.md

@@ -26,7 +26,7 @@
 
 ## 프론트엔드 개발
 
-- [ ] 공개 화면 반응형 세부 스타일 조정
+- [ ] 공개 화면 모바일 사이드바/네비게이션 방식 결정
 - [ ] Thred 참고 화면 기준 시각 QA
 - [ ] 게시물 카드 실제 데이터 연동
 - [ ] 태그 페이지 실제 데이터 연동

docs/update.md

@@ -1,5 +1,16 @@
 # 업데이트 이력
 
+## v0.0.3
+
+- Thred 참고 화면 기준 공개 레이아웃 색상 토큰 정리.
+- 라이트/다크 모드 CSS 변수 기반 테마 추가.
+- 헤더 아래 3단 컬럼 최소 높이를 화면 전체 높이로 수정.
+- 좌우 사이드바를 본문과 별개로 전체 높이 패널처럼 표시하도록 수정.
+- 홈 화면 히어로, 추천 영역, 최신 글 영역 구조 보강.
+- 사이트 헤더 검색 영역과 구독/계정 액션 구조 추가.
+- 좌우 사이드바 임시 콘텐츠 구조 보강.
+- 로컬 개발/프리뷰 포트 43117 유지.
+
 ## v0.0.2
 
 - Nuxt 3 프로젝트 기본 실행 구조 추가.