커뮤니티 사용성 개선 (#111)

* horizontal padding을 contentPadding으로 변경 * NavigateUpIcon 크기 수정 * TopBarPreview 추가 * ImageViewer 닫기버튼 터치영역 수정 * CancelIcon 크기 수정 * lint
wafflestudio · Sep 13, 2024 · d24052a · d24052a
1 parent 7c066cf
commit d24052a
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 17 deletions.
diff --git a/app/src/main/java/com/wafflestudio/siksha2/components/compose/TopBar.kt b/app/src/main/java/com/wafflestudio/siksha2/components/compose/TopBar.kt
@@ -11,8 +11,11 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.wafflestudio.siksha2.ui.NavigateUpIcon
 import com.wafflestudio.siksha2.ui.SikshaColors
+import com.wafflestudio.siksha2.ui.SikshaTheme
 import com.wafflestudio.siksha2.ui.SikshaTypography
 
 @Composable
@@ -43,3 +46,14 @@ fun TopBar(
         }
     }
 }
+
+@Preview
+@Composable
+fun TopBarPreview() {
+    SikshaTheme {
+        TopBar(
+            title = "테스트",
+            navigationButton = { NavigateUpIcon() }
+        )
+    }
+}
diff --git a/app/src/main/java/com/wafflestudio/siksha2/compose/ui/community/PostListScreen.kt b/app/src/main/java/com/wafflestudio/siksha2/compose/ui/community/PostListScreen.kt
@@ -5,6 +5,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
@@ -101,8 +102,9 @@ fun PostListScreen(
             .background(SikshaColors.White900)
     ) {
         LazyRow(
-            modifier = Modifier.padding(horizontal = 20.dp, vertical = 18.dp),
-            horizontalArrangement = Arrangement.spacedBy(12.dp)
+            modifier = Modifier.padding(vertical = 18.dp),
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+            contentPadding = PaddingValues(horizontal = 20.dp)
         ) {
             itemsIndexed(
                 items = boards

diff --git a/app/src/main/java/com/wafflestudio/siksha2/ui/Icon.kt b/app/src/main/java/com/wafflestudio/siksha2/ui/Icon.kt
@@ -1,8 +1,10 @@
 package com.wafflestudio.siksha2.ui
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
@@ -56,12 +58,16 @@ fun NavigateUpIcon(
     modifier: Modifier = Modifier,
     color: Color = SikshaColors.White900
 ) {
-    Image(
-        modifier = modifier.size(16.dp),
-        painter = painterResource(R.drawable.ic_back_arrow),
-        contentDescription = "navigate up",
-        colorFilter = ColorFilter.tint(color)
-    )
+    Box(
+        modifier = modifier.size(30.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Image(
+            painter = painterResource(R.drawable.ic_back_arrow),
+            contentDescription = "navigate up",
+            colorFilter = ColorFilter.tint(color)
+        )
+    }
 }
 
 @Composable
@@ -84,12 +90,17 @@ fun CancelIcon(
     modifier: Modifier = Modifier,
     color: Color = SikshaColors.White900
 ) {
-    Image(
-        modifier = modifier.size(12.dp),
-        painter = painterResource(R.drawable.ic_cancel),
-        contentDescription = "cancel",
-        colorFilter = ColorFilter.tint(color)
-    )
+    Box(
+        modifier = modifier.size(30.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Image(
+            modifier = modifier.size(12.dp),
+            painter = painterResource(R.drawable.ic_cancel),
+            contentDescription = "cancel",
+            colorFilter = ColorFilter.tint(color)
+        )
+    }
 }
 
 @Composable

diff --git a/app/src/main/res/layout/activity_image_viewer.xml b/app/src/main/res/layout/activity_image_viewer.xml
@@ -41,9 +41,10 @@
 
     <ImageView
         android:id="@+id/iv_close"
-        android:layout_width="12dp"
-        android:layout_height="12dp"
-        android:layout_marginStart="30dp"
+        android:layout_width="30dp"
+        android:layout_height="30dp"
+        android:padding="9dp"
+        android:layout_marginStart="21dp"
         android:src="@drawable/ic_close_white"
         app:layout_constraintBottom_toBottomOf="@id/v_header_background"
         app:layout_constraintStart_toStartOf="parent"