[Feat/#63] 저장한·기록한 산책 루트 화면 ViewModel + 상태 관리 구조 적용

app/src/main/java/com/paw/key/presentation/ui/mypage/ArchivedCourseDetailScreen.kt

@@ -2,12 +2,10 @@ package com.paw.key.presentation.ui.mypage
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -16,27 +14,39 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.paw.key.core.designsystem.component.CourseDetail
 import com.paw.key.core.designsystem.component.ImageModal
 import com.paw.key.core.designsystem.component.PawkeyButton
 import com.paw.key.core.designsystem.component.TopBar
 import com.paw.key.core.designsystem.theme.PawKeyTheme
 import com.paw.key.core.designsystem.theme.White1
+import com.paw.key.presentation.ui.mypage.state.ArchivedDetailContract
+import com.paw.key.presentation.ui.mypage.viewmodel.ArchivedDetailViewModel
 
 @Composable
 fun ArchivedDetailRoute(
     navigateUp: () -> Unit,
+    navigateToWalk: () -> Unit,
     modifier: Modifier = Modifier,
+    viewModel: ArchivedDetailViewModel = hiltViewModel()
 ) {
+    val state = viewModel.state.collectAsStateWithLifecycle()
+
     ArchivedCourseDetailScreen(
+        state = state.value,
         navigateUp = navigateUp,
+        navigateToWalk = navigateToWalk,
         modifier = modifier
     )
 }
 
 @Composable
 fun ArchivedCourseDetailScreen(
+    state: ArchivedDetailContract.ArchivedDetailState,
     navigateUp: () -> Unit,
+    navigateToWalk: () -> Unit,
     modifier: Modifier = Modifier
 ){
     var isImageExpanded by remember { mutableStateOf(false) }
@@ -76,7 +86,7 @@ fun ArchivedCourseDetailScreen(
 
         if (isImageExpanded) {
             ImageModal(
-                imageUrl = "https://pawkey-server.com/image.jpg",
+                imageUrl = state.imageUrl,
                 onDismiss = { isImageExpanded = false }
             )
         }
@@ -87,6 +97,18 @@ fun ArchivedCourseDetailScreen(
 @Composable
 fun ArchivedCourseDetailPreview(){
     PawKeyTheme {
-        ArchivedCourseDetailScreen(navigateUp = {})
+        ArchivedCourseDetailScreen(state = ArchivedDetailContract.ArchivedDetailState(
+            title = "한강 산책로",
+            petName = "후추",
+            date = "2025/06/02",
+            location = "뚝섬유원지",
+            distance = "4.5km",
+            time = "1시간 30분 소요",
+            option = listOf("풍경이 좋아요", "조용해요", "길이 깨끗해요"),
+            imageUrl = "https://pawkey-server.com/image.jpg"
+        ),
+            navigateUp = {},
+            navigateToWalk = {}
+        )
     }
 }

app/src/main/java/com/paw/key/presentation/ui/mypage/ArchivedCourseListScreen.kt

@@ -7,26 +7,36 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.paw.key.core.designsystem.component.CourseCard
 import com.paw.key.core.designsystem.component.TopBar
 import com.paw.key.core.designsystem.theme.PawKeyTheme
 import com.paw.key.core.designsystem.theme.White1
+import com.paw.key.presentation.ui.mypage.state.ArchivedListContract
+import com.paw.key.presentation.ui.mypage.state.SavedListContract.CourseCardData
+import com.paw.key.presentation.ui.mypage.viewmodel.ArchivedListViewModel
 
 @Composable
 fun ArchivedCourseRoute(
     navigateUp: () -> Unit,
     navigateNext: () -> Unit,
     modifier: Modifier = Modifier,
+    viewModel: ArchivedListViewModel = hiltViewModel()
 ) {
+    val state = viewModel.state.collectAsStateWithLifecycle()
+
     ArchivedCourseListScreen(
+        state = state.value,
         navigateUp = navigateUp,
         navigateNext = navigateNext,
-    modifier = modifier
+        modifier = modifier
     )
 }
 
 @Composable
 fun ArchivedCourseListScreen(
+    state: ArchivedListContract.ArchivedListState,
     navigateUp: () -> Unit,
     navigateNext: () -> Unit,
     modifier: Modifier = Modifier
@@ -81,6 +91,21 @@ fun ArchivedCourseListScreen(
 @Composable
 fun ArchivedCourseListScreenPreview() {
     PawKeyTheme {
-        ArchivedCourseListScreen(navigateUp = {}, navigateNext = {})
+        ArchivedCourseListScreen(
+            state = ArchivedListContract.ArchivedListState(
+                courseList = listOf(
+                    ArchivedListContract.CourseCardData(
+                        title = "예시 산책로",
+                        petName = "하루",
+                        date = "2025/01/01",
+                        location = "강남",
+                        distance = "2.3km",
+                        time = "45분"
+                    )
+                )
+            ),
+            navigateUp = {},
+            navigateNext = {}
+        )
     }
 }

app/src/main/java/com/paw/key/presentation/ui/mypage/MyPageScreen.kt

@@ -19,9 +19,13 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.paw.key.R
 import com.paw.key.core.designsystem.component.SubChip
 import com.paw.key.core.designsystem.theme.PawKeyTheme
+import com.paw.key.presentation.ui.mypage.state.MyPageContract
+import com.paw.key.presentation.ui.mypage.viewmodel.MyPageViewModel
 
 @Composable
 fun MyPageRoute(
@@ -32,9 +36,13 @@ fun MyPageRoute(
     navigateArchivedCourse: () -> Unit,
     navigateSavedCourse: () -> Unit,
     snackBarHostState: SnackbarHostState,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    viewModel: MyPageViewModel = hiltViewModel()
 ) {
+    val state = viewModel.state.collectAsStateWithLifecycle()
+
     MyPageScreen(
+        state = state.value,
         paddingValues = paddingValues,
         navigateUp = navigateUp,
         navigateUserProfile = navigateUserProfile,
@@ -43,12 +51,12 @@ fun MyPageRoute(
         navigateSavedCourse = navigateSavedCourse,
         snackBarHostState = snackBarHostState,
         modifier = modifier
-
     )
 }
 
 @Composable
 fun MyPageScreen(
+    state: MyPageContract.MyPageState,
     paddingValues: PaddingValues,
     navigateUp: () -> Unit,
     navigateUserProfile: () -> Unit,
@@ -70,19 +78,23 @@ fun MyPageScreen(
                 style = PawKeyTheme.typography.head22B,
                 modifier = Modifier.padding(start = 16.dp, top = 16.dp, bottom = 12.dp)
             )
-            OwnerCard(ownerName = "김도기님", role = "견주", navigateUserProfile = navigateUserProfile)
-
+            OwnerCard(
+                ownerName = state.ownerName,
+                role = state.role,
+                navigateUserProfile = navigateUserProfile
+            )
             Spacer(modifier = Modifier.height(19.dp))
 
             PetCard(
-                name = "포비",
-                age = "12세",
-                gender = "여아",
-                tags = listOf("조금 느긋해요", "#오토바이소리", "#대형견"),
-                walkCount = "7회",
-                totalDistance = "14km",
+                name = state.petName,
+                age = state.petAge,
+                gender = state.petGender,
+                tags = state.petTags,
+                walkCount = state.walkCount,
+                totalDistance = state.totalDistance,
                 navigatePetProfile = navigatePetProfile
             )
+
             Spacer(modifier = Modifier.height(12.dp))
 
             WalkRouteList(
@@ -159,7 +171,7 @@ fun PetCard(
             )
             Text(
                 text = "반려견 프로필",
-                style = PawKeyTheme.typography.caption12Sb1,
+                style = PawKeyTheme.typography.body16Sb,
                 color = Color.White
             )
             Spacer(modifier = Modifier.weight(1f))
@@ -290,7 +302,16 @@ fun WalkRouteList(
 @Composable
 private fun MyPageScreenPreview() {
     PawKeyTheme {
-        MyPageScreen(
+        MyPageScreen(state = MyPageContract.MyPageState(
+            ownerName = "김도기님",
+            role = "견주",
+            petName = "포비",
+            petAge = "12세",
+            petGender = "여아",
+            petTags = listOf("조금 느긋해요", "#오토바이소리", "#대형견"),
+            walkCount = "7회",
+            totalDistance = "14km"
+        ),
             paddingValues = PaddingValues(),
             navigateUp = {},
             navigateUserProfile = {},

app/src/main/java/com/paw/key/presentation/ui/mypage/PetProfileScreen.kt

@@ -16,30 +16,41 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.paw.key.R
 import com.paw.key.core.designsystem.component.TopBar
 import com.paw.key.core.designsystem.theme.PawKeyTheme
+import com.paw.key.presentation.ui.mypage.state.PetProfileContract
+import com.paw.key.presentation.ui.mypage.viewmodel.PetProfileViewModel
 
 @Composable
 fun PetProfileRoute(
     navigateUp : () -> Unit,
     modifier: Modifier = Modifier,
+    viewModel: PetProfileViewModel = hiltViewModel()
 ) {
+    val state = viewModel.state.collectAsStateWithLifecycle()
+
     PetProfileScreen(
+        state = state.value,
         navigateUp = navigateUp,
         modifier = modifier
     )
 }
 
 @Composable
 fun PetProfileScreen(
+    state: PetProfileContract.PetProfileState,
     navigateUp: () -> Unit,
+    modifier: Modifier = Modifier,
+    imageUrl: String? = null,
     name: String = "까루",
     gender: String = "남아",
     breed: String = "코리안 숏헤어",
     age: String = "4세",
-    personality: String = "활동적",
-    modifier: Modifier = Modifier
+    energyLevel: String = "활동적이에요",
+    socialLevel: String = "불편해해요"
 ) {
     Column(
         modifier = modifier
@@ -58,6 +69,7 @@ fun PetProfileScreen(
                 .clip(CircleShape)
                 .border(2.dp, PawKeyTheme.colors.green500, CircleShape)
         ) {
+            // TODO: imageUrl AsyncImage로 URL 로딩
             Image(
                 painter = painterResource(id = R.drawable.profile),
                 contentDescription = null,
@@ -106,7 +118,7 @@ fun PetProfileScreen(
                     color = PawKeyTheme.colors.gray600
                 )
                 Text(
-                    text = "활동적이에요",
+                    text = energyLevel,
                     style = PawKeyTheme.typography.head18Sb,
                     color = PawKeyTheme.colors.green500
                 )
@@ -124,7 +136,7 @@ fun PetProfileScreen(
                     color = PawKeyTheme.colors.gray600
                 )
                 Text(
-                    text = "불편해해요",
+                    text = socialLevel,
                     style = PawKeyTheme.typography.head18Sb,
                     color = PawKeyTheme.colors.green500
                 )
@@ -164,7 +176,15 @@ fun PetProfileItem(
 fun PetProfileScreenPreview() {
     PawKeyTheme {
         PetProfileScreen(
-            navigateUp = {},
+            state = PetProfileContract.PetProfileState(
+                name = "까루",
+                gender = "남아",
+                breed = "코리안 숏헤어",
+                age = "4세",
+                energyLevel = "활동적이에요",
+                socialLevel = "불편해해요"
+            ),
+            navigateUp = {}
         )
     }
 }