[Feat/#18] : home view 생성, component 작업

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

@@ -60,7 +60,7 @@ fun PawkeyButton(
             text = text,
             modifier = Modifier
                 .padding(vertical = 18.dp),
-            style = PawKeyTheme.typography.title2Sb15
+            style = PawKeyTheme.typography.body16Sb
         )
     }
 }

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

@@ -36,7 +36,7 @@ fun SubChip(
         Text(
             text = text,
             color = PawKeyTheme.colors.gray300,
-            style = PawKeyTheme.typography.body7R13
+            style = PawKeyTheme.typography.body14M
         )
     }
 

app/src/main/java/com/paw/key/presentation/ui/home/HomeScreen.kt

@@ -1,13 +1,14 @@
 package com.paw.key.presentation.ui.home
 
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.SnackbarHostState
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import com.paw.key.R
+import com.paw.key.presentation.ui.home.component.TopBar
 
 @Composable
 fun HomeRoute (
@@ -35,11 +36,17 @@ fun HomeScreen (
     snackBarHostState: SnackbarHostState,
     modifier: Modifier = Modifier
 ) {
-    // Todo : 변경 예정
-    Text(
-        text = stringResource(R.string.ic_home_description),
+
+    Column (
         modifier = modifier
-    )
+            .padding(paddingValues)
+            .fillMaxSize()
+
+    ){
+        TopBar(
+            location = "강남구 역삼동"
+        )
+    }
 }
 
 @Preview

app/src/main/java/com/paw/key/presentation/ui/home/component/HistoryCard.kt

@@ -0,0 +1,148 @@
+package com.paw.key.presentation.ui.home.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+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.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.paw.key.R
+import com.paw.key.core.designsystem.theme.PawKeyTheme
+
+
+@Preview
+@Composable
+private fun PreviewHistoryCard() {
+    PawKeyTheme{
+        HistoryCard()
+    }
+
+}
+
+
+@Composable
+fun HistoryCard(
+
+){
+
+    Box (
+        modifier = Modifier
+            .width(298.dp)
+            .height(343.dp)
+            .background(
+                color=PawKeyTheme.colors.white2
+            )
+            .clip(RoundedCornerShape(12.dp))
+
+    ){
+        Box(
+            modifier=Modifier
+                .fillMaxWidth()
+                .height(210.dp)
+        ) {
+            Column (
+
+            ){
+                HistoryTop()
+                Box(
+
+                ){
+                    Spacer(modifier= Modifier.height(114.dp))
+                    Box(
+
+                    ){
+                        InfoColumn(location = "강남구 역삼동", date="2025.06.26(금)", time="23:20-23:30")
+                    }
+                }
+
+            }
+
+        }
+
+    }
+}
+
+@Composable
+fun HistoryTop(
+
+){
+    Row (
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(41.dp)
+            .background(color=PawKeyTheme.colors.beige400)
+            .padding(horizontal = 16.dp)
+            .clip(RoundedCornerShape(
+                topStart = 12.dp,
+                topEnd = 12.dp
+            ))
+    ){
+        Text(
+            text="최근산책",
+            color = PawKeyTheme.colors.white1,
+            style = PawKeyTheme.typography.body14Sb
+        )
+    }
+
+}
+
+@Composable
+fun InfoColumn(
+    location : String,
+    date : String,
+    time : String
+){
+    Column (
+        verticalArrangement = Arrangement.Center
+
+    ){
+        Row(
+
+        ){
+            Icon(
+                painter = painterResource(id = R.drawable.ic_home_location),
+                contentDescription = null,
+                tint = Color.Unspecified
+            )
+            Text(
+                text=location
+            )
+
+        }
+        Row(
+
+        ){
+            Icon(
+                painter = painterResource(id = R.drawable.ic_home_location),
+                contentDescription = null,
+                tint = Color.Unspecified
+            )
+            Text(
+                text = date
+            )
+            Text(
+                text=time
+            )
+
+        }
+
+
+    }
+
+}

app/src/main/java/com/paw/key/presentation/ui/home/component/TopBar.kt

@@ -0,0 +1,111 @@
+package com.paw.key.presentation.ui.home.component
+
+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.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.paw.key.R
+import com.paw.key.core.designsystem.theme.PawKeyTheme
+
+@Preview
+@Composable
+private fun PreviewTopBar() {
+    PawKeyTheme {
+        TopBar(
+            location = "강남구 역삼동"
+        )
+
+    }
+
+}
+
+
+@Composable
+fun TopBar(
+    location: String,
+) {
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(47.dp)
+            .background(color = PawKeyTheme.colors.black),
+        shape = RoundedCornerShape(
+            bottomStart = 15.dp
+        ),
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .fillMaxWidth()
+                .fillMaxHeight()
+                .background(color = PawKeyTheme.colors.black)
+                .padding(horizontal = 16.dp, vertical = 12.dp)
+        ) {
+            DateChip(text = "D+36",
+                modifier = Modifier.align(Alignment.CenterVertically))
+            Text(
+                text = "연속 산책",
+                modifier = Modifier.padding(start = 4.dp),
+                color = PawKeyTheme.colors.white1,
+                style = PawKeyTheme.typography.body14M
+            )
+            Spacer(modifier = Modifier.weight(1f))
+            Icon(
+                painter = painterResource(id = R.drawable.ic_home_location),
+                contentDescription = null,
+                tint = Color.Unspecified
+            )
+            Text(
+                text = location,
+                modifier = Modifier
+                    .padding(horizontal = 2.dp),
+                color = PawKeyTheme.colors.white1,
+                style = PawKeyTheme.typography.body14Sb
+            )
+            Icon(
+                painter = painterResource(id = R.drawable.ic_home_under_arrow),
+                contentDescription = null,
+                tint = Color.Unspecified
+            )
+
+        }
+
+    }
+
+}
+
+@Composable
+fun DateChip(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier
+            .background(
+                color = PawKeyTheme.colors.beige400,
+                shape = RoundedCornerShape(15.dp)
+            )
+            .padding(horizontal = 12.dp, vertical = 2.dp)
+    ) {
+        Text(
+            text = text,
+            color = PawKeyTheme.colors.white1,
+            style = PawKeyTheme.typography.caption12Sb1
+        )
+    }
+}

app/src/main/java/com/paw/key/presentation/ui/home/component/TrackingCard.kt

@@ -0,0 +1,41 @@
+package com.paw.key.presentation.ui.home.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.paw.key.R
+import com.paw.key.core.designsystem.theme.PawKeyTheme
+
+
+@Preview
+@Composable
+private fun PreviewTrackingCard() {
+    PawKeyTheme {
+        TrackingCard(
+        )
+    }
+
+}
+
+
+@Composable
+fun TrackingCard(
+
+){
+    Box(
+        modifier = Modifier
+            .width(235.dp)
+            .height(110.dp)
+            .background(
+                color= PawKeyTheme.colors.black)
+    ) {
+
+    }
+}