Merge pull request #80 from TeamBNBN/FE/router

[Front-End] feat: Fe/router 마이페이지 추가

frontend/src/Router.jsx

@@ -4,6 +4,8 @@ import PageLayout from './components/Layout/PageLayout';
 import HomePage from './pages/HomePage';
 import NotFoundPage from './pages/NotFoundPage';
 import { lazy } from 'react';
+import MyPageLayout from './components/Layout/MyPageLayout';
+import LearningLecturesPage from './pages/LearningLecturesPage/LearningLecturesPage';
 
 const LectureLayout = lazy(async () => await import('./components/Layout/LectureLayout'));
 const LearningLectureDetailPage = lazy(async () => await import('./pages/LearningLectureDetailPage'));
@@ -17,6 +19,8 @@ const NoticeWritePage = lazy(async () => await import('./pages/NoticeWritePage/N
 const LoginPage = lazy(async () => await import('./pages/LoginPage'));
 const UserRegisterPage = lazy(async () => await import('./pages/UserRegisterPage'));
 const PasswordResetPage = lazy(async () => await import('./pages/PasswordResetPage'));
+const MyInfoChangePage = lazy(async () => await import('./pages/MyInfoChangePage'));
+const PasswordChangePage = lazy(async () => await import('./pages/PasswordChangePage'));
 
 const router = createBrowserRouter([
   {
@@ -88,6 +92,24 @@ const router = createBrowserRouter([
         path: 'password-reset',
         element: <PasswordResetPage />,
       },
+      {
+        path: 'user/:username',
+        element: <MyPageLayout />,
+        children: [
+          {
+            index: true,
+            element: <LearningLecturesPage />,
+          },
+          {
+            path: 'change-info',
+            element: <MyInfoChangePage />,
+          },
+          {
+            path: 'password-change',
+            element: <PasswordChangePage />,
+          },
+        ],
+      },
     ],
   },
 ]);

frontend/src/components/Header/Header.jsx

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

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

@@ -43,6 +43,9 @@
   background-color: var(--primary-color);
   border: 1px solid var(--border-color);
   color: white;
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
   box-sizing: border-box;
   border-radius: 8px;
   align-self: end;

frontend/src/components/Layout/MyPageLayout.jsx

@@ -0,0 +1,31 @@
+import { Outlet } from 'react-router-dom';
+import MaxWidthLayout from '../../components/Layout/MaxWidthLayout';
+import SideBar from '../../components/SideBar/SideBar';
+import SideLink from '../../components/SideBar/SideLink';
+import { Suspense } from 'react';
+
+export default function MyPageLayout() {
+  return (
+    <>
+      <MaxWidthLayout hasSideBar>
+        <aside>
+          <SideBar title="마이페이지">
+            <SideLink to={'change-info'}>계정 정보 변경</SideLink>
+            <SideLink to={'password-change'}>비밀번호 변경</SideLink>
+            <SideLink
+              to={''}
+              end
+            >
+              수강중인 강의
+            </SideLink>
+          </SideBar>
+        </aside>
+        <main>
+          <Suspense fallback={<div>loading</div>}>
+            <Outlet />
+          </Suspense>
+        </main>
+      </MaxWidthLayout>
+    </>
+  );
+}

frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx

@@ -0,0 +1,25 @@
+import { ClassCard } from '../../components/ClassCard';
+import { ClassGrid } from '../../components/ClassGrid';
+
+export default function LearningLecturesPage() {
+  const { data: onGoingClasses } = {
+    data: [
+      { lecture_id: 1, title: '한국어' },
+      { lecture_id: 2, title: '영어' },
+      { lecture_id: 3, title: '일본어' },
+    ],
+  };
+
+  return (
+    <ClassGrid title="수강중인 강의">
+      {onGoingClasses.map((lecture) => (
+        <ClassCard
+          key={lecture.lecture_id}
+          path={`/lecture/${lecture.lecture_id}`}
+        >
+          {lecture.title}
+        </ClassCard>
+      ))}
+    </ClassGrid>
+  );
+}

frontend/src/pages/MyInfoChangePage/MyInfoChangePage.jsx

@@ -1,23 +1,5 @@
 import { InfoEditForm } from '../../components/InfoEditForm';
-import MaxWidthLayout from '../../components/Layout/MaxWidthLayout';
-import SideBar from '../../components/SideBar/SideBar';
-import SideLink from '../../components/SideBar/SideLink';
 
 export default function MyInfoChangePage() {
-  return (
-    <>
-      <MaxWidthLayout hasSideBar>
-        <aside>
-          <SideBar title="마이페이지">
-            <SideLink to={'/'}>계정 정보 변경</SideLink>
-            <SideLink to={'/'}>비밀번호 변경</SideLink>
-            <SideLink to={'/'}>수강중인 강의</SideLink>
-          </SideBar>
-        </aside>
-        <main>
-          <InfoEditForm />
-        </main>
-      </MaxWidthLayout>
-    </>
-  );
+  return <InfoEditForm />;
 }

frontend/src/pages/PasswordChangePage/PasswordChangePage.jsx

@@ -1,23 +1,5 @@
-import MaxWidthLayout from '../../components/Layout/MaxWidthLayout';
 import { PasswordChangeForm } from '../../components/PasswordChangeForm';
-import SideBar from '../../components/SideBar/SideBar';
-import SideLink from '../../components/SideBar/SideLink';
 
 export default function PasswordChangePage() {
-  return (
-    <>
-      <MaxWidthLayout hasSideBar>
-        <aside>
-          <SideBar title="마이페이지">
-            <SideLink to={'/'}>계정 정보 변경</SideLink>
-            <SideLink to={'/'}>비밀번호 변경</SideLink>
-            <SideLink to={'/'}>수강중인 강의</SideLink>
-          </SideBar>
-        </aside>
-        <main>
-          <PasswordChangeForm />
-        </main>
-      </MaxWidthLayout>
-    </>
-  );
+  return <PasswordChangeForm />;
 }