Merge pull request #250 from TeamDATEROAD/chore-course-detail-button-…

…size [chore] 코스 상세 하단 버튼 크기 조정
TeamDATEROAD · Sep 13, 2024 · 0100c94 · 0100c94
2 parents 37236e8 + 9aa01b2
commit 0100c94
Showing 1 changed file with 32 additions and 2 deletions.
diff --git a/...in/java/org/sopt/dateroad/presentation/ui/coursedetail/component/CourseDetailBottomBar.kt b/...in/java/org/sopt/dateroad/presentation/ui/coursedetail/component/CourseDetailBottomBar.kt
@@ -1,14 +1,24 @@
 package org.sopt.dateroad.presentation.ui.coursedetail.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.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 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.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import org.sopt.dateroad.R
 import org.sopt.dateroad.presentation.ui.component.button.DateRoadBasicButton
@@ -22,13 +32,16 @@ fun CourseDetailBottomBar(
     onLikeButtonClicked: () -> Unit,
     onEnrollButtonClicked: () -> Unit
 ) {
+    var buttonHeight by remember { mutableStateOf(0.dp) }
+    val density = LocalDensity.current
     Row(
         modifier = modifier
             .fillMaxWidth()
             .background(color = DateRoadTheme.colors.white)
             .padding(horizontal = 16.dp, vertical = 16.dp)
     ) {
         DateRoadImageButton(
+            modifier = Modifier.height(buttonHeight),
             iconResId = R.drawable.ic_coures_detail_heart_default,
             enabledContentColor = DateRoadTheme.colors.purple600,
             disabledContentColor = DateRoadTheme.colors.gray200,
@@ -38,13 +51,30 @@ fun CourseDetailBottomBar(
             onClick = onLikeButtonClicked,
             cornerRadius = 14.dp,
             paddingHorizontal = 23.dp,
-            paddingVertical = 18.dp
+            paddingVertical = 0.dp
         )
         Spacer(modifier = Modifier.width(12.dp))
         DateRoadBasicButton(
-            modifier = Modifier.weight(1f),
+            modifier = Modifier
+                .weight(1f)
+                .onSizeChanged { size ->
+                    buttonHeight = with(density) { size.height.toDp() }
+                },
             textContent = stringResource(id = R.string.course_detail_get_course),
             onClick = onEnrollButtonClicked
         )
     }
 }
+
+@Preview
+@Composable
+fun ButtonPreview(modifier: Modifier = Modifier) {
+    Box(modifier = Modifier) {
+        CourseDetailBottomBar(
+            modifier = Modifier.align(Alignment.BottomCenter),
+            isUserLiked = true,
+            onLikeButtonClicked = { },
+            onEnrollButtonClicked = { }
+        )
+    }
+}