[Feat/#8] 에러 케이스 및 라벨 추가

doyeon0307 · doyeon0307 · commit 853dd672d584 · 2026-01-11T18:53:02.000+09:00
diff --git a/app/src/main/java/com/poti/android/core/designsystem/component/field/PotiDropdownField.kt b/app/src/main/java/com/poti/android/core/designsystem/component/field/PotiDropdownField.kt
@@ -6,7 +6,9 @@ import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+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.padding
@@ -49,6 +51,8 @@ import com.poti.android.core.designsystem.theme.White
  * @param menuItems 메뉴에 노출되는 아이템 데이터 리스트입니다.
  * @param selectedIds 메뉴 아이템의 selected 상태 표시에 쓰이며, 외부에서 제어합니다. 선택된 아이템 객체의 id 프로퍼티를 넣어줍니다.
  * @param modifier
+ * @param label 필드 상단에 표시됩니다.
+ * @param error emptyString이 아닌 경우 필드 하단에 에러 메시지를 노출하고, borderColor를 변경합니다.
  * @param initialOpenState 메뉴의 초기 열림 상태를 설정합니다. 기본값 false로, 열린 상태를 초기값으로 하고 싶을 때에만 true로 설정합니다.
  * @param closeOnItemClick 메뉴 아이템 클릭 시 메뉴를 닫는 옵션입니다. 기본값 true로, 다중 선택 필요하다면 false로 설정합니다.
  * @param maxHeight 메뉴 최대 높이를 제한합니다. 기본값 422dp입니다.
@@ -68,6 +72,8 @@ fun PotiDropdownField(
     menuItems: List<FieldMenuItem>,
     selectedIds: Set<String>,
     modifier: Modifier = Modifier,
+    label: String = "",
+    error: String = "",
     initialOpenState: Boolean = false,
     closeOnItemClick: Boolean = true,
     maxHeight: Dp? = 422.dp,
@@ -85,51 +91,63 @@ fun PotiDropdownField(
         }
     }
 
+    val borderColor = when {
+        error.isNotEmpty() -> PotiTheme.colors.sementicRed
+        expandedState.currentState || expandedState.targetState -> PotiTheme.colors.gray700
+        else -> PotiTheme.colors.gray300
+    }
+
     Box(
         modifier = modifier
             .fillMaxWidth(),
     ) {
-        PotiBasicField(
-            value = value,
-            onValueChaged = {},
-            placeholder = placeholder,
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(52.dp)
-                .onGloballyPositioned { coordinates ->
-                    parentWidth = coordinates.size.width
-                }
-                .onFocusChanged { focusState ->
-                    if (!focusState.isFocused && expandedState.currentState) {
-                        expandedState.targetState = false
+        Column(
+            verticalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            FieldLabel(label)
+
+            PotiBasicField(
+                value = value,
+                onValueChaged = {},
+                placeholder = placeholder,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(52.dp)
+                    .onGloballyPositioned { coordinates ->
+                        parentWidth = coordinates.size.width
+                    }
+                    .onFocusChanged { focusState ->
+                        if (!focusState.isFocused && expandedState.currentState) {
+                            expandedState.targetState = false
+                        }
+                    }
+                    .clickable(
+                        indication = null,
+                        interactionSource = remember { MutableInteractionSource() },
+                    ) {
+                        expandedState.targetState = !expandedState.currentState
+                    },
+                borderColor = borderColor,
+                backgroundColor = White,
+                trailingIcon = {
+                    Crossfade(
+                        targetState = expandedState.targetState,
+                    ) { opened ->
+                        Icon(
+                            imageVector = ImageVector.vectorResource(if (opened) R.drawable.ic_arrow_up_lg else R.drawable.ic_arrow_down_lg),
+                            contentDescription = null,
+                            modifier = Modifier
+                                .size(24.dp),
+                            tint = PotiTheme.colors.gray700,
+                        )
                     }
-                }
-                .clickable(
-                    indication = null,
-                    interactionSource = remember { MutableInteractionSource() },
-                ) {
-                    expandedState.targetState = !expandedState.currentState
                 },
-            borderColor = when {
-                expandedState.currentState || expandedState.targetState -> PotiTheme.colors.gray700
-                else -> PotiTheme.colors.gray300
-            },
-            backgroundColor = White,
-            trailingIcon = {
-                Crossfade(
-                    targetState = expandedState.targetState,
-                ) { opened ->
-                    Icon(
-                        imageVector = ImageVector.vectorResource(if (opened) R.drawable.ic_arrow_up_lg else R.drawable.ic_arrow_down_lg),
-                        contentDescription = null,
-                        modifier = Modifier
-                            .size(24.dp),
-                        tint = PotiTheme.colors.gray700,
-                    )
-                }
-            },
-            enabled = false,
-        )
+                enabled = false,
+            )
+
+            // TODO: [도연] Display>errorMessage로 대체
+            FieldErrorMessage(error)
+        }
 
         PotiDropdownMenu(
             expandedState = expandedState,
@@ -241,6 +259,7 @@ private fun PotiDropdownFieldWithPriceWithMutlipleSelectPreveiw() {
             modifier = Modifier
                 .padding(horizontal = 20.dp)
                 .padding(top = 40.dp),
+            error = "에러 메시지",
             closeOnItemClick = false,
         )
     }
diff --git a/app/src/main/java/com/poti/android/core/designsystem/component/field/PotiSearchField.kt b/app/src/main/java/com/poti/android/core/designsystem/component/field/PotiSearchField.kt
@@ -5,7 +5,9 @@ import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+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.padding
@@ -56,6 +58,8 @@ import kotlinx.coroutines.delay
  * @param selectedIds 메뉴 아이템의 selected 상태 표시에 쓰이며, 외부에서 제어합니다. 선택된 아이템 객체의 id 프로퍼티를 넣어줍니다.
  * @param searchType 서치 타입에 따라 메뉴 최대 길이가 조정됩니다. 아티스트 검색 시 ARTIST, 상품 등록을 위한 상품명 검색 시 PRODUCT를 사용합니다.
  * @param modifier
+ * @param label 필드 상단에 표시됩니다.
+ * @param error emptyString이 아닌 경우 필드 하단에 에러 메시지를 노출하고, borderColor를 변경합니다.
  * @param focusRequester 포커스를 외부에서 제어하고 싶을 때 사용합니다. 예: 화면 진입 시 필드에 포커스 가도록
  * @param scrollState 메뉴 스크롤을 외부에서 제어하고 싶을 때 사용합니다.
  * @param offset 필드 하단으로부터 메뉴까지의 간격입니다. 기본값 12dp이며, y값만 조정 가능합니다.
@@ -73,6 +77,8 @@ fun PotiSearchField(
     selectedIds: Set<String>,
     searchType: SearchType,
     modifier: Modifier = Modifier,
+    label: String = "",
+    error: String = "",
     focusRequester: FocusRequester = remember { FocusRequester() },
     scrollState: ScrollState = rememberScrollState(),
     offset: DpOffset = DpOffset(x = 0.dp, y = 12.dp),
@@ -121,46 +127,58 @@ fun PotiSearchField(
         }
     }
 
+    val borderColor = when {
+        error.isNotEmpty() -> PotiTheme.colors.sementicRed
+        expandedState.currentState || expandedState.targetState -> PotiTheme.colors.gray700
+        else -> PotiTheme.colors.gray300
+    }
+
     Box(
         modifier = modifier
             .fillMaxWidth(),
     ) {
-        PotiBasicField(
-            value = value,
-            onValueChaged = {
-                isTyping = true
-                onValueChange(it)
-            },
-            placeholder = placeholder,
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(52.dp)
-                .onGloballyPositioned { coordinates ->
-                    parentWidth = coordinates.size.width
+        Column(
+            verticalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            FieldLabel(label)
+
+            PotiBasicField(
+                value = value,
+                onValueChaged = {
+                    isTyping = true
+                    onValueChange(it)
                 },
-            onFocusChanged = { isFieldFocused = it },
-            borderColor = when {
-                isFieldFocused -> PotiTheme.colors.gray700
-                else -> PotiTheme.colors.gray300
-            },
-            backgroundColor = White,
-            imeAction = ImeAction.Search,
-            onSearchAction = { onSearch() },
-            trailingIcon = {
-                Icon(
-                    imageVector = ImageVector.vectorResource(R.drawable.ic_search),
-                    contentDescription = null,
-                    modifier = Modifier
-                        .size(24.dp)
-                        .clickable(
-                            indication = null,
-                            interactionSource = remember { MutableInteractionSource() },
-                        ) { onSearch() },
-                    tint = PotiTheme.colors.gray700,
-                )
-            },
-            focusRequester = focusRequester,
-        )
+                placeholder = placeholder,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(52.dp)
+                    .onGloballyPositioned { coordinates ->
+                        parentWidth = coordinates.size.width
+                    },
+                onFocusChanged = { isFieldFocused = it },
+                borderColor = borderColor,
+                backgroundColor = White,
+                imeAction = ImeAction.Search,
+                onSearchAction = { onSearch() },
+                trailingIcon = {
+                    Icon(
+                        imageVector = ImageVector.vectorResource(R.drawable.ic_search),
+                        contentDescription = null,
+                        modifier = Modifier
+                            .size(24.dp)
+                            .clickable(
+                                indication = null,
+                                interactionSource = remember { MutableInteractionSource() },
+                            ) { onSearch() },
+                        tint = PotiTheme.colors.gray700,
+                    )
+                },
+                focusRequester = focusRequester,
+            )
+
+            // TODO: [도연] Display>errorMessage로 대체
+            FieldErrorMessage(error)
+        }
 
         PotiDropdownMenu(
             expandedState = expandedState,
@@ -241,7 +259,8 @@ private fun PotiSearchFieldPreview() {
                 .padding(horizontal = 20.dp)
                 .padding(top = 40.dp),
             onSearchClick = { },
-            searchType = SearchType.ARTIST
+            searchType = SearchType.ARTIST,
+            error = "에러 메시지"
         )
     }
 }
