[design] #62 upload ui

Author: lsakee

core/designsystem/src/main/java/com/record/designsystem/component/textfield/RecordyBasicTextField.kt

@@ -7,6 +7,7 @@ import androidx.compose.foundation.interaction.collectIsFocusedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
@@ -79,7 +80,7 @@ fun RecordyBasicTextField(
     }
 
     BasicTextField(
-        modifier =if (minHeight==null) modifier.fillMaxWidth() else modifier.height(148.dp).fillMaxWidth(),
+        modifier =modifier.fillMaxWidth(),
         value = value,
         onValueChange = { newValue ->
             if (newValue.replace(" ", "").length <= maxLength) onValueChange(newValue)
@@ -101,6 +102,7 @@ fun RecordyBasicTextField(
             ) {
                 Box(
                     modifier = Modifier
+                        .heightIn(minHeight)
                         .fillMaxWidth()
                         .clip(shape = shape)
                         .background(color = Gray08)
@@ -110,7 +112,6 @@ fun RecordyBasicTextField(
                             shape = shape,
                         )
                         .padding(vertical = 16.dp, horizontal = 18.dp),
-                    contentAlignment = Alignment.CenterStart,
                 ) {
                     if (value.isEmpty()) {
                         Text(
@@ -184,6 +185,7 @@ fun TextFieldPreview() {
                 placeholder = "레코디",
                 maxLines = 20,
                 maxLength = 300,
+                minHeight = 148.dp,
                 value = normalValue,
                 onValueChange = { normalValue = it },
             )

core/designsystem/src/main/res/drawable/ic_plus_16.xml

@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M3.75,7.816H12.25"
+      android:fillColor="#00000000"
+      android:strokeColor="#A5A9B4"
+      android:strokeLineCap="round"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M8.185,12.25L8.185,3.75"
+      android:fillColor="#00000000"
+      android:strokeColor="#A5A9B4"
+      android:strokeLineCap="round"/>
+</vector>

feature/upload/src/main/java/com/record/upload/VideoPickerScreen.kt

@@ -23,13 +23,16 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.record.designsystem.R
+import com.record.designsystem.component.button.RecordyButton
 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.RecordyTheme
 import com.record.ui.extension.customClickable
+import timber.log.Timber
 
 @Composable
 fun VideoPickerRoute(
@@ -64,7 +67,7 @@ fun VideoPickerScreen(
         ) {
             TopNavigationBar(title = "영상 선택", enableGradation = true)
             Text(
-                text = "ⓘ 최대 1분의 1080p 영상을 올려주세요.",
+                text = "ⓘ 주제와 무관한 기록은 무통보로 삭제될 수 있습니다",
                 color = RecordyTheme.colors.gray03,
                 style = RecordyTheme.typography.caption2,
                 maxLines = 1,
@@ -95,7 +98,7 @@ fun VideoPickerScreen(
                         modifier = Modifier.padding(bottom = 12.dp)
                     )
                     Text(
-                        text = "영상 선택",
+                        text = "내용 작성",
                         color = RecordyTheme.colors.white,
                         style = RecordyTheme.typography.subtitle,
                     )
@@ -107,23 +110,23 @@ fun VideoPickerScreen(
                 style = RecordyTheme.typography.subtitle,
                 modifier = Modifier.padding(top = 22.dp, bottom = 12.dp)
             )
-
-            Row(
-                modifier = Modifier
+                Row(modifier = Modifier
                     .background(RecordyTheme.colors.gray08, shape = RoundedCornerShape(30.dp))
+                    .padding(vertical = 8.dp)
+                    .padding(start = 8.dp, end = 12.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,
-                )
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Center
+                ) {
+                    Image(
+                        painter = painterResource(id = R.drawable.ic_plus_16),
+                        contentDescription = null,
+                    )
+                    Text(
+                        text = "키워드",
+                        color = RecordyTheme.colors.gray03,
+                        style = RecordyTheme.typography.body2M,
+                    )
             }
             Text(
                 text = "위치",
@@ -148,9 +151,25 @@ fun VideoPickerScreen(
                 placeholder = "공간에 대한 나의 생각을 자유롭게 적어주세요!",
                 maxLines = 20,
                 maxLength = 300,
+                minHeight = 148.dp,
                 value = normalValue,
+                modifier = Modifier.padding(bottom = 10.dp),
                 onValueChange = { normalValue = it },
             )
+            RecordyButton(
+//                modifier = Modifier.padding(16.dp),
+                text = "키워드",
+                enabled = false,
+                onClick = { Timber.d("basic key word") },
+            )
         }
     }
 }
+
+@Preview
+@Composable
+fun VideoPickerScreenPreview() {
+    RecordyTheme {
+        VideoPickerScreen(navigateSelectedKeyword = { /*TODO*/ })
+    }
+}