Merge pull request #13 from HaruDamda/feature/#7-포토북-UI-작업

feat: 회원가입 뷰 수정 중
HaruDamda · Nov 21, 2023 · b66fd5f · b66fd5f
2 parents 96bae4f + aea1da6
commit b66fd5f
Show file tree

Hide file tree

Showing 9 changed files with 502 additions and 297 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>PicPic</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/logo-pic.png b/public/logo-pic.png
diff --git a/public/logo.png b/public/logo.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/apis/emailCheck.js b/src/apis/emailCheck.js
@@ -0,0 +1,13 @@
+import axios from "axios";
+
+export const emailCheck = (formData, setFormData) => {
+  axios
+    .post("api/users/idcheck", { email: formData.email })
+    .then(() => {
+      alert("사용할 수 있는 이메일입니다.");
+    })
+    .catch(() => {
+      alert("사용할 수 없는 이메일입니다.");
+      setFormData({ ...formData, email: "" });
+    });
+};
diff --git a/src/pages/Join/Join.jsx b/src/pages/Join/Join.jsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 import styles from "./Join.module.scss";
 // import api from "../../apis/api";
 import { onSignUp } from "../../apis/onSignUp";
+import { emailCheck } from "../../apis/emailCheck";
 
 export default function SignUp() {
   const initialState = {
@@ -156,108 +157,106 @@ export default function SignUp() {
 
   return (
     <div className={styles.loginContainer}>
-      <div className={styles.Upper}>
-        <div className={styles.signUpBox}>
-          <span>
-            <Link href="/login">
-              <button className={styles.closeBtn}>취소</button>
-            </Link>
-            <h4 className={styles.signUpTitle}>회원가입</h4>
-          </span>
-          <h5>이메일</h5>
-          <span>
+      <div className={styles.signUpBox}>
+        <div className={styles.header}>
+          <Link to="/login">
+            <button className={styles.closeBtn}>취소</button>
+          </Link>
+          <h4>회원가입</h4>
+          <div></div>
+        </div>
+        <div className={styles.body}>
+          <div>
+            <h5>이메일</h5>
+            <div className={styles.emailWrapper}>
+              <input
+                name="email"
+                onChange={handleChange}
+                type="email"
+                className={
+                  isValid.email || formData.email === ""
+                    ? styles.emailInputBox
+                    : styles.emailInputBox1
+                }
+                placeholder="이메일을 입력해주세요"
+              ></input>
+              <button
+                className={styles.emailCheck}
+                onClick={() => {
+                  emailCheck(formData,setFormData);
+                }}
+              >
+                중복확인
+              </button>
+            </div>
+            {errorMessages.email && (
+              <span className={`message error`}>{errorMessages.email}</span>
+            )}
+          </div>
+          <div>
+            <h5>닉네임</h5>
             <input
-              name="email"
+              className={
+                isValid.nickname || formData.nickname === ""
+                  ? styles.inputBox
+                  : styles.inputBox1
+              }
+              onChange={handleChange}
+              name="nickname"
+              placeholder="닉네임을 입력해주세요"
+            ></input>
+            {errorMessages.nickname && (
+              <span className={`message error`}>{errorMessages.nickname}</span>
+            )}
+          </div>
+          <div>
+            <h5>비밀번호</h5>
+            <input
+              name="password"
               onChange={handleChange}
-              type="email"
+              type="password"
               className={
-                isValid.email || formData.email === ""
-                  ? styles.emailInputBox
-                  : styles.emailInputBox1
+                isValid.password || formData.password === ""
+                  ? styles.inputBox
+                  : styles.inputBox1
               }
-              placeholder="이메일을 입력해주세요"
+              placeholder="비밀번호를 입력해주세요"
             ></input>
-            <button
-              className={styles.emailCheck}
-              // onClick={() => {
-              //   axios
-              //     .post("api/users/idcheck", { email: formData.email })
-              //     .then(() => {
-              //       alert("사용할 수 있는 이메일입니다.");
-              //     })
-              //     .catch(() => {
-              //       alert("사용할 수 없는 이메일입니다.");
-              //       setFormData({ ...formData, email: "" });
-              //     });
-              // }}
-            >
-              중복확인
-            </button>
-            {errorMessages.email && (
-              <span className={`message error`}>{errorMessages.email}</span>
+            {errorMessages.password && <span>{errorMessages.password}</span>}
+            <input
+              name="passwordConfirm"
+              onChange={handleChange}
+              type="password"
+              className={
+                isValid.passwordConfirm || formData.passwordConfirm === ""
+                  ? styles.inputBox
+                  : styles.inputBox1
+              }
+              placeholder="비밀번호를 다시 한번 입력해주세요"
+            ></input>
+            {errorMessages.passwordConfirm && (
+              <span className={`message error`}>
+                {errorMessages.passwordConfirm}
+              </span>
             )}
-          </span>
-
-          <h5>닉네임</h5>
-          <input
-            className={
-              isValid.nickname || formData.nickname === ""
-                ? styles.inputBox
-                : styles.inputBox1
-            }
-            onChange={handleChange}
-            name="nickname"
-            placeholder="닉네임을 입력해주세요"
-          ></input>
-          {errorMessages.nickname && (
-            <span className={`message error`}>{errorMessages.nickname}</span>
-          )}
-          <h5>비밀번호</h5>
-          <input
-            name="password"
-            onChange={handleChange}
-            type="password"
-            className={
-              isValid.password || formData.password === ""
-                ? styles.inputBox
-                : styles.inputBox1
-            }
-            placeholder="비밀번호를 입력해주세요"
-          ></input>
-          {errorMessages.password && <span>{errorMessages.password}</span>}
-          <input
-            name="passwordConfirm"
-            onChange={handleChange}
-            type="password"
-            className={
-              isValid.passwordConfirm || formData.passwordConfirm === ""
-                ? styles.inputBox
-                : styles.inputBox1
-            }
-            placeholder="비밀번호를 다시 한번 입력해주세요"
-          ></input>
-          {errorMessages.passwordConfirm && (
-            <span className={`message error`}>
-              {errorMessages.passwordConfirm}
-            </span>
-          )}
-
-          <h5>나이</h5>
-          <select
-            className={styles.ageScroll}
-            value={formData.birth || ""}
-            onChange={(e) =>
-              setFormData({ ...formData, birth: Number(e.target.value) })
-            }
-          >
-            <option value="">출생년도 입력(선택)</option>
-            {[...Array(87)].map((_, index) => (
-              <option key={index} value={2004 - index}>
-                {2004 - index}
-              </option>
-            ))}
-          </select>
-
+          </div>
+          <div>
+            <h5>나이</h5>
+            <select
+              className={styles.ageScroll}
+              value={formData.birth || ""}
+              onChange={(e) =>
+                setFormData({ ...formData, birth: Number(e.target.value) })
+              }
+            >
+              <option value="">출생년도 입력(선택)</option>
+              {[...Array(87)].map((_, index) => (
+                <option key={index} value={2004 - index}>
+                  {2004 - index}
+                </option>
+              ))}
+            </select>
+          </div>
           <div className={styles.agreeForm1}>
             <div className={styles.allWrapper}>
               <input