feat: 프로필 이미지 업로드 및 UI 개선

[bbbang105]

Summary

• Supabase Storage를 활용한 프로필 이미지 파일 업로드 기능 추가
• 헤더 우측 사용자 드롭다운 메뉴 구현 (프로필 수정, 로그아웃)
• 사이드바/헤더 레이아웃 개선 및 프로필 관련 UI 통일

Changes

1. Supabase Auth 연동 및 코드 정리

• Discord OAuth 콜백 라우트 추가
• /api/auth/me에 Supabase userId 반환 추가
• 온보딩 API 검증 로직 강화
• 파트 설정 모듈 분리 (part-config.ts) — 파트별 색상 칩 지원
• 미사용 봇 커맨드(/참가) 정리

2. Supabase Storage 프로필 이미지 업로드

• 새 파일: lib/storage.ts — uploadAvatar() 유틸리티 (2MB 제한, JPG/PNG/WebP)
• 새 컴포넌트: avatar-upload.tsx — 드래그&드롭, 미리보기, 로딩 스피너, 에러 표시
• 온보딩 Step 3: URL 텍스트 입력 → <AvatarUpload> 파일 업로드로 교체
• 프로필 수정: URL 텍스트 입력 → <AvatarUpload> 파일 업로드로 교체
• 프로필 수정에 파트 변경 기능 추가
• 자기소개 통일: 최소 100자 / 최대 200자, textarea로 변경
• 관심사 통일: 온보딩과 동일한 한글 옵션, 최소 3개 / 최대 6개, 직접 입력 제거
• 프로필 수정 API에 part 필드 및 자기소개 100자 미만 검증 추가

3. 헤더/사이드바 UI 개선

• 헤더 우측 아바타 클릭 → 드롭다운 메뉴 (이름, 이메일, 프로필 수정, 로그아웃)
• 로고(BS Blog Study)를 사이드바 → 헤더로 이동, 클릭 시 대시보드 이동
• 모바일 사이드바에도 로고 표시
• 사이드바에서 프로필 메뉴 제거 (드롭다운으로 대체)
• 사이드바 폰트 크기 및 간격 확대 (text-sm → text-[15px], 아이콘 18px)
• 프로필 페이지 이메일 미인증 표시 제거 (Discord OAuth 자체가 인증)
• 한줄 소개 → 자기소개 명칭 통일 (프로필, 멤버 상세, API 전부)
• Tailwind content에 src/lib/** 추가 (파트 칩 색상 purge 방지)
• 기획자 파트 라벨 → Planner 영문화

사전 작업 (Supabase 대시보드)

이미지 업로드 기능 사용 전 필요:

1. Storage → avatars 버킷 생성 (Public)
2. SQL Editor에서 RLS 정책 실행:

CREATE POLICY "Authenticated users can upload avatars"
ON storage.objects FOR INSERT TO authenticated
WITH CHECK (bucket_id = 'avatars');

CREATE POLICY "Anyone can view avatars"
ON storage.objects FOR SELECT TO public
USING (bucket_id = 'avatars');

CREATE POLICY "Users can update own avatars"
ON storage.objects FOR UPDATE TO authenticated
USING (bucket_id = 'avatars');

CREATE POLICY "Users can delete own avatars"
ON storage.objects FOR DELETE TO authenticated
USING (bucket_id = 'avatars');

Test plan

• pnpm typecheck 통과
• pnpm build 통과
• 온보딩 Step 3 → 이미지 파일 업로드 → 미리보기 확인
• 프로필 수정 → 이미지 변경 → 저장 후 프로필 페이지 반영 확인
• 프로필 수정 → 파트 변경 → 저장 후 칩 색상 반영 확인
• 관심사 6개 초과 선택 불가, 3개 미만 시 저장 버튼 비활성화 확인
• 자기소개 100자 미만 시 저장 버튼 비활성화 확인
• 헤더 아바타 클릭 → 드롭다운 메뉴 → 프로필 수정 이동 확인
• 헤더 아바타 클릭 → 드롭다운 메뉴 → 로그아웃 동작 확인
• 헤더 로고 클릭 → 대시보드 이동 확인
• 모바일 사이드바 → 로고 표시 및 클릭 동작 확인
• 파트 칩 색상 정상 표시 (Tailwind purge 안 됨)

🤖 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 4:49pm