refactor: add emptyDataRender in table

app/ui/result/result-category-detail-lecture/result-cagegory-detail-lecture.tsx

@@ -4,6 +4,8 @@ import LabelContainer from '@/app/ui/view/atom/label-container/label-container';
 import { cn } from '@/app/utils/shadcn/utils';
 import { ResultCategoryDetailLecturesResponse } from '@/app/store/querys/result';
 import CompletedImage from '@/public/assets/completed-category.png';
+import Image from 'next/image';
+import searchResultIcon from '@/public/assets/searchResultIcon.svg';
 
 const headerInfo = ['과목코드', '과목명', '학점'];
 
@@ -12,11 +14,21 @@ interface ResultCagegoryDetailLectureProps {
   isTakenLecture: boolean;
 }
 
+const emptyDataRender = () => {
+  return (
+    <div className="flex justify-center gap-4 p-6 md:p-12">
+      <Image src={searchResultIcon} alt="search-result-icon" width={20} height={20} />
+      <span className="text-sm font-medium text-gray-400 text-center whitespace-pre-wrap md:text-base">
+        이수한 과목 정보가 존재하지 않습니다.
+      </span>
+    </div>
+  );
+};
+
 function ResultCagegoryDetailLecture({ detailCategory, isTakenLecture }: ResultCagegoryDetailLectureProps) {
   const { categoryName, totalCredit, takenCredit, takenLectures, haveToLectures, completed } = detailCategory;
 
   const showCompleted = !isTakenLecture && completed;
-  const showNoneLecture = isTakenLecture && takenLectures.length === 0;
 
   return (
     <div className={cn('my-4 flex flex-col gap-4 min-h-48', 'md:min-h-60')}>
@@ -28,13 +40,14 @@ function ResultCagegoryDetailLecture({ detailCategory, isTakenLecture }: ResultC
           </div>
         }
       />
-      {showCompleted ? (
+      {!showCompleted ? (
         <AnnounceMessageBox message="해당 파트의 졸업요건을 충족하셨습니다!" background_image={CompletedImage} />
       ) : (
-        <>
-          <Table headerInfo={headerInfo} data={isTakenLecture ? takenLectures : haveToLectures} />
-          {showNoneLecture && <AnnounceMessageBox message="이수한 과목 정보가 존재하지 않습니다." />}
-        </>
+        <Table
+          headerInfo={headerInfo}
+          data={isTakenLecture ? takenLectures : haveToLectures}
+          emptyDataRender={emptyDataRender}
+        />
       )}
     </div>
   );

app/ui/view/molecule/table/index.tsx

@@ -4,12 +4,14 @@ import List from '../list';
 import Grid from '../grid';
 import { ListRow } from '../list/list-root';
 import SwipeToDelete from '../swipe/swipe-to-delete';
+import { ReactNode } from 'react';
 
 interface TableProps<T extends ListRow> {
   headerInfo: string[];
   data: T[];
   renderActionButton?: (id: number) => JSX.Element;
   swipeable?: boolean;
+  emptyDataRender?: () => ReactNode;
 }
 
 interface SwipeableTableProps<T extends ListRow> extends TableProps<T> {
@@ -35,6 +37,7 @@ export function Table<T extends ListRow>({
   renderActionButton,
   swipeable = false,
   onSwipeAction,
+  emptyDataRender,
 }: SwipeableTableProps<T> | BasicTableProps<T>) {
   const cols = renderActionButton && !swipeable ? 'render-button' : headerInfo.length;
 
@@ -75,7 +78,7 @@ export function Table<T extends ListRow>({
   return (
     <div className="flex flex-col gap-2.5 w-full" data-testid="table-data">
       <TableHeader headerInfo={headerInfo} cols={isCol(cols) ? cols : 6} />
-      <List data={data} render={swipeable ? swipeableRender : render} />
+      <List data={data} render={swipeable ? swipeableRender : render} emptyDataRender={emptyDataRender} />
     </div>
   );
 }