사이드바 메뉴 토글 추가

docs/changelog.md

@@ -1,5 +1,11 @@
 # 업데이트 요약
 
+## v0.0.4
+
+- 헤더 좌측 아이콘을 사이드바 메뉴 토글 버튼으로 수정.
+- 좌측 사이드바 열림 상태를 저장하고 복원하는 기능 추가.
+- Nuxt/Vue 방식으로 원본 테마의 Alpine식 메뉴 토글 동작을 구현.
+
 ## v0.0.3
 
 - 공개 화면의 라이트/다크 색상 토큰을 추가.

docs/history.md

@@ -1,5 +1,13 @@
 # 의사결정 이력
 
+## 2026-04-29 v0.0.4
+
+### 메뉴 토글 구현 방식 결정
+
+원본 Ghost 테마는 Alpine 스타일의 `@click`, `:class`, `:aria-expanded` 바인딩으로 좌측 메뉴 상태를 제어한다. 이 프로젝트는 Nuxt/Vue 기반이므로 Alpine을 추가하지 않고 Vue 상태와 composable로 같은 기능을 구현한다.
+
+메뉴 상태는 `useMenuState`에서 공유하고, 브라우저 `localStorage`의 `MENU_STATE`에 저장한다. 이렇게 하면 헤더 버튼, 공개 레이아웃, 게시물 레이아웃이 같은 상태를 사용하면서도 별도 프론트엔드 상태 라이브러리나 Alpine 의존성을 추가하지 않아도 된다.
+
 ## 2026-04-29 v0.0.3
 
 ### 공개 화면 테마와 패널 구조 보정

docs/map.md

@@ -82,6 +82,7 @@
 | nuxt.config.js | Nuxt 앱 설정 |
 | tailwind.config.js | Tailwind 테마 설정 |
 | assets/css/main.css | 전역 스타일 |
+| composables/useMenuState.js | 좌측 메뉴 열림 상태 관리 |
 | .env.example | 환경 변수 예시 |
 | Dockerfile | NAS 운영 이미지 빌드 |
 | docker-compose.yml | NAS 컨테이너 실행 초안 |

docs/spec.md

@@ -22,6 +22,13 @@
 | Main | 너비 720px, 패딩 32px 24px (헤더), 16px 24px (섹션) |
 | Right Aside | 너비 287px, 최소 높이 calc(100vh - 57px), 패딩 20px 0 20px 20px |
 
+### 메뉴 토글
+
+- 헤더 좌측 아이콘은 브랜드 마크가 아니라 왼쪽 사이드바 열기/닫기 버튼
+- 메뉴 상태는 Nuxt/Vue 상태로 관리
+- 브라우저에서는 `localStorage.MENU_STATE`에 `open` 또는 `closed` 저장
+- 닫힘 상태에서는 왼쪽 사이드바를 숨기고 중앙/오른쪽 컬럼만 표시
+
 ### 공개 화면 색상
 
 - 라이트/다크 모드는 CSS 변수로 관리
@@ -235,6 +242,6 @@ APP_PORT=43118
 
 ## 버전 관리
 
-- 현재 버전: v0.0.3
+- 현재 버전: v0.0.4
 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정

docs/todo.md

@@ -28,6 +28,7 @@
 
 - [ ] 공개 화면 모바일 사이드바/네비게이션 방식 결정
 - [ ] Thred 참고 화면 기준 시각 QA
+- [ ] 사이드바 토글 애니메이션 세부 조정
 - [ ] 게시물 카드 실제 데이터 연동
 - [ ] 태그 페이지 실제 데이터 연동
 - [ ] 고정 페이지 실제 데이터 연동

docs/update.md

@@ -1,5 +1,12 @@
 # 업데이트 이력
 
+## v0.0.4
+
+- 헤더 좌측 아이콘을 브랜드 마크에서 메뉴 토글 버튼으로 수정.
+- Vue/Nuxt 상태 기반 좌측 사이드바 열기/닫기 기능 추가.
+- 메뉴 열림 상태를 `localStorage`의 `MENU_STATE`에 저장하도록 추가.
+- 메뉴 닫힘 상태에서 공개 레이아웃 그리드가 좌측 사이드바 폭을 제거하도록 수정.
+
 ## v0.0.3
 
 - Thred 참고 화면 기준 공개 레이아웃 색상 토큰 정리.