Merge pull request #132 from codeit-sprint-part3-6team/#122_페이지_회원가입

#122 페이지 회원가입

Author: hwiiron

src/components/common/modal/general/GeneralModal.tsx

@@ -62,7 +62,11 @@ export default function GeneralModal({
             {cancelTitle}
           </CDSButton>
           <span style={{ margin: '0 5px' }} />
-          <CDSButton btnType="modal_colored" onClick={handleAdaptClick}>
+          <CDSButton
+            btnType="modal_colored"
+            onClick={handleAdaptClick}
+            disabled={inputValue === ''}
+          >
             {adaptTitle}
           </CDSButton>
         </div>

src/components/common/navbar/Navbar.tsx

@@ -34,7 +34,7 @@ function Navbar() {
 
   const isMyDashboard = pathname !== '/mydashboard';
   const isMyPage = pathname !== '/mypage';
-  const isEdit = pathname !== '/edit';
+  const isEdit = pathname !== '/dashboard/[id]/edit';
 
   useEffect(() => {
     setClientUser(user);
@@ -78,12 +78,14 @@ function Navbar() {
   };
 
   const handleDropdownClick = (value: string) => {
-    if (value === 'mypage') {
-      router.push('/mypage');
-    } else if (value === 'logout') {
+    if (value === 'logout') {
       localStorage.removeItem('accessToken');
       sessionStorage.removeItem('accessToken');
       router.push('/');
+    } else if (value === 'mypage') {
+      router.push('/mypage');
+    } else if (value === 'mydashboard') {
+      router.push('/mydashboard');
     }
   };
 
@@ -162,8 +164,9 @@ function Navbar() {
           <Dropdown
             onMenuClick={handleDropdownClick}
             menus={[
-              { label: '마이페이지', value: 'mypage' },
               { label: '로그아웃', value: 'logout' },
+              { label: '내 정보', value: 'mypage' },
+              { label: '내 대시보드', value: 'mydashboard' },
             ]}
           >
             {clientUser && (

src/components/product/auth/SigninForm.tsx

@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 import { setUserInfo } from '@/redux/settingSlice';
 import { AppDispatch } from '@/redux/store';
 import { postSignin } from '@/lib/signin/postSignin';
-import { ERROR_MESSAGE, PLACEHOLDER } from '@/constants/messages';
+import { ERROR_MESSAGE, LABEL, PLACEHOLDER } from '@/constants/messages';
 import { emailValidation, passwordValidation } from '@/utils/authValidation';
 import AuthInput from '@/components/common/input/auth-input/AuthInput';
 import CDSButton from '@/components/common/button/CDSButton';
@@ -126,7 +126,7 @@ function SigninForm() {
           name="login"
           id="login"
           htmlFor="login"
-          text="로그인 상태 유지"
+          text={LABEL.KEEP_LOGIN}
           onChange={() => setIsChecked(!isChecked)}
         />
 

src/components/product/auth/SignupForm.tsx

@@ -1,5 +1,5 @@
 import styles from './SigninForm.module.css';
-import { ChangeEvent, FocusEvent, FormEvent, useEffect, useState } from 'react';
+import { ChangeEvent, FocusEvent, FormEvent, useState } from 'react';
 import { useRouter } from 'next/router';
 import { useDispatch } from 'react-redux';
 import { setUserInfo } from '@/redux/settingSlice';
@@ -32,36 +32,18 @@ function SignupForm() {
   const [passwordValid, setPasswordValid] = useState(false);
   const [nicknameValid, setNicknameValid] = useState(false);
   const [passwordCheckValid, setPasswordCheckValid] = useState(false);
-  const [disabled, setDisabled] = useState(true);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [responseMessage, setResponseMessage] = useState('');
   const router = useRouter();
   const dispatch = useDispatch<AppDispatch>();
 
-  useEffect(() => {
-    const isEmailValid = emailValidation(values.email);
-    const isPasswordValid = passwordValidation(values.password);
-    const isNicknameValid = nicknameValidation(values.nickname);
-    const isPasswordCheckValid = passwordCheckValidation(
-      values.password,
-      values.passwordCheck,
-    );
-    setDisabled(
-      !(
-        isEmailValid &&
-        isPasswordValid &&
-        !isNicknameValid &&
-        !isPasswordCheckValid &&
-        values.checkbox
-      ),
-    );
-  }, [values]);
-
-  useEffect(() => {
-    if (sessionStorage.getItem('accessToken')) {
-      router.push('/mydashboard');
-    }
-  }, []);
+  const isEmailValid = emailValidation(values.email);
+  const isPasswordValid = passwordValidation(values.password);
+  const isNicknameValid = nicknameValidation(values.nickname);
+  const isPasswordCheckValid = passwordCheckValidation(
+    values.password,
+    values.passwordCheck,
+  );
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, type, value, checked } = e.target;
@@ -102,19 +84,14 @@ function SignupForm() {
           user: response.user,
         }),
       );
-
+      alert(`${values.nickname}님 가입이 완료되었습니다.`);
       router.push('/mydashboard');
     } catch (error) {
       setResponseMessage(error.message);
       setIsModalVisible(true);
     }
   };
 
-  const handleCancelClick = () => {
-    setIsModalVisible(false);
-    setResponseMessage(null);
-  };
-
   return (
     <>
       <form onSubmit={onSubmit}>
@@ -187,7 +164,19 @@ function SignupForm() {
         />
 
         <div className={styles['login-button']}>
-          <CDSButton btnType="auth" type="submit" disabled={disabled}>
+          <CDSButton
+            btnType="auth"
+            type="submit"
+            disabled={
+              !(
+                isEmailValid &&
+                isPasswordValid &&
+                !isNicknameValid &&
+                !isPasswordCheckValid &&
+                values.checkbox
+              )
+            }
+          >
             가입하기
           </CDSButton>
         </div>
@@ -196,7 +185,10 @@ function SignupForm() {
       {isModalVisible && (
         <AuthModal
           message={responseMessage}
-          handleCancelClick={handleCancelClick}
+          handleCancelClick={() => {
+            setIsModalVisible(false);
+            setResponseMessage(null);
+          }}
         />
       )}
     </>

src/constants/messages.ts

@@ -13,3 +13,7 @@ export const PLACEHOLDER = {
   PASSWORD_CONFIRM_PLACEHOLDER: '비밀번호를 한번 더 입력해 주세요',
   TERMS_PLACEHOLDER: '이용약관에 동의해 주세요',
 };
+
+export const LABEL = {
+  KEEP_LOGIN: '로그인 상태 유지',
+};