Merge branch 'fe/improveUX' into 'frontend'

[Front-End] Fe/improve ux See merge request s11-webmobile1-sub2/S11P12A701!84
2024-08-07 13:08:41 +09:00 · 2024-08-07 13:08:41 +09:00 · d2e4d2e5a4
commit d2e4d2e5a4
parent b8bdbfccf1 50894126af
37 changed files with 357 additions and 271 deletions
--- a/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx
@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 import styles from './ArticleDetail.module.css';
 import ArticleDetailAnswer from './ArticleDetailAnswer/ArticleDetailAnswer';
 import ArticleDetailAnswerInput from './ArticleDetailAnswer/ArticleDetailAnswerInput';
-import EditIcon from '/src/assets/icons/edit.svg?react';
 import { useState, useEffect } from 'react';

 export default function ArticleDetail({ topic, title, author = null, content, answer = null, onDelete, isQna = true }) {
@ -44,22 +43,22 @@ export default function ArticleDetail({ topic, title, author = null, content, an
            {author && <span className={styles.author}>{author}</span>}
          </div>
        </div>
-        <Link
-          type="button"
-          className={styles.editButton}
-          to={'edit'}
-          state={{ title: title, content: content, answer: answer }}
-        >
-          <EditIcon className={styles.icon} />
-          <span>수정하기</span>
-        </Link>
-        <button
-          type="button"
-          className={styles.deleteButton}
-          onClick={onDelete}
-        >
-          삭제하기
-        </button>
+        <div className={styles.actionGroup}>
+          <Link
+            className={styles.edit}
+            to={'edit'}
+            state={{ title: title, content: content, answer: answer }}
+          >
+            수정
+          </Link>
+          <button
+            type="button"
+            className={styles.delete}
+            onClick={onDelete}
+          >
+            삭제
+          </button>
+        </div>
      </header>
      <div>
        <p className={styles.content}>{content}</p>
--- a/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css
@ -13,7 +13,7 @@
 .header {
  display: flex;
  justify-content: space-between;
-  align-items: start;
+  align-items: end;
 }

 .headerInside {
@ -60,34 +60,26 @@
  stroke: var(--text-color);
 }

-.editButton {
+.actionGroup {
  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  background: var(--background);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  font-size: 14px;
-  line-height: 1.4;
-  font-weight: 700;
+  align-items: end;
+  gap: 20px;
  color: var(--text-color);
+}
+
+.edit,
+.delete {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: var(--background);
+  color: var(--text-color-tertiary);
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 500;
  cursor: pointer;
 }

-.deleteButton {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border: 1px solid var(--error-color);
-  background-color: var(--error-color);
-  color: var(--on-primary);
-  stroke: var(--error-color);
-  font-size: 16px;
-  line-height: 1.4;
-  font-weight: 700;
-  align-self: end;
-  border-radius: 8px;
-  cursor: pointer;
+.delete {
+  color: var(--error-color);
 }
--- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx
@ -15,28 +15,29 @@ export default function ArticleDetailAnswer({ answer, onEditClick, onDeleteSubmi
  };

  return (
-    <>
-      <section className={styles.answer}>
-        <div className={styles.answerHeader}>
-          <ReplyIcon />
-          <div className={styles.author}>선생님의 답변</div>
+    <section className={styles.answer}>
+      <div className={styles.answerHeader}>
+        <div className={styles.author}>
+          <ReplyIcon /> <span>선생님의 답변</span>
        </div>
-        <p className={styles.content}>{answer}</p>
-        <button
-          type="button"
-          className={styles.deleteButton}
-          onClick={handleDeleteSubmit}
-        >
-          <div>삭제</div>
-        </button>
-        <button
-          type="button"
-          className={styles.editButton}
-          onClick={onEditClick}
-        >
-          수정
-        </button>
-      </section>
-    </>
+        <div className={styles.actionGroup}>
+          <button
+            type="button"
+            className={styles.edit}
+            onClick={onEditClick}
+          >
+            수정
+          </button>
+          <button
+            type="button"
+            className={styles.delete}
+            onClick={handleDeleteSubmit}
+          >
+            <div>삭제</div>
+          </button>
+        </div>
+      </div>
+      <p className={styles.content}>{answer}</p>
+    </section>
  );
 }
--- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css
@ -1,7 +1,7 @@
 .answer {
  display: flex;
  flex-direction: column;
-  gap: 8px;
+  gap: 12px;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 16px;
@ -11,17 +11,26 @@

 .answerHeader {
  display: flex;
-  gap: 4px;
+  justify-content: space-between;
  color: var(--text-color-secondary);
  stroke: var(--text-color-secondary);
 }

 .author {
+  align-self: start;
+  display: flex;
+  align-items: center;
+  gap: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
 }

+.actionGroup {
+  display: flex;
+  gap: 12px;
+}
+
 .content {
  font-size: 16px;
  font-weight: 400;
@ -30,36 +39,19 @@
  color: var(--text-color);
 }

-.editButton {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border: 1px solid var(--primary-color);
-  background-color: var(--primary-color);
-  color: var(--on-primary);
-  stroke: var(--on-primary);
-  font-size: 16px;
+.edit,
+.delete {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: var(--background);
+  font-size: 14px;
  line-height: 1.4;
-  font-weight: 700;
-  align-self: end;
-  border-radius: 8px;
+  font-weight: 500;
+  color: var(--text-color-tertiary);
  cursor: pointer;
 }

-.deleteButton {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border: 1px solid var(--error-color);
-  background-color: var(--error-color);
-  color: var(--on-primary);
-  stroke: var(--on-primary);
-  font-size: 16px;
-  line-height: 1.4;
-  font-weight: 700;
-  align-self: end;
-  border-radius: 8px;
-  cursor: pointer;
+.delete {
+  color: var(--error-color);
 }
--- a/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx
+++ b/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx
@ -3,6 +3,8 @@ import styles from './ArticlePreview.module.css';
 import RightIcon from '/src/assets/icons/right.svg?react';

 export default function ArticlePreview({ to, title, contents = [] }) {
+  const hasContents = contents.length > 0;
+
  return (
    <div className={styles.wrapper}>
      <Link
@ -13,17 +15,21 @@ export default function ArticlePreview({ to, title, contents = [] }) {
        <RightIcon />
      </Link>
      <div className={styles.main}>
-        {contents.map?.((content) => {
-          return (
-            <Link
-              to={`${to}/${content.id}`}
-              key={content.id}
-              className={styles.content}
-            >
-              {content.title}
-            </Link>
-          );
-        })}
+        {hasContents ? (
+          contents.map?.((content) => {
+            return (
+              <Link
+                to={`${to}/${content.id}`}
+                key={content.id}
+                className={styles.content}
+              >
+                {content.title}
+              </Link>
+            );
+          })
+        ) : (
+          <div className={styles.empty}>아직 작성된 글이 없습니다.</div>
+        )}
      </div>
    </div>
  );
--- a/frontend/src/components/Article/ArticlePreview/ArticlePreview.module.css
+++ b/frontend/src/components/Article/ArticlePreview/ArticlePreview.module.css
@ -35,3 +35,13 @@
  line-height: 1.4;
  font-weight: 400;
 }
+
+.empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0;
+  color: var(--text-color-tertiary);
+  font-size: 16px;
+  line-height: 1.2;
+}
--- a/frontend/src/components/ArticleBoard/ArticleBoard.jsx
+++ b/frontend/src/components/ArticleBoard/ArticleBoard.jsx
@ -18,7 +18,9 @@ export default function ArticleBoard({ title, canCreate, children }) {
          </Link>
        )}
      </div>
-      <div className={styles.article}>{children}</div>
+      <div className={styles.article}>
+        {children ? children : <div className={styles.empty}>표시할 내용이 없습니다.</div>}
+      </div>
    </div>
  );
 }
--- a/frontend/src/components/ArticleBoard/ArticleBoard.module.css
+++ b/frontend/src/components/ArticleBoard/ArticleBoard.module.css
@ -47,3 +47,13 @@
  flex-direction: column;
  width: 100%;
 }
+
+.empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 60px 0;
+  color: var(--text-color-tertiary);
+  font-size: 16px;
+  line-height: 1.2;
+}
--- a/frontend/src/components/ClassCard/ClassCard.module.css
+++ b/frontend/src/components/ClassCard/ClassCard.module.css
@ -19,3 +19,7 @@
  stroke: var(--text-color);
  box-sizing: border-box;
 }
+
+img.thumbnail {
+  border: 1px solid var(--border-color);
+}
--- a/frontend/src/components/Header/Header.jsx
+++ b/frontend/src/components/Header/Header.jsx
@ -26,12 +26,6 @@ export default function Header() {
              />
            </Link>
          </li>
-          <li>
-            <Link to={'/'}>전체 강의</Link>
-          </li>
-          <li>
-            <Link to={'/'}>수강중인 강의</Link>
-          </li>
          <li>
            <Link
              to={'/live/1'}
--- a/frontend/src/components/Layout/LectureLayout.jsx
+++ b/frontend/src/components/Layout/LectureLayout.jsx
@ -1,3 +1,4 @@
+import styles from './LectureLayout.module.css';
 import { Outlet, useParams } from 'react-router-dom';
 import LectureHeader from '../LectureHeader/LectureHeader';
 import { SideBar, SideLink, SideItem } from '../SideBar';
@ -18,9 +19,11 @@ export default function LectureLayout() {
  const lecture = data?.data;
  console.log(lecture);
  const userType = useBoundStore((state) => state.userType);
-  const handleDelete = async () => {
-    await lectureDelete(lectureId);
-    navigate('..');
+  const handleDelete = () => {
+    confirm('강의를 삭제할까요??') &&
+      lectureDelete(lectureId).then(() => {
+        navigate('..');
+      });
  };
  const lectureData = {
    title: lecture.title,
@ -60,13 +63,24 @@ export default function LectureLayout() {
                name="수강생"
                sub="총 12명"
              />
+            </SideBar>
+          )}
+          {userType === 'teacher' && (
+            <SideBar title={'강의 정보 관리'}>
              <SideLink
                to={'edit'}
                state={lectureData}
              >
                강의 정보 수정
              </SideLink>
-              <button onClick={handleDelete}>강의 삭제</button>
+              <li>
+                <span
+                  onClick={handleDelete}
+                  className={styles.delete}
+                >
+                  강의 삭제
+                </span>
+              </li>
            </SideBar>
          )}
          {userType === 'student' && (
--- a/frontend/src/components/Layout/LectureLayout.module.css
+++ b/frontend/src/components/Layout/LectureLayout.module.css
@ -0,0 +1,7 @@
+.delete {
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 400;
+  color: var(--error-color);
+  cursor: pointer;
+}
--- a/frontend/src/components/LectureEnroll/LectureEnroll.jsx
+++ b/frontend/src/components/LectureEnroll/LectureEnroll.jsx
@ -8,21 +8,39 @@ export default function LectureEnroll({ userName, enrollid, onDelete }) {

  const handleAccept = async (e) => {
    e.preventDefault();
+    if (!confirm('수강신청을 승인하시겠습니까?')) {
+      return;
+    }
    await lectureEnrollAccept(enrollid);
    onDelete(enrollid);
  };

  const handleCancel = async (e) => {
    e.preventDefault();
+    if (!confirm('수강신청을 거절하시겠습니까?')) {
+      return;
+    }
    await lectureEnrollCancel(enrollid);
    onDelete(enrollid);
  };

  return (
    <div className={styles.enrollLink}>
-      <p>{userName}</p>
-      <button onClick={handleAccept}>등록</button>
-      <button onClick={handleCancel}>삭제</button>
+      <span>{userName}</span>
+      <div className={styles.buttonWrapper}>
+        <button
+          onClick={handleAccept}
+          className={styles.accept}
+        >
+          등록
+        </button>
+        <button
+          onClick={handleCancel}
+          className={styles.reject}
+        >
+          삭제
+        </button>
+      </div>
    </div>
  );
 }
--- a/frontend/src/components/LectureEnroll/LectureEnroll.module.css
+++ b/frontend/src/components/LectureEnroll/LectureEnroll.module.css
@ -1,13 +1,44 @@
 .enrollLink {
-  border-radius: 8px;
-  width: 100%;
  display: flex;
  justify-content: space-between;
-  box-sizing: border-box;
+  align-items: center;
+  border-radius: 8px;
+  width: 100%;
  padding: 16px 20px;
-  transition: background-color 0.25s;
+  box-sizing: border-box;
 }

-.enrollLink:hover {
-  background-color: var(--background-secondary);
+.buttonWrapper {
+  display: flex;
+  gap: 8px;
+}
+
+.accept,
+.reject {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  background-color: var(--background);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+
+  cursor: pointer;
+  transition:
+    border-color 0.1s,
+    color 0.1s;
+}
+
+.accept:hover {
+  border-color: var(--info-color);
+  color: var(--info-color);
+}
+
+.reject:hover {
+  border-color: var(--error-color);
+  color: var(--error-color);
 }
--- a/frontend/src/components/Quiz/Quiz.jsx
+++ b/frontend/src/components/Quiz/Quiz.jsx
@ -2,7 +2,7 @@ import { useState } from 'react';
 import { STATIC_URL } from '../../constants';
 import styles from './Quiz.module.css';

-export default function Quiz({ question, step, image, choices = [], setAnswers }) {
+export default function Quiz({ question, image, choices = [], setAnswers }) {
  const [answer, setAnswer] = useState(null);
  const isChoice = choices.length > 0;

@ -37,9 +37,9 @@ export default function Quiz({ question, step, image, choices = [], setAnswers }
            type="text"
            autoFocus
            placeholder="답 입력"
-            onChange={(e) =>
-              setAnswers((prev) => prev.map((value, index) => (index === step ? e.target.value : value)))
-            }
+            onChange={(e) => {
+              setAnswers(e.target.value);
+            }}
            className={styles.input}
          />
        )}
--- a/frontend/src/components/QuizSet/QuizSet.jsx
+++ b/frontend/src/components/QuizSet/QuizSet.jsx
@ -17,7 +17,10 @@ export default function QuizSet({ quizSetId, finish }) {
  const interval = useRef(null);
  const submit = useCallback(
    (data) => {
-      instance.post(`${API_URL}/report/submit/${roomId}/quizset/${quizSetId}`, data).catch(() => {});
+      const requestData = {
+        answer: data,
+      };
+      instance.post(`${API_URL}/report/submit/${roomId}/quizset/${quizSetId}`, requestData).catch(() => {});
    },
    [quizSetId, roomId]
  );
@ -25,7 +28,6 @@ export default function QuizSet({ quizSetId, finish }) {
    ...quizList.map((quiz, index) => (
      <Quiz
        key={index}
-        step={index}
        answers={answers.current}
        setAnswers={(value) => {
          answers.current = answers.current.map((v, i) => (i === index ? value : v));
@ -60,7 +62,7 @@ export default function QuizSet({ quizSetId, finish }) {

        return prev + 1;
      });
-    }, 5000);
+    }, 10 * 1000);

    return () => {
      clearInterval(interval.current);
@ -78,7 +80,7 @@ export default function QuizSet({ quizSetId, finish }) {
    <>
      {step === null ? (
        <div className={styles.message}>
-          <span>퀴즈를 시작합니다</span>
+          <span>10초 후 퀴즈를 시작합니다.</span>
          <LoadingIndicator />
        </div>
      ) : (
--- a/frontend/src/components/QuizSet/QuizSet.module.css
+++ b/frontend/src/components/QuizSet/QuizSet.module.css
@ -40,5 +40,5 @@
  overflow: hidden;
  margin-top: 16px;
  transform-origin: left center;
-  animation: progress 5s linear infinite;
+  animation: progress 10s linear infinite;
 }
--- a/frontend/src/components/SideBar/SideItem.jsx
+++ b/frontend/src/components/SideBar/SideItem.jsx
@ -4,7 +4,7 @@ export default function SideItem({ name, sub }) {
  return (
    <li className={styles.item}>
      <div>{name}</div>
-      <div className={styles.sub}>{sub}</div>
+      {sub && <div className={styles.sub}>{sub}</div>}
    </li>
  );
 }
--- a/frontend/src/hooks/api/useAuth.js
+++ b/frontend/src/hooks/api/useAuth.js
@ -6,29 +6,24 @@ export function useAuth() {
  const setToken = useBoundStore((state) => state.setToken);
  const setUserType = useBoundStore((state) => state.setUserType);

-  const login = (userId, password, onError = () => {}) => {
+  const login = (userId, password) => {
    const formData = {
      userId,
      password,
    };

-    return instance
-      .post(`${API_URL}/user/login`, formData)
-      .then(({ data, config }) => {
-        const { role: role, 'access-token': accessToken } = data;
-        config.headers.Authorization = `${accessToken}`;
-        setToken(accessToken);
+    return instance.post(`${API_URL}/user/login`, formData).then(({ data, config }) => {
+      const { role: role, 'access-token': accessToken } = data;
+      config.headers.Authorization = `${accessToken}`;
+      setToken(accessToken);

-        if (role === 'ADMIN') {
-          setUserType('teacher');
-        } else if (role === 'STUDENT') {
-          setUserType('student');
-        }
-      })
-      .catch((e) => {
-        alert('아이디 또는 비밀번호를 다시 확인해주세요.');
-        onError(e);
-      });
+      if (role === 'ADMIN') {
+        setUserType('teacher');
+      } else if (role === 'STUDENT') {
+        setUserType('student');
+      }
+      return accessToken;
+    });
  };

  const userRegister = (role, userId, name, email, password) => {
--- a/frontend/src/hooks/api/useLectureEnroll.js
+++ b/frontend/src/hooks/api/useLectureEnroll.js
@ -4,7 +4,7 @@ import { API_URL } from '../../constants';

 export function useLectureEnroll(lectureId) {
  return useSuspenseQuery({
-    queryKey: ['lecturelist', lectureId],
+    queryKey: ['enroll', lectureId],
    queryFn: () => instance.get(`${API_URL}/registration/${lectureId}`),
  });
 }
--- a/frontend/src/hooks/api/useLectureInfo.js
+++ b/frontend/src/hooks/api/useLectureInfo.js
@ -4,7 +4,7 @@ import { API_URL } from '../../constants';

 export function useLectureInfo(lectureId) {
  return useSuspenseQuery({
-    queryKey: ['lecturelist', lectureId],
+    queryKey: ['lectureInfo', lectureId],
    queryFn: () => instance.get(`${API_URL}/lecture/${lectureId}`),
  });
 }
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -167,6 +167,7 @@ body {
    sans-serif;
  margin: 0;
  padding: 0;
+  min-width: 1360px;
 }

 a {
--- a/frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx
+++ b/frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx
@ -7,10 +7,9 @@ import { useQnas } from '../../hooks/api/useQnas';
 export default function LearningLectureDetailPage() {
  const { lectureId } = useParams();
  const { data: noticesData } = useNotices(lectureId);
-  const notices = noticesData?.data;
+  const notices = noticesData?.data.slice(0, 3);
  const { data: qnasData } = useQnas(lectureId);
-  const questions = qnasData?.data;
-  // TODO: QnA 훅 작성 후 사용 및 3개까지만 slice 추가
+  const questions = qnasData?.data.slice(0, 3);

  return (
    <section className={styles.previews}>
@ -24,7 +23,6 @@ export default function LearningLectureDetailPage() {
        title="Q&A"
        contents={questions}
      />
-      <ArticlePreview title="커리큘럼" />
    </section>
  );
 }
--- a/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx
+++ b/frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx
@ -5,21 +5,26 @@ import { useMyLectures } from '../../hooks/api/useMyLectures';
 export default function LearningLecturesPage() {
  const { data } = useMyLectures();
  const onGoingClasses = data?.data ?? [];
+  const hasOnGoingClasses = onGoingClasses.length > 0;

  return (
    <section>
      <h2 className={styles.title}>수강중인 강의</h2>
      <div className={styles.grid}>
-        {onGoingClasses.map?.((lecture) => (
-          <Link
-            key={lecture.id}
-            to={`/lecture/${lecture.id}`}
-            className={styles.card}
-          >
-            <div className={styles.thumbnail} />
-            <div>{lecture.title}</div>
-          </Link>
-        ))}
+        {hasOnGoingClasses ? (
+          onGoingClasses.map?.((lecture) => (
+            <Link
+              key={lecture.id}
+              to={`/lecture/${lecture.id}`}
+              className={styles.card}
+            >
+              <div className={styles.thumbnail} />
+              <div>{lecture.title}</div>
+            </Link>
+          ))
+        ) : (
+          <div className={styles.empty}>수강중인 강의가 없습니다.</div>
+        )}
      </div>
    </section>
  );
--- a/frontend/src/pages/LectureEnrollPage/LectureEnrollPage.jsx
+++ b/frontend/src/pages/LectureEnrollPage/LectureEnrollPage.jsx
@ -24,14 +24,15 @@ export default function QuestionListPage() {
      title="수강신청관리"
      canCreate={false}
    >
-      {lectures.map?.((lecture) => (
-        <LectureEnroll
-          key={`${lecture.id}`}
-          enrollid={lecture.id}
-          userName={lecture.userName}
-          onDelete={handleDelete}
-        />
-      ))}
+      {lectures.length &&
+        lectures.map?.((lecture) => (
+          <LectureEnroll
+            key={`${lecture.id}`}
+            enrollid={lecture.id}
+            userName={lecture.userName}
+            onDelete={handleDelete}
+          />
+        ))}
    </ArticleBoard>
  );
 }
--- a/frontend/src/pages/LoginPage/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage/LoginPage.jsx
@ -22,9 +22,15 @@ export default function LoginPage() {
    const id = idRef.current.value;
    const password = passwordRef.current.value;

-    login(id, password).then(() => {
-      navigate('/', { replace: true });
-    });
+    login(id, password)
+      .then(() => {
+        navigate('/', { replace: true });
+      })
+      .catch(() => {
+        alert('아이디 또는 비밀번호를 다시 확인해주세요.');
+        passwordRef.current.value = '';
+        idRef.current.focus();
+      });
  };

  useEffect(() => {
--- a/frontend/src/pages/NoticeListPage/NoticeListPage.jsx
+++ b/frontend/src/pages/NoticeListPage/NoticeListPage.jsx
@ -15,16 +15,17 @@ export default function NoticeListPage() {
      title="공지사항"
      canCreate={userType === 'teacher'}
    >
-      {notices.map?.((notice) => (
-        <ArticleLink
-          key={`${notice.id}`}
-          title={notice.title}
-          //Todo: createdAt을 이용하여 날짜 표시했는데 Q&A에서 나오는 날짜 형식이랑 공지사항에서 나오는 날짜 형식이랑 달라서 수정해야함.
-          // + Q&A 글쓰기 버튼이 너무 커서 글 밀어내는 느낌 있음.
-          sub={`${notice.createdAt[0]}. ${notice.createdAt[1]}. ${notice.createdAt[2]}. ${notice.createdAt[3]}:${notice.createdAt[4]}`}
-          to={`${notice.id}`}
-        />
-      ))}
+      {notices.length &&
+        notices.map?.((notice) => (
+          <ArticleLink
+            key={`${notice.id}`}
+            title={notice.title}
+            //Todo: createdAt을 이용하여 날짜 표시했는데 Q&A에서 나오는 날짜 형식이랑 공지사항에서 나오는 날짜 형식이랑 달라서 수정해야함.
+            // + Q&A 글쓰기 버튼이 너무 커서 글 밀어내는 느낌 있음.
+            sub={`${notice.createdAt[0]}. ${notice.createdAt[1]}. ${notice.createdAt[2]}. ${notice.createdAt[3]}:${notice.createdAt[4]}`}
+            to={`${notice.id}`}
+          />
+        ))}
    </ArticleBoard>
  );
 }
--- a/frontend/src/pages/QuestionListPage/QuestionListPage.jsx
+++ b/frontend/src/pages/QuestionListPage/QuestionListPage.jsx
@ -15,14 +15,15 @@ export default function QuestionListPage() {
      title="Q&A"
      canCreate={userType === 'student'}
    >
-      {questions.map?.((question) => (
-        <ArticleLink
-          key={`${question.title}${question.createtAt}`}
-          title={question.title}
-          sub={`${new Date(question.createtAt).toLocaleDateString()} ${new Date(question.createtAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`}
-          to={`${question.id}`}
-        />
-      ))}
+      {questions.length &&
+        questions.map?.((question) => (
+          <ArticleLink
+            key={`${question.title}${question.createtAt}`}
+            title={question.title}
+            sub={`${new Date(question.createtAt).toLocaleDateString()} ${new Date(question.createtAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`}
+            to={`${question.id}`}
+          />
+        ))}
    </ArticleBoard>
  );
 }
--- a/frontend/src/pages/QuizsetListPage/QuizsetListPage.jsx
+++ b/frontend/src/pages/QuizsetListPage/QuizsetListPage.jsx
@ -15,13 +15,14 @@ export default function QuizsetListPage() {
      title="퀴즈 목록"
      canCreate={true}
    >
-      {quizsets.map?.((quizset) => (
-        <ArticleLink
-          key={`${quizset.quizSetId}`}
-          title={quizset.title}
-          to={`${quizset.quizSetId}`}
-        />
-      ))}
+      {quizsets.length &&
+        quizsets.map?.((quizset) => (
+          <ArticleLink
+            key={`${quizset.quizSetId}`}
+            title={quizset.title}
+            to={`${quizset.quizSetId}`}
+          />
+        ))}
    </ArticleBoard>
  );
 }
--- a/frontend/src/pages/StudentHomePage/StudentHomePage.jsx
+++ b/frontend/src/pages/StudentHomePage/StudentHomePage.jsx
@ -1,3 +1,4 @@
+import styles from './StudentHomePage.module.css';
 import { ClassCard } from '../../components/ClassCard';
 import { ClassGrid } from '../../components/ClassGrid';
 import { MaxWidthLayout } from '../../components/Layout';
@ -7,6 +8,7 @@ import { useMyLectures } from '../../hooks/api/useMyLectures';
 export default function StudentHomePage() {
  const { data: myLectures } = useMyLectures();
  const onGoingClasses = myLectures?.data ?? [];
+  const hasOnGoingClasses = onGoingClasses.length > 0;

  const { data: allLectures } = useLectures();
  const allClasses = allLectures?.data ?? [];
@ -14,15 +16,19 @@ export default function StudentHomePage() {
  return (
    <MaxWidthLayout>
      <ClassGrid title="수강중인 강의">
-        {onGoingClasses.map?.((lecture) => (
-          <ClassCard
-            key={lecture.id}
-            path={`/lecture/${lecture.id}`}
-            img={lecture.image}
-          >
-            {lecture.title}
-          </ClassCard>
-        ))}
+        {hasOnGoingClasses ? (
+          onGoingClasses.map?.((lecture) => (
+            <ClassCard
+              key={lecture.id}
+              path={`/lecture/${lecture.id}`}
+              img={lecture.image}
+            >
+              {lecture.title}
+            </ClassCard>
+          ))
+        ) : (
+          <div className={styles.msg}>수강중인 강의가 없어요.</div>
+        )}
      </ClassGrid>
      <ClassGrid title="전체 강의">
        {allClasses.map?.((lecture) => (
--- a/frontend/src/pages/StudentHomePage/StudentHomePage.module.css
+++ b/frontend/src/pages/StudentHomePage/StudentHomePage.module.css
@ -0,0 +1,10 @@
+.msg {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 0;
+  color: var(--text-color-tertiary);
+  font-size: 20px;
+  line-height: 1.2;
+}
--- a/frontend/src/pages/StudentListPage/StudentListPage.jsx
+++ b/frontend/src/pages/StudentListPage/StudentListPage.jsx
@ -14,16 +14,17 @@ export default function StudentListPage() {

  return (
    <ArticleBoard title="수강생 관리">
-      {students.map?.((student) => {
-        return (
-          <ArticleLink
-            key={`${student.name}${student.sub}`}
-            title={student.name}
-            sub={`퀴즈 점수: ${student.quizScore}`}
-            to={`${student.id}`}
-          />
-        );
-      })}
+      {students.length &&
+        students.map?.((student) => {
+          return (
+            <ArticleLink
+              key={`${student.name}${student.sub}`}
+              title={student.name}
+              sub={`퀴즈 점수: ${student.quizScore}`}
+              to={`${student.id}`}
+            />
+          );
+        })}
    </ArticleBoard>
  );
 }
--- a/frontend/src/pages/TeacherHomePage/TeacherHomePage.module.css
+++ b/frontend/src/pages/TeacherHomePage/TeacherHomePage.module.css
@ -5,6 +5,8 @@
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
+  width: 295px;
+  height: 220px;
  background-color: var(--background);
  color: var(--text-color);
  stroke: var(--text-color);
@ -19,3 +21,14 @@
    background-color: var(--background-secondary);
  }
 }
+
+.msg {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 0;
+  color: var(--text-color-tertiary);
+  font-size: 20px;
+  line-height: 1.2;
+}
--- a/frontend/src/pages/TeacherLectureDetailPage/TeacherLectureDetailPage.jsx
+++ b/frontend/src/pages/TeacherLectureDetailPage/TeacherLectureDetailPage.jsx
@ -1,30 +0,0 @@
-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 { 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}>
-      {/* FIXME: 밑에 ArticlePreview 바꿔야함. 공지사항 Q&A 커리큘럼 으로 나눠서 작성할 수 있게 바꾸고 링크 상위 3개만 받고 링크 줄 수 있게 할지 말지. 이거 바꾸면 LearningLectureDetailPage도 똑같이 바꾸면 될듯*/}
-      <ArticlePreview
-        to="notice"
-        title="공지사항"
-        contents={notices}
-      />
-      <ArticlePreview
-        to="qna"
-        title="Q&A"
-        contents={questions}
-      />
-      <ArticlePreview title="커리큘럼" />
-    </main>
-  );
-}
--- a/frontend/src/pages/TeacherLectureDetailPage/TeacherLectureDetailPage.module.css
+++ b/frontend/src/pages/TeacherLectureDetailPage/TeacherLectureDetailPage.module.css
@ -1,5 +0,0 @@
-.previews {
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-}
--- a/frontend/src/pages/TeacherLectureDetailPage/index.js
+++ b/frontend/src/pages/TeacherLectureDetailPage/index.js
@ -1 +0,0 @@
-export { default } from './TeacherLectureDetailPage';
--- a/frontend/src/pages/TeacherNoticeListPage/TeacherNoticeListPage.jsx
+++ b/frontend/src/pages/TeacherNoticeListPage/TeacherNoticeListPage.jsx
@ -16,17 +16,18 @@ export default function TeacherNoticeListPage() {
      title="공지사항"
      canCreate={true}
    >
-      {notices.map?.((notice) => {
-        if (notice.sub && notice.title) {
-          return (
-            <ArticleLink
-              key={`${notice.title}${notice.sub}`}
-              title={notice.title}
-              sub={notice.sub}
-            />
-          );
-        }
-      })}
+      {notices.length &&
+        notices.map?.((notice) => {
+          if (notice.sub && notice.title) {
+            return (
+              <ArticleLink
+                key={`${notice.title}${notice.sub}`}
+                title={notice.title}
+                sub={notice.sub}
+              />
+            );
+          }
+        })}
    </ArticleBoard>
  );
 }
				`@ -1 +0,0 @@`
				`export { default } from './TeacherLectureDetailPage';`