refactor: 공용 인풋 피드백 반영 (#34)

package.json

@@ -17,6 +17,7 @@
     "@mui/material": "^6.2.0",
     "@svgr/webpack": "^8.1.0",
     "axios": "^1.7.9",
+    "classnames": "^2.5.1",
     "next": "15.0.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",

src/hook/useTextCounter.ts

@@ -3,19 +3,20 @@
 import { useState } from 'react';
 
 const useTextCounter = (maxLength: number | undefined) => {
-  const [text, setText] = useState<string>('');
+  const [text, setText] = useState<number>(0);
 
   const handleTextCounter = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
     if (!maxLength) return;
 
-    const userText = e.target.value;
-    if (userText.length <= maxLength) {
+    const userText = e.target.value.length;
+    console.log(userText);
+    if (userText <= maxLength) {
       setText(userText);
-      //한국어 입력 시 초과 글자는 포커스 아웃해야 사라짐
     }
   };
+  //https://yungis.dev/react/textarea-maxlength-limit/
 
   return { text, handleTextCounter };
 };

src/shared/Input/Input.module.scss

@@ -32,7 +32,7 @@
   }
 }
 
-.pwWrapper {
+.inputWrapper {
   position: relative;
 }
 

src/shared/Input/Input.tsx

@@ -1,31 +1,27 @@
 'use client';
 
 import React, { forwardRef } from 'react';
-import useInput from './hook/useInput';
+import classNames from 'classnames';
+import { useId } from 'react';
+import usePasswordToggle from './hook/usePasswordToggle';
+import useImageUpload from './hook/useImageUpload';
 import useTextCounter from '@/hook/useTextCounter';
 import Label from './component/Label';
 import PwToggleBtn from './component/PwToggleBtn';
 import TextCount from '../TextCount';
-// import InfoMessage from './component/InfoMessage';
 import ErrorMessage from './component/ErrorMessage';
 import FilePreview from './component/FilePreview';
 import styles from './Input.module.scss';
 
 type InputProps = {
-  type: string;
-  id: string;
   label?: string;
-  maxLength?: number;
-  multiple?: boolean;
   formErrorMessage?: string | null;
-  className?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input = forwardRef<HTMLInputElement | null, InputProps>(
   (
     {
-      type,
-      id,
+      type = 'text',
       label,
       maxLength,
       multiple,
@@ -35,32 +31,24 @@ const Input = forwardRef<HTMLInputElement | null, InputProps>(
     },
     ref
   ) => {
+    const { inputRef, showPassword, handleTogglePassword } =
+      usePasswordToggle();
+
     const {
-      showPassword,
       filePreviews,
       inputKey,
       fileErrorMessage,
-      handleTogglePassword,
       handleFileChange,
       handleDeleteImg,
-    } = useInput(multiple);
+    } = useImageUpload(multiple);
+
+    const id = useId();
 
     const { text, handleTextCounter } = useTextCounter(maxLength);
 
-    const handleChange = (
-      e: React.ChangeEvent<HTMLInputElement>,
-      type: string,
-      id: string
-    ) => {
-      const handlers: {
-        [key: string]: (e: React.ChangeEvent<HTMLInputElement>) => void;
-      } = {
-        file: handleFileChange,
-        text_nickname: handleTextCounter,
-      };
-      const key = type === 'text' && id === 'nickname' ? 'text_nickname' : type;
-      handlers[key]?.(e);
-    };
+    const inputClassName = classNames(styles.input, className, {
+      [styles.errorStatus]: formErrorMessage,
+    });
 
     return (
       <div
@@ -71,20 +59,18 @@ const Input = forwardRef<HTMLInputElement | null, InputProps>(
         }
       >
         <Label type={type} id={id} label={label} />
-        <div className={styles.pwWrapper}>
+        <div className={styles.inputWrapper}>
           <input
             key={inputKey}
             type={showPassword ? 'text' : type}
             id={id}
-            ref={ref}
+            ref={type === 'file' ? ref : inputRef}
             maxLength={maxLength}
-            onChange={(e) => handleChange(e, type, id)}
-            multiple={multiple}
-            className={
-              formErrorMessage
-                ? `${styles.input} ${className} ${styles.errorStatus}`
-                : `${styles.input} ${className}`
+            onChange={(e) =>
+              type === 'file' ? handleFileChange(e) : handleTextCounter(e)
             }
+            multiple={multiple}
+            className={inputClassName}
             {...props}
           />
           <PwToggleBtn
@@ -99,8 +85,6 @@ const Input = forwardRef<HTMLInputElement | null, InputProps>(
           />
         </div>
 
-        {/* 디자인 변경 고려*/}
-        {/* <InfoMessage id={id} /> */}
         <ErrorMessage
           formError={formErrorMessage}
           fileError={fileErrorMessage}

src/shared/Input/component/PwToggleBtn.tsx

@@ -22,14 +22,14 @@ const PwToggleBtn = ({
     >
       {showPassword ? (
         <Image
-          src={'/icon/ic-invisibility.svg'}
+          src={'/icon/ic-visibility.svg'}
           alt={'비밀번호 숨기기 버튼'}
           width={24}
           height={24}
         />
       ) : (
         <Image
-          src={'/icon/ic-visibility.svg'}
+          src={'/icon/ic-invisibility.svg'}
           alt={'비밀번호 보기 버튼'}
           width={24}
           height={24}

src/shared/Input/hook/useInput.ts → src/shared/Input/hook/useImageUpload.ts

@@ -2,18 +2,13 @@
 
 import { useState } from 'react';
 
-const useInput = (multiple: boolean | undefined) => {
-  const [showPassword, setShowPassword] = useState(false);
-  const [filePreviews, setFilePreviews] = useState<string[]>([]);
+const useImageUpload = (multiple: boolean | undefined) => {
   const [inputKey, setInputKey] = useState<number>(0);
+  const [filePreviews, setFilePreviews] = useState<string[]>([]);
   const [fileErrorMessage, setFileErrorMessage] = useState<string | null>(null);
 
   const MAX_FILES = multiple ? 4 : 1;
 
-  const handleTogglePassword = () => {
-    setShowPassword((prev) => !prev);
-  };
-
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (!files) return;
@@ -72,14 +67,12 @@ const useInput = (multiple: boolean | undefined) => {
   };
 
   return {
-    showPassword,
     filePreviews,
     inputKey,
     fileErrorMessage,
-    handleTogglePassword,
     handleFileChange,
     handleDeleteImg,
   };
 };
 
-export default useInput;
+export default useImageUpload;

src/shared/Input/hook/usePasswordToggle.ts

@@ -0,0 +1,23 @@
+'use client';
+
+import { useState, useRef } from 'react';
+
+const usePasswordToggle = () => {
+  const [showPassword, setShowPassword] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleTogglePassword = () => {
+    setShowPassword((prev) => !prev);
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
+  return {
+    inputRef,
+    showPassword,
+    handleTogglePassword,
+  };
+};
+
+export default usePasswordToggle;

src/shared/TextArea/TextArea.tsx

@@ -4,18 +4,15 @@ import TextCount from '../TextCount';
 import useTextCounter from '@/hook/useTextCounter';
 import styles from './TextArea.module.scss';
 
-type TextAreaProps = {
-  id: string;
-  className?: string;
-  maxLength: number;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-
-const TextArea = ({ id, className, maxLength, ...props }: TextAreaProps) => {
+const TextArea = ({
+  className,
+  maxLength,
+  ...props
+}: React.TextareaHTMLAttributes<HTMLTextAreaElement>) => {
   const { text, handleTextCounter } = useTextCounter(maxLength);
   return (
     <div className={styles.textareaWrapper}>
       <textarea
-        id={id}
         maxLength={maxLength}
         onChange={handleTextCounter}
         {...props}

src/shared/TextCount.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 type TextCountProps = {
-  text: string;
+  text: number;
   maxLength?: number;
   className?: string;
 };
@@ -10,7 +10,7 @@ const TextCount = ({ text, maxLength, className }: TextCountProps) => {
   return (
     maxLength && (
       <div className={className}>
-        {text.length}/{maxLength}
+        {text}/{maxLength}
       </div>
     )
   );