feat: TeacherHomePage 추가

frontend/src/Router.jsx

@@ -5,7 +5,6 @@ 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 LiveLayout = lazy(async () => await import('./components/Layout/LiveLayout'));
 const LivePage = lazy(async () => await import('./pages/LivePage'));
@@ -24,6 +23,7 @@ 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 LearningLecturesPage = lazy(async () => await import('./pages/LearningLecturesPage'));
 
 const router = createBrowserRouter([
   {

frontend/src/hooks/api/useAuth.js

@@ -16,7 +16,6 @@ export function useAuth() {
       .post(`${API_URL}/user/login`, formData)
       .then(({ data, config }) => {
         const { 'access-token': accessToken } = data;
-
         config.headers.Authorization = `${accessToken}`;
         setToken(accessToken);
         // TODO: userType 구분 추가
@@ -28,5 +27,18 @@ export function useAuth() {
       });
   };
 
-  return { login };
+  const userRegister = (role, userId, name, email, password, onError = () => {}) => {
+    const userData = {
+      role,
+      userId,
+      name,
+      email,
+      password,
+    };
+    return instance.post(`${API_URL}/user/join`, userData).catch((e) => {
+      onError(e);
+    });
+  };
+
+  return { login, userRegister };
 }

frontend/src/pages/HomePage/HomePage.jsx

@@ -1,14 +1,15 @@
 import useBoundStore from '../../store';
 import StudentHomePage from '../StudentHomePage/StudentHomePage';
+import TeacherHomePage from '../TeacherHomePage';
 
 export default function HomePage() {
   const userType = useBoundStore((state) => state.userType);
-
+  // TODO: 비로그인 페이지 추가하기
   switch (userType) {
     case 'student':
       return <StudentHomePage />;
     case 'teacher':
-      return <div>teacher home</div>;
+      return <TeacherHomePage />;
     default:
       return <StudentHomePage />;
   }

frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx

@@ -12,8 +12,8 @@ export default function LearningLecturesPage() {
       <div className={styles.grid}>
         {onGoingClasses.map?.((lecture) => (
           <Link
-            key={lecture.lecture_id}
-            to={`/lecture/${lecture.lecture_id}`}
+            key={lecture.id}
+            to={`/lecture/${lecture.id}`}
             className={styles.card}
           >
             <div className={styles.thumbnail} />

frontend/src/pages/LearningLecturesPage/index.js

@@ -0,0 +1 @@
+export { default } from './LearningLecturesPage';

frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx

@@ -5,6 +5,7 @@ import LectureHeader from '../../components/LectureHeader/LectureHeader';
 import { useLectureInfo } from '../../hooks/api/useLectureInfo';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useLectureRegister } from '../../hooks/api/useLectureRegister';
+import useBoundStore from '../../store';
 
 export default function LectureInfoPage() {
   const navigate = useNavigate();
@@ -13,9 +14,15 @@ export default function LectureInfoPage() {
   const lectureData = data?.data;
   const startDate = new Date(lectureData.startDate).toLocaleDateString();
   const endDate = new Date(lectureData.endDate).toLocaleDateString();
+  const userType = useBoundStore((state) => state.userType);
 
   const { lectureRegister } = useLectureRegister();
   const handleSubmit = () => {
+    if (userType === null) {
+      window.alert('로그인이 필요한 서비스입니다.');
+      navigate('/auth/login');
+    }
+
     lectureRegister(lectureId)
       .then(() => {
         navigate(`/lecture/${lectureId}`);

frontend/src/pages/TeacherHomePage/TeacherHomePage.jsx

@@ -0,0 +1,25 @@
+import { ClassCard } from '../../components/ClassCard';
+import { ClassGrid } from '../../components/ClassGrid';
+import { MaxWidthLayout } from '../../components/Layout';
+import { useMyLectures } from '../../hooks/api/useMyLectures';
+
+export default function TeacherHomePage() {
+  const { data: myLectures } = useMyLectures();
+  const onGoingClasses = myLectures?.data ?? [];
+  // TODO: 새 강의 만들기 스타일 추가, 추가 기능 필요시 추가
+  return (
+    <MaxWidthLayout>
+      <ClassGrid title="내 강의">
+        {onGoingClasses.map?.((lecture) => (
+          <ClassCard
+            key={lecture.id}
+            path={`/lecture/${lecture.id}`}
+          >
+            {lecture.title}
+          </ClassCard>
+        ))}
+        <ClassCard path={'/lecture/create'}>새 강의 만들기</ClassCard>
+      </ClassGrid>
+    </MaxWidthLayout>
+  );
+}

frontend/src/pages/TeacherHomePage/index.js

@@ -0,0 +1 @@
+export { default } from './TeacherHomePage';

frontend/src/pages/TeacherLectureDetailPage/TeacherLectureDetailPage.jsx

@@ -1,24 +1,15 @@
 import ArticlePreview from '../../components/Article/ArticlePreview/ArticlePreview';
 import styles from './TeacherLectureDetailPage.module.css';
+import { useNotices } from '../../hooks/api/useNotices';
+import { useParams } from 'react-router-dom';
+import { useQnas } from '../../hooks/api/useQnas';
 
 export default function TeacherLectureDetailPage() {
-  const { data: notices } = {
-    data: [
-      { id: 1, title: '공지사항1', sub: '7-12 오전 11:40:57' },
-      { id: 2, title: '공지사하앙2', sub: '7-12 오전 11:40:57' },
-      { id: 3, title: '공지사하앙33', sub: '7-15 오전 11:40:57' },
-      { id: 4, title: '제목만 있는 경우' },
-    ],
-  };
-
-  const { data: questions } = {
-    data: [
-      { id: 2, title: 'Question1', sub: '7-12 오전 11:40:57' },
-      { id: 3, title: 'Question2', sub: '7-12 오전 11:40:57' },
-      { id: 4, title: '헷갈리는게 있어요', sub: '7-15 오전 11:40:57' },
-      { id: 5, title: '궁금궁금', sub: '7-15 오전 11:40:57' },
-    ],
-  };
+  const { lectureId } = useParams();
+  const { data: noticesData } = useNotices(lectureId);
+  const notices = noticesData?.data;
+  const { data: qnasData } = useQnas(lectureId);
+  const questions = qnasData?.data;
 
   return (
     <main className={styles.previews}>

frontend/src/pages/UserRegisterPage/UserRegisterPage.jsx

@@ -1,18 +1,23 @@
 import styles from './UserRegisterPage.module.css';
 import { useRef, useState } from 'react';
 import { AuthForm, InputBox } from '../../components/AuthForm';
-import instance from '../../utils/axios/instance';
-import { API_URL } from '../../constants';
+import { useAuth } from '../../hooks/api/useAuth';
+import { useNavigate } from 'react-router-dom';
 
 export default function UserRegisterPage() {
+  const navigate = useNavigate();
+
   const idRef = useRef();
   const nameRef = useRef();
   const emailRef = useRef();
   const passwordRef = useRef();
   const passwordConfirmRef = useRef();
 
+  const [userType, setUserType] = useState('STUDENT');
   const [passwordMatch, setPasswordMatch] = useState(true);
 
+  const { userRegister } = useAuth();
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     // TODO: 회원가입 POST 기능 추가
@@ -22,16 +27,16 @@ export default function UserRegisterPage() {
     if (!isPWMatch) {
       return;
     }
-
-    const userData = {
-      userId: idRef.current.value,
-      name: nameRef.current.value,
-      email: emailRef.current.value,
-      password: passwordRef.current.value,
-    };
-
-    const response = await instance.post(`${API_URL}/user/join`, userData);
-    console.log(response);
+    userRegister(
+      userType,
+      idRef.current.value,
+      nameRef.current.value,
+      emailRef.current.value,
+      passwordRef.current.value
+    ).then((response) => {
+      console.log(response);
+      navigate('../login');
+    });
   };
 
   const linkProps = {
@@ -48,6 +53,22 @@ export default function UserRegisterPage() {
         buttonText="회원가입"
         linkProps={linkProps}
       >
+        <div className={styles.typeWrapper}>
+          <button
+            type="button"
+            className={`${styles.typeButton} ${userType === 'STUDENT' && styles.active}`}
+            onClick={() => setUserType('STUDENT')}
+          >
+            학생
+          </button>
+          <button
+            type="button"
+            className={`${styles.typeButton} ${userType === 'ADMIN' && styles.active}`}
+            onClick={() => setUserType('ADMIN')}
+          >
+            강사
+          </button>
+        </div>
         <InputBox
           title="ID"
           type="text"

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

@@ -4,6 +4,34 @@
   margin: 0 auto;
 }
 
+.typeWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 20px;
+  padding: 10px 0;
+  height: 56px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}
+
+.typeButton {
+  width: 100%;
+  margin: 8px;
+  padding: 4px 20px;
+  border-radius: 8px;
+  border: 0;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+}
+
+.active {
+  background-color: var(--accent-color);
+  color: white;
+}
+
 .errorMsg {
   font-size: 16px;
   line-height: 1.4;