feat:퀴즈 목록 페이지 디자인 완성

[cryingdryice]

개요

QuizListPage에 네비게이션 바를 추가하고, 페이지 상단에 과목 선택 드롭다운과 검색 바를 한 줄로 배치했습니다. 또한, 네비게이션 바의 마이페이지 버튼에 사용자 아이콘을 추가하여 시각적인 요소를 개선했습니다.

구현 사항

• 퀴즈 목록 페이지 구현: 퀴즈 리스트를 불러오고 퀴즈에 조회할 수 있는 페이지 디자인을 구현하였습니다.
• 네비게이션 바 추가: 상단에 홈으로 가기 버튼과 마이페이지 버튼을 포함한 네비게이션 바를 추가.
• 드롭다운 및 검색 바 정렬: 과목 선택 드롭다운과 검색 바를 한 줄로 정렬하여 UI를 간결하게 개선.

기타

• 추후 필요하다면 quizItem컴포넌트로 분리하여 퀴즈 리스트를 관리하려 합니다.
• 아직 검색, 필터링 기능을 추가하지는 않았습니다.
• 페이징 기능도 넣으려 하지만 백엔드의 의견에 따라 추가하겠습니다.

QuizListPage (루트 컴포넌트)
│
├── <nav className="navbar"> (페이지 상단 네비게이션 바)
│ │
│ ├── <button className="nav-button">홈으로</button> (홈으로 가기 버튼)
│ └── <button className="nav-button">마이페이지</button> (마이페이지 버튼)
│
├── <div className="controls-container"> (검색 바 및 과목 선택 드롭다운을 감싸는 컨테이너)
│ │
│ ├── <SearchBar /> (검색 바 컴포넌트)
│ └── <SubjectDropdown /> (과목 선택 드롭다운 컴포넌트)
│
└── <QuizList /> (퀴즈 목록을 렌더링하는 컴포넌트)
│
└── <div className="quiz-card"> (각 퀴즈 카드를 감싸는 컨테이너)
│
├── <div className="quiz-type"> (퀴즈 유형 표시)
├── <div className="quiz-question"> (퀴즈 질문)
└── <button className="quiz-button">퀴즈 풀기</button> (퀴즈 풀기 버튼)

컴포넌트 구조

• QuizListPage: 메인 페이지로, 네비게이션 바, 드롭다운, 검색 바, 그리고 퀴즈 리스트를 포함.
• SubjectDropdown: 과목 선택을 위한 드롭다운 메뉴.
• SearchBar: 퀴즈 검색을 위한 검색 바.
• QuizList: 필터링된 퀴즈 목록을 보여줌.

네비게이션 바는 상단에 고정되어 있으며, 사용자가 쉽게 홈 또는 마이페이지로 이동할 수 있도록 하였습니다.

이미지