Merge pull request #31 from SOPT-all/ui/#29-post-bottom-bar

[UI/#29] post bottom bar
SOPT-all · Jan 17, 2025 · 9d67d16 · 9d67d16
2 parents c7f7eaa + 69960e5
commit 9d67d16
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 3 deletions.
diff --git a/app/src/main/java/com/sopt/withsuhyeon/core/component/bottombar/PostBottomBar.kt b/app/src/main/java/com/sopt/withsuhyeon/core/component/bottombar/PostBottomBar.kt
@@ -0,0 +1,102 @@
+package com.sopt.withsuhyeon.core.component.bottombar
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.sopt.withsuhyeon.R
+import com.sopt.withsuhyeon.core.component.button.LargeButton
+import com.sopt.withsuhyeon.core.util.price.toDecimalFormat
+import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.colors
+import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.typography
+
+@Composable
+fun PostBottomBar(
+    price: Int,
+    isMyPost: Boolean,
+    isDisabled: Boolean = true,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit = {}
+) {
+    val borderColor = colors.Grey100
+    val buttonText = if(isMyPost)
+        stringResource(R.string.post_bottom_bar_in_progress_chating)
+    else
+        stringResource(R.string.post_bottom_bar_start_chating)
+
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterHorizontally),
+        modifier = modifier
+            .fillMaxWidth()
+            .height(106.dp)
+            .drawBehind {
+                val borderThickness = 1.dp.toPx()
+                drawLine(
+                    color = borderColor,
+                    start = Offset(0f, 0f),
+                    end = Offset(size.width, 0f),
+                    strokeWidth = borderThickness
+                )
+            }
+            .background(
+                color = colors.White,
+            )
+            .padding(
+                top = 16.dp,
+                bottom = 34.dp,
+                start = 16.dp,
+                end = 16.dp
+            )
+    ) {
+        Column(
+        ) {
+            Text(
+                text = stringResource(R.string.find_suhyeon_price),
+                style = typography.caption01_SB.merge(colors.Grey500)
+            )
+            Text(
+                text = price.toDecimalFormat(),
+                style = typography.body02_B.merge(colors.Grey900)
+            )
+        }
+        LargeButton(
+            text = buttonText,
+            isDisabled = if(isMyPost) false else isDisabled,
+            isDownloadBtn = false,
+            modifier = modifier.weight(1f),
+            font = typography.body01_B,
+            onClick = onClick
+        )
+    }
+}
+
+@Preview
+@Composable
+fun PreviewPostBottomBar() {
+    var isDisabled by remember { mutableStateOf(false) }
+    PostBottomBar(
+        price = 50000,
+        isMyPost = false,
+        isDisabled = isDisabled,
+        onClick = {
+            isDisabled = !isDisabled
+        }
+    )
+}
diff --git a/.../main/java/com/sopt/withsuhyeon/feature/findsuhyeon/component/DetailMeetingInformation.kt b/.../main/java/com/sopt/withsuhyeon/feature/findsuhyeon/component/DetailMeetingInformation.kt
@@ -136,7 +136,7 @@ fun DetailMeetingInformation (
             modifier = Modifier.fillMaxWidth()
         ) {
             Text(
-                text = stringResource(R.string.find_suhyeon_detail_meeting_price),
+                text = stringResource(R.string.find_suhyeon_price),
                 style = typography.body03_R.merge(color = colors.Grey500)
             )
             Text(

diff --git a/app/src/main/java/com/sopt/withsuhyeon/feature/main/component/MainBottomBar.kt b/app/src/main/java/com/sopt/withsuhyeon/feature/main/component/MainBottomBar.kt
@@ -52,12 +52,12 @@ fun MainBottomBar(
         enter = fadeIn() + slideIn { IntOffset(0, it.height) },
         exit = fadeOut() + slideOut { IntOffset(0, it.height) }
     ) {
+        val borderColor = defaultWithSuhyeonColors.Grey200
         Row(
             modifier = modifier
                 .fillMaxWidth()
                 .height(68.dp)
                 .drawBehind {
-                    val borderColor = defaultWithSuhyeonColors.Grey200
                     val borderThickness = 1.dp.toPx()
 
                     drawLine(

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -47,12 +47,16 @@
     <string name="find_suhyeon_detail_meeting_wanted">원하는 수현이</string>
     <string name="find_suhyeon_detail_meeting_date">날짜</string>
     <string name="find_suhyeon_detail_meeting_requirements">요구사항</string>
-    <string name="find_suhyeon_detail_meeting_price">금액</string>
+    <string name="find_suhyeon_price">금액</string>
     <string name="find_suhyeon_text_won">원</string>
     <string name="find_suhyeon_no_message"></string>
     <string name="find_suhyeon_location">위치</string>
     <string name="find_suhyeon_multi_select_chip">MultiSelectChip</string>
 
+    <!-- 공통 컴포넌트 PostBottomBar -->
+    <string name="post_bottom_bar_start_chating">채팅하기</string>
+    <string name="post_bottom_bar_in_progress_chating">대화 중인 채팅</string>
+
     <!-- 공통 사용 dot -->
     <string name="dot">・</string>