[REFACTOR] 회원가입 기능 (#40)

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

src/components/join/EmailCheck.jsx

@@ -8,28 +8,38 @@ export default function EmailCheck({ email, setEmail }) {
 
   const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; // 이메일 조건
   const [isValid, setIsValid] = useState(true); // 유효성 검사
+  const [isDuplicate, setIsDuplicate] = useState(true); // 중복 검사
 
   const handleCheckEmail = async () => {
     const isValidCheck = emailRegex.test(email);
-    setIsValid(isValidCheck);
+    setIsValid(isValidCheck); // 유효성 검사 통과
 
     if (!emailRegex.test(email)) {
       openModal();
-    } else {
-      try {
-        const response = await axios.get(`/joinform/api/signup/mailcheck`, {
-          params: { email: email },
-        });
-
-        if (response.status === 200) {
-          alert("확인되었습니다.");
-        } else if (response.status === 400) {
+      return;
+    }
+
+    try {
+      const response = await axios.get(
+        `${process.env.REACT_APP_API_BASE_URL}/joinform/api/signup/mailcheck`,
+        {
+          params: { mail: email },
+        }
+      );
+
+      if (response.status === 200) {
+        if (response.data.code === 200) {
+          // 중복 이메일 없을 때
+          setIsDuplicate(true);
+          openModal();
+        } else if (response.data.code === 400) {
+          // 중복 이메일이 존재할 때
+          setIsDuplicate(false);
           openModal();
         }
-      } catch (error) {
-        console.error("Error checking email:", error);
-        openModal();
       }
+    } catch (error) {
+      console.error("error: ", error);
     }
   };
 
@@ -64,7 +74,9 @@ export default function EmailCheck({ email, setEmail }) {
           <div>
             <ModalBody>
               {isValid
-                ? "중복된 이메일이 존재합니다. 다른 이메일을 입력해주세요."
+                ? isDuplicate
+                  ? "확인되었습니다"
+                  : "중복된 이메일이 존재합니다"
                 : "이메일 형식이 올바르지 않습니다."}
             </ModalBody>
           </div>

src/components/join/JoinForm.jsx

@@ -42,11 +42,14 @@ export default function JoinForm() {
       openModal();
     } else {
       try {
-        const response = await axios.post(`/joinform/api/signup`, {
-          usermail: email,
-          password: password,
-          nickname: nickname,
-        });
+        const response = await axios.post(
+          `${process.env.REACT_APP_API_BASE_URL}/joinform/api/signup`,
+          {
+            usermail: email,
+            password: password,
+            nickname: nickname,
+          }
+        );
 
         if (response.status === 200 && response.data.code === 200) {
           navigate("/joinend");

src/components/join/NicknameCheck.jsx

@@ -9,6 +9,7 @@ export default function NicknameCheck({ nickname, setNickname }) {
   // 아이디 중복 확인
   const nicknameRegex = /^[a-zA-Z0-9]{1,5}$/;
   const [isValid, setIsValid] = useState(true); // 유효성 검사
+  const [isDuplicate, setIsDuplicate] = useState(true); // 중복 검사
 
   const handleNickname = async () => {
     const checkedNickname = nicknameRegex.test(nickname); // 유효성 검사한 닉네임
@@ -17,33 +18,39 @@ export default function NicknameCheck({ nickname, setNickname }) {
 
     if (!nicknameRegex.test(nickname)) {
       openModal();
-    } else {
-      try {
-        const response = await axios.get(`/joinform/api/signup/nicknamecheck`, {
-          params: { nickname: nickname },
-        });
+    }
 
-        if (response.status === 200) {
-          alert("확인되었습니다.");
-        } else if (response.status === 400) {
-          openModal();
+    try {
+      const response = await axios.get(
+        `${process.env.REACT_APP_API_BASE_URL}/joinform/api/signup/nicknamecheck`,
+        {
+          params: { nickname: nickname },
         }
-      } catch (error) {
-        console.error("Error checking nickname:", error);
+      );
+
+      if (response.status === 200) {
+        // 중복 닉네임 없을 때
+        setIsDuplicate(true);
+        openModal();
+      } else if (response.status === 400) {
+        // 중복 닉네임 있을 때
+        setIsDuplicate(false);
         openModal();
       }
+    } catch (error) {
+      console.error("error: ", error);
     }
   };
 
   return (
     <>
       <Container>
         <Label>
-          아이디<span>*</span>
+          닉네임<span>*</span>
         </Label>
         <div>
           <SInput
-            placeholder="이메일을 입력해주세요."
+            placeholder="사용하실 닉네임을 입력해주세요."
             value={nickname}
             onChange={(e) => setNickname(e.target.value)}
           />
@@ -58,13 +65,15 @@ export default function NicknameCheck({ nickname, setNickname }) {
         </Text>
       </Container>
 
-      {/* 아이디 중복 확인 modal */}
+      {/* 닉네임 중복 확인 modal */}
       <Modal style={{ width: "400px", height: "220px" }}>
         <ModalContent>
           <div>
             <ModalBody>
               {isValid
-                ? "닉네임이 중복됩니다. 다른 닉네임을 입력해주세요."
+                ? isDuplicate
+                  ? "확인되었습니다"
+                  : "닉네임이 중복됩니다. 다른 닉네임을 입력해주세요."
                 : "잘못된 형식의 닉네임입니다."}
             </ModalBody>
           </div>