Merge branch 'FE/DefaultHomePage' into 'frontend'

[Front-End] feat: DefaultHomePage 추가

See merge request s11-webmobile1-sub2/S11P12A701!38

frontend/src/components/ClassCard/ClassCard.jsx

@@ -1,13 +1,17 @@
 import { Link } from 'react-router-dom';
 import styles from './ClassCard.module.css';
 
-export default function ClassCard({ path, children }) {
+export default function ClassCard({ img, path, children }) {
   return (
     <Link
       to={path}
       className={styles.card}
     >
-      <div className={styles.thumbnail} />
+      <img
+        src={'img'}
+        alt="강의 이미지"
+        className={styles.thumbnail}
+      />
       <div>{children}</div>
     </Link>
   );

frontend/src/components/Layout/LectureLayout.jsx

@@ -17,8 +17,8 @@ export default function LectureLayout() {
   const { data } = useLectureInfo(lectureId);
   const lecture = data?.data;
   const userType = useBoundStore((state) => state.userType);
-  const handleDelete = () => {
-    lectureDelete(lectureId);
+  const handleDelete = async () => {
+    await lectureDelete(lectureId);
     navigate('..');
   };
   const lectureData = {
@@ -29,7 +29,7 @@ export default function LectureLayout() {
     endDate: lecture.endDate,
     time: lecture.time,
   };
-  console.log(lectureData);
+
   return (
     <>
       <LectureHeader

frontend/src/hooks/api/useAuth.js

@@ -47,8 +47,7 @@ export function useAuth() {
   const logout = () => {
     return instance
       .post(`${API_URL}/user/logout`)
-      .then((response) => {
-        console.log(response);
+      .then(() => {
         setUserType(null);
         setToken(null);
       })

frontend/src/pages/DefaultHomePage/DefaultHomePage.jsx

@@ -0,0 +1,26 @@
+import { ClassCard } from '../../components/ClassCard';
+import { ClassGrid } from '../../components/ClassGrid';
+import { MaxWidthLayout } from '../../components/Layout';
+import { useLectures } from '../../hooks/api/useLectures';
+
+export default function StudentHomePage() {
+  const { data: allLectures } = useLectures();
+  const allClasses = allLectures?.data ?? [];
+  console.log(allClasses);
+
+  return (
+    <MaxWidthLayout>
+      <ClassGrid title="전체 강의">
+        {allClasses.map?.((lecture) => (
+          <ClassCard
+            key={lecture.id}
+            path={`/lecture/${lecture.id}/info`}
+            img={lecture.image}
+          >
+            {lecture.title}
+          </ClassCard>
+        ))}
+      </ClassGrid>
+    </MaxWidthLayout>
+  );
+}

frontend/src/pages/DefaultHomePage/index.js

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

frontend/src/pages/HomePage/HomePage.jsx

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

frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx

@@ -1,7 +1,9 @@
 import { LectureForm } from '../../components/LectureForm';
 import { useLectureCreate } from '../../hooks/api/useLectureCreate';
+import { useNavigate } from 'react-router-dom';
 
 export default function LectureCreatePage() {
+  const navigate = useNavigate();
   const { lectureCreate } = useLectureCreate();
 
   const handleSubmit = async (lectureObject, imageFile) => {
@@ -12,8 +14,9 @@ export default function LectureCreatePage() {
       formData.append('image', imageFile);
     }
 
-    const response = await lectureCreate(formData);
-    console.log(response?.data);
+    await lectureCreate(formData).then(() => {
+      navigate('..');
+    });
   };
 
   return (

frontend/src/pages/MyInfoChangePage/MyInfoChangePage.jsx

@@ -1,13 +1,15 @@
 import { InfoEditForm } from '../../components/InfoEditForm';
 import { useAuth } from '../../hooks/api/useAuth';
+import { useNavigate } from 'react-router-dom';
 
 export default function MyInfoChangePage() {
+  const navigate = useNavigate();
   const { updateInfo } = useAuth();
 
   const handleSubmit = async (e, username, useremail) => {
     e.preventDefault();
     await updateInfo(username, useremail)
-      .then((res) => console.log(res))
+      .then(() => navigate('/'))
       .catch((err) => console.log(err));
   };
 

frontend/src/pages/PasswordChangePage/PasswordChangePage.jsx

@@ -1,12 +1,12 @@
 import { PasswordChangeForm } from '../../components/PasswordChangeForm';
 import { useAuth } from '../../hooks/api/useAuth';
+import { useNavigate } from 'react-router-dom';
 
 export default function PasswordChangePage() {
-  // TODO: 400에러 고치기
+  const navigate = useNavigate();
   const { updatePassword } = useAuth();
   const handleSubmit = async (currentPw, newPw, newPwCheck) => {
-    console.log(currentPw, newPw);
-    await updatePassword(currentPw, newPw, newPwCheck);
+    await updatePassword(currentPw, newPw, newPwCheck).then(() => navigate('/'));
   };
   return <PasswordChangeForm onSubmit={handleSubmit} />;
 }

frontend/src/pages/StudentHomePage/StudentHomePage.jsx

@@ -19,6 +19,7 @@ export default function StudentHomePage() {
           <ClassCard
             key={lecture.id}
             path={`/lecture/${lecture.id}`}
+            img={lecture.image}
           >
             {lecture.title}
           </ClassCard>
@@ -29,6 +30,7 @@ export default function StudentHomePage() {
           <ClassCard
             key={lecture.id}
             path={`/lecture/${lecture.id}/info`}
+            img={lecture.image}
           >
             {lecture.title}
           </ClassCard>

frontend/src/pages/TeacherHomePage/TeacherHomePage.jsx

@@ -6,6 +6,7 @@ import { useMyLectures } from '../../hooks/api/useMyLectures';
 export default function TeacherHomePage() {
   const { data: myLectures } = useMyLectures();
   const onGoingClasses = myLectures?.data ?? [];
+  console.log(onGoingClasses);
   // TODO: 새 강의 만들기 스타일 추가, 추가 기능 필요시 추가
   return (
     <MaxWidthLayout>
@@ -14,6 +15,7 @@ export default function TeacherHomePage() {
           <ClassCard
             key={lecture.id}
             path={`/lecture/${lecture.id}`}
+            img={lecture.image}
           >
             {lecture.title}
           </ClassCard>