[mod/#154] 지도 내용 및 전체적인 뷰 개선

app/src/main/java/com/paw/key/core/designsystem/component/CourseDetail.kt

@@ -46,7 +46,7 @@ import com.paw.key.R
 import com.paw.key.core.designsystem.theme.Gray100
 import com.paw.key.core.designsystem.theme.PawKeyTheme
 import com.paw.key.core.extension.noRippleClickable
-import com.paw.key.domain.model.entity.walklist.CategoryTop3Entity
+import com.paw.key.domain.entity.walklist.CategoryTop3Entity
 
 @OptIn(ExperimentalLayoutApi::class)
 @Composable

app/src/main/java/com/paw/key/core/designsystem/component/DogkyFilterBadge.kt

@@ -39,14 +39,14 @@ fun DogkyFilterBadge(
             )
             .clickable(
                 onClick = onLocationClick
-            ),
+            )
+            .padding(horizontal = horizontalPadding.dp, vertical = verticalPadding.dp),
         contentAlignment = Alignment.Center
     ) {
         Text(
             text = location,
             style = PawKeyTheme.typography.buttonSmall,
             color = PawKeyTheme.colors.primary,
-            modifier = Modifier.padding(horizontal = horizontalPadding.dp, vertical = verticalPadding.dp)
         )
     }
 }
@@ -56,8 +56,10 @@ fun DogkyFilterBadge(
 private fun RegionBadgePreview() {
     PawKeyTheme {
         DogkyFilterBadge(
-            location = "w적음",
-            onLocationClick = {}
+            location = "강남구 역삼동",
+            onLocationClick = {},
+            horizontalPadding = 6,
+            verticalPadding = 5,
         )
     }
 }

app/src/main/java/com/paw/key/core/designsystem/component/DokiBorderButton.kt

@@ -0,0 +1,69 @@
+package com.paw.key.core.designsystem.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.paw.key.core.designsystem.theme.PawKeyTheme
+import com.paw.key.core.extension.noRippleClickable
+
+@Composable
+fun DokiBorderButton(
+    text: String,
+    enabled: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val textColor = when {
+        enabled -> PawKeyTheme.colors.primary
+        else -> PawKeyTheme.colors.defaultMiddle
+    }
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .border(
+                width = 1.dp,
+                color = textColor,
+                shape = RoundedCornerShape(8.dp)
+            )
+            .background(
+                color = PawKeyTheme.colors.background,
+                shape = RoundedCornerShape(8.dp)
+            )
+            .noRippleClickable {
+                if (enabled) onClick()
+            }
+            .padding(vertical = 18.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = text,
+            style = PawKeyTheme.typography.mainButtonActive,
+            color = textColor,
+            modifier = Modifier.fillMaxWidth(),
+            textAlign = TextAlign.Center
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun DokiBorderButtonPreview() {
+    PawKeyTheme {
+        DokiBorderButton(
+            text = "산책 기록하기",
+            enabled = true,
+            onClick = {}
+        )
+    }
+}

app/src/main/java/com/paw/key/core/designsystem/component/DogkyButton.kt → app/src/main/java/com/paw/key/core/designsystem/component/DokiButton.kt

@@ -2,6 +2,7 @@ package com.paw.key.core.designsystem.component
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -15,11 +16,12 @@ import com.paw.key.core.designsystem.theme.PawKeyTheme
 import com.paw.key.core.extension.noRippleClickable
 
 @Composable
-fun DogkyButton(
+fun DokiButton(
     text: String,
     enabled: Boolean,
     onClick: () -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    isDialog: Boolean = false,
 ) {
     val backgroundColor = when {
         enabled -> PawKeyTheme.colors.primary
@@ -31,19 +33,29 @@ fun DogkyButton(
         else -> PawKeyTheme.colors.defaultMiddle
     }
 
+    val typo = when {
+        isDialog -> PawKeyTheme.typography.subTitle
+        enabled -> PawKeyTheme.typography.mainButtonActive
+        else -> PawKeyTheme.typography.mainButtonDefault
+    }
+
     Box(
         modifier = modifier
             .fillMaxWidth()
             .background(backgroundColor, shape = RoundedCornerShape(8.dp))
-            .noRippleClickable {
-                if (enabled) onClick()
-            }
-            .padding(vertical = 14.dp),
+            .noRippleClickable(onClick = onClick)
+            .padding(
+                if (isDialog) {
+                    PaddingValues(horizontal = 6.dp, vertical = 17.dp)
+                } else {
+                    PaddingValues(vertical = 18.dp)
+                }
+            ),
         contentAlignment = Alignment.Center
     ) {
         Text(
             text = text,
-            style = PawKeyTheme.typography.mainButtonDefault,
+            style = typo,
             color = textColor
         )
     }
@@ -53,9 +65,9 @@ fun DogkyButton(
 @Composable
 private fun DogkyButtonPreview() {
     PawKeyTheme {
-        DogkyButton(
-            text = "",
-            enabled = true,
+        DokiButton(
+            text = "산책 종료하기",
+            enabled = false,
             onClick = {}
         )
     }

app/src/main/java/com/paw/key/core/designsystem/component/ImageModal.kt

@@ -1,28 +1,17 @@
 package com.paw.key.core.designsystem.component
 
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Close
-import androidx.compose.material3.Icon
 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.platform.LocalContext
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import coil.compose.AsyncImage
-
 import androidx.compose.ui.window.Dialog
-import coil.request.ImageRequest
-import com.paw.key.R
+import coil.compose.AsyncImage
 import com.paw.key.core.designsystem.theme.PawKeyTheme
 
 @Composable
@@ -67,4 +56,4 @@ fun ImageModalPreview() {
             onDismiss = {}
             )
     }
-}
+}

app/src/main/java/com/paw/key/core/designsystem/component/InfoChip.kt

@@ -0,0 +1,63 @@
+package com.paw.key.core.designsystem.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.paw.key.core.designsystem.theme.PawKeyTheme
+
+@Composable
+fun InfoChip(
+    text: String,
+    modifier: Modifier = Modifier,
+    isActionChip: Boolean = false,
+) {
+    val backGroundColor = if (isActionChip) {
+        PawKeyTheme.colors.primary
+    } else {
+        PawKeyTheme.colors.primaryGra1
+    }
+
+    val textColor = if (isActionChip) {
+        PawKeyTheme.colors.background
+    } else {
+        PawKeyTheme.colors.primary
+    }
+
+    val fontStyle = if (isActionChip) {
+        PawKeyTheme.typography.bodySmall
+    } else {
+        PawKeyTheme.typography.subButtonDefault
+    }
+
+    Box (
+        modifier = modifier
+            .background(
+                color = backGroundColor,
+                shape = RoundedCornerShape(8.dp)
+            )
+            .padding(horizontal = 8.dp, vertical = 4.dp)
+    ) {
+        Text(
+            text = text,
+            color = textColor,
+            style = fontStyle
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun InfoChipPreview() {
+    PawKeyTheme {
+        InfoChip(
+            text = "2.2 km",
+            isActionChip = true
+        )
+    }
+}

app/src/main/java/com/paw/key/core/designsystem/component/LoadingScreen.kt

@@ -1,12 +1,12 @@
 package com.paw.key.core.designsystem.component
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 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.CircularProgressIndicator
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -17,19 +17,22 @@ import com.paw.key.core.designsystem.theme.PawKeyTheme
 @Composable
 fun LoadingScreen() {
     Box(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .fillMaxSize()
+            .background(
+                color = PawKeyTheme.colors.contents.copy(alpha = 0.5f)
+            ),
         contentAlignment = Alignment.Center
     ) {
         Column(
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
             CircularProgressIndicator(
-                color = PawKeyTheme.colors.green500
+                color = PawKeyTheme.colors.primary
             )
 
             Spacer(modifier = Modifier.height(8.dp))
 
-            Text("현재 위치를 가져오는 중...")
         }
     }
 }

app/src/main/java/com/paw/key/core/designsystem/component/SubChip.kt

@@ -16,7 +16,7 @@ import com.paw.key.core.extension.noRippleClickable
 @Composable
 private fun PreviewSubChip() {
     SubChip(
-        text = "4km",
+        text = "+ 9",
         onClick = {}
     )
 }
@@ -26,21 +26,25 @@ fun SubChip(
     text: String,
     modifier: Modifier = Modifier,
     onClick : () -> Unit = {},
+    isDividerChip: Boolean = false, //true -> detail의 16dp
     isActionChip: Boolean = false, //true -> 회색
 ) {
     Box(
         modifier = modifier
             .background(
-                color = if (isActionChip) PawKeyTheme.colors.white2 else PawKeyTheme.colors.green50,
-                shape = RoundedCornerShape(20.dp)
+                color = if (isActionChip) PawKeyTheme.colors.primaryGra1 else PawKeyTheme.colors.defaultButton,
+                shape = if (isActionChip) RoundedCornerShape(8.dp) else RoundedCornerShape(36.dp)
             )
             .noRippleClickable(onClick = onClick)
-            .padding(horizontal = 10.dp, vertical = 4.dp)
+            .then(
+                if (isDividerChip) Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
+                else Modifier.padding(8.dp)
+            )
     ) {
         Text(
             text = text,
-            color = if (isActionChip) PawKeyTheme.colors.gray700 else PawKeyTheme.colors.green600,
-            style = PawKeyTheme.typography.caption12R
+            color = if (isActionChip) PawKeyTheme.colors.primary else PawKeyTheme.colors.defaultMiddle,
+            style = if (isActionChip) PawKeyTheme.typography.subButtonActive else PawKeyTheme.typography.buttonSmall
         )
     }
 }