[Feat] Spoiler 구현

[giovannijunseokim]

📮 관련 이슈

• closed [Feat] Spoiler #73

📌 작업 내용

• Spoiler 구현

📸 스크린샷

스크린샷

Summary by CodeRabbit

릴리스 노트

• 새로운 기능
  • 스포일러 UI 컴포넌트 추가: 콘텐츠를 가린 후 버튼을 통해 공개할 수 있는 새로운 컴포넌트가 디자인 시스템에 추가되었습니다. 잠금 아이콘과 함께 블러 처리된 영역을 표시하며, 사용자가 버튼을 클릭하여 숨겨진 콘텐츠를 볼 수 있습니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

워크스루

새로운 Spoiler UI 컴포넌트를 구현했습니다. 흐릿한 콘텐츠 영역에 그라데이션 잠금 아이콘, 한국어 스포일러 알림, "보기" 버튼이 있는 오버레이 카드를 표시하며, 버튼 클릭 시 spoil 콜백을 실행합니다. FlintTheme 테마를 적용하고 미리보기 함수와 파라미터 제공자를 포함합니다.

변경사항

코호트 / 파일(들)	변경 요약
새로운 Spoiler 컴포넌트 app/src/main/java/com/flint/core/designsystem/component/collection/Spoiler.kt	새 파일 추가 (+137줄): Spoiler 컴포저블 함수 구현. spoil 콜백, modifier, 콘텐츠 슬롯을 받음. 흐릿한 배경 위에 잠금 아이콘, 한국어 텍스트, "보기" 버튼을 표시. SpoilerPreview 및 SpoilerPreviewParameterProvider 포함하여 여러 텍스트 예시로 미리보기 지원

예상 코드 리뷰 노력

🎯 2 (Simple) | ⏱️ ~12분

시

🐰 스포일러를 숨겨두니, 참을 수 없지!
흐릿한 베일 아래 비밀이 숨어 있고,
"보기" 버튼을 누르면 진실이 드러나는 마법,
락 아이콘이 반짝, 사용자의 호기심을 자극하네 ✨
콘텐츠를 지키는 디자인, 완벽하게 완성했어! 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목은 주요 변경사항인 Spoiler 컴포넌트 구현을 명확하게 요약하고 있습니다.
Description check	✅ Passed	PR 설명이 관련 이슈, 작업 내용, 스크린샷을 포함하여 템플릿 요구사항을 충족하고 있습니다.
Linked Issues check	✅ Passed	PR에서 구현된 Spoiler 컴포넌트는 이슈 #73의 Spoiler 구현 요구사항을 충족하고 있습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항은 Spoiler 컴포넌트 구현이라는 PR 목표 범위 내에 있으며 범위를 벗어난 변경이 없습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

app/src/main/java/com/flint/core/designsystem/component/collection/Spoiler.kt (3)

60-64: 하드코딩된 문자열을 string resource로 추출하는 것을 권장합니다.

"스포일러가 포함된 내용이에요"와 "보기" 문자열이 하드코딩되어 있습니다. 향후 다국어 지원(i18n)을 고려하여 strings.xml로 추출하는 것이 좋습니다.

♻️ 제안하는 변경사항

strings.xml에 추가:

<string name="spoiler_warning_message">스포일러가 포함된 내용이에요</string>
<string name="spoiler_view_button">보기</string>

코드 변경:

 Text(
-    text = "스포일러가 포함된 내용이에요",
+    text = stringResource(R.string.spoiler_warning_message),
     color = FlintTheme.colors.white,
     style = FlintTheme.typography.head3Sb18,
 )

 Text(
-    text = "보기",
+    text = stringResource(R.string.spoiler_view_button),
     color = FlintTheme.colors.primary300,
     style = FlintTheme.typography.head3Sb18,
 )

import 추가 필요:

import androidx.compose.ui.res.stringResource

---

54-58: 접근성 개선을 위해 contentDescription 추가를 고려해보세요.

잠금 아이콘이 "스포일러가 숨겨져 있음"이라는 의미를 전달하므로, 스크린 리더 사용자를 위해 contentDescription을 제공하면 좋습니다.

♻️ 제안하는 변경사항

 Image(
     painter = painterResource(R.drawable.ic_gradient_lock),
-    contentDescription = null,
+    contentDescription = "스포일러 잠금", // 또는 stringResource 사용
     modifier = Modifier.size(64.dp),
 )

---

104-137: Preview provider 클래스의 가시성을 private으로 변경하는 것을 권장합니다.

SpoilerPreviewParameterProvider는 이 파일 내의 preview에서만 사용되므로, 불필요한 API 노출을 방지하기 위해 private으로 선언하는 것이 좋습니다.

♻️ 제안하는 변경사항

-class SpoilerPreviewParameterProvider : PreviewParameterProvider<String> {
+private class SpoilerPreviewParameterProvider : PreviewParameterProvider<String> {

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 351177f and 2174a0d.

📒 Files selected for processing (1)

• app/src/main/java/com/flint/core/designsystem/component/collection/Spoiler.kt

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: PR Build Check
• GitHub Check: PR Lint Check

🔇 Additional comments (2)

app/src/main/java/com/flint/core/designsystem/component/collection/Spoiler.kt (2)

1-27: LGTM!

패키지 선언과 import 구문이 적절하게 구성되어 있습니다.

---

85-102: LGTM!

Preview 함수가 적절하게 구성되어 있습니다. FlintTheme으로 감싸고 PreviewParameter를 활용한 점이 좋습니다.

[nahy-512]

고생하셨습니다

[nahy-512]

ㅋㅋ 이거 좋네요