feat(member): 회원 설정/헤더 상태 UI와 관리자 멤버 관리 추가

로그인 상태를 헤더에서 즉시 인지하고 계정 관리를 이어갈 수 있도록 사용자 설정과 관리자 멤버 관측 기능을 연결했다.

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

docs/history.md

@@ -1,5 +1,19 @@
 # 의사결정 이력
 
+## 2026-05-11 v0.0.71
+
+### 회원 UX를 헤더 중심으로 전환
+
+기존 헤더는 로그인 여부와 무관하게 Anonymous 메뉴를 고정으로 보여 실제 로그인 상태가 사용자에게 전달되지 않았다. 구독 버튼 대신 우측 아바타만 남기고, 로그인 상태에서는 설정/로그아웃 메뉴를 제공해 계정 액션을 한 위치로 정리했다. 비로그인 상태에서는 기존 Sign up/Sign in을 유지한다.
+
+### 회원 설정/활동 추적과 관리자 멤버 관측
+
+회원 기능이 들어오면서 운영 관점에서 사용자 정보와 활동 추적이 필요해졌다. `users`에 `avatar_url`, `last_seen_at`, `last_seen_ip`를 추가하고 로그인/세션조회/댓글작성 시 최근 활동을 갱신한다. 관리자는 `/admin/members`에서 닉네임, 이메일, 최근 접속, IP, 댓글 수를 확인해 운영 판단을 할 수 있다.
+
+### 닉네임 유니크 정책
+
+사용자 설정에서 닉네임 변경 시 중복 체크가 필요하므로 DB 레벨에서 `lower(username)` 유니크 인덱스를 도입했다. 기존 중복 데이터로 마이그레이션이 막히지 않도록, 인덱스 생성 전 중복 닉네임은 `-2`, `-3` 접미사를 붙여 자동 정리한 뒤 인덱스를 생성한다.
+
 ## 2026-05-11 v0.0.65
 
 ### 통합 검색 모달과 `GET /api/search`

docs/map.md

@@ -28,13 +28,14 @@
 | 파일 | 화면 위치 |
 |------|-----------|
 | components/auth/AuthPasswordVisibilityToggle.vue | 로그인·회원가입 비밀번호 표시/숨김 토글(SVG, scoped 스타일·`field-name`으로 접근성 레이블 구분) |
-| components/site/SiteHeader.vue | 모든 공개 페이지 상단, 우측 사용자 아바타 드롭다운(Anonymous/Sign up/Sign in), `lg`~`xl` 헤더 여백·반응형 검색창 폭, `/`·검색 영역으로 `SiteSearchModal` 연동 |
+| components/site/SiteHeader.vue | 모든 공개 페이지 상단, 우측 사용자 아바타 드롭다운(로그인: 설정/로그아웃, 비로그인: Sign up/Sign in), `lg`~`xl` 헤더 여백·반응형 검색창 폭, `/`·검색 영역으로 `SiteSearchModal` 연동 |
 | components/site/SiteSearchModal.vue | `Teleport`·전체 화면 딤·Tags/Posts 결과·일치 구간 강조, 열림 시 `html.site-search-open` 스크롤 잠금 |
 | components/site/LeftSidebar.vue | 왼쪽 사이드바, `lg+`는 `sticky`+고정 높이+내부 무스크롤바 스크롤, `lg` 미만은 고정 슬라이드 패널, 하단 푸터 `px-4`/`sm:px-5` |
 | components/site/RightSidebar.vue | 오른쪽 사이드바, `lg+`는 고정 열 높이·스티키, 모바일은 본문 아래 전체 너비, 하단 푸터 `pr-3` |
 | components/site/MainColumn.vue | 메인 화면 중앙, `lg:max-w-[720px]`로 본문 상한 |
 | components/site/PostCard.vue | 목록의 게시물 카드, 대표 이미지 썸네일, 카드 hover 인터랙션 |
 | components/site/TagHeader.vue | 태그 페이지 헤더 |
+| components/comments/PostComments.vue | 게시물 상세 `#comments` 영역, 회원 댓글/답글(1단) 작성 및 목록 표시 |
 
 ## 관리자 컴포넌트
 
@@ -86,6 +87,7 @@
 | pages/admin/tags/new.vue | 태그 생성 |
 | pages/admin/tags/[id].vue | 태그 수정 |
 | pages/admin/settings/index.vue | 사이트 설정 |
+| pages/admin/members/index.vue | 관리자 멤버 목록(닉네임, 이메일, 최근 접속, IP, 댓글 수, 활동 상태) |
 
 ## 공개 페이지
 
@@ -94,13 +96,14 @@
 | pages/index.vue | 홈, 중앙 Hero/Featured/Latest 섹션의 내부 컨테이너 보더 정렬과 리스트형 latest 카드, Featured는 모바일 터치 가로 스크롤·스냅과 끝에서 화살표 비활성 |
 | pages/posts/index.vue | 게시물 전체 목록 |
 | pages/posts/[slug].vue | `/post/:slug` 리다이렉트 |
-| pages/post/[slug].vue | 블로그 글 상세, 게시물 SEO/OG 메타 출력, 공유 모달(X/Bluesky/Facebook/LinkedIn/Email/링크복사) |
+| 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단계, 2단계 입력에 `auth-form-input`, 패널 `auth-signup__panel`(보더·배경) |
-| pages/signin.vue | 로그인(다크 폼, `[color-scheme:dark]`, 입력 `auth-form-input`), 비밀번호 SVG 토글 |
+| pages/signin.vue | 로그인(다크 폼, `[color-scheme:dark]`, 입력 `auth-form-input`), 비밀번호 SVG 토글, 회원 로그인 API 연동 |
+| pages/settings/index.vue | 회원 설정(썸네일 URL, 닉네임 변경/중복확인, 비밀번호 변경, 회원 탈퇴) |
 
 ## 서버 API
 
@@ -114,6 +117,17 @@
 | server/api/search.get.js | 통합 검색 API(`q` 쿼리) |
 | server/api/site-settings.get.js | 공개 사이트 설정 API |
 | server/api/navigation.get.js | 공개 네비게이션 API |
+| server/api/auth/signup.post.js | 회원 가입 API |
+| server/api/auth/login.post.js | 회원 로그인 API |
+| server/api/auth/me.get.js | 회원 세션 조회 API |
+| server/api/auth/logout.post.js | 회원 로그아웃 API |
+| server/api/auth/profile.get.js | 회원 프로필 조회 API |
+| server/api/auth/profile.put.js | 회원 프로필 수정 API |
+| server/api/auth/check-username.get.js | 닉네임 중복 확인 API |
+| server/api/auth/password.put.js | 회원 비밀번호 변경 API |
+| server/api/auth/account.delete.js | 회원 탈퇴 API |
+| server/api/posts/[slug]/comments.get.js | 게시물 댓글 목록 조회 API |
+| server/api/posts/[slug]/comments.post.js | 게시물 댓글 작성 API |
 | server/routes/admin/api/auth/login.post.js | 관리자 로그인 API |
 | server/routes/admin/api/auth/logout.post.js | 관리자 로그아웃 API |
 | server/routes/admin/api/auth/me.get.js | 관리자 세션 조회 API |
@@ -142,9 +156,11 @@
 | server/routes/admin/api/settings.put.js | 관리자 사이트 설정 수정 API |
 | server/routes/admin/api/navigation.get.js | 관리자 네비게이션 목록 API |
 | server/routes/admin/api/navigation.put.js | 관리자 네비게이션 일괄 저장 API |
+| server/routes/admin/api/members.get.js | 관리자 멤버 목록 API |
 | server/utils/content-schema.js | Zod 콘텐츠 스키마 |
 | server/utils/sample-content.js | 샘플 콘텐츠 저장소 |
 | server/utils/admin-auth.js | 관리자 세션 쿠키 인증 유틸리티 |
+| server/utils/member-auth.js | 회원 세션 쿠키 인증 유틸리티 |
 | server/utils/admin-post-input.js | 관리자 게시물 입력값 검증 스키마 |
 | server/utils/admin-page-input.js | 관리자 고정 페이지 입력값 검증 스키마 |
 | server/utils/admin-site-settings-input.js | 관리자 사이트 설정 입력값 검증 스키마 |
@@ -155,6 +171,8 @@
 | server/utils/media-library.js | 업로드 미디어 파일과 폴더 메타데이터 관리 유틸리티 |
 | server/repositories/postgres-client.js | PostgreSQL 클라이언트 |
 | server/repositories/content-repository.js | 콘텐츠 조회 저장소 |
+| server/repositories/member-repository.js | 회원 조회/생성 저장소 |
+| server/repositories/comment-repository.js | 댓글 조회/생성 저장소 |
 
 ## 데이터베이스
 
@@ -169,6 +187,8 @@
 | db/migrations/007_add_media_folders.sql | 미디어 폴더 테이블 추가 |
 | db/migrations/008_add_post_seo_fields.sql | 게시물 SEO 필드 추가 |
 | db/migrations/009_add_post_og_image.sql | 게시물 OG 이미지 필드 추가 |
+| db/migrations/010_add_members_and_comments.sql | 회원/댓글 테이블 추가 |
+| db/migrations/011_add_member_profile_and_activity.sql | 회원 아바타/최근 활동 컬럼 추가 및 닉네임 유니크 인덱스 추가 |
 
 ## 설정/배포
 

docs/spec.md

@@ -37,7 +37,7 @@
 - `lg` 미만에서는 왼쪽 사이드바를 화면 좌측 고정 슬라이드 패널로 표시하고, 열린 동안 백드롭을 탭하면 `closeMenu`로 닫는다.
 - `Escape` 키는 통합 검색 모달이 열려 있으면 최우선으로 닫고, 그다음 사용자 드롭다운, 이어서 모바일에서만 좌측 슬라이드 메뉴를 닫는다.
 - `/` 키는 `INPUT`·`TEXTAREA`·`SELECT`·`contenteditable`에 포커스가 없고 `Ctrl`/`Meta`/`Alt`와 함께 눌리지 않을 때 통합 검색 모달을 연다. 헤더 검색 영역(`md+`) 클릭으로도 동일하게 연다.
-- 헤더 우측 사용자 아이콘 버튼은 비로그인 기준 사용자 메뉴(Anonymous, Sign up, Sign in)만 표시한다.
+- 헤더 우측 사용자 아이콘 버튼은 로그인 상태면 회원 아바타/닉네임과 설정·로그아웃 메뉴를, 비로그인 상태면 Anonymous·Sign up·Sign in 메뉴를 표시한다.
 
 ### 공개 화면 색상
 
@@ -58,6 +58,7 @@
 
 - 게시물 화면은 레이아웃 그리드의 좌우 패딩을 기본으로 사용하고, 섹션 단위 `px-*`는 내부 래퍼로만 두어 패딩이 2중 적용되지 않게 한다.
 - 댓글 시작 섹션의 구분선(`border-y`)은 패딩 없이 전체 폭으로 표시하고, 내용만 내부 래퍼에 패딩을 둔다.
+- 댓글은 로그인 회원만 작성 가능하며, 대댓글은 1단까지만 허용한다.
 - 공개 게시물 본문은 콘텐츠 타입별 컴포넌트로 분리해 추후 스타일 변경이 쉽도록 구성
 - 제목 우측 공유 버튼을 누르면 게시물 공유 모달을 연다.
 - 공유 모달은 게시물 썸네일/제목/요약 미리보기, X/Bluesky/Facebook/LinkedIn/Email 링크, 링크 복사 액션을 제공한다.
@@ -83,6 +84,7 @@
 - `/tag/:slug` - 태그별 게시물 목록
 - `/signup` - 회원가입(3단계: 환영/입력/이메일 확인)
 - `/signin` - 로그인
+- `/settings` - 회원 설정(썸네일, 닉네임, 비밀번호, 회원 탈퇴)
 - 기존 `/posts/:slug`, `/tags/:slug` 상세 경로는 새 단수형 상세 경로로 리다이렉트한다.
 
 ### 공개 인증 화면(초기)
@@ -201,6 +203,33 @@ components/content/
 | created_at | DateTime | 생성일 |
 | updated_at | DateTime | 수정일 |
 
+### Users
+
+| 필드 | 타입 | 설명 |
+|------|------|------|
+| id | UUID | Primary Key |
+| username | String | 사용자명 |
+| email | String | 로그인 이메일(유니크) |
+| password_hash | String | bcrypt 해시 비밀번호 |
+| avatar_url | String | 프로필 썸네일 URL |
+| last_seen_at | DateTime nullable | 마지막 접속 시각 |
+| last_seen_ip | String | 마지막 접속 IP |
+| created_at | DateTime | 생성일 |
+| updated_at | DateTime | 수정일 |
+
+### Comments
+
+| 필드 | 타입 | 설명 |
+|------|------|------|
+| id | UUID | Primary Key |
+| post_id | UUID | FK → Posts |
+| user_id | UUID | FK → Users |
+| parent_id | UUID nullable | FK → Comments, 대댓글 1단 |
+| body | Text | 댓글 본문 |
+| status | Enum | published/pending/blocked |
+| created_at | DateTime | 생성일 |
+| updated_at | DateTime | 수정일 |
+
 ### Pages (고정 페이지)
 
 | 필드 | 타입 | 설명 |
@@ -296,12 +325,23 @@ components/content/
 
 - `GET /api/posts` - 게시물 목록
 - `GET /api/posts/:slug` - 게시물 상세
+- `GET /api/posts/:slug/comments` - 게시물 댓글 목록
+- `POST /api/posts/:slug/comments` - 게시물 댓글 작성(회원 세션 필요, 대댓글 1단)
 - `GET /api/pages` - 고정 페이지 목록
 - `GET /api/pages/:slug` - 고정 페이지 상세
 - `GET /api/tags` - 태그 목록
 - `GET /api/search?q=` - 통합 검색(태그 `name`·`slug`, 게시물 `title`·`excerpt`·`content` 부분 일치, 각 최대 12건, 발행 게시물만)
 - `GET /api/site-settings` - 공개 사이트 설정
 - `GET /api/navigation` - 공개 네비게이션
+- `POST /api/auth/signup` - 회원 가입
+- `POST /api/auth/login` - 회원 로그인
+- `GET /api/auth/me` - 현재 회원 세션 조회
+- `POST /api/auth/logout` - 회원 로그아웃
+- `GET /api/auth/profile` - 회원 설정 조회
+- `PUT /api/auth/profile` - 회원 프로필 수정(닉네임, 썸네일)
+- `GET /api/auth/check-username?username=` - 닉네임 중복 확인
+- `PUT /api/auth/password` - 회원 비밀번호 변경
+- `DELETE /api/auth/account` - 회원 탈퇴
 
 ### 관리자 API (`/admin/api/`)
 
@@ -333,6 +373,7 @@ components/content/
 - `PUT /admin/api/settings` - 사이트 설정 수정
 - `GET /admin/api/navigation` - 네비게이션 항목 목록
 - `PUT /admin/api/navigation` - 네비게이션 항목 일괄 저장
+- `GET /admin/api/members` - 회원 목록(최근 접속, 접속 IP, 댓글 수 포함)
 
 > 글 발행/초안/비공개 전환은 현재 `PUT /admin/api/posts/:id`의 `status` 값으로 처리한다.
 > 태그 삭제 시 `post_tags` 연결도 데이터베이스 외래 키 규칙에 따라 함께 삭제된다.
@@ -443,6 +484,13 @@ components/content/
 - 관리자 페이지 접근은 `/admin/api/auth/me` 확인 후 허용
 - 세션 토큰은 `ADMIN_PASSWORD` 기반 HMAC 서명으로 검증
 
+### 회원 인증
+
+- 회원 인증은 `users` 테이블의 이메일/비밀번호(bcrypt 해시) 기반으로 처리한다.
+- 로그인 성공 시 httpOnly 세션 쿠키(`sori_member_session`)를 `/` 경로에 설정한다.
+- 회원 API(`POST /api/auth/signup`, `POST /api/auth/login`, `GET /api/auth/me`, `POST /api/auth/logout`)로 세션을 관리한다.
+- 회원 세션 서명은 `MEMBER_SESSION_SECRET`을 우선 사용하고, 값이 없으면 개발 편의를 위해 `ADMIN_PASSWORD`를 fallback으로 사용한다.
+
 ---
 
 ## 미디어 관리
@@ -488,6 +536,7 @@ DB_PORT=43119
 # Auth
 ADMIN_EMAIL=admin@example.com
 ADMIN_PASSWORD=replace-with-random-password
+MEMBER_SESSION_SECRET=replace-with-random-password
 
 # Upload
 UPLOAD_DIR=/uploads

docs/update.md

@@ -1,5 +1,19 @@
 # 업데이트 이력
 
+## v0.0.71
+
+- 헤더 사용자 영역에서 구독 버튼을 제거하고, 로그인 상태 기반 아바타/드롭다운(설정, 로그아웃 / 비로그인 시 Sign up, Sign in)으로 정리.
+- 회원 설정 페이지(`/settings`)를 추가하고 닉네임 변경(중복 확인), 썸네일 URL 변경, 비밀번호 변경, 회원 탈퇴 기능을 연결.
+- 관리자 멤버 화면(`/admin/members`)과 회원 목록 API를 추가해 닉네임, 이메일, 최근 접속 시각/IP, 댓글 개수, 활동 현황을 확인할 수 있게 구성.
+- 회원 활동 컬럼(`last_seen_at`, `last_seen_ip`)과 아바타 컬럼(`avatar_url`)을 DB에 추가하고, 로그인/세션 조회/댓글 작성 시 최근 활동을 갱신.
+
+## v0.0.70
+
+- 회원 인증 API(`POST /api/auth/signup`, `POST /api/auth/login`, `GET /api/auth/me`, `POST /api/auth/logout`)와 회원 세션 쿠키(`sori_member_session`)를 추가.
+- 댓글 DB 스키마(`users`, `comments`)와 게시물 댓글 API(`GET/POST /api/posts/:slug/comments`)를 추가하고, 대댓글은 1단까지만 허용하도록 검증을 적용.
+- 게시물 상세 `#comments` 영역에 `PostComments` UI를 연결해 로그인 회원 댓글/답글 작성과 댓글 목록 표시를 구현.
+- `signin`/`signup` 화면을 시뮬레이션에서 실제 API 연동으로 전환.
+
 ## v0.0.66
 
 - 태그 검색은 `description`을 제외하고 `name`·`slug`만 부분 일치하도록 조정해, `p` 같은 한 글자 입력으로 의미 없는 태그가 뜨는 혼선을 줄임.