Refactor/#41 input-field내에 에러 표시를 수정합니다. (#70)

* feat: input-field내에 에러 표시를 수정합니다. * refactor: 스토리북 파일을 임의로 변경합니다.
dnd-side-project · Sep 27, 2024 · 569c8a5 · 569c8a5
1 parent e9020dc
commit 569c8a5
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git a/src/components/common/input-field/InputField.stories.tsx b/src/components/common/input-field/InputField.stories.tsx
@@ -55,7 +55,7 @@ export const Primary: StoryObj<typeof InputField> = {
     const [error, setError] = useState('');
 
     const onChangeText = useCallback((text: string) => {
-      if (text.length > 10) {
+      if (text.length > 8) {
         setError('올바르지 않은 형식입니다');
       } else {
         setError('');

diff --git a/src/components/common/input-field/index.tsx b/src/components/common/input-field/index.tsx
@@ -1,9 +1,10 @@
+import { AntDesign } from '@expo/vector-icons';
 import type { ForwardedRef, ReactNode } from 'react';
 import React, { forwardRef, useRef } from 'react';
 import type { TextInput } from 'react-native';
 import { type TextInputProps } from 'react-native';
-import { Pressable } from 'react-native';
 
+import Typography from '@/components/common/typography';
 import { shadow } from '@/styles/shadow';
 import { color } from '@/styles/theme';
 import { mergeRefs } from '@/utils';
@@ -22,7 +23,7 @@ interface InputFieldProps extends TextInputProps {
 const InputField = forwardRef(
   (
     {
-      backgroundColor = 'transparent',
+      backgroundColor = color.Background.Normal,
       touched,
       isShadow = true,
       disabled = false,
@@ -40,9 +41,10 @@ const InputField = forwardRef(
     };
 
     return (
-      <Pressable onPress={handlePressInput}>
+      <S.WrapperBox onPress={handlePressInput}>
         <S.Container
-          style={isShadow ? shadow[2] : { backgroundColor }}
+          style={isShadow && shadow[2]}
+          $backgroundColor={backgroundColor}
           $disabled={disabled}
           $isError={Boolean(touched) && Boolean(error)}>
           {icon}
@@ -60,9 +62,22 @@ const InputField = forwardRef(
             placeholderTextColor={color.Label.Alternative}
             {...props}
           />
-          {touched && !!error && <S.ErrorText>{error}</S.ErrorText>}
         </S.Container>
-      </Pressable>
+        {touched && Boolean(error) && (
+          <S.ErrorBox>
+            <AntDesign
+              name='exclamationcircleo'
+              size={14}
+              color={color.Status.Error}
+            />
+            <Typography
+              color={color.Status.Error}
+              variant='Label1/Normal'>
+              {error}
+            </Typography>
+          </S.ErrorBox>
+        )}
+      </S.WrapperBox>
     );
   }
 );

diff --git a/src/components/common/input-field/style.ts b/src/components/common/input-field/style.ts
@@ -1,7 +1,11 @@
 import styled, { css } from '@emotion/native';
 import type { Theme } from '@emotion/react';
 
-import { flexDirectionRow, flexDirectionRowItemsCenter } from '@/styles/common';
+import {
+  flexDirectionColumn,
+  flexDirectionRow,
+  flexDirectionRowItemsCenter,
+} from '@/styles/common';
 
 const errorStyle = (theme: Theme) => css`
   border-color: ${theme.color.Status.Error};
@@ -18,7 +22,12 @@ const hasIconStyle = css`
   gap: 5px;
 `;
 
+export const WrapperBox = styled.Pressable`
+  ${flexDirectionColumn};
+`;
+
 export const Container = styled.View<{
+  $backgroundColor: string;
   $isError: boolean;
   $disabled: boolean;
 }>`
@@ -27,7 +36,8 @@ export const Container = styled.View<{
   ${flexDirectionRowItemsCenter};
   gap: 8px;
   padding: 18px 16px;
-  background-color: ${({ theme }) => theme.color.Background.Normal};
+  background-color: ${({ theme, $backgroundColor }) =>
+    $backgroundColor ? $backgroundColor : theme.color.Background.Normal};
   border-radius: 8px;
 `;
 
@@ -40,8 +50,8 @@ export const TextInput = styled.TextInput<{ $isIcon: boolean }>`
   color: ${(props) => props.theme.color.Label.Normal};
 `;
 
-export const ErrorText = styled.Text`
+export const ErrorBox = styled.View`
+  ${flexDirectionRowItemsCenter};
+  gap: 4px;
   padding-top: 5px;
-  font-size: 12px;
-  color: ${(props) => props.theme.color.Status.Error};
 `;