Feat/#66 fix signup modify

umc-master/src/apis/authApi.ts

@@ -1,38 +1,18 @@
-// import axiosInstance from '@apis/axios-instance';
+import axiosInstance from '@apis/axios-instance';
 
-// interface UserSignup {
-//   email: string;
-//   password: string;
-//   nickname: string;
-//   hashtags: string[];
-// }
+interface UserSignup {
+  email: string;
+  password: string;
+  nickname: string;
+  hashtags: string[];
+}
 
-// export const postSignup = async ({ email, password, nickname, hashtags } : UserSignup) => {
-//   const { data } = await axiosInstance.post(`/signup`, {
-//     email,
-//     password,
-//     nickname,
-//     hashtags,
-//   });
-//   return data;
-// };
-
-import axios from 'axios';
-
-export const postSignup = async () => {
-  try {
-    const response = await axios.post('https://api.hmaster.shop/api/v1/signup', {
-      email: 'ekos555@naver.com',
-      password: 'asfa1234!@',
-      nickname: 'rael',
-      hashtags: ['봄', '패션', '청소', '요리', '재활용', '주택']
-    }, {
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-    console.log('회원가입 성공:', response.data);
-  } catch (error) {
-    console.error('회원가입 오류:', error);
-  }
+export const postSignup = async ({ email, password, nickname, hashtags }: UserSignup) => {
+  const { data } = await axiosInstance.post(`/signup`, {
+    email,
+    password,
+    nickname,
+    hashtags,
+  });
+  return data;
 };

umc-master/src/pages/auth/SignUpPage.tsx

@@ -43,15 +43,17 @@ const handleNicknameChange = (nickname: string) => {
 };
 
 const handleHashtagChange = (hashtags: string[]) => {
-  setHashtag(hashtags);
+  const hashtagStrings = hashtags.map(hashtag => hashtag.toString());
+  setHashtag(hashtagStrings);
 };
 
 const handleSignUpComplete = async () => {
   try {
     const userSignupData = { email, password, nickname, hashtags };
     console.log("회원가입 확인:", userSignupData)
-    await postSignup();
-    navigate("/main");
+    await postSignup(userSignupData);
+    alert("회원가입 성공!");
+    navigate("/login");
   } catch (error) {
     console.error("회원가입 오류:", error);
     alert("회원가입에 실패했습니다. 다시 시도해주세요.");

umc-master/src/pages/auth/Signup_components/AgreementForm.tsx

@@ -3,7 +3,7 @@ import Typography from "@components/common/typography";
 import styled, { useTheme } from "styled-components";
 import ImgAdd from "@assets/add.svg";
 import ImgRemove from "@assets/remove.svg";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 interface AgreementItemProps {
   isRequired: boolean;  // 필수 여부
@@ -67,10 +67,14 @@ const AgreementForm: React.FC<Section1Props> = ({ onCheckRequired }) => {
   });
 
   // 전체 동의 체크박스
-  const handleAllAgreeChange = (checked: boolean) => {
-    setIsAllAgreed(checked);
+  const handleAllAgreeChange = () => {
+    const newCheckedState = !isAllAgreed;
+    setIsAllAgreed(newCheckedState);
     const updatedItems = {
-      terms: checked, privacy: checked, thirdinfo: checked, marketing: checked,
+      terms: newCheckedState, 
+      privacy: newCheckedState, 
+      thirdinfo: newCheckedState, 
+      marketing: newCheckedState, 
     };
     setCheckedItems(updatedItems);
     onCheckRequired(updatedItems.terms && updatedItems.privacy);
@@ -79,22 +83,13 @@ const AgreementForm: React.FC<Section1Props> = ({ onCheckRequired }) => {
   const handleCheckboxChange = (key: string, checked: boolean) => {
     setCheckedItems((prevState) => {
       const updatedItems = { ...prevState, [key]: checked };
+      const allChecked = Object.values(updatedItems).every(Boolean);
+      setIsAllAgreed(allChecked);
       onCheckRequired(updatedItems.terms && updatedItems.privacy);
       return updatedItems;
     });
   };
 
-  useEffect(() => {
-    if (isAllAgreed) {
-      setCheckedItems({
-        terms: true, privacy: true, thirdinfo: true, marketing: true,
-      });
-      onCheckRequired(true);
-    } else {
-      onCheckRequired(checkedItems.terms && checkedItems.privacy);
-    }
-  }, [isAllAgreed, checkedItems, onCheckRequired]);
-
   return (
     <Container>
       <AgreementItem 

umc-master/src/pages/auth/Signup_components/EmailForm.tsx

@@ -30,7 +30,7 @@ const EmailForm: React.FC<{
   const [emailSent, setEmailSent] = useState<boolean>(false); 
   const [verified, setVerified] = useState<boolean>(false);
   const [timer, setTimer] = useState<number>(180);
-  const [retryEnabled, setRetryEnabled] = useState<boolean>(false);
+  const [isEmailDuplicate, setIsEmailDuplicate] = useState<boolean>(false);
 
   const fullEmail = localPart && domain ? `${localPart}@${domain}` : "";
 
@@ -49,9 +49,7 @@ const EmailForm: React.FC<{
       timerInterval = setInterval(() => {
         setTimer((prev) => prev - 1);
       }, 1000);
-    } else if (timer === 0) {
-      setRetryEnabled(true);
-    }
+    } 
     return () => {
       if (timerInterval) {
         clearInterval(timerInterval);
@@ -103,6 +101,8 @@ const EmailForm: React.FC<{
     onEmailChange(updatedFullEmail);
 
     console.log("도메인 변경:", updatedFullEmail);
+
+    setIsEmailDuplicate(false); // 중복 확인 버튼을 다시 활성화
   };  
 
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -113,8 +113,26 @@ const EmailForm: React.FC<{
     onEmailChange(updatedFullEmail);
 
     console.log("이메일 입력:", updatedFullEmail);
+
+    setIsEmailDuplicate(false); // 중복 확인 버튼을 다시 활성화
   };
 
+  // 이메일 중복 체크
+  const checkEmailDuplicate = async () => {
+    if (!fullEmail) {
+      alert("이메일을 입력해주세요.");
+      return;
+    }
+    try {
+      const response = await axiosInstance.post("/check-email", { email: fullEmail });
+      if (response.data.isSuccess) {
+        setIsEmailDuplicate(true);
+        alert("사용 가능한 이메일입니다.");
+      }
+    } catch (error) {
+      alert("이메일이 이미 존재합니다.");
+    }
+  };
 
   const handleRetry = () => {
     setLocalPart("");
@@ -123,7 +141,6 @@ const EmailForm: React.FC<{
     setEmailSent(false);
     setVerified(false);
     setTimer(180);
-    setRetryEnabled(false); 
   };
 
   return (
@@ -147,16 +164,24 @@ const EmailForm: React.FC<{
         <EmailSelect
           value={domain}
           onChange={handleDomainChange}
-          disabled={emailSent}
+          disabled={emailSent || verified}
         >
           {emails.map((email) => (
             <option key={email.value} value={email.value}>
               {email.label}
             </option>
           ))}
         </EmailSelect>
-        <Button variant="emailCheck" onClick={handleEmailRequest} disabled={emailSent}>
-          이메일 인증
+        <Button 
+          variant="emailCheck" 
+          onClick={isEmailDuplicate === false ? checkEmailDuplicate : handleEmailRequest} 
+          disabled={emailSent || verified}
+          style={{
+            backgroundColor: isEmailDuplicate === false ? theme.colors.primary[500] : theme.colors.primary[900],
+            transition: 'background-color 0.5s ease'
+          }}
+        >
+          {isEmailDuplicate === false && !emailSent ? "중복 확인" : "이메일 인증"}
         </Button>
       </Email>
       <Email>
@@ -175,7 +200,7 @@ const EmailForm: React.FC<{
             variant="titleXxxSmall"
             style={{color: theme.colors.red[500]}}
           >남은 시간: {Math.floor(timer / 60)}분 {timer % 60}초</Typography>
-          <Button variant="emailCheck" onClick={handleRetry} disabled={retryEnabled} >
+          <Button variant="emailCheck" onClick={handleRetry} >
             재시도
           </Button>
         </Timer>

umc-master/src/pages/auth/Signup_components/PasswordForm.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/prop-types */
 import Typography from "@components/common/typography";
 import Input from "@components/Input/Input";
+import useInput from "@hooks/useInput";
+import { validatePasswordFormat } from "@utils/validation";
 import { useEffect, useState } from "react";
 import { styled, useTheme } from "styled-components";
 
@@ -13,11 +15,40 @@ const PasswordForm: React.FC<{
 
   const theme = useTheme();
 
-  const [password, setPassword] = useState<string>('');
   const [confirmPassword, setConfirmPassword] = useState<string>('');
+  const [passwordErrorMessage, setPasswordErrorMessage] = useState<string>('');
+  const [confirmPasswordErrorMessage, setConfirmPasswordErrorMessage] = useState<string>('');
+  const [isPasswordValid, setIsPasswordValid] = useState<boolean>(false);
+
+  // 비밀번호 상태 검증 및 에러메세지
+  const {
+    input: password, 
+    errorMessage: passwordInputErrorMessage,
+    changeHandler: passwordChangeHandler,
+  } = useInput({
+    initialValue: "",
+    validate: async (value) => {
+      const error = validatePasswordFormat(value);
+      setIsPasswordValid(!error); // 형식이 맞으면 true, 아니면 false
+      return error;
+    }
+  });
+
+  // 비밀번호 확인 오류 메시지 실시간 변동
+  useEffect(() => {
+    if (confirmPassword && password !== confirmPassword) {
+      setConfirmPasswordErrorMessage("비밀번호가 일치하지 않습니다.");
+    } else {
+      setConfirmPasswordErrorMessage("");
+    }
+  }, [confirmPassword, password]);
+
+  useEffect(() => {
+      setPasswordErrorMessage(passwordInputErrorMessage || "");
+  }, [passwordInputErrorMessage]);
 
   useEffect(() => {
-    if (password && confirmPassword && password === confirmPassword) {
+    if (isPasswordValid && confirmPassword && password === confirmPassword) {
       onCheckRequired(true);
     } else {
       onCheckRequired(false);
@@ -26,8 +57,8 @@ const PasswordForm: React.FC<{
 
   const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newPassword = e.target.value;
-    setPassword(newPassword);
     onPasswordChange(newPassword); // 상위 컴포넌트에 전달
+    passwordChangeHandler(e);
     console.log("비밀번호: ", newPassword);
   };
 
@@ -38,14 +69,14 @@ const PasswordForm: React.FC<{
         style={{color: theme.colors.primary[700]}}
       >비밀번호 입력 (필수) *</Typography>
       <Input 
-        errorMessage="" 
+        errorMessage={passwordErrorMessage} 
         type={'password'} 
         placeholder={'비밀번호 입력 (숫자, 영문자, 문자 포함 8~15자 이내)'}
         value={password}
         onChange={handlePasswordChange}
       />
       <Input 
-        errorMessage="" 
+        errorMessage={confirmPasswordErrorMessage} 
         type={'password'} 
         placeholder={'비밀번호 확인'} 
         value={confirmPassword}
@@ -57,7 +88,7 @@ const PasswordForm: React.FC<{
 
 export default PasswordForm;
 
-const Container = styled.div`
+const Container = styled.form`
   display: flex;
   flex-direction: column;
   align-items: flex-start;