feat: 스터디원 목록, 프로필 개선 및 실명/닉네임 분리

[bbbang105]

Summary

스터디원 목록 페이지 신규 구현, 프로필 UX 개선, 소셜 링크 추가, 실명/닉네임 필드 분리 등 멤버 관련 전반적인 기능 개선

주요 변경사항

1. 스터디원 목록 페이지 (/members)

• 사이드바 '큐레이션' 아래에 '스터디원 목록' 메뉴 추가
• 카드형 그리드 레이아웃 (반응형: 1→2→3 컬럼)
• 파트별 필터링 버튼 (해당 파트에 멤버가 있는 경우만 표시)
• 소셜 링크 칩 (블로그/GitHub/LinkedIn/Instagram)
• 카드 클릭 시 멤버 상세 페이지로 이동

2. 프로필 UX 개선

• 헤더 드롭다운: '프로필 수정' → '프로필' (조회 페이지로 변경)
• 프로필 조회 페이지 하단에 '프로필 수정' 버튼 배치
• Discord username #0 접미사 자동 제거 (저장 시 + 표시 시)

3. 소셜 링크 필드 추가

• DB 스키마: github_url, linkedin_url, instagram_url 컬럼 추가
• 온보딩 Step 1에서 선택적 입력 가능
• 프로필 수정에서 편집 가능
• 멤버 카드, 상세 페이지, 프로필 페이지에서 칩으로 표시

4. 실명/닉네임 분리

• 기존 name 컬럼 → nickname으로 리네임
• 새 name 컬럼 추가 (실명, 필수값, 디폴트 없음)
• 온보딩: 닉네임 위에 '이름 (실명)' 입력 필드 추가
• 프로필 수정: '이름 & 닉네임' 카드로 둘 다 편집 가능
• 표시: 닉네임이 주 표시명, 상세 페이지에서 실명도 함께 표시

5. DiceBear 기본 아바타 & 랜덤 아바타 뽑기

• 프로필 이미지 없는 멤버에게 DiceBear fun-emoji 스타일 기본 아바타 적용
• getDefaultAvatar() 유틸 함수 (seed 기반 결정적 생성)
• 온보딩/프로필 수정에서 '랜덤 아바타 뽑기' 기능
  • 5개 DiceBear 스타일에서 8개 랜덤 생성
  • 클릭으로 선택, '다시 뽑기'로 재생성

변경 파일 (21개)

영역	파일	설명
Schema	packages/shared/src/db/schema.ts	nickname 컬럼 추가, name 길이 조정, 소셜 링크 컬럼
Bot	packages/bot/src/services/member.service.ts	nickname 필드 대응
API	packages/web/src/app/api/auth/me/route.ts	name/nickname 분리 반환
API	packages/web/src/app/api/profile/onboarding/route.ts	nickname 수신/저장, #0 제거
API	packages/web/src/app/api/profile/edit/route.ts	name/nickname/소셜 링크 수정 지원
API	packages/web/src/app/api/profile/route.ts	nickname/소셜 링크 반환
API	packages/web/src/app/api/members/route.ts	nickname/소셜 링크 반환
API	packages/web/src/app/api/members/[id]/route.ts	nickname/소셜 링크 반환
API	packages/web/src/app/api/ranking/route.ts	nickname 반환
API	packages/web/src/app/api/admin/members/route.ts	nickname 필드 대응
Page	packages/web/src/app/(user)/members/page.tsx	신규 스터디원 목록 페이지
Page	packages/web/src/app/(user)/members/[id]/page.tsx	소셜 링크, 실명 표시, 기본 아바타
Page	packages/web/src/app/(user)/profile/onboarding/page.tsx	실명 입력, 소셜 링크 입력
Page	packages/web/src/app/(user)/profile/edit/page.tsx	이름/닉네임 카드, 소셜 링크 편집
Page	packages/web/src/app/(user)/profile/page.tsx	닉네임 표시, 실명, 소셜 링크
Page	packages/web/src/app/(user)/ranking/page.tsx	닉네임 기반 표시, 기본 아바타
Component	packages/web/src/components/avatar-upload.tsx	랜덤 아바타 뽑기 기능
Layout	packages/web/src/components/layout/header.tsx	'프로필' 메뉴 변경
Layout	packages/web/src/components/layout/sidebar.tsx	'스터디원 목록' 메뉴 추가
Util	packages/web/src/lib/utils.ts	getDefaultAvatar() 함수
Docs	CLAUDE.md	DiceBear 리소스 문서화

DB 마이그레이션 (Supabase에서 직접 실행 완료)

-- 소셜 링크 추가
ALTER TABLE members ADD COLUMN github_url varchar(500);
ALTER TABLE members ADD COLUMN linkedin_url varchar(500);
ALTER TABLE members ADD COLUMN instagram_url varchar(500);

-- name → nickname 리네임, 새 name(실명) 추가
ALTER TABLE members RENAME COLUMN name TO nickname;
ALTER TABLE members ADD COLUMN name varchar(50) NOT NULL DEFAULT '';
UPDATE members SET name = nickname;
ALTER TABLE members ALTER COLUMN name DROP DEFAULT;

Test plan

• 온보딩 플로우: 실명 + 닉네임 입력 후 완료까지 정상 동작 확인
• 프로필 조회: 실명/닉네임/소셜 링크 정상 표시
• 프로필 수정: 이름, 닉네임, 소셜 링크 수정 후 저장
• 스터디원 목록: 카드 표시, 파트 필터링, 소셜 링크 클릭
• 멤버 상세: 실명/닉네임/소셜 링크 정상 표시
• 랭킹: 닉네임 기반 표시, 기본 아바타 정상
• 랜덤 아바타: 뽑기 → 선택 → 저장 정상 동작
• 기본 아바타: 프로필 이미지 없는 멤버에게 DiceBear 아바타 표시

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
study-admin-web	Ready	Preview, Comment	Feb 23, 2026 5:48pm