Feature: [Task-226] 설정·문제 생성 선택 카드 일러스트 적용

core/designsystem/src/commonMain/kotlin/com/nexters/hytime/gitit/designsystem/selectcard/GitItSelectCard.kt

@@ -40,16 +40,17 @@ private val selectCardThumbnailShape = RoundedCornerShape(8.dp)
  * Figma Select Card 컴포넌트를 Compose로 렌더링한다.
  *
  * 선택 상태는 호출자가 [selected]로 소유하며, 카드를 누르면 [onClick]만 전달한다. [thumbnail]은
- * 52×52dp 영역에 클리핑되므로 이미지 콘텐츠가 영역을 채우도록 구성한다. [description]과 [tag]에
- * null을 전달하면 해당 요소를 렌더링하지 않는다.
+ * 52×52dp 영역에 클리핑되므로 이미지 콘텐츠가 영역을 채우도록 구성한다. [description], [tag],
+ * [thumbnail]에 null을 전달하면 해당 요소를 렌더링하지 않는다. 특히 [thumbnail]이 null이면
+ * 썸네일 영역과 텍스트 사이 간격까지 함께 사라져 텍스트가 카드 왼쪽 패딩에 바로 붙는다.
  *
  * @param title 카드가 나타내는 선택지를 한 줄로 설명하는 제목
  * @param onClick 사용자가 카드를 선택했을 때 호출할 이벤트
  * @param modifier 카드의 너비와 외부 배치를 조정할 수식자
  * @param selected 현재 선택 여부. true이면 blue200 테두리를 표시한다
  * @param description 제목 아래에 표시할 선택적 한 줄 설명
  * @param tag 제목 옆에 표시할 선택적 짧은 태그
- * @param thumbnail 52×52dp로 클리핑되는 썸네일 콘텐츠
+ * @param thumbnail 52×52dp로 클리핑되는 선택적 썸네일 콘텐츠
  */
 @Composable
 fun GitItSelectCard(
@@ -59,7 +60,7 @@ fun GitItSelectCard(
     selected: Boolean = false,
     description: String? = null,
     tag: String? = null,
-    thumbnail: @Composable BoxScope.() -> Unit,
+    thumbnail: (@Composable BoxScope.() -> Unit)? = null,
 ) {
     val colors = resolveSelectCardColors(selected = selected, colors = GitItTheme.colors)
 
@@ -80,14 +81,16 @@ fun GitItSelectCard(
         horizontalArrangement = Arrangement.spacedBy(16.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        Box(
-            modifier =
-                Modifier
-                    .size(52.dp)
-                    .clip(selectCardThumbnailShape),
-            contentAlignment = Alignment.Center,
-            content = thumbnail,
-        )
+        thumbnail?.let { thumbnailContent ->
+            Box(
+                modifier =
+                    Modifier
+                        .size(52.dp)
+                        .clip(selectCardThumbnailShape),
+                contentAlignment = Alignment.Center,
+                content = thumbnailContent,
+            )
+        }
 
         Column(
             modifier = Modifier.weight(1f),
@@ -201,7 +204,7 @@ internal fun resolveSelectCardColors(
         tagContentColor = colors.blue200,
     )
 
-@Preview(widthDp = 360, heightDp = 380)
+@Preview(widthDp = 360, heightDp = 520)
 @Composable
 private fun GitItSelectCardPreview() {
     GitItTheme {
@@ -247,6 +250,15 @@ private fun GitItSelectCardPreview() {
                 onClick = {},
                 thumbnail = thumbnail,
             )
+            GitItSelectCard(
+                title = "Front-end",
+                onClick = {},
+            )
+            GitItSelectCard(
+                title = "Back-end",
+                selected = true,
+                onClick = {},
+            )
         }
     }
 }

feature/my/src/commonMain/kotlin/com/nexters/hytime/gitit/feature/my/SettingsCareerLevelRoute.kt

@@ -6,12 +6,17 @@ import androidx.compose.runtime.getValue
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.nexters.hytime.gitit.domain.model.CareerLevel
 import git_it_kmp.feature.my.generated.resources.Res
+import git_it_kmp.feature.my.generated.resources.illust_levels_beginner
+import git_it_kmp.feature.my.generated.resources.illust_levels_junior
+import git_it_kmp.feature.my.generated.resources.illust_levels_mid
+import git_it_kmp.feature.my.generated.resources.illust_levels_senior
 import git_it_kmp.feature.my.generated.resources.settings_career_level_entry_description
 import git_it_kmp.feature.my.generated.resources.settings_career_level_junior_description
 import git_it_kmp.feature.my.generated.resources.settings_career_level_middle_description
 import git_it_kmp.feature.my.generated.resources.settings_career_level_senior_description
 import git_it_kmp.feature.my.generated.resources.settings_development_level
 import kotlinx.coroutines.flow.collectLatest
+import org.jetbrains.compose.resources.DrawableResource
 import org.jetbrains.compose.resources.StringResource
 import org.jetbrains.compose.resources.stringResource
 import org.koin.compose.viewmodel.koinViewModel
@@ -29,6 +34,19 @@ private fun CareerLevel.toDescriptionResource(): StringResource =
         CareerLevel.SENIOR -> Res.string.settings_career_level_senior_description
     }
 
+/**
+ * 개발 수준 카드 왼쪽에 표시할 수준별 일러스트 리소스다.
+ *
+ * @return 카드 썸네일 영역에 그릴 일러스트 리소스
+ */
+private fun CareerLevel.toThumbnailResource(): DrawableResource =
+    when (this) {
+        CareerLevel.ENTRY -> Res.drawable.illust_levels_beginner
+        CareerLevel.JUNIOR -> Res.drawable.illust_levels_junior
+        CareerLevel.MIDDLE -> Res.drawable.illust_levels_mid
+        CareerLevel.SENIOR -> Res.drawable.illust_levels_senior
+    }
+
 /**
  * 개발 수준 선택 화면의 진입점(Route)이다.
  *
@@ -56,6 +74,7 @@ fun SettingsCareerLevelRoute(onNavigateBack: () -> Unit) {
                 SettingsSelectionOption(
                     id = careerLevel.name,
                     title = stringResource(careerLevel.toDisplayLabelResource()),
+                    thumbnail = careerLevel.toThumbnailResource(),
                     description = stringResource(careerLevel.toDescriptionResource()),
                 )
             },

feature/my/src/commonMain/kotlin/com/nexters/hytime/gitit/feature/my/SettingsPositionRoute.kt

@@ -44,7 +44,10 @@ fun SettingsPositionRoute(onNavigateBack: () -> Unit) {
         title = stringResource(Res.string.settings_development_field),
         options =
             positionOptions.map { position ->
-                SettingsSelectionOption(id = position.name, title = stringResource(position.toDisplayLabelResource()))
+                SettingsSelectionOption(
+                    id = position.name,
+                    title = stringResource(position.toDisplayLabelResource()),
+                )
             },
         selectedOptionId = uiState.selected?.name,
         onOptionClick = { option -> viewModel.onPositionClick(Position.valueOf(option.id)) },

feature/my/src/commonMain/kotlin/com/nexters/hytime/gitit/feature/my/SettingsSelectionScreen.kt

@@ -22,19 +22,32 @@ import com.nexters.hytime.gitit.designsystem.selectcard.GitItSelectCard
 import com.nexters.hytime.gitit.designsystem.toolbar.GitItTopBar
 import com.nexters.hytime.gitit.designsystem.toolbar.GitItTopBarType
 import git_it_kmp.feature.my.generated.resources.Res
-import git_it_kmp.feature.my.generated.resources.settings_select_thumbnail
+import git_it_kmp.feature.my.generated.resources.illust_levels_beginner
+import git_it_kmp.feature.my.generated.resources.illust_levels_junior
+import git_it_kmp.feature.my.generated.resources.my_career_level_entry
+import git_it_kmp.feature.my.generated.resources.my_career_level_junior
+import git_it_kmp.feature.my.generated.resources.my_position_backend
+import git_it_kmp.feature.my.generated.resources.my_position_frontend
+import git_it_kmp.feature.my.generated.resources.settings_career_level_entry_description
+import git_it_kmp.feature.my.generated.resources.settings_career_level_junior_description
+import git_it_kmp.feature.my.generated.resources.settings_development_field
+import git_it_kmp.feature.my.generated.resources.settings_development_level
+import org.jetbrains.compose.resources.DrawableResource
 import org.jetbrains.compose.resources.painterResource
+import org.jetbrains.compose.resources.stringResource
 
 /**
  * 설정 선택 화면의 카드 한 장을 표현한다.
  *
  * @property id 선택 상태와 목록 key에 사용하는 화면 내 고유 식별자
  * @property title 선택지를 한 줄로 설명하는 제목
+ * @property thumbnail 카드 왼쪽 52dp 영역을 채울 선택적 일러스트 리소스. null이면 썸네일 영역을 표시하지 않는다
  * @property description 제목 아래에 표시할 선택적 한 줄 설명
  */
 data class SettingsSelectionOption(
     val id: String,
     val title: String,
+    val thumbnail: DrawableResource? = null,
     val description: String? = null,
 )
 
@@ -93,31 +106,56 @@ fun SettingsSelectionScreen(
                     selected = option.id == selectedOptionId,
                     onClick = { onOptionClick(option) },
                     modifier = Modifier.fillMaxWidth(),
-                ) {
-                    Image(
-                        painter = painterResource(Res.drawable.settings_select_thumbnail),
-                        contentDescription = null,
-                        modifier = Modifier.fillMaxSize(),
-                        contentScale = ContentScale.Crop,
-                    )
-                }
+                    thumbnail =
+                        option.thumbnail?.let { resource ->
+                            { SettingsSelectionThumbnail(resource = resource) }
+                        },
+                )
             }
         }
     }
 }
 
+/**
+ * 선택 카드의 썸네일 영역을 Figma 시안대로 채운다.
+ *
+ * 일러스트 리소스는 배경이 없는 벡터이므로 grey500 배경 위에 겹쳐 그린다.
+ *
+ * @param resource 52dp 영역에 그릴 일러스트 리소스
+ * @param modifier 외부 배치와 추가 수식자
+ */
+@Composable
+private fun SettingsSelectionThumbnail(
+    resource: DrawableResource,
+    modifier: Modifier = Modifier,
+) {
+    Image(
+        painter = painterResource(resource),
+        contentDescription = null,
+        modifier =
+            modifier
+                .fillMaxSize()
+                .background(GitItTheme.colors.grey500),
+        contentScale = ContentScale.Crop,
+    )
+}
+
 @Preview
 @Composable
 private fun SettingsSelectionScreenPreview() {
     GitItTheme {
         SettingsSelectionScreen(
-            title = "개발 분야",
+            title = stringResource(Res.string.settings_development_field),
             options =
                 listOf(
-                    SettingsSelectionOption(id = "FRONTEND", title = "Front-end"),
-                    SettingsSelectionOption(id = "BACKEND", title = "Back-end"),
-                    SettingsSelectionOption(id = "IOS", title = "iOS"),
-                    SettingsSelectionOption(id = "ANDROID", title = "Android"),
+                    SettingsSelectionOption(
+                        id = "FRONTEND",
+                        title = stringResource(Res.string.my_position_frontend),
+                    ),
+                    SettingsSelectionOption(
+                        id = "BACKEND",
+                        title = stringResource(Res.string.my_position_backend),
+                    ),
                 ),
             selectedOptionId = "BACKEND",
             onOptionClick = {},
@@ -131,11 +169,21 @@ private fun SettingsSelectionScreenPreview() {
 private fun SettingsSelectionScreenWithDescriptionPreview() {
     GitItTheme {
         SettingsSelectionScreen(
-            title = "개발 수준",
+            title = stringResource(Res.string.settings_development_level),
             options =
                 listOf(
-                    SettingsSelectionOption(id = "ENTRY", title = "입문", description = "프로젝트 코드를 처음 살펴봐요."),
-                    SettingsSelectionOption(id = "JUNIOR", title = "주니어", description = "작은 기능 단위로 코드를 이해할 수 있어요."),
+                    SettingsSelectionOption(
+                        id = "ENTRY",
+                        title = stringResource(Res.string.my_career_level_entry),
+                        thumbnail = Res.drawable.illust_levels_beginner,
+                        description = stringResource(Res.string.settings_career_level_entry_description),
+                    ),
+                    SettingsSelectionOption(
+                        id = "JUNIOR",
+                        title = stringResource(Res.string.my_career_level_junior),
+                        thumbnail = Res.drawable.illust_levels_junior,
+                        description = stringResource(Res.string.settings_career_level_junior_description),
+                    ),
                 ),
             selectedOptionId = "JUNIOR",
             onOptionClick = {},

feature/quiz/src/commonMain/kotlin/com/nexters/hytime/gitit/feature/quiz/create/component/QuizCreateSelectionScaffold.kt

@@ -1,5 +1,6 @@
 package com.nexters.hytime.gitit.feature.quiz.create.component
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -13,6 +14,7 @@ import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.nexters.hytime.gitit.designsystem.GitItTheme
@@ -22,6 +24,8 @@ import com.nexters.hytime.gitit.designsystem.toolbar.GitItTopBar
 import com.nexters.hytime.gitit.designsystem.toolbar.GitItTopBarType
 import git_it_kmp.feature.quiz.generated.resources.Res
 import git_it_kmp.feature.quiz.generated.resources.quiz_create_next
+import org.jetbrains.compose.resources.DrawableResource
+import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.resources.stringResource
 
 /**
@@ -83,11 +87,23 @@ internal fun QuizCreateSelectionScaffold(
     }
 }
 
-/** 선택 카드의 프로젝트 이미지 영역에 임시 placeholder를 표시한다. */
+/**
+ * 선택 카드의 썸네일 영역을 Figma 시안대로 채운다.
+ *
+ * 일러스트 리소스는 배경이 없는 벡터이므로 grey500 배경 위에 겹쳐 그린다.
+ *
+ * @param resource 52dp 영역에 그릴 일러스트 리소스
+ */
 @Composable
-internal fun QuizCreateSelectionThumbnail() {
-    QuizCreateImagePlaceholder(
-        modifier = Modifier.fillMaxSize(),
+internal fun QuizCreateSelectionThumbnail(resource: DrawableResource) {
+    Image(
+        painter = painterResource(resource),
+        contentDescription = null,
+        modifier =
+            Modifier
+                .fillMaxSize()
+                .background(GitItTheme.colors.grey500),
+        contentScale = ContentScale.Crop,
     )
 }
 

feature/quiz/src/commonMain/kotlin/com/nexters/hytime/gitit/feature/quiz/create/screen/QuizCreateKnowledgeScreen.kt

@@ -13,13 +13,17 @@ import com.nexters.hytime.gitit.feature.quiz.create.QuizKnowledgeLevel
 import com.nexters.hytime.gitit.feature.quiz.create.component.QuizCreateSelectionScaffold
 import com.nexters.hytime.gitit.feature.quiz.create.component.QuizCreateSelectionThumbnail
 import git_it_kmp.feature.quiz.generated.resources.Res
+import git_it_kmp.feature.quiz.generated.resources.illust_knowledge_advanced
+import git_it_kmp.feature.quiz.generated.resources.illust_knowledge_basic
+import git_it_kmp.feature.quiz.generated.resources.illust_knowledge_intermediate
 import git_it_kmp.feature.quiz.generated.resources.quiz_create_knowledge_concepts_description
 import git_it_kmp.feature.quiz.generated.resources.quiz_create_knowledge_concepts_title
 import git_it_kmp.feature.quiz.generated.resources.quiz_create_knowledge_experienced_description
 import git_it_kmp.feature.quiz.generated.resources.quiz_create_knowledge_experienced_title
 import git_it_kmp.feature.quiz.generated.resources.quiz_create_knowledge_some_code_description
 import git_it_kmp.feature.quiz.generated.resources.quiz_create_knowledge_some_code_title
 import git_it_kmp.feature.quiz.generated.resources.quiz_create_knowledge_title
+import org.jetbrains.compose.resources.DrawableResource
 import org.jetbrains.compose.resources.StringResource
 import org.jetbrains.compose.resources.stringResource
 
@@ -52,7 +56,7 @@ internal fun QuizCreateKnowledgeScreen(
                     selected = selected == level,
                     onClick = { onSelect(level) },
                     modifier = Modifier.fillMaxWidth(),
-                    thumbnail = { QuizCreateSelectionThumbnail() },
+                    thumbnail = { QuizCreateSelectionThumbnail(resource = level.thumbnailResource()) },
                 )
             }
         }
@@ -83,6 +87,18 @@ private fun QuizKnowledgeLevel.descriptionResource(): StringResource =
         QuizKnowledgeLevel.Experienced -> Res.string.quiz_create_knowledge_experienced_description
     }
 
+/**
+ * 이해도 선택 카드 왼쪽에 표시할 일러스트 리소스를 반환한다.
+ *
+ * @return 현재 이해도 단계에 대응하는 일러스트 리소스
+ */
+private fun QuizKnowledgeLevel.thumbnailResource(): DrawableResource =
+    when (this) {
+        QuizKnowledgeLevel.Concepts -> Res.drawable.illust_knowledge_basic
+        QuizKnowledgeLevel.SomeCode -> Res.drawable.illust_knowledge_intermediate
+        QuizKnowledgeLevel.Experienced -> Res.drawable.illust_knowledge_advanced
+    }
+
 @Preview(widthDp = 360, heightDp = 800)
 @Composable
 private fun QuizCreateKnowledgePreview() {