[Feat/#12] 공통 component 생성

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

@@ -0,0 +1,67 @@
+package com.paw.key.core.designsystem.component
+
+import androidx.compose.foundation.layout.Column
+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.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+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
+
+
+@Preview(showBackground = true)
+@Composable
+private fun PreviewPawkeyButton() {
+    PawKeyTheme {
+        Column {
+            PawkeyButton(
+                text = "신규 계정으로 회원가입",
+                enabled = true,
+                onClick = {}
+            )
+            Spacer(modifier = Modifier.height(12.dp))
+            PawkeyButton(
+                text = "신규 계정으로 회원가입",
+                enabled = false,
+                onClick = {}
+            )
+        }
+    }
+}
+
+@Composable
+fun PawkeyButton(
+    text: String,
+    enabled: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Button(
+        onClick = onClick,
+        enabled = enabled,
+        modifier = modifier
+            .fillMaxWidth(),
+        shape = RoundedCornerShape(8.dp),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = PawKeyTheme.colors.beige500,
+            contentColor = PawKeyTheme.colors.white1,
+            disabledContainerColor = PawKeyTheme.colors.gray200,
+            disabledContentColor = PawKeyTheme.colors.white1
+        )
+    ) {
+        Text(
+            text = text,
+            modifier = Modifier
+                .padding(vertical = 18.dp),
+            style = PawKeyTheme.typography.title2Sb15
+        )
+    }
+}
+

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

@@ -0,0 +1,43 @@
+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
+
+@Preview
+@Composable
+private fun PreviewSubChip() {
+    SubChip(
+        text = "4km"
+    )
+
+}
+
+@Composable
+fun SubChip(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier
+            .background(
+                color = PawKeyTheme.colors.white2,
+                shape = RoundedCornerShape(4.dp)
+            )
+            .padding(horizontal = 6.dp, vertical = 4.dp)
+    ) {
+        Text(
+            text = text,
+            color = PawKeyTheme.colors.gray300,
+            style = PawKeyTheme.typography.body7R13
+        )
+    }
+
+}

app/src/main/java/com/paw/key/core/designsystem/theme/Color.kt

@@ -20,7 +20,6 @@ val Beige900 = Color(0xFF603B2E)
 val Beige950 = Color(0xFF331D17)
 
 // Gray Scale
-val Gray0 = Color(0xFFFFFFFF)
 val Gray5 = Color(0xFFFCFCFC)
 val Gray25 = Color(0xFFF8F8F8)
 val Gray50 = Color(0xFFEBEBEB)
@@ -35,6 +34,16 @@ val Gray800 = Color(0xFF3D3D3D)
 val Gray900 = Color(0xFF292929)
 val Gray950 = Color(0xFF161616)
 
+//BW
+val White1 = Color(0xFFFFFFFF)
+val White2 = Color(0xFFF5F5F5)
+val Black = Color(0xFF1E1E1E)
+
+//System Color
+val System_red = Color(0xFFEB210F)
+val System_green = Color(0xFF40C927)
+
+
 @Stable
 class PawKeyColors(
     beige50: Color,
@@ -49,7 +58,6 @@ class PawKeyColors(
     beige900: Color,
     beige950: Color,
 
-    gray0: Color,
     gray5: Color,
     gray25: Color,
     gray50: Color,
@@ -63,6 +71,13 @@ class PawKeyColors(
     gray800: Color,
     gray900: Color,
     gray950: Color,
+
+    white1: Color,
+    white2: Color,
+    black: Color,
+
+    system_red: Color,
+    system_green: Color,
 ) {
     var beige50: Color by mutableStateOf(beige50)
         private set
@@ -87,8 +102,7 @@ class PawKeyColors(
     var beige950: Color by mutableStateOf(beige950)
         private set
 
-    var gray0: Color by mutableStateOf(gray0)
-        private set
+
     var gray5: Color by mutableStateOf(gray5)
         private set
     var gray25: Color by mutableStateOf(gray25)
@@ -115,6 +129,17 @@ class PawKeyColors(
         private set
     var gray950: Color by mutableStateOf(gray950)
         private set
+    var white1: Color by mutableStateOf(white1)
+        private set
+    var white2: Color by mutableStateOf(white2)
+        private set
+    var black: Color by mutableStateOf(black)
+        private set
+    var system_red: Color by mutableStateOf(system_red)
+        private set
+    var system_green: Color by mutableStateOf(system_green)
+        private set
+
 
     fun copy(
         beige50: Color = this.beige50,
@@ -129,7 +154,6 @@ class PawKeyColors(
         beige900: Color = this.beige900,
         beige950: Color = this.beige950,
 
-        gray0: Color = this.gray0,
         gray5: Color = this.gray5,
         gray25: Color = this.gray25,
         gray50: Color = this.gray50,
@@ -143,7 +167,16 @@ class PawKeyColors(
         gray800: Color = this.gray800,
         gray900: Color = this.gray900,
         gray950: Color = this.gray950,
-    ): PawKeyColors = PawKeyColors(
+
+        white1: Color = this.white1,
+        white2: Color = this.white1,
+        black: Color = this.black,
+
+        system_red: Color = this.system_red,
+        system_green: Color = this.system_green,
+
+
+        ): PawKeyColors = PawKeyColors(
         beige50 = beige50,
         beige100 = beige100,
         beige200 = beige200,
@@ -156,7 +189,6 @@ class PawKeyColors(
         beige900 = beige900,
         beige950 = beige950,
 
-        gray0 = gray0,
         gray5 = gray5,
         gray25 = gray25,
         gray50 = gray50,
@@ -170,6 +202,13 @@ class PawKeyColors(
         gray800 = gray800,
         gray900 = gray900,
         gray950 = gray950,
+
+        white1 = white1,
+        white2 = white2,
+        black = black,
+
+        system_red = system_red,
+        system_green = system_green
     )
 
     fun update(other: PawKeyColors) {
@@ -184,7 +223,6 @@ class PawKeyColors(
         beige800 = other.beige800
         beige900 = other.beige900
 
-        gray0 = other.gray0
         gray5 = other.gray5
         gray25 = other.gray25
         gray50 = other.gray50
@@ -198,6 +236,13 @@ class PawKeyColors(
         gray800 = other.gray800
         gray900 = other.gray900
         gray950 = other.gray950
+
+        white1 = other.white1
+        white2 = other.white2
+        black = other.black
+
+        system_red = other.system_red
+        system_green = other.system_green
     }
 }
 
@@ -214,7 +259,6 @@ fun pawKeyColors(
     beige900: Color = Beige900,
     beige950: Color = Beige950,
 
-    gray0: Color = Gray0,
     gray5: Color = Gray5,
     gray25: Color = Gray25,
     gray50: Color = Gray50,
@@ -229,7 +273,15 @@ fun pawKeyColors(
     gray900: Color = Gray900,
     gray950: Color = Gray950,
 
-) = PawKeyColors(
+    white1: Color = White1,
+    white2: Color = White2,
+    black: Color = Black,
+
+    system_red: Color = System_red,
+    system_green: Color = System_green,
+
+
+    ) = PawKeyColors(
     beige50 = beige50,
     beige100 = beige100,
     beige200 = beige200,
@@ -242,7 +294,6 @@ fun pawKeyColors(
     beige900 = beige900,
     beige950 = beige950,
 
-    gray0 = gray0,
     gray5 = gray5,
     gray25 = gray25,
     gray50 = gray50,
@@ -257,4 +308,12 @@ fun pawKeyColors(
     gray900 = gray900,
     gray950 = gray950,
 
+    white1 = white1,
+    white2 = white2,
+    black = black,
+
+    system_red = system_red,
+    system_green = system_green
+
+
 )

app/src/main/res/drawable/baseline_home_filled_24.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M9.25,3.515C10.5,2.546 12.549,2.495 13.849,3.406H13.85L19.61,7.437C20.039,7.737 20.459,8.24 20.772,8.841C21.086,9.442 21.26,10.075 21.26,10.602V17.382C21.259,19.517 19.526,21.252 17.39,21.252H6.61C4.477,21.252 2.74,19.51 2.74,17.372V10.472C2.74,9.985 2.896,9.384 3.182,8.803C3.468,8.222 3.851,7.727 4.241,7.423L9.249,3.514L9.25,3.515ZM12,13.502C11.176,13.502 10.5,14.178 10.5,15.002V18.002C10.5,18.826 11.176,19.502 12,19.502C12.824,19.502 13.5,18.826 13.5,18.002V15.002C13.5,14.178 12.824,13.502 12,13.502Z"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -15,5 +15,6 @@
 
     <!--MyPage-->
     <string name="ic_mypage_description">mypage</string>
+    <string name="profile">profile</string>
 
 </resources>