[design] #62 upload ui

lsakee · lsakee · commit d7926988bff4 · 2024-07-16T22:02:31.000+09:00
diff --git a/core/designsystem/src/main/java/com/record/designsystem/component/textfield/RecordyBasicTextField.kt b/core/designsystem/src/main/java/com/record/designsystem/component/textfield/RecordyBasicTextField.kt
@@ -8,6 +8,7 @@ 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.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -30,7 +31,9 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.min
 import com.record.designsystem.theme.Alert
 import com.record.designsystem.theme.Black
 import com.record.designsystem.theme.Gray01
@@ -54,6 +57,7 @@ fun RecordyBasicTextField(
     maxLines: Int = 1,
     minLines: Int = 1,
     maxLength: Int = 10,
+    minHeight: Dp = 52.dp,
     textStyle: TextStyle = RecordyTheme.typography.body2M,
     keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
     keyboardActions: KeyboardActions = KeyboardActions.Default,
@@ -75,7 +79,7 @@ fun RecordyBasicTextField(
     }
 
     BasicTextField(
-        modifier = modifier.fillMaxWidth(),
+        modifier =if (minHeight==null) modifier.fillMaxWidth() else modifier.height(148.dp).fillMaxWidth(),
         value = value,
         onValueChange = { newValue ->
             if (newValue.replace(" ", "").length <= maxLength) onValueChange(newValue)
@@ -92,10 +96,7 @@ fun RecordyBasicTextField(
         decorationBox = { innerText ->
             Column(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .heightIn(
-                        min = 52.dp,
-                    ),
+                    .fillMaxWidth(),
                 verticalArrangement = Arrangement.SpaceBetween,
             ) {
                 Box(
diff --git a/core/designsystem/src/main/res/drawable/ic_plus_25.xml b/core/designsystem/src/main/res/drawable/ic_plus_25.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="25dp"
+    android:viewportWidth="25"
+    android:viewportHeight="25">
+  <path
+      android:pathData="M14.698,1.976C14.698,0.885 13.814,0 12.722,0C11.631,0 10.747,0.885 10.747,1.976V9.722H2.812C1.738,9.722 0.867,10.593 0.867,11.667C0.867,12.741 1.738,13.611 2.812,13.611H10.747V22.33C10.747,23.421 11.631,24.306 12.722,24.306C13.814,24.306 14.698,23.421 14.698,22.33V13.611H22.633C23.707,13.611 24.577,12.741 24.577,11.667C24.577,10.593 23.707,9.722 22.633,9.722H14.698V1.976Z"
+      android:fillColor="#A5A9B4"
+      android:fillType="evenOdd"/>
+</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
@@ -1,21 +1,35 @@
 package com.record.upload
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+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.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 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.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
-import com.record.designsystem.component.button.RecordyButton
+import androidx.compose.ui.unit.dp
+import com.record.designsystem.R
 import com.record.designsystem.component.navbar.TopNavigationBar
+import com.record.designsystem.component.textfield.RecordyBasicTextField
 import com.record.designsystem.theme.Background
-import com.record.designsystem.theme.Gray03
 import com.record.designsystem.theme.RecordyTheme
+import com.record.ui.extension.customClickable
 
 @Composable
 fun VideoPickerRoute(
@@ -24,37 +38,119 @@ fun VideoPickerRoute(
 ) {
     VideoPickerScreen(
         navigateSelectedKeyword = navigateSelectedKeyword,
+        onClickPickVideo = {},
+        onClickKeyword = {}
     )
 }
 
 @Composable
 fun VideoPickerScreen(
     navigateSelectedKeyword: () -> Unit,
+    onClickPickVideo: () -> Unit = {},
+    onClickKeyword: () -> Unit = {},
 ) {
+    var normalValue by remember {
+        mutableStateOf("")
+    }
     Box(
         modifier = Modifier
             .fillMaxSize()
             .background(Background),
     ) {
         Column(
             modifier = Modifier
-                .align(Alignment.TopCenter),
+                .align(Alignment.TopCenter)
+                .verticalScroll(rememberScrollState()),
         ) {
             TopNavigationBar(title = "영상 선택", enableGradation = true)
             Text(
                 text = "ⓘ 최대 1분의 1080p 영상을 올려주세요.",
-                color = Gray03,
+                color = RecordyTheme.colors.gray03,
                 style = RecordyTheme.typography.caption2,
                 maxLines = 1,
                 modifier = Modifier.fillMaxWidth(),
                 textAlign = TextAlign.Center,
             )
+            Text(
+                text = "영상",
+                color = RecordyTheme.colors.white,
+                style = RecordyTheme.typography.subtitle,
+                modifier = Modifier.padding(top = 20.dp, bottom = 9.dp)
+            )
+            Box(
+                modifier = Modifier
+                    .background(RecordyTheme.colors.gray08, shape = RoundedCornerShape(16.dp))
+                    .customClickable(onClick = onClickPickVideo),
+            ) {
+                Column(
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .padding(vertical = 115.dp, horizontal = 57.dp),
+                    verticalArrangement = Arrangement.Center,
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Image(
+                        painter = painterResource(id = R.drawable.ic_plus_25),
+                        contentDescription = null,
+                        modifier = Modifier.padding(bottom = 12.dp)
+                    )
+                    Text(
+                        text = "영상 선택",
+                        color = RecordyTheme.colors.white,
+                        style = RecordyTheme.typography.subtitle,
+                    )
+                }
+            }
+            Text(
+                text = "키워드",
+                color = RecordyTheme.colors.white,
+                style = RecordyTheme.typography.subtitle,
+                modifier = Modifier.padding(top = 22.dp, bottom = 12.dp)
+            )
+
+            Row(
+                modifier = Modifier
+                    .background(RecordyTheme.colors.gray08, shape = RoundedCornerShape(30.dp))
+                    .customClickable(onClick = onClickKeyword),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.Center
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.ic_plus_25),
+                    contentDescription = null,
+                )
+                Text(
+                    text = "키워드",
+                    color = RecordyTheme.colors.gray03,
+                    style = RecordyTheme.typography.body2M,
+                )
+            }
+            Text(
+                text = "위치",
+                color = RecordyTheme.colors.white,
+                style = RecordyTheme.typography.subtitle,
+                modifier = Modifier.padding(top = 20.dp, bottom = 12.dp)
+            )
+            RecordyBasicTextField(
+                placeholder = "영상 속 위치는 어디인가요?",
+                maxLines = 1,
+                maxLength = 10,
+                value = normalValue,
+                onValueChange = { normalValue = it },
+            )
+            Text(
+                text = "내용",
+                color = RecordyTheme.colors.white,
+                style = RecordyTheme.typography.subtitle,
+                modifier = Modifier.padding(top = 10.dp, bottom = 12.dp)
+            )
+            RecordyBasicTextField(
+                placeholder = "공간에 대한 나의 생각을 자유롭게 적어주세요!",
+                maxLines = 20,
+                maxLength = 300,
+                value = normalValue,
+                onValueChange = { normalValue = it },
+            )
         }
-        RecordyButton(
-            modifier = Modifier.align(Alignment.Center),
-            text = "다음",
-            enabled = true,
-            onClick = navigateSelectedKeyword,
-        )
     }
 }
