[UI/#37] 상세페이지 화면 구현

app/src/main/java/com/napzak/market/core/designsystem/component/snackbar/CommonSnackBar.kt

@@ -0,0 +1,113 @@
+package com.napzak.market.core.designsystem.component.snackbar
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.napzak.market.R
+import com.napzak.market.core.designsystem.theme.NapzakMarketTheme
+
+/**
+ * 공통 SnackBar 컴포넌트.
+ *
+ * 메시지와 아이콘을 포함한 스낵바 메시지를 표시합니다.
+ * 사용자 지정 배경색, 텍스트 색상, 텍스트 스타일, 모양 등을 지원하며, 모든 인자는 명시적으로 전달해야 합니다.
+ *
+ * @param message 표시할 메시지
+ * @param icon 아이콘 리소스, null이면 아이콘이 안보임
+ * @param modifier Modifier
+ * @param backgroundColor 배경색
+ * @param textColor 텍스트 색상
+ * @param textStyle 텍스트 스타일
+ * @param shape 모양
+ */
+@Composable
+fun CommonSnackBar(
+    message: String,
+    backgroundColor: Color,
+    textColor: Color,
+    textStyle: TextStyle,
+    modifier: Modifier = Modifier,
+    icon: ImageVector? = null,
+    shape: Shape = RoundedCornerShape(12.dp),
+    ) {
+    Box(
+        modifier = modifier
+            .background(
+                color = backgroundColor,
+                shape = shape,
+            )
+            .padding(
+                horizontal = 20.dp,
+                vertical = 12.dp,
+            ),
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            if(icon != null) {
+                Icon(
+                    imageVector = icon,
+                    contentDescription = null,
+                    tint = Color.Unspecified,
+                    modifier = Modifier.size(18.dp),
+                )
+                Spacer(modifier = Modifier.width(8.dp))
+            }
+            Text(
+                text = message,
+                style = textStyle,
+                color = textColor,
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun CommonSnackBarPreview() {
+    NapzakMarketTheme {
+        CommonSnackBar(
+            message = "상품을 찜했어요!",
+            icon = ImageVector.vectorResource(id = R.drawable.ic_heart_toast_18),
+            backgroundColor = NapzakMarketTheme.colors.black70,
+            textColor = NapzakMarketTheme.colors.white,
+            textStyle = NapzakMarketTheme.typography.bodyMedium14,
+            shape = RoundedCornerShape(12.dp),
+            modifier = Modifier
+                .padding(16.dp)
+                .width(320.dp)
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun CommonSnackBarWithoutIconPreview() {
+    NapzakMarketTheme {
+        CommonSnackBar(
+            message = "버튼을 한번 더 누르시면 종료 돼요.",
+            backgroundColor = NapzakMarketTheme.colors.black70,
+            textColor = NapzakMarketTheme.colors.white,
+            textStyle = NapzakMarketTheme.typography.bodyMedium14,
+            shape = RoundedCornerShape(12.dp),
+            modifier = Modifier
+                .padding(16.dp)
+                .width(320.dp)
+        )
+    }
+}

app/src/main/java/com/napzak/market/core/type/ProductConditionType.kt

@@ -1,10 +1,20 @@
 package com.napzak.market.core.type
 
-enum class ProductConditionType(
-    val condition: String,
-) {
-    UNUSED(condition = "미개봉"),
-    GOOD(condition = "아주 좋은 상태"),
-    SOSO(condition = "약간의 사용감"),
-    USED(condition = "사용감"),
-}
+enum class ProductConditionType(val label: String) {
+    GOOD("아주 좋은 상태"),
+    UNUSED("미개봉"),
+    SOSO("약간의 사용감"),
+    USED("사용감 있음");
+
+    companion object {
+        fun fromCondition(condition: String?): ProductConditionType {
+            return when (condition) {
+                GOOD.label -> GOOD
+                UNUSED.label -> UNUSED
+                SOSO.label -> SOSO
+                USED.label -> USED
+                else -> UNUSED
+            }
+        }
+    }
+}

app/src/main/java/com/napzak/market/presentation/chat/navigation/ChatNavigation.kt

@@ -0,0 +1,29 @@
+package com.napzak.market.presentation.chat.navigation
+
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavController
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavOptions
+import androidx.navigation.compose.composable
+import com.napzak.market.core.common.navigation.Route
+import com.napzak.market.presentation.chat.screen.ItemChatRoute
+import kotlinx.serialization.Serializable
+
+fun NavController.navigateToItemChat(navOptions: NavOptions? = null) {
+    navigate(ItemChat, navOptions)
+}
+
+fun NavGraphBuilder.itemChatGraph(
+    onNavigateUp: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    composable<ItemChat> {
+        ItemChatRoute(
+            modifier = modifier,
+            onNavigateUp = onNavigateUp,
+        )
+    }
+}
+
+@Serializable
+data object ItemChat : Route

app/src/main/java/com/napzak/market/presentation/chat/screen/ChatScreen.kt

@@ -1,19 +1,22 @@
 package com.napzak.market.presentation.chat.screen
 
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.napzak.market.R
 import com.napzak.market.core.designsystem.theme.NapzakMarketTheme
-import androidx.compose.material3.Text
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.res.vectorResource
 
 /**
  * 채팅 화면 하단 바를 표시하는 컴포넌트.
@@ -30,9 +33,9 @@ fun ChatScreen() {
             verticalArrangement = Arrangement.Center,
         ) {
             Icon(
-                imageVector = ImageVector.vectorResource(R.drawable.img_chat_ready),
+                painter = painterResource(R.drawable.img_chat_ready),
                 contentDescription = stringResource(R.string.loading_ready_image_description),
-                tint = Color.Unspecified
+                tint = Color.Unspecified,
             )
 
             Spacer(modifier = Modifier.height(20.dp))

app/src/main/java/com/napzak/market/presentation/chat/screen/ItemChatScreen.kt

@@ -25,6 +25,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -36,36 +37,41 @@ import com.napzak.market.core.designsystem.theme.NapzakMarketTheme
 import com.napzak.market.presentation.chat.component.ChatInfoSection
 import com.napzak.market.presentation.chat.type.ChatType
 
-/**
- * 채팅 화면 컴포넌트.
- *
- * 구매 또는 판매 채팅 유형에 따라 제목, 설명, 가격 정보를 표시합니다.
- * 필요에 따라 가격 레이블을 추가로 표시할 수 있습니다.
- *
- * @param chatType 채팅의 유형 (구매 또는 판매)
- * @param title 채팅 화면 상단에 표시될 제목 텍스트
- * @param description 채팅 화면 상단에 표시될 설명 텍스트
- * @param price 채팅 화면 상단에 표시될 가격 정보 텍스트
- * @param showPriceLabel 가격 앞에 레이블을 표시할지 여부 (true: 레이블 표시, false: 레이블 숨김)
- */
+@Composable
+fun ItemChatRoute(
+    modifier: Modifier = Modifier,
+    onNavigateUp: () -> Unit = {},
+    ) {
+    ItemChatScreen(
+        chatType = ChatType.BUY,
+        title = stringResource(id = R.string.chat_screen_title_buy),
+        description = stringResource(id = R.string.chat_screen_description_buy),
+        price = stringResource(id = R.string.chat_screen_price_buy),
+        showPriceLabel = true,
+        onBackClick = onNavigateUp,
+        modifier = modifier,
+    )
+}
 
 @Composable
 fun ItemChatScreen(
     chatType: ChatType,
     title: String,
     description: String,
     price: String,
-    showPriceLabel: Boolean
+    showPriceLabel: Boolean,
+    onBackClick: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
-    Box(modifier = Modifier
-        .fillMaxSize()
-        .background(NapzakMarketTheme.colors.white)) {
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+            .background(NapzakMarketTheme.colors.white),
+    ) {
         Column(modifier = Modifier.fillMaxSize()) {
             BackTopBar(
                 title = title,
-                onBackClick = {
-                    // TODO: 뒤로가기 액션 구현 필요
-                },
+                onBackClick = onBackClick,
                 modifier = Modifier.fillMaxWidth(),
                 textStyle = NapzakMarketTheme.typography.titleSemi18,
                 backgroundColor = NapzakMarketTheme.colors.white,
@@ -92,7 +98,7 @@ fun ItemChatScreen(
             ) {
                 Column(horizontalAlignment = Alignment.CenterHorizontally) {
                     Image(
-                        imageVector = ImageVector.vectorResource(id = R.drawable.img_chat_background),
+                        painter = painterResource(id = R.drawable.img_chat_background),
                         contentDescription = stringResource(id = R.string.chat_background_image_description),
                     )
                 }
@@ -135,7 +141,7 @@ fun ItemChatScreen(
                     onValueChange = {},
                     placeholder = {
                         Text(
-                            text = "메시지를 입력하세요.",
+                            text = stringResource(id = R.string.chat_message_placeholder),
                             color = NapzakMarketTheme.colors.gray400,
                             style = NapzakMarketTheme.typography.bodyMedium14,
                         )
@@ -170,7 +176,8 @@ fun ChatScreenBuyPreview() {
         title = "납작한 외계인",
         description = "양스타 토모에 히요리 이츠누이 함께",
         price = "100,000원대",
-        showPriceLabel = true
+        showPriceLabel = true,
+        onBackClick = {}
     )
 }
 
@@ -182,6 +189,7 @@ fun ChatScreenSellPreview() {
         title = "납작한 외계인",
         description = "딸기 마이멜로디 마스코트 인형",
         price = "35,000원",
-        showPriceLabel = false
+        showPriceLabel = false,
+        onBackClick = {}
     )
 }