[feature/#12] 공통 아이콘 제작

app/src/main/java/com/wearerommies/roomie/presentation/core/component/RoomieChip.kt

@@ -0,0 +1,182 @@
+package com.wearerommies.roomie.presentation.core.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+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.graphics.Color
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.wearerommies.roomie.R
+import com.wearerommies.roomie.presentation.core.extension.noRippleClickable
+import com.wearerommies.roomie.ui.theme.RoomieAndroidTheme
+import com.wearerommies.roomie.ui.theme.RoomieTheme
+
+@Composable
+fun RoomieTextChip(
+    text: String,
+    modifier: Modifier = Modifier,
+    textStyle: TextStyle = RoomieTheme.typography.body3M14,
+    textColor: Color = RoomieTheme.colors.primary,
+    backgroundColor: Color = RoomieTheme.colors.primaryLight4,
+    onClick: () -> Unit = {},
+) {
+    Text(
+        modifier = modifier
+            .background(color = backgroundColor, shape = RoundedCornerShape(size = 4.dp))
+            .noRippleClickable {
+                onClick()
+            }
+            .padding(horizontal = 8.dp, vertical = 4.dp),
+        text = text,
+        style = textStyle,
+        color = textColor,
+        textAlign = TextAlign.Center
+    )
+}
+
+@Composable
+fun RoomieTextWithDotChip(
+    firstText: String,
+    secondText: String,
+    modifier: Modifier = Modifier,
+    textStyle: TextStyle = RoomieTheme.typography.body4R12,
+    contentColor: Color = RoomieTheme.colors.primary,
+    backgroundColor: Color = RoomieTheme.colors.primaryLight4,
+    onClick: () -> Unit = {},
+) {
+    Row(
+        modifier = modifier
+            .background(color = backgroundColor, shape = RoundedCornerShape(size = 4.dp))
+            .noRippleClickable {
+                onClick()
+            }
+            .padding(horizontal = 8.dp, vertical = 4.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(2.dp, alignment = Alignment.CenterHorizontally),
+    ) {
+        Text(
+            text = firstText,
+            style = textStyle,
+            color = contentColor
+        )
+        Icon(
+            painter = painterResource(R.drawable.ic_middle_dot),
+            contentDescription = "dot",
+            tint = contentColor
+        )
+        Text(
+            text = secondText,
+            style = textStyle,
+            color = contentColor
+        )
+    }
+}
+
+@Composable
+fun RoomieOutlinedChip(
+    text: String,
+    modifier: Modifier = Modifier,
+    textStyle: TextStyle = RoomieTheme.typography.caption2Sb10,
+    textColor: Color = RoomieTheme.colors.grayScale7,
+    borderColor: Color = RoomieTheme.colors.grayScale5,
+    backgroundColor: Color = RoomieTheme.colors.grayScale3,
+    onClick: () -> Unit = {},
+) {
+    Text(
+        modifier = modifier
+            .width((LocalConfiguration.current.screenWidthDp * 0.106).dp)
+            .border(width = 1.dp, color = borderColor, shape = RoundedCornerShape(size = 4.dp))
+            .background(color = backgroundColor, shape = RoundedCornerShape(size = 4.dp))
+            .noRippleClickable {
+                onClick()
+            }
+            .padding(horizontal = 6.dp, vertical = 4.dp),
+        text = text,
+        style = textStyle,
+        color = textColor,
+        textAlign = TextAlign.Center
+    )
+}
+
+@Composable
+fun RoomieHouseNameChip(
+    text: String,
+    modifier: Modifier = Modifier,
+    textStyle: TextStyle = RoomieTheme.typography.body6M12,
+    textColor: Color = RoomieTheme.colors.primary,
+    borderColor: Color = RoomieTheme.colors.primaryLight2,
+    backgroundColor: Color = RoomieTheme.colors.primaryLight5,
+    onClick: () -> Unit = {},
+) {
+    Text(
+        modifier = modifier
+            .width((LocalConfiguration.current.screenWidthDp * 0.275).dp)
+            .border(width = 1.dp, color = borderColor, shape = RoundedCornerShape(size = 4.dp))
+            .background(color = backgroundColor, shape = RoundedCornerShape(size = 4.dp))
+            .noRippleClickable {
+                onClick()
+            }
+            .padding(horizontal = 12.dp, vertical = 4.dp),
+        text = text,
+        style = textStyle,
+        color = textColor,
+        textAlign = TextAlign.Center
+    )
+}
+
+@Preview
+@Composable
+private fun RoomieChipPreview() {
+    RoomieAndroidTheme {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(space = 4.dp)
+        ) {
+            //map 칩
+            RoomieTextChip(
+                text = "#차분한",
+                textStyle = RoomieTheme.typography.body4R12,
+                textColor = RoomieTheme.colors.grayScale9,
+                backgroundColor = Color(0xFFF3F1F1)
+            )
+
+            //detail 칩
+            RoomieTextChip(
+                text = "#차분한",
+            )
+
+            //detail 칩
+            RoomieTextWithDotChip(
+                firstText = "성별",
+                secondText = "n인실",
+            )
+
+            //도로명&지번 칩
+            RoomieOutlinedChip(
+                text = "도로명",
+            )
+
+            RoomieOutlinedChip(
+                text = "지번",
+            )
+
+            //쉐어하우스 이름 칩
+            RoomieHouseNameChip(
+                text = "쉐어하우스 이름"
+            )
+        }
+    }
+}

app/src/main/java/com/wearerommies/roomie/presentation/core/component/RoomieRoomAsset.kt

@@ -0,0 +1,63 @@
+package com.wearerommies.roomie.presentation.core.component
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+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.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.wearerommies.roomie.R
+import com.wearerommies.roomie.ui.theme.RoomieAndroidTheme
+import com.wearerommies.roomie.ui.theme.RoomieTheme
+
+@Composable
+fun RoomieRoomAsset(
+    @DrawableRes imageDrawableId: Int,
+    text: String,
+    modifier: Modifier = Modifier,
+    textStyle: TextStyle = RoomieTheme.typography.caption1R10,
+    textColor: Color = RoomieTheme.colors.grayScale9,
+) {
+    Column(
+        modifier = modifier
+            .padding(horizontal = 8.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(2.dp, alignment = Alignment.CenterVertically)
+    ) {
+        Image(
+            painter = painterResource(id = imageDrawableId),
+            contentDescription = null,
+            modifier = Modifier
+                .size(32.dp)
+                .clip(CircleShape)
+        )
+
+        Text(
+            text = text,
+            style = textStyle,
+            color = textColor
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun RoomieRoomAssetPreview() {
+    RoomieAndroidTheme {
+        RoomieRoomAsset(
+            imageDrawableId = R.drawable.ic_launcher_background,
+            text = "책상",
+        )
+    }
+}

app/src/main/java/com/wearerommies/roomie/presentation/core/component/RoomieTag.kt

@@ -0,0 +1,49 @@
+package com.wearerommies.roomie.presentation.core.component
+
+import androidx.compose.foundation.background
+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.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.wearerommies.roomie.presentation.core.extension.noRippleClickable
+import com.wearerommies.roomie.ui.theme.RoomieAndroidTheme
+import com.wearerommies.roomie.ui.theme.RoomieTheme
+
+@Composable
+fun RoomieTag(
+    text: String,
+    modifier: Modifier = Modifier,
+    textStyle: TextStyle = RoomieTheme.typography.caption2Sb10,
+    textColor: Color = RoomieTheme.colors.primary,
+    backgroundColor: Color = RoomieTheme.colors.primaryLight4,
+    onClick: () -> Unit = {},
+) {
+    Text(
+        modifier = modifier
+            .background(color = backgroundColor, shape = RoundedCornerShape(size = 8.dp))
+            .noRippleClickable {
+                onClick()
+            }
+            .padding(horizontal = 8.dp, vertical = 3.dp),
+        text = text,
+        style = textStyle,
+        color = textColor,
+        textAlign = TextAlign.Center
+    )
+}
+
+@Preview
+@Composable
+private fun RoomieTagPreview() {
+    RoomieAndroidTheme {
+        RoomieTag(
+            text = "입주 완료"
+        )
+    }
+}

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

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="2dp"
+    android:height="2dp"
+    android:viewportWidth="2"
+    android:viewportHeight="2">
+  <path
+      android:pathData="M1,1m-1,0a1,1 0,1 1,2 0a1,1 0,1 1,-2 0"
+      android:fillColor="#626CF6"/>
+</vector>