Merge pull request #84 from TeamBNBN/fe/authpage

[Front-End] feat: router 계층 수정, 로그인 페이지 변경

frontend/src/Router.jsx

@@ -81,19 +81,24 @@ const router = createBrowserRouter([
         ],
       },
       {
-        path: 'login',
-        element: <LoginPage />,
+        path: 'auth',
+        children: [
+          {
+            path: 'login',
+            element: <LoginPage />,
+          },
+          {
+            path: 'register',
+            element: <UserRegisterPage />,
+          },
+          {
+            path: 'password-reset',
+            element: <PasswordResetPage />,
+          },
+        ],
       },
       {
-        path: 'register',
-        element: <UserRegisterPage />,
-      },
-      {
-        path: 'password-reset',
-        element: <PasswordResetPage />,
-      },
-      {
-        path: 'user/:username',
+        path: 'user/my',
         element: <MyPageLayout />,
         children: [
           {
@@ -101,11 +106,11 @@ const router = createBrowserRouter([
             element: <LearningLecturesPage />,
           },
           {
-            path: 'change-info',
+            path: 'edit',
             element: <MyInfoChangePage />,
           },
           {
-            path: 'password-change',
+            path: 'changePw',
             element: <PasswordChangePage />,
           },
         ],

frontend/src/components/AuthForm/AuthForm.jsx

@@ -21,11 +21,10 @@ export default function AuthForm({ children, title, buttonText, linkProps = null
           type="submit"
         >
           {buttonText}
-          {/* 로그인 버튼 색깔이랑 글자 색깔 바꿔야함. */}
         </button>
         {linkProps && (
           <span className={styles.textBody}>
-            {linkProps.message}&nbsp;&nbsp;
+            {`${linkProps.message} `}
             <Link
               to={linkProps.path}
               className={styles.textBodyStrong}

frontend/src/components/AuthForm/AuthForm.module.css

@@ -5,7 +5,7 @@
   flex-direction: column;
   align-items: center;
   padding: 0 40px;
-  gap: 40px;
+  gap: 20px;
 }
 
 .loginText {
@@ -21,21 +21,24 @@
   width: 100%;
 }
 
+.loginBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
 .loginButton {
   width: 100%;
   background-color: var(--primary-color);
-  color: white;
+  border: none;
+  color: var(--on-primary);
   padding: 12px;
+  margin-top: 20px;
   box-sizing: border-box;
   border-radius: 8px;
-}
-
-.loginBox {
-  text-align: center;
-  width: 100%;
-  gap: 10px;
-  display: flex;
-  flex-direction: column;
+  cursor: pointer;
 }
 
 .textBody {
@@ -55,7 +58,3 @@
   line-height: 1.4;
   font-weight: 700;
 }
-
-.secondaryColor {
-  color: var(--text-color-secondary);
-}

frontend/src/components/AuthForm/InputBox.jsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styles from './InputBox.module.css';
 
-const InputBox = forwardRef(({ title, id = null, type, hasError = null, children }, ref) => {
+export default forwardRef(function InputBox({ title, id = null, type, hasError = null, children }, ref) {
   return (
     <div className={`${styles.inputBox} ${hasError && styles.errorBox}`}>
       <label
@@ -21,6 +21,3 @@ const InputBox = forwardRef(({ title, id = null, type, hasError = null, children
     </div>
   );
 });
-InputBox.displayName = 'InputBox';
-
-export default InputBox;

frontend/src/components/AuthForm/InputBox.module.css

@@ -18,12 +18,6 @@
   font-weight: 400;
 }
 
-.textBodyStrong {
-  font-size: 16px;
-  line-height: 1.4;
-  font-weight: 700;
-}
-
 .errorBox * {
   color: var(--error-color);
 }
@@ -32,7 +26,3 @@
   outline: none;
   border: 1px solid var(--error-border);
 }
-
-.dangerColor {
-  color: var(--error-color);
-}

frontend/src/components/CreateClass/CreateClass.module.css

@@ -55,7 +55,7 @@
   border-radius: 8px;
   border: 1px solid var(--primary-color);
   background-color: var(--primary-color);
-  color: white;
+  color: var(--on-primary);
   gap: 8px;
   align-self: end;
 }

frontend/src/components/Header/Header.jsx

@@ -29,10 +29,10 @@ export default function Header() {
         </ul>
         <ul className={styles.group}>
           <li>
-            <Link to={'user/user123'}>마이페이지</Link>
+            <Link to={'user/my'}>마이페이지</Link>
           </li>
           <li>
-            <Link to={'/login'}>로그인</Link>
+            <Link to={'/auth/login'}>로그인</Link>
           </li>
         </ul>
       </nav>

frontend/src/components/InfoEditForm/InfoEditForm.module.css

@@ -22,7 +22,6 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
-  width: 900px;
 }
 
 .inputBox {
@@ -42,13 +41,14 @@
   padding: 12px;
   background-color: var(--primary-color);
   border: 1px solid var(--border-color);
-  color: white;
+  color: var(--on-primary);
   font-size: 16px;
   line-height: 1.4;
   font-weight: 700;
   box-sizing: border-box;
   border-radius: 8px;
   align-self: end;
+  cursor: pointer;
 }
 
 .buttonCover {

frontend/src/components/Layout/MyPageLayout.jsx

@@ -10,17 +10,18 @@ export default function MyPageLayout() {
       <MaxWidthLayout hasSideBar>
         <aside>
           <SideBar title="마이페이지">
-            <SideLink to={'change-info'}>계정 정보 변경</SideLink>
-            <SideLink to={'password-change'}>비밀번호 변경</SideLink>
             <SideLink
               to={''}
               end
             >
               수강중인 강의
             </SideLink>
+            <SideLink to={'edit'}>개인정보 변경</SideLink>
+            <SideLink to={'changePw'}>비밀번호 변경</SideLink>
           </SideBar>
         </aside>
         <main>
+          {/* TODO: 로딩 컴포넌트 추가 */}
           <Suspense fallback={<div>loading</div>}>
             <Outlet />
           </Suspense>

frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx

@@ -68,7 +68,7 @@ export default function PasswordChangeForm() {
         className={styles.button}
         type="submit"
       >
-        <div className={styles.buttonText}>비밀번호 변경</div>
+        비밀번호 변경
       </button>
     </form>
   );

frontend/src/components/PasswordChangeForm/PasswordChangeForm.module.css

@@ -1,5 +1,4 @@
 .passwordChangeForm {
-  width: 900px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -43,12 +42,6 @@
   line-height: 1.4;
 }
 
-.buttonText {
-  font-size: 16px;
-  line-height: 1.4;
-  font-weight: 700;
-}
-
 .button {
   display: flex;
   flex-direction: row;
@@ -56,6 +49,10 @@
   border-radius: 8px;
   border: 1px solid var(--primary-color);
   background-color: var(--primary-color);
-  color: white;
+  color: var(--on-primary);
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
   align-self: end;
+  cursor: pointer;
 }

frontend/src/pages/LoginPage/LoginPage.module.css

@@ -1,5 +1,5 @@
 .wrapper {
-  padding-top: 120px;
+  padding-top: 20px;
   max-width: 480px;
   margin: 0 auto;
 }

frontend/src/pages/PasswordResetPage/PasswordResetPage.jsx

@@ -1,23 +1,43 @@
 import { AuthForm, InputBox } from '../../components/AuthForm';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import styles from './PasswordResetPage.module.css';
+import { Link } from 'react-router-dom';
 
 export default function PasswordResetPage() {
+  const [sendEmail, setSendEmail] = useState(false);
   const emailRef = useRef('');
   const buttonText = useRef('비밀번호 찾기');
   const handleSubmit = () => {
     // TODO: 비밀번호 찾기 POST 기능 추가
     console.log('비밀번호 찾기', emailRef.current.value);
-    buttonText.current = '로그인하러 가기';
+    // delay
+    setTimeout(() => {
+      setSendEmail(true);
+    }, 200);
   };
-  return (
+
+  return sendEmail ? (
+    <section className={styles.loginGroup}>
+      <h1 className={styles.title}>비밀번호 찾기</h1>
+      <p className={styles.text}>
+        비밀번호 초기화 이메일을 보냈습니다.
+        <br />
+        메일함을 확인해주세요.
+      </p>
+      <Link
+        to={'../login'}
+        className={styles.linkButton}
+      >
+        로그인하러 가기
+      </Link>
+    </section>
+  ) : (
     <div className={styles.wrapper}>
       <AuthForm
         submitFunction={handleSubmit}
         title="비밀번호 찾기"
         buttonText={buttonText.current}
       >
-        {/* <div className={styles.text}>비밀번호 초기화 이메일을 보냈습니다. 이메일을 확인해주세요</div> */}
         <InputBox
           title="이메일"
           id="email"

frontend/src/pages/PasswordResetPage/PasswordResetPage.module.css

@@ -1,12 +1,47 @@
-.wrapper {
-  padding-top: 120px;
+.wrapper,
+.loginGroup {
+  padding-top: 20px;
   max-width: 480px;
   margin: 0 auto;
 }
 
+.loginGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 20px 40px 0;
+  box-sizing: border-box;
+}
+
+.title {
+  font-size: 36px;
+  line-height: 1.2;
+  font-weight: 700;
+  margin: 0;
+}
+
 .text {
   text-align: center;
-  font-size: 20px;
+  font-size: 16px;
+  line-height: 1.4;
   font-weight: 400;
-  line-height: 1.2;
+}
+
+.linkButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: var(--primary-color);
+  border: none;
+  color: var(--on-primary);
+  padding: 12px;
+  margin-top: 20px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+  cursor: pointer;
 }

frontend/src/pages/UserRegisterPage/UserRegisterPage.module.css

@@ -1,35 +1,12 @@
 .wrapper {
-  padding-top: 120px;
+  padding-top: 20px;
   max-width: 480px;
   margin: 0 auto;
 }
 
-.RegisterForm {
-  max-width: 480px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0 40px;
-  gap: 40px;
-}
-
-.RegisterText {
-  font-size: 36px;
-  line-height: 1.2;
-  font-weight: 700;
-}
-
-.textBodyStrong {
+.errorMsg {
   font-size: 16px;
   line-height: 1.4;
   font-weight: 700;
-}
-
-.secondaryColor {
-  color: var(--text-color-secondary);
-}
-
-.dangerColor {
   color: var(--error-color);
 }