[Feat] 마이페이지 구현 및 ConfirmModal 개선

[red-dev-Mark]

체크리스트

• 신규 개발
• 버그 수정
• 기능 개선
• 기타

참고 자료

없음

목적

소셜 로그인 후 유저 프로필 정보를 활용하여 마이페이지를 구현합니다.
아울러 ConfirmModal 컴포넌트를 피그마 스펙에 맞게 개선하고 아이콘 변형을 지원합니다.

과정

1. 유저 프로필 쿠키 저장

• auth/callback/route.ts: 소셜 로그인 응답의 userProfile 필드를 httpOnly 쿠키에 JSON으로 저장
• data/models/member.ts: UserProfile 타입 정의 (email, nickname, profileImage)

2. 마이페이지 구현

• mypage/page.tsx: 서버 컴포넌트에서 쿠키 파싱 후 프로필 전달
• MyPageClient.tsx: 유저 정보 표시, 알림 설정 토글, 버전/서비스 문의, 로그아웃/회원탈퇴
• Toggle.tsx: 50×30 커스텀 토글 컴포넌트 (orange-500)

3. 홈 화면 연결

• HomePageLayout.tsx: 프로필 아이콘 버튼 → /mypage 링크로 변경, 임시 로그아웃/탈퇴 버튼 제거

4. ConfirmModal 개선

• BaseModal.tsx: 최대 너비 310 → 320px
• ConfirmModal.tsx: 버튼 높이 52px, icon prop 추가(아이콘 상단 표시 변형), onCancel optional로 변경

파일 구조

apps/web/src/
├── data/models/
│   └── member.ts                       # UserProfile 타입
├── app/
│   ├── auth/callback/route.ts          # 쿠키 저장 로직 추가
│   ├── _components/HomePageLayout.tsx  # /mypage 링크 연결
│   └── mypage/
│       ├── page.tsx                    # 서버 컴포넌트
│       └── _components/
│           ├── MyPageClient.tsx        # 마이페이지 UI
│           ├── Toggle.tsx              # 토글 컴포넌트
│           └── index.ts
└── components/ui/Modal/
    ├── BaseModal.tsx                   # 너비 수정
    └── ConfirmModal.tsx                # 버튼 높이·아이콘 변형

쿠키/상태 관리

키	용도
userProfile	소셜 로그인 응답의 유저 프로필 (httpOnly, 7일)

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
ssolv-web	Ready	Preview, Comment	Feb 24, 2026 4:27pm