v0.0.53: 공유 모달·헤더 사용자 메뉴·회원가입·로그인 화면

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/history.md

@@ -1,5 +1,21 @@
 # 의사결정 이력
 
+## 2026-05-11 v0.0.53
+
+### 게시물 공유 모달 UI
+
+게시물 상세의 제목 오른쪽 공유 버튼은 단순 아이콘만 두지 않고, 모달에서 공유 미리보기 카드와 채널별 링크를 제공하도록 확장했다. 사용자가 외부 공유 전 게시물 정보(썸네일·제목·요약)를 한번 확인할 수 있고, 링크 복사까지 같은 컨텍스트에서 끝낼 수 있어 Thred 참고 UX와 운영 편의성을 함께 맞출 수 있기 때문이다.
+
+### 헤더 사용자 메뉴 단순화
+
+헤더 우측은 Account 텍스트 링크 대신 아바타 아이콘 버튼으로 전환하고, 비로그인 기준 드롭다운 메뉴에서 Sign up/Sign in만 제공한다. 다크 모드나 메뉴 열기 토글은 이미 헤더와 사이드바에 노출되어 기능이 중복되므로 사용자 메뉴에서는 제거해 정보 밀도를 낮췄다.
+
+### 회원가입/로그인 공개 화면 초안
+
+회원가입은 `/signup` 단일 화면에서 3단계(환영, 정보 입력, 이메일 확인) 플로우로 처리한다. 초기 단계에서는 실제 메일 인프라 연결 전이므로 3단계에서 인증 메일 재전송과 인증 완료 액션을 시뮬레이션하고, 인증 완료 후 로그인 화면으로 이동시키는 흐름을 먼저 고정한다. 로그인 화면(`/signin`)은 같은 다크 톤 레이아웃으로 맞춰 인증 화면군의 시각 일관성을 유지한다.
+
+회원가입 스텝 인디케이터는 단계별 콘텐츠 높이에 따라 위치가 바뀌지 않도록, 화면 높이를 기준으로 한 `min-h` 레이아웃의 하단 고정 영역에 둔다. 회원가입 1단계 환영 문구는 하드코딩 대신 사이트 설정 API의 `title`, `description` 값을 사용해 추후 블로그 이름/인사말 관리 화면과 자연스럽게 연결한다.
+
 ## 2026-05-08 v0.0.52
 
 ### 목록 Featured 아이콘 정렬과 상세 메타 구분자

docs/map.md

@@ -21,7 +21,7 @@
 
 | 파일 | 화면 위치 |
 |------|-----------|
-| components/site/SiteHeader.vue | 모든 공개 페이지 상단 |
+| components/site/SiteHeader.vue | 모든 공개 페이지 상단, 우측 사용자 아바타 드롭다운(Anonymous/Sign up/Sign in) |
 | components/site/LeftSidebar.vue | 왼쪽 사이드바, `sticky`+`h/max-h: calc(100vh-57px)`+내부 무스크롤바 스크롤, 하단 푸터 고정 |
 | components/site/RightSidebar.vue | 오른쪽 사이드바, 동일 패턴(고정 열 높이), 카피라이트 하단 고정 |
 | components/site/MainColumn.vue | 메인 화면 중앙 |
@@ -86,11 +86,13 @@
 | pages/index.vue | 홈, 중앙 Hero/Featured/Latest 섹션의 내부 컨테이너 보더 정렬과 리스트형 latest 카드 |
 | pages/posts/index.vue | 게시물 전체 목록 |
 | pages/posts/[slug].vue | `/post/:slug` 리다이렉트 |
-| pages/post/[slug].vue | 블로그 글 상세, 게시물 SEO/OG 메타 출력 |
+| pages/post/[slug].vue | 블로그 글 상세, 게시물 SEO/OG 메타 출력, 공유 모달(X/Bluesky/Facebook/LinkedIn/Email/링크복사) |
 | pages/tags/index.vue | 태그 전체 목록, 중앙 히어로와 3열 태그 카드, 좌측 컬러 보더/hover 오버레이 |
 | pages/tags/[slug].vue | `/tag/:slug` 리다이렉트 |
 | pages/tag/[slug].vue | 태그별 글 목록, 상단 태그 헤더 + 리스트형 게시물 카드 |
 | pages/pages/[slug].vue | 고정 페이지 상세 |
+| pages/signup.vue | 회원가입 3단계 화면(환영/입력/이메일 확인, 재전송) |
+| pages/signin.vue | 로그인 화면(다크 톤 폼) |
 
 ## 서버 API
 

docs/spec.md

@@ -30,6 +30,7 @@
 - 메뉴 상태는 Nuxt/Vue 상태로 관리
 - 브라우저에서는 `localStorage.MENU_STATE`에 `open` 또는 `closed` 저장
 - 닫힘 상태에서는 왼쪽 사이드바 폭을 0으로 줄이는 전환 애니메이션을 적용
+- 헤더 우측 사용자 아이콘 버튼은 비로그인 기준 사용자 메뉴(Anonymous, Sign up, Sign in)만 표시한다.
 
 ### 공개 화면 색상
 
@@ -44,6 +45,8 @@
 
 - Main 좌우 패딩: 24px → 20px
 - 공개 게시물 본문은 콘텐츠 타입별 컴포넌트로 분리해 추후 스타일 변경이 쉽도록 구성
+- 제목 우측 공유 버튼을 누르면 게시물 공유 모달을 연다.
+- 공유 모달은 게시물 썸네일/제목/요약 미리보기, X/Bluesky/Facebook/LinkedIn/Email 링크, 링크 복사 액션을 제공한다.
 
 ### 공개 목록·상세의 발행일 표시
 
@@ -64,8 +67,18 @@
 - `/post/:slug` - 개별 게시물 상세
 - `/tags` - 태그 전체 목록
 - `/tag/:slug` - 태그별 게시물 목록
+- `/signup` - 회원가입(3단계: 환영/입력/이메일 확인)
+- `/signin` - 로그인
 - 기존 `/posts/:slug`, `/tags/:slug` 상세 경로는 새 단수형 상세 경로로 리다이렉트한다.
 
+### 공개 인증 화면(초기)
+
+- 회원가입 화면은 AFFiNE 참고 다크 테마 3단계 플로우를 제공한다.
+- 3단계는 인증 메일 발송 안내와 재전송 버튼(쿨다운)을 제공한다.
+- 이메일 링크 확인 전에는 회원가입이 완료되지 않으며, 인증 완료 액션 이후 로그인 화면으로 이동한다.
+- 로그인 화면은 동일한 다크 톤 폼 레이아웃을 사용한다.
+- 회원가입 1단계의 타이틀/설명은 `GET /api/site-settings`의 `title`, `description` 값을 우선 사용한다.
+
 ### 레이아웃 파일
 
 ```
@@ -497,6 +510,6 @@ APP_PORT=43118
 
 ## 버전 관리
 
-- 현재 버전: v0.0.50
+- 현재 버전: v0.0.53
 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정

docs/update.md

@@ -1,5 +1,16 @@
 # 업데이트 이력
 
+## v0.0.53
+
+- 게시물 상세 제목 우측 공유 버튼에 공유 모달 추가(X/Bluesky/Facebook/LinkedIn/Email/링크복사).
+- 헤더 우측 Account 링크 제거, 사용자 아바타 버튼+드롭다운(Anonymous/Sign up/Sign in) 추가.
+- 회원가입 화면(`/signup`)을 AFFiNE 참고 3단계(환영/입력/이메일 확인) 플로우로 추가.
+- 회원가입 3단계에 인증 메일 재전송(쿨다운)과 인증 완료 후 로그인 이동 흐름 추가.
+- 로그인 화면(`/signin`)을 동일한 다크 톤 폼 스타일로 추가.
+- 회원가입 하단 스텝 인디케이터를 `min-h` 기반 하단 고정 배치로 보정.
+- 회원가입 1단계 문구를 사이트 설정(`site-settings.title`, `site-settings.description`) 연동으로 변경.
+- 회원가입 페이지 타이머(`setInterval`)를 `onMounted`에서만 실행하도록 수정해 SSR 오류를 해결.
+
 ## v0.0.52
 
 - 홈/태그 목록 Featured 아이콘이 제목 줄 높이를 흔들지 않도록 고정 크기(`h-4 w-4`)·정렬 방식으로 보정.