[#388] Input, Select 컴포넌트 에러 처리

src/stories/Base/Input.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import Input from '@/ui/Base/Input';
 import Button from '@/ui/Base/Button';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { Control, SubmitHandler, useForm, useWatch } from 'react-hook-form';
+import ErrorMessage from '@/ui/Base/ErrorMessage';
 
 const meta: Meta<typeof Input> = {
   title: 'Base/Input',
@@ -22,6 +23,7 @@ const InputWithUseForm = () => {
   const {
     register,
     handleSubmit,
+    control,
     formState: { errors },
   } = useForm<DefaultValues>({
     mode: 'all',
@@ -36,23 +38,32 @@ const InputWithUseForm = () => {
       onSubmit={handleSubmit(handleSubmitForm)}
       className="flex w-[43rem] flex-col gap-[1.6rem]"
     >
-      <Input
-        placeholder="이름을 입력해주세요."
-        {...register('name', {
-          required: '필수 항목입니다.',
-          minLength: { value: 2, message: '2자 이상 입력해 주세요.' },
-          maxLength: { value: 10, message: '10자 이하 입력해 주세요.' },
-        })}
-        error={errors.name}
-      />
-      <Input
-        placeholder="나이를 입력해 주세요."
-        {...register('age', {
-          pattern: { value: /^[0-9]+$/, message: '숫자만 입력 가능해요' },
-          min: { value: 0, message: '0살부터 입력 가능해요.' },
-        })}
-        error={errors.age}
-      />
+      <div className="flex flex-col gap-[0.5rem]">
+        <Input
+          placeholder="이름을 입력해주세요."
+          {...register('name', {
+            required: '필수 항목입니다.',
+            minLength: { value: 2, message: '2자 이상 입력해 주세요.' },
+            maxLength: { value: 10, message: '10자 이하 입력해 주세요.' },
+          })}
+          error={!!errors.name}
+        />
+        <div className="flex flex-row-reverse justify-between gap-[0.4rem]">
+          <Length control={control} minLength={2} maxLength={10} />
+          {errors.name && <ErrorMessage>{errors.name.message}</ErrorMessage>}
+        </div>
+      </div>
+      <div className="flex flex-col gap-[0.5rem]">
+        <Input
+          placeholder="나이를 입력해 주세요."
+          {...register('age', {
+            pattern: { value: /^[0-9]+$/, message: '숫자만 입력 가능해요' },
+            min: { value: 0, message: '0살부터 입력 가능해요.' },
+          })}
+          error={!!errors.age}
+        />
+        {errors.age && <ErrorMessage>{errors.age.message}</ErrorMessage>}
+      </div>
       <Button
         size="large"
         type="submit"
@@ -63,6 +74,33 @@ const InputWithUseForm = () => {
     </form>
   );
 };
+
+const Length = ({
+  control,
+  minLength,
+  maxLength,
+}: {
+  control: Control<DefaultValues>;
+  minLength: number;
+  maxLength: number;
+}) => {
+  const nickname = useWatch({
+    control,
+    name: 'name',
+  });
+
+  const currentLength = nickname ? nickname.length : 0;
+  const isError = minLength > currentLength || currentLength > maxLength;
+  const textColor = isError ? 'text-warning-800 ' : 'text-main-900';
+
+  return (
+    <div>
+      <span className={textColor}>{currentLength}</span>/
+      {maxLength}
+    </div>
+  );
+};
+
 export const Default: Story = {
   args: {
     placeholder: '입력해 주세요.',
@@ -72,11 +110,14 @@ export const Default: Story = {
 export const Invalid: Story = {
   args: {
     placeholder: '입력해 주세요.',
-    error: {
-      type: 'value',
-      message: '에러 메시지에요.',
-    },
+    error: true,
   },
+  render: args => (
+    <div className="flex flex-col gap-[0.5rem]">
+      <Input {...args} />
+      <ErrorMessage>양식을 확인해주세요.</ErrorMessage>
+    </div>
+  ),
 };
 
 export const WithUseForm: Story = {

src/stories/Base/Select.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import Select from '@/ui/Base/Select';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import Button from '@/ui/Base/Button';
+import ErrorMessage from '@/ui/Base/ErrorMessage';
 
 const meta: Meta<typeof Select> = {
   title: 'Base/Select',
@@ -39,30 +40,36 @@ const SelectWithUseForm = () => {
       onSubmit={handleSubmit(handleSubmitForm)}
       className="flex w-[43rem] flex-col gap-[1.6rem]"
     >
-      <Select
-        placeholder="숫자를 선택해주세요. (필수)"
-        {...register('requiredNumber', {
-          required: '필수 항목입니다.',
-        })}
-        errorMessage={errors.requiredNumber?.message}
-      >
-        {numbers.map(number => (
-          <Select.Option key={number} value={number}>
-            {number}
-          </Select.Option>
-        ))}
-      </Select>
-      <Select
-        placeholder="숫자를 선택해주세요."
-        {...register('number')}
-        errorMessage={errors.number?.message}
-      >
-        {numbers.map(number => (
-          <Select.Option key={number} value={number}>
-            {number}
-          </Select.Option>
-        ))}
-      </Select>
+      <div className="flex flex-col gap-[0.5rem]">
+        <Select
+          placeholder="숫자를 선택해주세요. (필수)"
+          {...register('requiredNumber', {
+            required: '필수 항목입니다.',
+          })}
+          error={!!errors.requiredNumber}
+        >
+          {numbers.map(number => (
+            <Select.Option key={number} value={number}>
+              {number}
+            </Select.Option>
+          ))}
+        </Select>
+        {errors.requiredNumber && <ErrorMessage>{errors.requiredNumber.message}</ErrorMessage>}
+      </div>
+      <div className="flex flex-col gap-[0.5rem]">
+        <Select
+          placeholder="숫자를 선택해주세요."
+          {...register('number')}
+          error={!!errors.number}
+        >
+          {numbers.map(number => (
+            <Select.Option key={number} value={number}>
+              {number}
+            </Select.Option>
+          ))}
+        </Select>
+        {errors.number && <ErrorMessage>{errors.number.message}</ErrorMessage>}
+      </div>
       <Button
         size="large"
         type="submit"
@@ -93,9 +100,15 @@ export const Default: Story = {
 
 export const Invalid: Story = {
   args: {
-    placeholder: '선택해 주세요.',
-    errorMessage: '에러 메시지에요.',
+    placeholder: '입력해 주세요.',
+    error: true,
   },
+  render: args => (
+    <div className="flex flex-col gap-[0.5rem]">
+      <Select {...args} />
+      <ErrorMessage>양식을 확인해주세요.</ErrorMessage>
+    </div>
+  ),
 };
 
 export const WithUseForm: Story = {

src/ui/Base/ErrorMessage.tsx

@@ -0,0 +1,13 @@
+import { IconWarningCircle } from '@public/icons';
+import { ReactNode } from 'react';
+
+const ErrorMessage = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className="flex items-center gap-[0.4rem] text-xs text-warning-800">
+      <IconWarningCircle />
+      {children}
+    </div>
+  );
+};
+
+export default ErrorMessage;

src/ui/Base/Input.tsx

@@ -1,23 +1,24 @@
 import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react';
-import { FieldError } from 'react-hook-form';
 
 interface InputProps extends ComponentPropsWithoutRef<'input'> {
-  error?: FieldError;
+  error?: boolean;
 }
 
-const Input = ({ error, ...props }: InputProps, ref: Ref<HTMLInputElement>) => {
+const Input = (
+  { error, children, ...props }: InputProps,
+  ref: Ref<HTMLInputElement>
+) => {
   const borderColor = error
     ? 'border-warning-800 focus:border-warning-800'
     : 'border-black-400 focus:border-main-900';
   return (
-    <div className="flex flex-col gap-[0.5rem] text-sm">
+    <div className="text-sm">
       <input
         className={`w-full rounded-[0.5rem] border-[0.05rem] px-[1rem] py-[1.3rem] outline-none ${borderColor}`}
         {...props}
         ref={ref}
       />
-      {/* TODO: 에러 메시지 컴포넌트로 교체 */}
-      {error && <div className="text-warning-800">{error.message}</div>}
+      {children}
     </div>
   );
 };

src/ui/Base/Select.tsx

@@ -5,24 +5,24 @@ interface SelectProps
     ComponentPropsWithoutRef<'select'>,
     'className' | 'defaultValue' | 'required'
   > {
-  errorMessage?: string;
+  error?: boolean;
 }
 
-const Select = (
-  { errorMessage, children, placeholder, ...props }: SelectProps,
+const _Select = (
+  { error, children, placeholder, ...props }: SelectProps,
   ref: Ref<HTMLSelectElement>
 ) => {
-  const borderColor = errorMessage
+  const borderColor = error
     ? 'border-warning-800'
     : 'border-black-400 focus:border-main-900';
 
   return (
-    <div className="flex flex-col gap-[0.5rem] text-sm">
+    <div className="text-sm">
       <select
         ref={ref}
         defaultValue=""
         required
-        className={`rounded-[0.5rem] border-[0.05rem] px-[1.0rem] py-[1.3rem] outline-none ${borderColor} cursor-pointer appearance-none bg-[url('/icons/select-icon.svg')] bg-[calc(100%-1rem)_center] bg-no-repeat invalid:text-placeholder`}
+        className={`rounded-[0.5rem] border-[0.05rem] px-[1.0rem] py-[1.3rem] outline-none ${borderColor} w-full cursor-pointer appearance-none bg-[url('/icons/select-icon.svg')] bg-[calc(100%-1rem)_center] bg-no-repeat invalid:text-placeholder`}
         {...props}
       >
         {placeholder && (
@@ -32,7 +32,6 @@ const Select = (
         )}
         {children}
       </select>
-      {errorMessage && <div className="text-warning-800">{errorMessage}</div>}
     </div>
   );
 };
@@ -49,6 +48,6 @@ const Option = ({
   );
 };
 
-const ExportSelect = Object.assign(forwardRef(Select), { Option });
+const Select = Object.assign(forwardRef(_Select), { Option });
 
-export default ExportSelect;
+export default Select;