[Feature/#22] 퀴즈 카테고리 선택 화면 UI를 구현합니다.

[wjdrjs00]

Related issue 🛠

• closed [Feature] 퀴즈 카테고리 선택 화면 UI를 구현합니다. #22

Work Description ✏️

• 퀴즈 카테고리 선택화면 UI를 구현했습니다.

Screenshot 📸

Summary by CodeRabbit

새로운 기능

• 5가지 퀴즈 카테고리(방향감각, 언어, 기억력, 집중력·계산, 시각공간능력) 추가
• 퀴즈 카테고리 선택 화면 구현
• 카테고리별 카드형 UI 제공으로 직관적인 카테고리 선택 가능

[coderabbitai]

🎯 진행 상황

이 PR은 시니어 퀴즈 카테고리 선택 화면의 UI를 구현합니다. 새로운 열거형 QuizCategory, 카테고리 목록을 표시하는 QuizCategoryScreen, 개별 카테고리를 나타내는 QuizCategoryCard 컴포넌트가 추가됩니다.

📝 변경 사항

응집도 / 파일	변경 요약
퀴즈 카테고리 데이터 feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/QuizCategory.kt	ORIENTATION, LANGUAGE, MEMORY, ATTENTION_CALCULATION, VISUOSPATIAL 등 5가지 카테고리 항목을 포함하는 새로운 열거형 추가. 각 항목은 imageRes, backgroundColor, title, description 속성을 정의합니다.
카테고리 선택 화면 feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/QuizCategoryScreen.kt	헤더 섹션과 카테고리 목록 섹션으로 구성된 새로운 Compose 화면 추가. QuizCategoryCard 컴포넌트를 반복 렌더링하며 Preview 컴포저블 포함.
카테고리 카드 컴포넌트 feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/component/QuizCategoryCard.kt	이미지 배경, 제목, 설명 텍스트가 오버레이된 전폭 라운드 카드 컴포넌트 추가. Ripple 클릭 핸들링 및 콜백 지원.

⏱️ 예상 코드 리뷰 노력

🎯 2 (Simple) | ⏱️ ~10분

• QuizCategory 열거형 정의의 일관성과 리소스 참조 정확성 확인
• QuizCategoryScreen의 레이아웃 구조 및 Preview 렌더링 검증
• QuizCategoryCard의 시각적 레이아웃과 클릭 인터랙션 로직 검토

🐰 축하 시

🎨 카테고리 카드들이 반짝반짝,

🧩 Compose로 조립하니 쉽고 깔끔,

📱 화면이 피어났구나 아름답게!

🎯 다섯 가지 퀴즈 길, 이제 선택하세요!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title Check	✅ Passed	PR 제목 "[Feature/#22] 퀴즈 카테고리 선택 화면 UI를 구현합니다."는 변경 사항의 핵심을 명확하게 반영하고 있습니다. 추가된 QuizCategory 열거형, QuizCategoryScreen 컴포저블, 그리고 QuizCategoryCard 컴포넌트 모두 퀴즈 카테고리 선택 화면 UI 구현이라는 주요 목표에 직접 관련이 있습니다. 제목은 간결하고 구체적이며 이슈 번호를 포함하고 있어서 팀원들이 변경 사항을 쉽게 파악할 수 있습니다.
Linked Issues Check	✅ Passed	이슈 #22의 요구 사항은 "퀴즈 카테고리 선택 화면 UI를 구현"하는 것입니다. 제공된 모든 변경 사항이 이 목표에 직접적으로 부합합니다. QuizCategory.kt는 카테고리 데이터 모델을 정의하고, QuizCategoryScreen.kt는 전체 화면 레이아웃을 구성하며, QuizCategoryCard.kt는 개별 카테고리를 표시하는 카드 컴포넌트를 제공합니다. 모든 코드 변경이 요구 사항을 충족하고 있습니다.
Out of Scope Changes Check	✅ Passed	모든 변경 사항이 이슈 #22의 범위 내에 있습니다. QuizCategory.kt, QuizCategoryScreen.kt, QuizCategoryCard.kt는 모두 퀴즈 카테고리 선택 화면 UI 구현에 필요한 파일들이며, 리팩토링, 버그 수정, 또는 관계없는 기능 추가와 같은 범위를 벗어난 변경 사항은 없습니다. 모든 코드 변경이 명확한 목표 달성을 위해 작성되었습니다.
Description Check	✅ Passed	PR 설명은 리포지토리의 템플릿 구조를 대부분 따르고 있습니다. Related issue, Work Description, Screenshot 섹션이 모두 포함되어 있고 적절히 작성되어 있습니다. Uncompleted Tasks 섹션이 누락되어 있지만, 핵심 정보인 관련 이슈, 작업 설명, 스크린샷이 완전히 제공되어 있어 설명의 목적을 충분히 달성하고 있습니다.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/22-select-quiz-category-ui

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/component/QuizCategoryCard.kt (1)

49-54: 접근성을 위한 contentDescription 추가를 고려하세요.

배경 이미지가 카테고리를 시각적으로 표현하고 있으나, contentDescription = null로 설정되어 있습니다. title과 description이 이미 텍스트로 제공되므로 이미지가 장식적 역할을 한다면 현재 구현이 적절하지만, 이미지가 추가적인 의미를 전달한다면 적절한 설명을 제공하는 것이 좋습니다.

feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/QuizCategoryScreen.kt (1)

35-45: 문자열 리소스 분리를 권장합니다.

헤더 텍스트가 하드코딩되어 있습니다. 유지보수성과 향후 다국어 지원을 위해 strings.xml에 문자열을 정의하는 것이 좋습니다.

strings.xml에 다음과 같이 정의하세요:

<string name="quiz_category_title">퀴즈 선택</string>
<string name="quiz_category_subtitle">퀴즈는 MMSE 기반으로 만들어졌어요</string>

그리고 다음과 같이 수정하세요:

-            text = "퀴즈 선택",
+            text = stringResource(R.string.quiz_category_title),

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ecbd29b and 96b67a7.

📒 Files selected for processing (3)

• feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/QuizCategory.kt (1 hunks)
• feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/QuizCategoryScreen.kt (1 hunks)
• feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/component/QuizCategoryCard.kt (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/QuizCategoryScreen.kt (1)

feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/component/QuizCategoryCard.kt (1)

• QuizCategoryCard (28-74)

🔇 Additional comments (4)

feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/component/QuizCategoryCard.kt (1)

28-47: 구현이 잘 되었습니다!

카드 컴포넌트의 구조와 클릭 처리 로직이 적절하게 구현되었습니다. ripple 효과와 접근성 Role.Button 설정이 올바르게 적용되었습니다.

feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/QuizCategoryScreen.kt (2)

48-65: 스크롤 기능 추가를 검토하세요.

카드 목록이 고정된 Column 안에서 weight(1f)로 균등 분할되고 있습니다. 현재 5개의 카테고리가 있어 작은 화면에서는 각 카드가 너무 작아지거나 내용이 잘릴 수 있습니다. LazyColumn 또는 verticalScroll modifier 추가를 고려하세요.

---

62-62: onClick 구현이 필요합니다.

현재 onClick 핸들러가 비어있습니다. UI 구현 PR이므로 예상되는 상황이지만, 향후 각 카테고리 선택 시 적절한 네비게이션 로직이 추가되어야 합니다.

feature/senior/src/main/kotlin/com/moa/app/feature/senior/quiz/QuizCategory.kt (1)

8-44: 잘 구조화된 데이터 모델입니다!

퀴즈 카테고리를 enum으로 정의하여 타입 안전성을 확보하고, 각 카테고리에 필요한 메타데이터(이미지, 색상, 제목, 설명)를 명확하게 관리하고 있습니다. @DrawableRes 어노테이션 사용도 적절합니다.