마이페이지 내 서브메뉴에 NoContent 컴포넌트 적용

SKKU-Online-Learning-System · Nov 1, 2023 · 68f78b5 · 68f78b5
1 parent 874c9eb
commit 68f78b5
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 45 deletions.
diff --git a/front-end/components/MyPage/Bookmark.tsx b/front-end/components/MyPage/Bookmark.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 
+import NoContent from '@components/NoContent';
+
 const Bookmark = () => {
-	return <div className="min-h-screen bg-white">Bookmark</div>;
+	return <NoContent text="저장된 북마크 내역이 없습니다." />;
 };
 
 export default Bookmark;
diff --git a/front-end/components/MyPage/Completed.tsx b/front-end/components/MyPage/Completed.tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import Image from 'next/image';
 
 import { useCompletedCourseFetch } from 'query/hooks/MyPage';
+import NoContent from '@components/NoContent';
 
 const Completed = () => {
 	const router = useRouter();
@@ -18,37 +19,33 @@ const Completed = () => {
 				alt="loading gif"
 			/>
 		);
-	if (!completedCourseList)
-		return <div>Failed to retrieve completed course data . . .</div>;
-	if (completedCourseList.length === 0)
-		return <div className="min-h-screen bg-white">완료된 강좌가 없습니다.</div>;
+	if (!completedCourseList || completedCourseList.length === 0)
+		return <NoContent text="수강 완료한 강좌가 없습니다." />;
 
 	const handleClick = (courseId: number) => () => {
 		router.push(`/courses/${courseId}`);
 	};
 
 	return (
-		<div>
-			<div className="bg-[var(--color-mrgreen-9)]  w-full ">
-				<div className="bg-[var(--color-Surface)]">
-					<div className="grid grid-cols-4 p-5 mx-56 mb-32 tbl:mx-auto dt:grid-cols-3 tbl:grid-cols-3 mbl:grid-cols-1 gap-x-4 gap-y-4">
-						{completedCourseList?.map((elem, index) => (
-							<div
-								className="rounded-md w-full mt-5 overflow-hidden relative cursor-pointer transition hover:scale-[1.03] bg-white"
-								onClick={handleClick(elem.course.id)}
-								key={index}
-							>
-								<img
-									className="aspect-video"
-									width={'100%'}
-									src={elem.course.thumbnail}
-								/>
-								<div className="overflow-hidden text-base text-ellipsis whitespace-nowrap">
-									{elem.course.title}
-								</div>
+		<div className="bg-[var(--color-mrgreen-9)] w-full ">
+			<div className="bg-[var(--color-Surface)]">
+				<div className="grid grid-cols-4 p-5 mx-56 mb-32 tbl:mx-auto dt:grid-cols-3 tbl:grid-cols-3 mbl:grid-cols-1 gap-x-4 gap-y-4">
+					{completedCourseList?.map((elem, index) => (
+						<div
+							className="rounded-md w-full mt-5 overflow-hidden relative cursor-pointer transition hover:scale-[1.03] bg-white"
+							onClick={handleClick(elem.course.id)}
+							key={index}
+						>
+							<img
+								className="aspect-video"
+								width={'100%'}
+								src={elem.course.thumbnail}
+							/>
+							<div className="overflow-hidden text-base text-ellipsis whitespace-nowrap">
+								{elem.course.title}
 							</div>
-						))}
-					</div>
+						</div>
+					))}
 				</div>
 			</div>
 		</div>

diff --git a/front-end/components/MyPage/History/History.tsx b/front-end/components/MyPage/History/History.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Image from 'next/image';
 
 import { useRecentLecturesFetch } from 'query/hooks/Main/index';
+import NoContent from '@components/NoContent';
 import HistoryCard from './HistoryCard';
 
 const History = () => {
@@ -17,7 +18,7 @@ const History = () => {
 			/>
 		);
 	if (!latestLectures || latestLectures.length === 0)
-		return <div>강의가 존재하지 않습니다</div>;
+		return <NoContent text="최근 시청한 강의 내역이 없습니다." />;
 
 	return (
 		<div className="min-h-screen bg-white">

diff --git a/front-end/components/MyPage/Learning/Learning.tsx b/front-end/components/MyPage/Learning/Learning.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 
 import { useCurrentLeaningCourseListFetch } from 'query/hooks/MyPage';
+import NoContent from '@components/NoContent';
 import LearningCard from './LearningCard';
 
 interface ILectureStatusCount {
@@ -70,8 +71,8 @@ const Learning = () => {
 				alt="loading gif"
 			/>
 		);
-	if (!currentLearningCourseList || !currentLearningCourseList.length)
-		return <div>강좌가 존재하지 않습니다</div>;
+	if (!currentLearningCourseList || currentLearningCourseList.length === 0)
+		return <NoContent text="현재 수강 중인 강좌가 없습니다." />;
 
 	return (
 		<div className="min-h-screen bg-white">

diff --git a/front-end/components/MyPage/MyQna.tsx b/front-end/components/MyPage/MyQna.tsx
@@ -4,6 +4,7 @@ import Image from 'next/image';
 
 import { getTimeBefore } from 'utils/getTimeBefore';
 import { useMyQnaFetch } from 'query/hooks/MyPage';
+import NoContent from '@components/NoContent';
 
 const MyQnA = () => {
 	const router = useRouter();
@@ -19,22 +20,9 @@ const MyQnA = () => {
 				alt="loading gif"
 			/>
 		);
-	if (!qna) return <div>Failed to retrieve Q&A info . . .</div>;
-	if (qna.length === 0)
-		return (
-			<div className="flex flex-col items-center justify-center w-full h-full bg-white">
-				<div className="px-6 py-4 mb-10 text-3xl text-black rounded-lg">
-					첫 질문을 올려주세요 !
-				</div>
-				<Image
-					className="opacity-25"
-					src={'/images/confucian.jpeg'}
-					width={500}
-					height={500}
-					alt="Maple img"
-				/>
-			</div>
-		);
+
+	if (!qna || qna.length === 0)
+		return <NoContent text="첫 질문을 올려주세요 !" />;
 
 	const handleClick = (questionId: number) => () => {
 		if (!questionId) return;
@@ -43,7 +31,7 @@ const MyQnA = () => {
 
 	return (
 		<div className="min-h-screen bg-white">
-			<div className="p-5 mx-56 mb-32 tbl:mx-auto gap-y-4">
+			<div className="tbl:mx-auto gap-y-4">
 				<ul>
 					{qna.map((elem, idx) => (
 						<li