fix: useNotices가 suspense 사용하도록 수정

frontend/src/hooks/api/useNotices.js

@@ -1,9 +1,9 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import instance from '../../utils/axios/instance';
 import { API_URL } from '../../constants';
 
 export function useNotices(lectureId, page = 0) {
-  return useQuery({
+  return useSuspenseQuery({
     queryKey: ['noticelist', lectureId, page],
     queryFn: () => instance.get(`${API_URL}/board?lectureId=${lectureId}&category=announcement&pageNo=${page}`),
   });

frontend/src/pages/TeacherHomePage/TeacherHomePage.jsx

@@ -1,17 +1,19 @@
+import styles from './TeacherHomePage.module.css';
+import { Link } from 'react-router-dom';
 import { ClassCard } from '../../components/ClassCard';
 import { ClassGrid } from '../../components/ClassGrid';
 import { MaxWidthLayout } from '../../components/Layout';
 import { useMyLectures } from '../../hooks/api/useMyLectures';
+import PlusIcon from '/src/assets/icons/plus.svg?react';
 
 export default function TeacherHomePage() {
   const { data: myLectures } = useMyLectures();
   const onGoingClasses = myLectures?.data ?? [];
-  console.log(onGoingClasses);
-  // TODO: 새 강의 만들기 스타일 추가, 추가 기능 필요시 추가
+
   return (
     <MaxWidthLayout>
       <ClassGrid title="내 강의">
-        {onGoingClasses.map?.((lecture) => (
+        {onGoingClasses.map((lecture) => (
           <ClassCard
             key={lecture.id}
             path={`/lecture/${lecture.id}`}
@@ -20,7 +22,13 @@ export default function TeacherHomePage() {
             {lecture.title}
           </ClassCard>
         ))}
-        <ClassCard path={'/lecture/create'}>새 강의 만들기</ClassCard>
+        <Link
+          to={'/lecture/create'}
+          className={styles.add}
+        >
+          <PlusIcon />
+          <span>새 강의 만들기</span>
+        </Link>
       </ClassGrid>
     </MaxWidthLayout>
   );

frontend/src/pages/TeacherHomePage/TeacherHomePage.module.css

@@ -0,0 +1,21 @@
+.add {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 32px;
+  background-color: var(--background);
+  color: var(--text-color);
+  stroke: var(--text-color);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.4;
+  border-radius: 20px;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--background-secondary);
+  }
+}