refactor: original activity report pages

packages/api/src/feature/activity/service/activity.activity-term.service.ts

@@ -91,14 +91,7 @@ export default class ActivityActivityTermService {
           id: row.id,
           name: row.name,
           activityTypeEnumId: row.activityTypeEnumId,
-          startTerm: duration.reduce(
-            (prev, curr) => (prev < curr.startTerm ? prev : curr.startTerm),
-            duration[0].startTerm,
-          ),
-          endTerm: duration.reduce(
-            (prev, curr) => (prev > curr.endTerm ? prev : curr.endTerm),
-            duration[0].endTerm,
-          ),
+          durations: duration,
         };
       }),
     );

packages/interface/src/api/activity/endpoint/apiAct006.ts

@@ -30,8 +30,12 @@ const responseBodyMap = {
         id: z.coerce.number().int().min(1),
         name: z.string().max(255),
         activityTypeEnumId: z.nativeEnum(ActivityTypeEnum),
-        startTerm: z.coerce.date(),
-        endTerm: z.coerce.date(),
+        durations: z.array(
+          z.object({
+            startTerm: z.coerce.date(),
+            endTerm: z.coerce.date(),
+          }),
+        ),
       }),
     ),
   }),

packages/web/src/features/activity-report/components/PastActivityReportList.tsx → packages/web/src/features/activity-report/components/PastActivityReportTable.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { ApiAct006ResponseOk } from "@sparcs-clubs/interface/api/activity/endpoint/apiAct006";
 import {
   createColumnHelper,
   getCoreRowModel,
@@ -16,20 +15,18 @@ import Tag from "@sparcs-clubs/web/common/components/Tag";
 import { ActTypeTagList } from "@sparcs-clubs/web/constants/tableTagList";
 
 import { formatDate } from "@sparcs-clubs/web/utils/Date/formatDate";
-
 import { getTagDetail } from "@sparcs-clubs/web/utils/getTagDetail";
 
-import useGetPastActivityReportList from "../services/useGetPastActivityReportList";
-import { ActivityTerm } from "../types/activityReport";
+import useGetActivityTerm from "../hooks/useGetActivityTerm";
+import useGetPastActivityReportList from "../hooks/useGetPastActivityReportList";
+import { PastActivityReportTableData } from "../types/table";
 
-interface ActivityReportListProps {
-  term: ActivityTerm;
+interface PastActivityReportTableProps {
+  termId: number;
   clubId: number;
 }
 
-const columnHelper =
-  createColumnHelper<ApiAct006ResponseOk["activities"][number]>();
-
+const columnHelper = createColumnHelper<PastActivityReportTableData>();
 const columns = [
   columnHelper.accessor("name", {
     id: "activity",
@@ -46,7 +43,8 @@ const columns = [
     size: 32,
   }),
   columnHelper.accessor(
-    row => `${formatDate(row.startTerm)} ~ ${formatDate(row.endTerm)}`,
+    row =>
+      `${formatDate(row.durations[0].startTerm)} ~ ${formatDate(row.durations[0].endTerm)}${row.durations.length > 1 ? ` 외 ${row.durations.length - 1}개` : ""}`,
     {
       id: "date-range",
       header: "활동 기간",
@@ -56,35 +54,39 @@ const columns = [
   ),
 ];
 
-const PastActivityReportList: React.FC<ActivityReportListProps> = ({
-  term,
+const PastActivityReportTable: React.FC<PastActivityReportTableProps> = ({
+  termId,
   clubId,
 }) => {
   const router = useRouter();
-  const { data, isLoading, isError } = useGetPastActivityReportList(term.id, {
+
+  const { data: activityTerm } = useGetActivityTerm(clubId, termId);
+  const { data, isLoading, isError } = useGetPastActivityReportList(
+    termId,
     clubId,
-  });
+  );
+
   const table = useReactTable({
     columns,
-    data: data?.activities ?? [],
+    data,
     getCoreRowModel: getCoreRowModel(),
     enableSorting: false,
   });
 
   return (
-    <AsyncBoundary isLoading={isLoading} isError={isError}>
-      <FoldableSection
-        key={term.id}
-        title={`${term.year}년 ${term.name}학기 (총 ${data?.activities.length}개)`}
-      >
+    <FoldableSection
+      key={activityTerm.id}
+      title={`${activityTerm.year}년 ${activityTerm.name}학기 (총 ${data.length}개)`}
+    >
+      <AsyncBoundary isLoading={isLoading} isError={isError}>
         <Table
           table={table}
           onClick={row => router.push(`/manage-club/activity-report/${row.id}`)}
-          count={data?.activities.length}
+          count={data.length}
         />
-      </FoldableSection>
-    </AsyncBoundary>
+      </AsyncBoundary>
+    </FoldableSection>
   );
 };
 
-export default PastActivityReportList;
+export default PastActivityReportTable;

packages/web/src/features/activity-report/frames/ActivityReportMainFrame.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { ApiClb015ResponseOk } from "@sparcs-clubs/interface/api/club/endpoint/apiClb015";
 
-import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 import AsyncBoundary from "@sparcs-clubs/web/common/components/AsyncBoundary";
 import IconButton from "@sparcs-clubs/web/common/components/Buttons/IconButton";
@@ -15,10 +15,10 @@ import Typography from "@sparcs-clubs/web/common/components/Typography";
 import { useGetMyManageClub } from "@sparcs-clubs/web/features/manage-club/services/getMyManageClub";
 
 import CurrentActivityReportTable from "../components/CurrentActivityReportTable";
-import PastActivityReportList from "../components/PastActivityReportList";
+import PastActivityReportList from "../components/PastActivityReportTable";
 import { MAX_ACTIVITY_REPORT_COUNT } from "../constants";
+import useGetCurrentActivityReportList from "../hooks/useGetCurrentActivityReportList";
 import useGetActivityTerms from "../services/useGetActivityTerms";
-import useGetNewActivityReportList from "../services/useGetNewActivityReportList";
 
 interface ActivityReportMainFrameProps {
   clubId: number;
@@ -27,25 +27,31 @@ interface ActivityReportMainFrameProps {
 const ActivityReportMainFrame: React.FC<ActivityReportMainFrameProps> = ({
   clubId,
 }) => {
+  const router = useRouter();
+
   const { data } = useGetMyManageClub() as {
     data: ApiClb015ResponseOk;
     isLoading: boolean;
   };
 
   const {
-    data: newActivityReportList,
-    isLoading: isLoadingNewActivityReport,
-    isError: isErrorNewActivityReport,
-  } = useGetNewActivityReportList({
-    clubId,
-  });
-
+    data: activityReportList,
+    isLoading: isLoadingActivityReportList,
+    isError: isErrorActivityReportList,
+  } = useGetCurrentActivityReportList(clubId);
   const {
     data: activityTerms,
     isLoading: isLoadingActivityTerms,
     isError: isErrorActivityTerms,
   } = useGetActivityTerms({ clubId: data.clubId });
 
+  const isLoading = isLoadingActivityReportList || isLoadingActivityTerms;
+  const isError = isErrorActivityReportList || isErrorActivityTerms;
+
+  if (!activityTerms) {
+    return null;
+  }
+
   return (
     <FlexWrapper direction="column" gap={60}>
       <PageHead
@@ -55,60 +61,50 @@ const ActivityReportMainFrame: React.FC<ActivityReportMainFrameProps> = ({
         ]}
         title="활동 보고서"
       />
-      <FoldableSectionTitle childrenMargin="20px" title="신규 활동 보고서">
-        <FlexWrapper direction="column" gap={20}>
-          <Info text="현재는 2024년 여름-가을학기 활동 보고서 작성 기간입니다 (작성 마감 : 2025년 1월 7일 23:59)" />
-          <AsyncBoundary
-            isLoading={isLoadingNewActivityReport}
-            isError={isErrorNewActivityReport}
-          >
-            <FlexWrapper direction="row" gap={16} justify="flex-end">
-              <Typography
-                fs={14}
-                fw="REGULAR"
-                lh={20}
-                color="GRAY.300"
-                ff="PRETENDARD"
-              >
+      <AsyncBoundary isLoading={isLoading} isError={isError}>
+        <FoldableSectionTitle childrenMargin="20px" title="신규 활동 보고서">
+          <FlexWrapper direction="column" gap={20}>
+            <Info text="현재는 2024년 여름-가을학기 활동 보고서 작성 기간입니다 (작성 마감 : 2025년 1월 7일 23:59)" />
+            <FlexWrapper
+              direction="row"
+              gap={16}
+              justify="flex-end"
+              style={{ alignItems: "center" }}
+            >
+              <Typography fs={14} lh={20} color="GRAY.300">
                 활동 보고서는 최대 20개까지 작성 가능합니다
               </Typography>
-              <Link href="/manage-club/activity-report/create">
-                <IconButton
-                  type={
-                    newActivityReportList &&
-                    newActivityReportList.length >= MAX_ACTIVITY_REPORT_COUNT
-                      ? "disabled"
-                      : "default"
-                  }
-                  icon="add"
-                  onClick={() => {}}
-                >
-                  활동 보고서 작성
-                </IconButton>
-              </Link>
+              <IconButton
+                type={
+                  activityReportList.length >= MAX_ACTIVITY_REPORT_COUNT
+                    ? "disabled"
+                    : "default"
+                }
+                icon="add"
+                onClick={() => {
+                  router.push("/manage-club/activity-report/create");
+                }}
+              >
+                활동 보고서 작성
+              </IconButton>
             </FlexWrapper>
+
             <CurrentActivityReportTable clubId={data.clubId} />
-          </AsyncBoundary>
-        </FlexWrapper>
-      </FoldableSectionTitle>
-      <FoldableSectionTitle title="과거 활동 보고서">
-        <FlexWrapper direction="column" gap={40}>
-          <AsyncBoundary
-            isLoading={isLoadingActivityTerms}
-            isError={isErrorActivityTerms}
-          >
-            {activityTerms?.terms
-              .toReversed()
-              .map(term => (
-                <PastActivityReportList
-                  key={term.id}
-                  term={term}
-                  clubId={data.clubId}
-                />
-              ))}
-          </AsyncBoundary>
-        </FlexWrapper>
-      </FoldableSectionTitle>
+          </FlexWrapper>
+        </FoldableSectionTitle>
+
+        <FoldableSectionTitle title="과거 활동 보고서">
+          <FlexWrapper direction="column" gap={40}>
+            {activityTerms.terms.toReversed().map(term => (
+              <PastActivityReportList
+                key={term.id}
+                termId={term.id}
+                clubId={data.clubId}
+              />
+            ))}
+          </FlexWrapper>
+        </FoldableSectionTitle>
+      </AsyncBoundary>
     </FlexWrapper>
   );
 };

packages/web/src/features/activity-report/hooks/useGetActivityTerm.ts

@@ -0,0 +1,30 @@
+import useGetActivityTerms from "../services/useGetActivityTerms";
+import { ActivityTerm } from "../types/activityTerm";
+
+const useGetActivityTerm = (
+  clubId: number,
+  activityTermId: number,
+): {
+  data: ActivityTerm;
+  isLoading: boolean;
+  isError: boolean;
+} => {
+  const { data, isLoading, isError } = useGetActivityTerms({ clubId });
+
+  const activityTerm = data?.terms.find(term => term.id === activityTermId);
+  if (isLoading || isError || !activityTerm) {
+    return {
+      data: {} as ActivityTerm,
+      isLoading,
+      isError,
+    };
+  }
+
+  return {
+    data: activityTerm,
+    isLoading,
+    isError,
+  };
+};
+
+export default useGetActivityTerm;

packages/web/src/features/activity-report/hooks/useGetPastActivityReportList.ts

@@ -0,0 +1,35 @@
+import useGetTermActivityReportList from "../services/useGetTermActivityReportList";
+import { PastActivityReportTableData } from "../types/table";
+
+const useGetPastActivityReportList = (
+  termId: number,
+  clubId: number,
+): {
+  data: PastActivityReportTableData[];
+  isLoading: boolean;
+  isError: boolean;
+} => {
+  const {
+    data: activityReportList,
+    isLoading,
+    isError,
+  } = useGetTermActivityReportList(termId, {
+    clubId,
+  });
+
+  if (isLoading || isError || !activityReportList) {
+    return {
+      data: [],
+      isLoading,
+      isError,
+    };
+  }
+
+  return {
+    data: activityReportList.activities,
+    isLoading,
+    isError,
+  };
+};
+
+export default useGetPastActivityReportList;

packages/web/src/features/activity-report/services/useGetPastActivityReportList.tsx → packages/web/src/features/activity-report/services/useGetTermActivityReportList.tsx

@@ -9,12 +9,14 @@ import {
   defineAxiosMock,
 } from "@sparcs-clubs/web/lib/axios";
 
+import { mockActivityReportData } from "../_mock/activityReportList";
+
 export const pastActivityReportListQueryKey = (
   activityTermId: number,
   clubId: number,
 ) => [apiAct006.url(activityTermId), clubId];
 
-const useGetPastActivityReportList = (
+const useGetTermActivityReportList = (
   activityTermId: number,
   query: ApiAct006RequestQuery,
 ) =>
@@ -32,23 +34,15 @@ const useGetPastActivityReportList = (
     },
   });
 
-export default useGetPastActivityReportList;
+export default useGetTermActivityReportList;
 
 const baseUrl = "/student/activities/activity-terms/activity-term/";
 
 defineAxiosMock(mock => {
   mock.onGet(new RegExp(`^${baseUrl}\\d+$`)).reply(() => [
     200,
     {
-      activities: [
-        {
-          id: 111,
-          name: "개발개발한 어떠한 활동",
-          activityTypeEnumId: 2,
-          startTerm: "2024-12-06T02:58:38.000Z",
-          endTerm: "2024-12-17T02:58:49.000Z",
-        },
-      ],
+      activities: mockActivityReportData,
     },
   ]);
 });