[ui]: upload ui

Team-Recordy · Oct 20, 2024 · bd92e53 · bd92e53
1 parent 6f66fb6
commit bd92e53
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 12 deletions.
diff --git a/core/designsystem/src/main/java/com/record/designsystem/component/button/RecordyImgButton.kt b/core/designsystem/src/main/java/com/record/designsystem/component/button/RecordyImgButton.kt
@@ -0,0 +1,79 @@
+package com.record.designsystem.component.button
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+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.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+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.record.designsystem.R
+import com.record.designsystem.theme.Black
+import com.record.designsystem.theme.RecordyTheme
+import com.record.ui.extension.customClickable
+import timber.log.Timber
+
+@Composable
+fun RecordyImgButton(
+    modifier: Modifier = Modifier,
+    text: String,
+    textStyle: TextStyle = RecordyTheme.typography.body2M,
+    shape: Shape = RoundedCornerShape(8.dp),
+    onClick: () -> Unit = {},
+    backgroundColor: Color = RecordyTheme.colors.gray10,
+    textColor: Color = RecordyTheme.colors.gray06,
+    @DrawableRes icon: Int,
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .clip(shape)
+            .background(color = backgroundColor)
+            .border(width = 1.dp, color = backgroundColor, shape = shape)
+            .padding(vertical = 14.dp, horizontal = 18.dp)
+            .customClickable(rippleEnabled = false, onClick = { onClick() }),
+    ) {
+        Image(modifier = Modifier.align(Alignment.CenterEnd).padding(end = 4.dp), painter = painterResource(id = icon), contentDescription = null)
+        Text(
+            text = text,
+            style = textStyle,
+            color = textColor,
+            modifier = Modifier.align(Alignment.CenterStart),
+        )
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun RecordyImgButtonPreview() {
+    RecordyTheme {
+        RecordyTheme {
+            Column(
+                modifier = Modifier
+                    .background(Black)
+                    .padding(vertical = 10.dp, horizontal = 10.dp),
+                verticalArrangement = Arrangement.spacedBy(10.dp),
+            ) {
+                RecordyImgButton(
+                    icon = R.drawable.ic_move_18,
+                    text = "키워드",
+                    onClick = { Timber.d("basic key word") },
+                )
+            }
+        }
+    }
+}
diff --git a/core/designsystem/src/main/res/drawable/ic_move_18.xml b/core/designsystem/src/main/res/drawable/ic_move_18.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="18dp"
+    android:viewportWidth="18"
+    android:viewportHeight="18">
+  <path
+      android:pathData="M7.136,13.365C6.947,13.575 6.956,13.908 7.157,14.107C7.357,14.306 7.674,14.296 7.863,14.085L12.113,9.361C12.295,9.159 12.295,8.842 12.113,8.64L7.864,3.915C7.674,3.704 7.357,3.694 7.157,3.893C6.956,4.092 6.947,4.425 7.136,4.635L11.062,9L7.136,13.365Z"
+      android:fillColor="#EEEEEE"/>
+</vector>
diff --git a/feature/upload/src/main/java/com/record/upload/VideoPickerScreen.kt b/feature/upload/src/main/java/com/record/upload/VideoPickerScreen.kt
@@ -62,6 +62,7 @@ import com.google.accompanist.permissions.rememberPermissionState
 import com.google.accompanist.permissions.shouldShowRationale
 import com.record.designsystem.R
 import com.record.designsystem.component.button.RecordyButton
+import com.record.designsystem.component.button.RecordyImgButton
 import com.record.designsystem.component.dialog.RecordyDialog
 import com.record.designsystem.component.navbar.TopNavigationBar
 import com.record.designsystem.component.snackbar.SnackBarType
@@ -307,16 +308,11 @@ fun VideoPickerScreen(
                     .focusRequester(contentFocusRequester),
                 onValueChange = updateContentTextField,
             )
-            RecordyBasicTextField(
-                modifier = Modifier
-                    .padding(horizontal = 16.dp, vertical = 16.dp)
-                    .focusRequester(locationFocusRequester),
-                placeholder = "전시명을 입력해 주세요.",
-                maxLines = 1,
-                maxLength = 20,
-                value = state.locationTextValue,
-                onValueChange = updateLocationTextField,
-                keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
+            RecordyImgButton(
+                modifier = Modifier.padding(16.dp),
+                icon = R.drawable.ic_move_18,
+                text = "장소",
+                onClick = { Timber.d("basic key word") },
             )
             RecordyBasicTextField(
                 modifier = Modifier
@@ -333,7 +329,7 @@ fun VideoPickerScreen(
 
         Box(modifier = Modifier.padding(16.dp)) {
             RecordyButton(
-                text = "업로드",
+                text = "다음",
                 enabled = state.locationTextValue.isNotEmpty() && state.video != null,
                 onClick = {
                     if (state.selectedList.isNotEmpty() && state.locationTextValue.isNotEmpty() && state.video != null) {
@@ -353,7 +349,13 @@ fun VideoPickerScreen(
             negativeButtonLabel = state.alertInfo.negativeButtonLabel,
             positiveButtonLabel = state.alertInfo.positiveButtonLabel,
             onDismissRequest = hideExitUploadDialog,
-            onPositiveButtonClick = onClickBackStack,
+            onPositiveButtonClick = {
+                if (cameraPermissionState.status.shouldShowRationale) {
+                    openAppSettings(context)
+                } else {
+                    onClickBackStack()
+                }
+            },
         )
     }
     SelectedVideoBottomSheet(