Merge pull request #302 from prgrms-web-devcourse-final-project/refactor/inputFiled

[refactor] input 컴포넌트

Author: kangsuyeong

src/components/InputAuthCode.tsx

@@ -1,4 +1,4 @@
-import LoadingSpinnerButton from '@/components/button/LoadingSpinnerButton';
+import { LoadingSpinnerButton } from '@/components/button';
 import CountdownTimer from '@/components/CountdownTimer';
 import React from 'react';
 import { twMerge } from 'tailwind-merge';

src/components/button/index.ts

@@ -0,0 +1,3 @@
+import Button from '@/components/button/Button';
+import LoadingSpinnerButton from '@/components/button/LoadingSpinnerButton';
+export { Button, LoadingSpinnerButton };

src/components/Input.tsx renamed to src/components/input/Input.tsx

@@ -1,21 +1,23 @@
+import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  id?: string;
   className?: string;
 }
 
-function Input({ id, className, ...props }: InputProps) {
+const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
   return (
     <input
-      id={id}
+      ref={ref}
       className={twMerge(
         'w-full h-[38px] rounded-lg input-shadow outline-0 px-3 caption-m placeholder:text-gray-50 focus:ring-1 focus:ring-primary-active bg-white',
-        className, //사용자 정의 스타일
+        className,
       )}
-      {...props} //추가 속성
+      {...props}
     />
   );
-}
+});
+
+Input.displayName = 'Input';
 
 export default Input;

src/components/InputField.tsx renamed to src/components/input/InputField.tsx

@@ -1,4 +1,4 @@
-import Input from '@/components/Input';
+import Input from '@/components/input/Input';
 import { twMerge } from 'tailwind-merge';
 
 interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -31,18 +31,15 @@ export default function InputField({
       </div>
 
       {/* 유효성 검사 메시지 */}
-      <div className="flex items-center h-[18px]">
-        {message && (
-          <p
-            className={twMerge(
-              'text-[9px]/[18px] pl-[5px]',
-              isValid ? 'text-functional-success' : 'text-functional-danger',
-            )}
-          >
-            {message}
-          </p>
+      <p
+        className={twMerge(
+          'text-[9px]/[18px] pl-[5px]',
+          isValid ? 'text-functional-success' : 'text-functional-danger',
+          message === '' && 'invisible',
         )}
-      </div>
+      >
+        {message || '‎'}
+      </p>
     </div>
   );
 }

src/components/input/index.ts

@@ -0,0 +1,4 @@
+import Input from '@/components/input/Input';
+import InputField from '@/components/input/InputField';
+
+export { Input, InputField };

src/pages/Login.tsx

@@ -3,7 +3,7 @@ import { login } from '@/apis/auth';
 import Button from '@/components/button/Button';
 import logo from '@assets/icons/logo.svg';
 import kakao from '@assets/icons/kakao-icon.svg';
-import Input from '@/components/Input';
+import Input from '@/components/input/Input';
 import { useState } from 'react';
 import { useModalStore } from '@/store/modalStore';
 import SpinLoading from '@/components/loading/SpinLoading';

src/pages/editprofile/components/CurrentPasswordInput.tsx

@@ -1,4 +1,4 @@
-import InputField from '@/components/InputField';
+import InputField from '@/components/input/InputField';
 import { useState } from 'react';
 
 interface CurrentPasswordInputPros {

src/pages/signup/components/EmailInput.tsx

@@ -1,6 +1,6 @@
 import { getEmailAvailability, postEmailVerificationRequest } from '@/apis/email';
 import LoadingSpinnerButton from '@/components/button/LoadingSpinnerButton';
-import InputField from '@/components/InputField';
+import InputField from '@/components/input/InputField';
 import { EMAIL_REGEX } from '@/constants';
 import { useModalStore } from '@/store/modalStore';
 import { useMutation } from '@tanstack/react-query';

src/pages/signup/components/IdInput.tsx

@@ -1,6 +1,6 @@
 import { getIdAvailability } from '@/apis/user';
 import LoadingSpinnerButton from '@/components/button/LoadingSpinnerButton';
-import InputField from '@/components/InputField';
+import InputField from '@/components/input/InputField';
 import { ID_REGEX } from '@/constants';
 import { useModalStore } from '@/store/modalStore';
 import { useMutation } from '@tanstack/react-query';

src/pages/signup/components/NicknameInput.tsx

@@ -1,6 +1,6 @@
 import { getNicknameAvailability } from '@/apis/user';
 import LoadingSpinnerButton from '@/components/button/LoadingSpinnerButton';
-import InputField from '@/components/InputField';
+import InputField from '@/components/input/InputField';
 import { MAX_NICKNAME_LENGTH, MIN_NICKNAME_LENGTH, NICKNAME_REGEX } from '@/constants';
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';