feat: signuppage add state

src/pages/cart-page/CartPage.tsx

@@ -93,7 +93,7 @@ const CartPage: FC<Props> = ({ connector }) => {
                                 <div className={S['item-text']}>
                                     <span className={S['item-name']}>{d.name}</span>
                                     <span className={S['item-price']}>{moneyFormatter(d.price * quantities[i])}</span>
-                                    <QuantityController quantity={quantities} setQuantity={setQuantities} index={i} />
+                                    <QuantityController quantity={quantities[i]} setQuantity={setQuantities} index={i} />
                                 </div>
                             </div>
                         );

src/pages/signup-page/SignupPage.tsx

@@ -21,13 +21,17 @@ interface Props {
 
 const SignupPage: React.FC<Props> = ({ connector }) => {
     const navigate = useNavigate();
-    const [password, setPassword] = useState<passString>({
-        origin : '',
-        again : ''
+    const [acountData, setAcountData] = useState({
+        loginId: '',
+        name: '',
+        password: '',
+        email: '',
+        phone: ''
     });
+    const [passwordAgain, setPasswordAgain] = useState<string>('');
     const Correct = () => {
-        const empty = password.origin === '';
-        const same = password.origin === password.again;
+        const empty = acountData.password === '';
+        const same = acountData.password === passwordAgain;
         if (empty) {
             return null;
         }
@@ -39,18 +43,38 @@ const SignupPage: React.FC<Props> = ({ connector }) => {
             </div>
         );
     };
-
+    const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setAcountData((prev) => ({
+            ...prev,
+            name : event.target.value
+        }));
+    };
+    const handleIdChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setAcountData((prev) => ({
+            ...prev,
+            loginId : event.target.value
+        }));
+    };
+    const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setAcountData((prev) => ({
+            ...prev,
+            email : event.target.value
+        }));
+    };
+    const handlePhoneChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setAcountData((prev) => ({
+            ...prev,
+            phone : event.target.value
+        }));
+    };
     const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setPassword((prevPass) => ({
-            ...prevPass,
-            origin : event.target.value
+        setAcountData((prev) => ({
+            ...prev,
+            password : event.target.value
         }));
     };
     const handlePasswordAgainChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setPassword((prevPass) => ({
-            ...prevPass,
-            again : event.target.value
-        }));
+        setPasswordAgain(() => (event.target.value));
     };
 
     const handleSignup = () => {
@@ -76,18 +100,19 @@ const SignupPage: React.FC<Props> = ({ connector }) => {
 
     return (
         <div className={S['container']}>
-            <input placeholder={'이름'} />
-            <input placeholder={'아이디'} />
-            <input placeholder={'이메일'} />
+            <input placeholder={'이름'} onChange={handleNameChange}/>
+            <input placeholder={'아이디'} onChange={handleIdChange}/>
+            <input placeholder={'이메일'} onChange={handleEmailChange}/>
+            <input placeholder={'전화번호'} onChange={handlePhoneChange}/>
             <input
                 placeholder={'비밀번호를 입력해주세요.'}
-                value={password.origin}
+                value={acountData.password}
                 onChange={handlePasswordChange}
                 type={'password'}
             />
             <input
                 placeholder={'비밀번호를 한번 더 입력해주세요.'}
-                value={password.again}
+                value={passwordAgain}
                 onChange={handlePasswordAgainChange}
                 type={'password'}
             />