feature - mypage 페이지 및 컴포넌트 디자인 완료

[cryingdryice]

개요

MyPage 컴포넌트를 구현하여 사용자가 개인 정보를 확인하고, 알림, 작성한 퀴즈, 즐겨찾기 등 다양한 목록을 볼 수 있는 페이지를 디자인했습니다. 이 페이지는 사용자 경험을 향상시키기 위해 직관적이고 깔끔한 UI로 구성되었습니다.

구현 사항

• 프로필 카드 구현: 사용자의 프로필 사진, 이름, 퀴즈, 배지, 포인트 등을 표시하는 ProfileCard 컴포넌트를 추가.
• 알림, 퀴즈, 게시글 목록 추가: 사용자가 받은 알림, 작성한 퀴즈 및 게시글을 확인할 수 있는 ListBox 컴포넌트를 통해 목록을 구성.
• 네비게이션 버튼 추가: 페이지 상단에 홈으로 버튼을 추가하여, 사용자가 쉽게 메인 페이지로 이동할 수 있도록 구현.
• 즐겨찾기 및 좋아요 목록: 사용자가 즐겨찾기에 추가한 항목과 좋아요를 누른 항목들을 확인할 수 있는 섹션을 추가.

컴포넌트 구조

plaintext코드 복사
MyPage (루트 컴포넌트)
│
├── <ProfileCard /> (사용자 프로필 카드)
│
├── <div className="dashboard-container"> (대시보드 컨테이너)
│   │
│   ├── <button className="nav-button">홈으로</button> (홈으로 가기 버튼)
│   │
│   ├── <ListBox title="알림함" items={data.alerts} /> (알림 목록)
│   ├── <ListBox title="작성한 퀴즈 목록" items={data.quizzes} /> (퀴즈 목록)
│   ├── <ListBox title="작성한 게시글 목록" items={data.posts} /> (게시글 목록)
│   │
│   ├── <ListBox title="즐겨찾기 목록" items={data.bookmarks} /> (즐겨찾기 목록)
│   ├── <ListBox title="풀린 문제 목록" items={data.solvedProblems} /> (풀린 문제 목록)
│   └── <ListBox title="좋아요 목록" items={data.favorites} /> (좋아요 목록)

추가 설명

• ListBox: 알림, 퀴즈, 게시글, 즐겨찾기, 풀린 문제, 좋아요 목록을 각각의 ListBox 컴포넌트를 사용해 별도로 관리.
• ProfileCard: 사용자의 프로필 정보(이름, 퀴즈 수, 배지 수, 포인트)를 표시하는 컴포넌트를 상단에 배치.

기타

• 각 리스트의 세부 페이지는 필요한 경우 따로 구현할 예정입니다.

스크린샷