Feat: 회원가입 및 로그인 페이지 개선, 이메일 중복 체크 기능 추가

pwc2002 · pwc2002 · commit 6efbf1f2a85a · 2025-08-31T03:00:39.000+09:00
diff --git a/src/app/admin/page.jsx b/src/app/admin/page.jsx
@@ -168,7 +168,10 @@ export default function Page() {
           className='dark py-[30px] px-[96px] mobile:px-[10px]'
           aria-label='Example table with custom cells'
           bottomContent={
-            <AdminTableBottomContent page={page} totalPages={totalPages} onChangePage={(newPage) => setPage(newPage)} />
+            <div className='relative'>
+              <AdminTableBottomContent page={page} totalPages={totalPages} onChangePage={(newPage) => setPage(newPage)} />
+              <div className='text-white text-base absolute right-0 bottom-0'>총 가입자 수 : {totalUsers}</div>
+            </div>
           }
           topContent={
             <AdminTableTopContent searchValue={searchValue} setSearchValue={setSearchValue} onSearch={handleSearch} />
diff --git a/src/app/auth/signup/page.jsx b/src/app/auth/signup/page.jsx
@@ -58,7 +58,7 @@ export default function Signup() {
     }, []);
 
     // 첫 번째 화면에서 다음 버튼 클릭 시 처리
-    const handleNext = () => {
+    const handleNext = async () => {
         if (!name || !email || !password || !confirmPassword) {
             alert("모든 칸을 채워주세요.");
             return;
@@ -67,11 +67,24 @@ export default function Signup() {
             alert("비밀번호가 일치하지 않습니다.");
             return;
         }
-        if(email === "pwc2002"){
+
+        const checkEmail =  await apiClient.get('/auth/check', {
+                params: {
+                    email: email
+                }
+        })
+        if(checkEmail.data.data.isDuplicated){
             setIsEmailValid(true);
-            alert("이미 가입된 이메일입니다.");
             return;
         }
+
+        if(checkEmail.data.code != 200){
+            alert("에러가 발생하였습니다.");
+            return;
+        }
+
+
+        
         if(errors.length > 0){
             alert("비밀번호 조건을 만족해주세요.");
             return;
@@ -109,6 +122,12 @@ export default function Signup() {
         try {
             const res = await apiClient.post('/auth/signup', userinfo);
             console.log(res);
+            if(res.data.code == 200){
+                console.log(res.data.message);
+                router.push("/auth/signin");
+            } else {
+                alert(res.data.message);
+            }
         } catch (error) {
             console.log(error);
         }
@@ -128,10 +147,10 @@ export default function Signup() {
 
     return (
         <div className="flex flex-col w-full items-center justify-start h-screen bg-black">
-            <div className="flex flex-col max-w-[414px] w-full h-full pt-[30px] px-5">
-                <p className="text-white text-xl font-bold mb-2">회원가입하기</p>
+            <div className="flex flex-col max-w-[414px] w-full h-full px-5 ">
+                {/* <p className="text-white text-xl font-bold mb-2">회원가입하기</p> */}
                 
-                <div className="relative w-full h-full overflow-y-scroll">
+                <div className="relative w-full h-full overflow-y-scroll flex flex-col justify-center">
                     <div key="screen1" className={`absolute w-full transition-all duration-500 ease-in-out transform ${isAnimating ? "-translate-x-full opacity-0" : "translate-x-0 opacity-100"}`}>
                         <ProfileInfoForm 
                             name={name}
@@ -146,6 +165,7 @@ export default function Signup() {
                             isEmailValid={isEmailValid}
                             isNameDisabled={isNameDisabled}
                             isEmailDisabled={isEmailDisabled}
+                            setIsEmailValid={setIsEmailValid}
                         />
                     </div>
 
@@ -167,7 +187,7 @@ export default function Signup() {
                         className="text-white bg-[#EA4336] w-full h-[48px] rounded-full" 
                         style={{boxShadow: "black 0px -10px 20px 10px"}}
                         onPress={isAnimating ? handleSignup : handleNext}
-                        isDisabled={!isAnimating && (!name || !email || !password || !confirmPassword || errors.length > 0 || password !== confirmPassword)}
+                        isDisabled={!isAnimating && (!name || !email || !password || !confirmPassword || errors.length > 0 || password !== confirmPassword || isEmailValid)}
                     >
                         {isAnimating ? "가입하기" : "다음"}
                     </Button>
diff --git a/src/components/auth/ApiCodeGuard.jsx b/src/components/auth/ApiCodeGuard.jsx
@@ -27,13 +27,13 @@ export default function ApiCodeGuard({ children }) {
           if (code === 200) {
             setAllowed(true);
           } else {
-            router.replace('/unauthorized');
+            router.replace('/auth/signin');
           }
         }
       } catch (error) {
         if (!cancelled) {
           // 인터셉터에서 401/403 처리로 리다이렉트가 발생할 수 있으므로, 보조적으로 차단
-          router.replace('/unauthorized');
+          router.replace('/auth/signin');
         }
       } finally {
         if (!cancelled) {
diff --git a/src/components/auth/screen/AuthLogin.jsx b/src/components/auth/screen/AuthLogin.jsx
@@ -100,7 +100,7 @@ export default function AuthLogin({ router, onSubmit, errors, password, setPassw
       >
         회원가입
       </Button>
-      <div className='flex flex-row items-center justify-between max-w-[349px] gap-2'>
+      {/* <div className='flex flex-row items-center justify-between max-w-[349px] gap-2'>
         <hr className='flex-1 border-t border-[#A8A8A8]' />
         <div className='px-2 text-[14px] text-[#A8A8A8]'>또는</div>
         <hr className='flex-1 border-t border-[#A8A8A8]' />
@@ -114,7 +114,7 @@ export default function AuthLogin({ router, onSubmit, errors, password, setPassw
           height={54}
           width={54}
         />
-      </div>
+      </div> */}
     </div>
   );
 }
diff --git a/src/components/auth/signup/AdditionalInfoForm.jsx b/src/components/auth/signup/AdditionalInfoForm.jsx
@@ -96,8 +96,20 @@ export default function AdditionalInfoForm({
           placeholder="전화번호를 입력해주세요 (예: 010-1234-5678)" 
           radius="full" 
           className="w-full" 
-          value={phoneNumber} 
-          onValueChange={setPhoneNumber} 
+          value={phoneNumber}
+          onChange={(e) => {
+            const value = e.target.value.replace(/[^0-9]/g, '');
+            if (value.length <= 11) {
+              let formattedNumber = value;
+              if (value.length > 3) {
+                formattedNumber = value.slice(0,3) + '-' + value.slice(3);
+              }
+              if (value.length > 7) {
+                formattedNumber = formattedNumber.slice(0,8) + '-' + formattedNumber.slice(8);
+              }
+              setPhoneNumber(formattedNumber);
+            }
+          }}
           classNames={{
             label: "!pb-[10px] !text-white",
             inputWrapper: `h-[48px] rounded-full border-2 border-white/50 caret-white bg-transparent !transition !duration-300 !ease-in-out
diff --git a/src/components/auth/signup/ProfileInfoForm.jsx b/src/components/auth/signup/ProfileInfoForm.jsx
@@ -8,8 +8,14 @@ export default function ProfileInfoForm({
   password, setPassword,
   confirmPassword, setConfirmPassword,
   errors, isEmailValid,
-  isNameDisabled, isEmailDisabled
+  isNameDisabled, isEmailDisabled, setIsEmailValid
 }) {
+
+  const emailChange = (e) => {
+    setEmail(e.target.value);
+    setIsEmailValid(false);
+  }
+
   return (
     <div className="w-full">
       <Input 
@@ -42,7 +48,7 @@ export default function ProfileInfoForm({
           radius="full"
           className="w-full"
           value={email}
-          onValueChange={setEmail}
+          onChange={emailChange}
           isDisabled={isEmailDisabled}
           classNames={{
             label: "!pb-[10px] !text-white",
diff --git a/src/components/ui/common/MenuHeader.jsx b/src/components/ui/common/MenuHeader.jsx
@@ -14,10 +14,10 @@ export default function MenuHeader() {
   const { apiClient, handleLogout }= useAuthenticatedApi();
 
   const menuItems = [
-    { name: "스터디", href: "/study" },
+    { name: "멤버관리", href: "/admin" },
+    { name: "스터디", href: "#", onClick: () => alert('준비중입니다.') },
     { name: "공지사항", href: "#", onClick: () => alert('준비중입니다.') },
-    { name: "프로젝트", href: "https://solution.gdgocinha.com" },
-    { name: "멤버", href: "#", onClick: () => alert('준비중입니다.') },
+    { name: "프로젝트", href: "#", onClick: () => alert('준비중입니다.') },
     { name: "로그아웃", href: "#", onClick: handleLogout }
   ];
 
@@ -43,23 +43,23 @@ export default function MenuHeader() {
       
       <NavbarContent className="mobile:hidden flex gap-16 ml-[70px]" justify="start">
         <NavbarItem>
-          <Link color="foreground" className="text-white" href="/study">
-            스터디
+          <Link color="foreground" className="text-white" href="/admin" >
+            멤버관리
           </Link>
         </NavbarItem>
         <NavbarItem>
           <Link color="foreground" className="text-white" href="#" onPress={() => alert('준비중입니다.')}>
-            공지사항
+            스터디
           </Link>
         </NavbarItem>
         <NavbarItem>
           <Link color="foreground" className="text-white" href="#" onPress={() => alert('준비중입니다.')}>
-            프로젝트
+            공지사항
           </Link>
         </NavbarItem>
         <NavbarItem>
           <Link color="foreground" className="text-white" href="#" onPress={() => alert('준비중입니다.')}>
-            멤버
+            프로젝트
           </Link>
         </NavbarItem>
       </NavbarContent>
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -27,13 +27,13 @@ export default function ApiCodeGuard({ children }) {`
`27`	`27`	`if (code === 200) {`
`28`	`28`	`setAllowed(true);`
`29`	`29`	`} else {`
`30`		`- router.replace('/unauthorized');`
	`30`	`+ router.replace('/auth/signin');`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`	`} catch (error) {`
`34`	`34`	`if (!cancelled) {`
`35`	`35`	`// 인터셉터에서 401/403 처리로 리다이렉트가 발생할 수 있으므로, 보조적으로 차단`
`36`		`- router.replace('/unauthorized');`
	`36`	`+ router.replace('/auth/signin');`
`37`	`37`	`}`
`38`	`38`	`} finally {`
`39`	`39`	`if (!cancelled) {`