문제 상세 화면 구현

composeApp/build.gradle.kts

@@ -5,6 +5,7 @@ plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.compose.multiplatform)
     alias(libs.plugins.kotlin.compose)
+    alias(libs.plugins.kotlin.serialization)
     kotlin("native.cocoapods")
 }
 
@@ -61,8 +62,10 @@ kotlin {
 
             implementation(libs.bundles.koin)
             implementation(libs.kotlinx.coroutines.core)
+            implementation(libs.kotlinx.serialization.json)
             implementation(libs.kotlinx.collections.immutable)
             implementation(libs.napier)
+            implementation(libs.kotlinx.datetime)
         }
         commonTest.dependencies {
             implementation(libs.kotlin.test)
@@ -113,9 +116,3 @@ android {
 dependencies {
     debugImplementation(libs.compose.ui.tooling)
 }
-
-// compose.resources {
-//    publicResClass = false
-//    nameOfResClass = "Res"
-//    packageOfResClass = "com.peto.droidmorning.composeapp.generated.resources"
-// }

composeApp/src/commonMain/composeResources/values/strings.xml

@@ -23,4 +23,37 @@
     <string name="category_android">Android</string>
     <string name="category_compose">Compose</string>
     <string name="category_oop">OOP</string>
+
+    <!-- Question Detail Screen -->
+    <string name="back">뒤로가기</string>
+    <string name="favorite">즐겨찾기</string>
+    <string name="answer_completed">답변 완료</string>
+
+    <!-- My Answer Section -->
+    <string name="my_answer">내 답변</string>
+    <string name="edit">수정</string>
+    <string name="delete">삭제</string>
+    <string name="cancel">취소</string>
+    <string name="save">저장</string>
+    <string name="no_answer_yet">아직 작성한 답변이 없습니다</string>
+    <string name="answer_placeholder">답변을 입력하세요</string>
+
+    <!-- Delete Confirmation -->
+    <string name="delete_answer_title">답변 삭제</string>
+    <string name="delete_answer_confirm_message">정말 이 답변을 삭제하시겠습니까?</string>
+    <string name="delete_answer_confirm">정말 이 답변을 삭제하시겠습니까?</string>
+    <string name="delete_history_confirm">이 답변을 삭제하시겠습니까?</string>
+
+    <!-- Answer History Section -->
+    <string name="answer_history_count">답변 히스토리 (%d)</string>
+
+    <!-- Bottom Action -->
+    <string name="add_answer">답변 추가하기</string>
+
+    <!-- Add Answer Screen -->
+    <string name="add_answer_title">답변 작성</string>
+    <string name="add_answer_placeholder">면접에서 이 질문을 받았을 때 어떻게 답변할지 적어보세요</string>
+
+    <!-- Date Formatting -->
+    <string name="last_modified_prefix">마지막 수정: </string>
 </resources>

composeApp/src/commonMain/kotlin/com/peto/droidmorning/common/util/DateFormatter.kt

@@ -0,0 +1,32 @@
+package com.peto.droidmorning.common.util
+
+import kotlinx.datetime.TimeZone
+import kotlinx.datetime.number
+import kotlinx.datetime.toLocalDateTime
+import kotlin.time.Instant
+
+object DateFormatter {
+    private const val DATE_SEPARATOR = "."
+
+    fun formatDate(
+        instant: Instant,
+        timeZone: TimeZone = TimeZone.currentSystemDefault(),
+    ): String {
+        val date =
+            instant
+                .toLocalDateTime(timeZone)
+                .date
+
+        return buildString {
+            append(date.year)
+            append(DATE_SEPARATOR)
+            append(
+                date.month.number
+                    .toString()
+                    .padStart(2, '0'),
+            )
+            append(DATE_SEPARATOR)
+            append(date.day.toString().padStart(2, '0'))
+        }
+    }
+}

composeApp/src/commonMain/kotlin/com/peto/droidmorning/di/NavigationModule.kt

@@ -3,11 +3,13 @@ package com.peto.droidmorning.di
 import com.peto.droidmorning.login.navigation.LoginNavGraphContributor
 import com.peto.droidmorning.main.navigation.MainNavGraphContributor
 import com.peto.droidmorning.navigation.NavGraphContributor
+import com.peto.droidmorning.questions.detail.navigation.QuestionDetailNavGraph
 import org.koin.core.qualifier.named
 import org.koin.dsl.module
 
 val navigationModule =
     module {
         single<NavGraphContributor>(named("login")) { LoginNavGraphContributor() }
         single<NavGraphContributor>(named("main")) { MainNavGraphContributor() }
+        single<NavGraphContributor>(named("QuestionDetail")) { QuestionDetailNavGraph() }
     }

composeApp/src/commonMain/kotlin/com/peto/droidmorning/di/ViewModelModule.kt

@@ -1,12 +1,14 @@
 package com.peto.droidmorning.di
 
 import com.peto.droidmorning.login.vm.LoginViewModel
-import com.peto.droidmorning.question.vm.QuestionViewModel
+import com.peto.droidmorning.questions.detail.vm.QuestionDetailViewModel
+import com.peto.droidmorning.questions.list.vm.QuestionViewModel
 import org.koin.core.module.dsl.viewModelOf
 import org.koin.dsl.module
 
 val viewModelModule =
     module {
         viewModelOf(::LoginViewModel)
         viewModelOf(::QuestionViewModel)
+        viewModelOf(::QuestionDetailViewModel)
     }

composeApp/src/commonMain/kotlin/com/peto/droidmorning/main/MainScreen.kt

@@ -19,15 +19,19 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.lifecycle.SavedStateHandle
 import com.peto.droidmorning.designsystem.theme.AppTheme
 import com.peto.droidmorning.history.HistoryScreen
 import com.peto.droidmorning.profile.ProfileScreen
-import com.peto.droidmorning.question.QuestionScreen
+import com.peto.droidmorning.questions.list.QuestionScreen
 import com.peto.droidmorning.test.TestScreen
 import org.jetbrains.compose.resources.stringResource
 
 @Composable
-fun MainScreen() {
+fun MainScreen(
+    onNavigateToQuestionDetail: (Long) -> Unit = {},
+    savedStateHandle: SavedStateHandle? = null,
+) {
     var selectedTab by remember { mutableStateOf(BottomNavigationType.QUESTION) }
 
     Scaffold(
@@ -41,6 +45,8 @@ fun MainScreen() {
     ) { paddingValues ->
         MainContent(
             selectedTab = selectedTab,
+            onNavigateToQuestionDetail = onNavigateToQuestionDetail,
+            savedStateHandle = savedStateHandle,
             modifier = Modifier.padding(paddingValues),
         )
     }
@@ -89,6 +95,8 @@ private fun BottomNavigationBar(
 @Composable
 private fun MainContent(
     selectedTab: BottomNavigationType,
+    onNavigateToQuestionDetail: (Long) -> Unit,
+    savedStateHandle: SavedStateHandle?,
     modifier: Modifier = Modifier,
 ) {
     Box(
@@ -97,8 +105,10 @@ private fun MainContent(
         when (selectedTab) {
             BottomNavigationType.QUESTION ->
                 QuestionScreen(
-                    onNavigateToDetail = {},
+                    onNavigateToDetail = onNavigateToQuestionDetail,
+                    savedStateHandle = savedStateHandle,
                 )
+
             BottomNavigationType.TEST -> TestScreen()
             BottomNavigationType.HISTORY -> HistoryScreen()
             BottomNavigationType.PROFILE -> ProfileScreen()

composeApp/src/commonMain/kotlin/com/peto/droidmorning/main/navigation/MainNavGraphContributor.kt

@@ -20,8 +20,13 @@ class MainNavGraphContributor : NavGraphContributor {
             route = graphRoute.route,
             startDestination = startDestination,
         ) {
-            composable(NavRoutes.Main.route) {
-                MainScreen()
+            composable(NavRoutes.Main.route) { backStackEntry ->
+                MainScreen(
+                    onNavigateToQuestionDetail = { questionId ->
+                        navController.navigate(NavRoutes.QuestionDetail.createRoute(questionId))
+                    },
+                    savedStateHandle = backStackEntry.savedStateHandle,
+                )
             }
         }
     }

composeApp/src/commonMain/kotlin/com/peto/droidmorning/navigation/NavRoutes.kt

@@ -1,7 +1,11 @@
 package com.peto.droidmorning.navigation
 
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.Transient
+
+@Serializable
 sealed class NavRoutes(
-    val route: String,
+    @Transient val route: String = "",
 ) {
     data object LoginGraph : NavRoutes("login_graph")
 
@@ -16,4 +20,17 @@ sealed class NavRoutes(
     data object History : NavRoutes("history")
 
     data object Profile : NavRoutes("profile")
+
+    data object QuestionDetailGraph : NavRoutes("question_detail_graph")
+
+    @Serializable
+    data class QuestionDetail(
+        val questionId: Long,
+    ) : NavRoutes(route = ROUTE) {
+        companion object {
+            const val ROUTE: String = "question_detail/{questionId}"
+
+            fun createRoute(questionId: Long): String = "question_detail/$questionId"
+        }
+    }
 }