Merge pull request #20 from YAPP-Github/feature/sksowk156/PC-217

[PC-217] 매칭 상세 value pick ui 구현
YAPP-Github · Jan 2, 2025 · 2ce059e · 2ce059e
2 parents d563019 + 7ab9374
commit 2ce059e
Show file tree

Hide file tree

Showing 13 changed files with 491 additions and 129 deletions.
diff --git a/core/common-ui/src/main/java/com/puzzle/common/ui/CollapsingHeaderNestedScrollConnection.kt b/core/common-ui/src/main/java/com/puzzle/common/ui/CollapsingHeaderNestedScrollConnection.kt
@@ -0,0 +1,37 @@
+package com.puzzle.common.ui
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
+import androidx.compose.ui.input.nestedscroll.NestedScrollSource
+
+class CollapsingHeaderNestedScrollConnection(
+    val headerHeight: Int
+) : NestedScrollConnection {
+
+    // 헤더 offset(픽셀 단위), 0이면 펼침, -headerHeight이면 완전 접힘
+    var headerOffset: Int by mutableIntStateOf(0)
+        private set
+
+    // 스크롤 이벤트가 오기 전, 먼저 얼마나 소모할지 계산
+    override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
+        // y축 델타(수직 스크롤 양)
+        val delta = available.y.toInt()
+
+        // 새 offset = 기존 offset + 스크롤 델타
+        val newOffset = headerOffset + delta
+        val previousOffset = headerOffset
+
+        // -headerHeight ~ 0 사이로 제한
+        //   -> 최소 -105: 완전히 접힘, 최대 0: 완전히 펼침
+        headerOffset = newOffset.coerceIn(-headerHeight, 0)
+
+        // 소비(consumed)된 스크롤 양 = (바뀐 offset - 기존 offset)
+        val consumed = headerOffset - previousOffset
+
+        // x축은 소비 안 함(0f), y축은 consumed만큼 소비했다고 반환
+        return Offset(0f, consumed.toFloat())
+    }
+}
diff --git a/core/designsystem/src/main/java/com/puzzle/designsystem/component/Button.kt b/core/designsystem/src/main/java/com/puzzle/designsystem/component/Button.kt
@@ -90,8 +90,8 @@ fun PieceSubButton(
         colors = ButtonDefaults.buttonColors(
             containerColor = PieceTheme.colors.primaryLight,
             contentColor = PieceTheme.colors.primaryDefault,
-            disabledContainerColor = PieceTheme.colors.light1,
-            disabledContentColor = PieceTheme.colors.white,
+            disabledContainerColor = PieceTheme.colors.light3,
+            disabledContentColor = PieceTheme.colors.dark2,
         ),
         modifier = modifier.height(52.dp),
     ) {

diff --git a/core/designsystem/src/main/java/com/puzzle/designsystem/component/TopBar.kt b/core/designsystem/src/main/java/com/puzzle/designsystem/component/TopBar.kt
@@ -209,4 +209,4 @@ fun PreviewPieceSubCloseTopBar() {
                 .padding(vertical = 20.dp),
         )
     }
-}
+}
diff --git a/core/designsystem/src/main/res/drawable/ic_image_default.xml b/core/designsystem/src/main/res/drawable/ic_image_default.xml
@@ -4,27 +4,31 @@
     android:height="120dp"
     android:viewportWidth="120"
     android:viewportHeight="120">
-  <path
-      android:pathData="M60,0L60,0A60,60 0,0 1,120 60L120,60A60,60 0,0 1,60 120L60,120A60,60 0,0 1,0 60L0,60A60,60 0,0 1,60 0z"
-      android:fillColor="#F4F6FA"/>
-  <path
-      android:pathData="M57.48,18C51.03,18 45.8,22.9 45.8,28.95C45.8,29.85 45.91,30.71 46.12,31.54C46.53,33.12 45.5,35.04 43.88,35.04H36C31.58,35.04 28,38.62 28,43.04V50.16C28,51.79 29.92,52.81 31.5,52.41C32.33,52.19 33.19,52.08 34.09,52.08C40.14,52.08 45.04,57.31 45.04,63.76C45.04,70.22 40.14,75.45 34.09,75.45C33.19,75.45 32.33,75.33 31.5,75.12C29.92,74.71 28,75.74 28,77.37V84C28,88.42 31.58,92 36,92H42.88C44.5,92 45.53,90.08 45.12,88.5C44.91,87.67 44.8,86.81 44.8,85.91C44.8,79.86 50.03,74.96 56.48,74.96C62.93,74.96 68.16,79.86 68.16,85.91C68.16,86.81 68.05,87.67 67.84,88.5C67.43,90.08 68.46,92 70.08,92H76.96C81.38,92 84.96,88.42 84.96,84V76.37C84.96,74.74 86.88,73.71 88.46,74.12C89.29,74.33 90.15,74.45 91.05,74.45C97.1,74.45 102,69.22 102,62.76C102,56.31 97.1,51.08 91.05,51.08C90.15,51.08 89.29,51.19 88.46,51.41C86.88,51.81 84.96,50.79 84.96,49.16V43.04C84.96,38.62 81.38,35.04 76.96,35.04H71.08C69.46,35.04 68.43,33.12 68.84,31.54C69.05,30.71 69.16,29.85 69.16,28.95C69.16,22.9 63.93,18 57.48,18Z"
-      android:fillColor="#CBD1D9"
-      android:fillType="evenOdd"/>
-  <path
-      android:pathData="M57.48,18C51.03,18 45.8,22.9 45.8,28.95C45.8,29.85 45.91,30.71 46.12,31.54C46.53,33.12 45.5,35.04 43.88,35.04H36C31.58,35.04 28,38.62 28,43.04V50.16C28,51.79 29.92,52.81 31.5,52.41C32.33,52.19 33.19,52.08 34.09,52.08C40.14,52.08 45.04,57.31 45.04,63.76C45.04,70.22 40.14,75.45 34.09,75.45C33.19,75.45 32.33,75.33 31.5,75.12C29.92,74.71 28,75.74 28,77.37V84C28,88.42 31.58,92 36,92H42.88C44.5,92 45.53,90.08 45.12,88.5C44.91,87.67 44.8,86.81 44.8,85.91C44.8,79.86 50.03,74.96 56.48,74.96C62.93,74.96 68.16,79.86 68.16,85.91C68.16,86.81 68.05,87.67 67.84,88.5C67.43,90.08 68.46,92 70.08,92H76.96C81.38,92 84.96,88.42 84.96,84V76.37C84.96,74.74 86.88,73.71 88.46,74.12C89.29,74.33 90.15,74.45 91.05,74.45C97.1,74.45 102,69.22 102,62.76C102,56.31 97.1,51.08 91.05,51.08C90.15,51.08 89.29,51.19 88.46,51.41C86.88,51.81 84.96,50.79 84.96,49.16V43.04C84.96,38.62 81.38,35.04 76.96,35.04H71.08C69.46,35.04 68.43,33.12 68.84,31.54C69.05,30.71 69.16,29.85 69.16,28.95C69.16,22.9 63.93,18 57.48,18Z"
-      android:fillAlpha="0.2"
-      android:fillType="evenOdd">
-    <aapt:attr name="android:fillColor">
-      <gradient 
-          android:startX="65"
-          android:startY="18"
-          android:endX="65"
-          android:endY="92"
-          android:type="linear">
-        <item android:offset="0" android:color="#006F00FB"/>
-        <item android:offset="1" android:color="#FF6F00FB"/>
-      </gradient>
-    </aapt:attr>
-  </path>
+    <path
+        android:pathData="M60,0L60,0A60,60 0,0 1,120 60L120,60A60,60 0,0 1,60 120L60,120A60,60 0,0 1,0 60L0,60A60,60 0,0 1,60 0z"
+        android:fillColor="#F4F6FA" />
+    <path
+        android:pathData="M57.48,18C51.03,18 45.8,22.9 45.8,28.95C45.8,29.85 45.91,30.71 46.12,31.54C46.53,33.12 45.5,35.04 43.88,35.04H36C31.58,35.04 28,38.62 28,43.04V50.16C28,51.79 29.92,52.81 31.5,52.41C32.33,52.19 33.19,52.08 34.09,52.08C40.14,52.08 45.04,57.31 45.04,63.76C45.04,70.22 40.14,75.45 34.09,75.45C33.19,75.45 32.33,75.33 31.5,75.12C29.92,74.71 28,75.74 28,77.37V84C28,88.42 31.58,92 36,92H42.88C44.5,92 45.53,90.08 45.12,88.5C44.91,87.67 44.8,86.81 44.8,85.91C44.8,79.86 50.03,74.96 56.48,74.96C62.93,74.96 68.16,79.86 68.16,85.91C68.16,86.81 68.05,87.67 67.84,88.5C67.43,90.08 68.46,92 70.08,92H76.96C81.38,92 84.96,88.42 84.96,84V76.37C84.96,74.74 86.88,73.71 88.46,74.12C89.29,74.33 90.15,74.45 91.05,74.45C97.1,74.45 102,69.22 102,62.76C102,56.31 97.1,51.08 91.05,51.08C90.15,51.08 89.29,51.19 88.46,51.41C86.88,51.81 84.96,50.79 84.96,49.16V43.04C84.96,38.62 81.38,35.04 76.96,35.04H71.08C69.46,35.04 68.43,33.12 68.84,31.54C69.05,30.71 69.16,29.85 69.16,28.95C69.16,22.9 63.93,18 57.48,18Z"
+        android:fillColor="#CBD1D9"
+        android:fillType="evenOdd" />
+    <path
+        android:pathData="M57.48,18C51.03,18 45.8,22.9 45.8,28.95C45.8,29.85 45.91,30.71 46.12,31.54C46.53,33.12 45.5,35.04 43.88,35.04H36C31.58,35.04 28,38.62 28,43.04V50.16C28,51.79 29.92,52.81 31.5,52.41C32.33,52.19 33.19,52.08 34.09,52.08C40.14,52.08 45.04,57.31 45.04,63.76C45.04,70.22 40.14,75.45 34.09,75.45C33.19,75.45 32.33,75.33 31.5,75.12C29.92,74.71 28,75.74 28,77.37V84C28,88.42 31.58,92 36,92H42.88C44.5,92 45.53,90.08 45.12,88.5C44.91,87.67 44.8,86.81 44.8,85.91C44.8,79.86 50.03,74.96 56.48,74.96C62.93,74.96 68.16,79.86 68.16,85.91C68.16,86.81 68.05,87.67 67.84,88.5C67.43,90.08 68.46,92 70.08,92H76.96C81.38,92 84.96,88.42 84.96,84V76.37C84.96,74.74 86.88,73.71 88.46,74.12C89.29,74.33 90.15,74.45 91.05,74.45C97.1,74.45 102,69.22 102,62.76C102,56.31 97.1,51.08 91.05,51.08C90.15,51.08 89.29,51.19 88.46,51.41C86.88,51.81 84.96,50.79 84.96,49.16V43.04C84.96,38.62 81.38,35.04 76.96,35.04H71.08C69.46,35.04 68.43,33.12 68.84,31.54C69.05,30.71 69.16,29.85 69.16,28.95C69.16,22.9 63.93,18 57.48,18Z"
+        android:fillAlpha="0.2"
+        android:fillType="evenOdd">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:startX="65"
+                android:startY="18"
+                android:endX="65"
+                android:endY="92"
+                android:type="linear">
+                <item
+                    android:offset="0"
+                    android:color="#006F00FB" />
+                <item
+                    android:offset="1"
+                    android:color="#FF6F00FB" />
+            </gradient>
+        </aapt:attr>
+    </path>
 </vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_profile_image.xml b/core/designsystem/src/main/res/drawable/ic_profile_image.xml
@@ -0,0 +1,35 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="52dp"
+    android:height="52dp"
+    android:viewportWidth="52"
+    android:viewportHeight="52">
+    <group>
+        <clip-path android:pathData="M0,0h52v52h-52z" />
+        <path
+            android:pathData="M26,26m-25.409,0a25.409,25.409 0,1 1,50.818 0a25.409,25.409 0,1 1,-50.818 0"
+            android:strokeWidth="1.18182"
+            android:fillColor="#ffffff"
+            android:strokeColor="#6F00FB" />
+        <path
+            android:pathData="M16,26.5V26.5C21.486,27.791 26.331,30.997 29.664,35.542L30,36"
+            android:strokeWidth="1.6"
+            android:fillColor="#00000000"
+            android:strokeColor="#6F00FB" />
+        <path
+            android:pathData="M36,26L35.103,26.141C31.332,26.736 27.819,28.425 25,31V31"
+            android:strokeWidth="1.6"
+            android:fillColor="#00000000"
+            android:strokeColor="#6F00FB" />
+        <path
+            android:pathData="M17,16L35,16A1,1 0,0 1,36 17L36,35A1,1 0,0 1,35 36L17,36A1,1 0,0 1,16 35L16,17A1,1 0,0 1,17 16z"
+            android:strokeLineJoin="round"
+            android:strokeWidth="1.6"
+            android:fillColor="#00000000"
+            android:strokeColor="#6F00FB" />
+        <path
+            android:pathData="M31,23C32.105,23 33,22.105 33,21C33,19.895 32.105,19 31,19C29.895,19 29,19.895 29,21C29,22.105 29.895,23 31,23Z"
+            android:strokeWidth="1.6"
+            android:fillColor="#00000000"
+            android:strokeColor="#6F00FB" />
+    </group>
+</vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_question.xml b/core/designsystem/src/main/res/drawable/ic_question.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+    <path
+        android:pathData="M9.732,9.732m-6.545,0a6.545,6.545 0,1 1,13.089 0a6.545,6.545 0,1 1,-13.089 0"
+        android:strokeWidth="2.37572"
+        android:fillColor="#00000000"
+        android:strokeColor="#6F00FB" />
+    <path
+        android:pathData="M15.63,14.112L17.16,15.642A1.188,1.188 90,0 1,17.16 17.322L17.16,17.322A1.188,1.188 90,0 1,15.48 17.322L13.951,15.792A1.188,1.188 0,0 1,13.951 14.112L13.951,14.112A1.188,1.188 90,0 1,15.63 14.112z"
+        android:fillColor="#6F00FB" />
+</vector>
diff --git a/core/designsystem/src/main/res/values/strings.xml b/core/designsystem/src/main/res/values/strings.xml
@@ -21,4 +21,9 @@
     <string name="basicinfocard_activityRegion">활동 지역</string>
     <string name="basicinfocard_occupation">직업</string>
     <string name="basicinfocard_smokeStatue">흡연</string>
+    <string name="valuepick_all">전체</string>
+    <string name="valuepick_same">나와 같은</string>
+    <string name="valuepick_different">나와 다른</string>
+    <string name="valuepick_refuse">매칭 거절하기</string>
+    <string name="valuepick_similar">나와 같은</string>
 </resources>
diff --git a/feature/matching/src/main/java/com/puzzle/matching/MatchingScreen.kt b/feature/matching/src/main/java/com/puzzle/matching/MatchingScreen.kt
@@ -36,12 +36,12 @@ import androidx.compose.ui.unit.dp
 import com.airbnb.mvrx.compose.collectAsState
 import com.airbnb.mvrx.compose.mavericksViewModel
 import com.puzzle.common.ui.verticalScrollbar
+import com.puzzle.designsystem.R
 import com.puzzle.designsystem.component.PieceMainTopBar
 import com.puzzle.designsystem.component.PieceSolidButton
 import com.puzzle.designsystem.foundation.PieceTheme
 import com.puzzle.matching.contract.MatchingIntent
 import com.puzzle.matching.contract.MatchingState
-import com.puzzle.designsystem.R
 
 @Composable
 internal fun MatchingRoute(

diff --git a/feature/matching/src/main/java/com/puzzle/matching/detail/MatchingDetailRoute.kt b/feature/matching/src/main/java/com/puzzle/matching/detail/MatchingDetailRoute.kt
@@ -58,6 +58,9 @@ internal fun MatchingDetailRoute(
         onPreviousPageClick = { viewModel.onIntent(MatchingDetailIntent.OnPreviousPageClick) },
         onNextPageClick = { viewModel.onIntent(MatchingDetailIntent.OnNextPageClick) },
         onMoreClick = { viewModel.onIntent(MatchingDetailIntent.OnMoreClick) },
+        onDeclineClick = { },
+        onAcceptClick = { },
+        onShowPicturesClick = { },
     )
 }
 
@@ -68,6 +71,9 @@ private fun MatchingDetailScreen(
     onPreviousPageClick: () -> Unit,
     onNextPageClick: () -> Unit,
     onMoreClick: () -> Unit,
+    onDeclineClick: () -> Unit,
+    onShowPicturesClick: () -> Unit,
+    onAcceptClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     var showDialog by remember { mutableStateOf(false) }
@@ -163,6 +169,7 @@ private fun MatchingDetailScreen(
         MatchingDetailContent(
             state = state,
             onMoreClick = onMoreClick,
+            onDeclineClick = onDeclineClick,
             modifier = Modifier
                 .fillMaxSize()
                 .padding(top = topBarHeight, bottom = bottomBarHeight),
@@ -171,9 +178,7 @@ private fun MatchingDetailScreen(
         PieceSubCloseTopBar(
             title = state.currentPage.title,
             onCloseClick = onCloseClick,
-            showCloseButton = if (showDialog && dialogType == DialogType.PROFILE_IMAGE_DETAIL) {
-                false
-            } else true,
+            showCloseButton = !(showDialog && dialogType == DialogType.PROFILE_IMAGE_DETAIL),
             modifier = Modifier
                 .fillMaxWidth()
                 .height(topBarHeight)
@@ -196,10 +201,12 @@ private fun MatchingDetailScreen(
                 onShowPicturesClick = {
                     dialogType = DialogType.PROFILE_IMAGE_DETAIL
                     showDialog = true
+                    onShowPicturesClick()
                 },
                 onAcceptClick = {
                     dialogType = DialogType.ACCEPT_MATCHING
                     showDialog = true
+                    onAcceptClick()
                 },
                 modifier = Modifier
                     .fillMaxWidth()
@@ -221,8 +228,8 @@ private fun BackgroundImage(modifier: Modifier = Modifier) {
         Image(
             painter = painterResource(id = R.drawable.matchingdetail_bg),
             contentDescription = "basic info 배경화면",
-            modifier = Modifier.matchParentSize(),
             contentScale = ContentScale.Crop,
+            modifier = Modifier.matchParentSize(),
         )
     }
 }
@@ -231,11 +238,12 @@ private fun BackgroundImage(modifier: Modifier = Modifier) {
 private fun MatchingDetailContent(
     state: MatchingDetailState,
     onMoreClick: () -> Unit,
+    onDeclineClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Box(modifier = modifier.fillMaxSize()) {
         when (state.currentPage) {
-            MatchingDetailState.MatchingDetailPage.BasicInfoState -> {
+            MatchingDetailState.MatchingDetailPage.BasicInfoState ->
                 BasicInfoBody(
                     nickName = state.nickName,
                     selfDescription = state.selfDescription,
@@ -247,24 +255,24 @@ private fun MatchingDetailContent(
                     occupation = state.occupation,
                     smokeStatue = state.smokeStatue,
                     onMoreClick = onMoreClick,
-                    modifier = Modifier.padding(horizontal = 20.dp)
+                    modifier = Modifier.padding(horizontal = 20.dp),
                 )
-            }
 
-            MatchingDetailState.MatchingDetailPage.ValueTalkState -> {
+            MatchingDetailState.MatchingDetailPage.ValueTalkState ->
                 ValueTalkBody(
                     nickName = state.nickName,
                     selfDescription = state.selfDescription,
                     talkCards = state.talkCards,
-                    onMoreClick = onMoreClick
+                    onMoreClick = onMoreClick,
                 )
-            }
 
-            MatchingDetailState.MatchingDetailPage.ValuePickState -> {
+            MatchingDetailState.MatchingDetailPage.ValuePickState ->
                 ValuePickBody(
-                    pickCards = state.pickCards
+                    nickName = state.nickName,
+                    selfDescription = state.selfDescription,
+                    pickCards = state.pickCards,
+                    onDeclineClick = onDeclineClick,
                 )
-            }
         }
     }
 }
@@ -284,7 +292,7 @@ private fun MatchingDetailBottomBar(
     ) {
         if (currentPage == MatchingDetailPage.ValuePickState) {
             Image(
-                painter = painterResource(id = R.drawable.ic_profile_image_temp),
+                painter = painterResource(id = R.drawable.ic_profile_image),
                 contentDescription = "이전 페이지 버튼",
                 modifier = Modifier
                     .size(52.dp)
@@ -346,6 +354,9 @@ private fun MatchingDetailScreenPreview() {
             {},
             {},
             {},
+            {},
+            {},
+            {},
         )
     }
 }

diff --git a/...ching/detail/component/ValueTalkHeader.kt → ...ching/detail/component/BasicInfoHeader.kt b/...ching/detail/component/ValueTalkHeader.kt → ...ching/detail/component/BasicInfoHeader.kt
@@ -14,18 +14,17 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
+import com.puzzle.designsystem.R
 import com.puzzle.designsystem.foundation.PieceTheme
 
 @Composable
-internal fun ValueTalkHeader(
+internal fun BasicInfoHeader(
     nickName: String,
     selfDescription: String,
     onMoreClick: () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    Column(
-        modifier = modifier,
-    ) {
+    Column(modifier = modifier) {
         Text(
             text = selfDescription,
             style = PieceTheme.typography.bodyMR,
@@ -45,7 +44,7 @@ internal fun ValueTalkHeader(
             Spacer(modifier = Modifier.width(28.dp))
 
             Image(
-                painter = painterResource(id = com.puzzle.designsystem.R.drawable.ic_more),
+                painter = painterResource(id = R.drawable.ic_more),
                 contentDescription = "basic info 배경화면",
                 modifier = Modifier
                     .size(32.dp)

diff --git a/feature/matching/src/main/java/com/puzzle/matching/detail/content/BasicInfoBody.kt b/feature/matching/src/main/java/com/puzzle/matching/detail/content/BasicInfoBody.kt
@@ -21,7 +21,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.puzzle.designsystem.R
 import com.puzzle.designsystem.foundation.PieceTheme
-import com.puzzle.matching.detail.component.ValueTalkHeader
+import com.puzzle.matching.detail.component.BasicInfoHeader
 
 @Composable
 internal fun BasicInfoBody(
@@ -64,7 +64,7 @@ private fun BasicInfoName(
     nickName: String,
     selfDescription: String,
     onMoreClick: () -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     Column(modifier = modifier) {
         Text(
@@ -75,7 +75,7 @@ private fun BasicInfoName(
 
         Spacer(modifier = Modifier.weight(1f))
 
-        ValueTalkHeader(
+        BasicInfoHeader(
             nickName = nickName,
             selfDescription = selfDescription,
             onMoreClick = onMoreClick,
@@ -194,11 +194,11 @@ private fun InfoItem(
     text: @Composable () -> Unit? = {},
 ) {
     Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
         modifier = modifier
             .clip(RoundedCornerShape(8.dp))
             .background(PieceTheme.colors.white)
             .padding(vertical = 16.dp, horizontal = 12.dp),
-        horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         Text(
             text = title,
-Original file line number
+Diff line change
@@ Expand Up / @@ -209,4 +209,4 @@ fun PreviewPieceSubCloseTopBar() { @@
                     .padding(vertical = 20.dp),
             )
         }
-    }
+    }