fix: sessions로 API 변경, 선언적인 코드로 변경

apps/admin/apis/study/studyApi.ts

@@ -3,7 +3,7 @@ import { apiPath, mentorApiPath } from "constants/apiPath";
 import { tags } from "constants/tags";
 import type { AnnouncementApiResponseDto } from "types/dtos/announcement";
 import type { AssignmentApiResponseDto } from "types/dtos/assignmentList";
-import type { SessionApiResponseDto } from "types/dtos/sessionList";
+import type { CurriculumApiResponseDto } from "types/dtos/curriculumList";
 import type { StudyBasicInfoApiResponseDto } from "types/dtos/studyBasicInfo";
 import type { StudyAnnouncementType } from "types/entities/study";
 
@@ -48,11 +48,11 @@ export const studyApi = {
 
     return { success: response.ok };
   },
-  getSessionList: async (studyId: number) => {
-    const response = await fetcher.get<SessionApiResponseDto[]>(
-      `${mentorApiPath.sessions}?studyId=${studyId}`,
+  getCurriculumList: async (studyId: number) => {
+    const response = await fetcher.get<CurriculumApiResponseDto[]>(
+      `${mentorApiPath.curriculums}?studyId=${studyId}`,
       {
-        next: { tags: [tags.sessions] },
+        next: { tags: [tags.curriculums] },
         cache: "force-cache",
       }
     );

apps/admin/app/studies/[studyId]/_components/announcement/StudyAnnouncement.tsx

@@ -17,7 +17,7 @@ const StudyAnnouncement = async ({ studyId }: { studyId: string }) => {
   );
 
   return (
-    <section aria-label="session-list">
+    <section aria-label="curriculum-list">
       <Text typo="h2">스터디 공지</Text>
       <Space height={24} />
       <CreateStudyAnnouncement studyId={studyId} />

apps/admin/app/studies/[studyId]/_components/curriculum/CurriculumList.tsx

@@ -0,0 +1,30 @@
+import { Space, Text } from "@wow-class/ui";
+import { studyApi } from "apis/study/studyApi";
+
+import CurriculumListItem from "./CurriculumListItem";
+import EmptyCurriculumList from "./EmptyCurriculumList";
+
+const CurriculumList = async ({ studyId }: { studyId: string }) => {
+  const curriculumList = await studyApi.getCurriculumList(
+    parseInt(studyId, 10)
+  );
+
+  if (curriculumList?.length === 0) {
+    return <EmptyCurriculumList />;
+  }
+
+  return (
+    <section aria-label="curriculum-list">
+      <Text typo="h2">스터디 커리큘럼</Text>
+      <Space height={24} />
+      {curriculumList?.map((curriculum) => (
+        <CurriculumListItem
+          curriculum={curriculum}
+          key={`curriculumItem-${curriculum.studyDetailId}`}
+        />
+      ))}
+    </section>
+  );
+};
+
+export default CurriculumList;

apps/admin/app/studies/[studyId]/_components/session/SessionListItem.tsx → apps/admin/app/studies/[studyId]/_components/curriculum/CurriculumListItem.tsx

@@ -3,18 +3,22 @@ import { Flex } from "@styled-system/jsx";
 import { Table, Text } from "@wow-class/ui";
 import { padWithZero, parseISODate } from "@wow-class/utils";
 import type { ComponentProps } from "react";
-import type { SessionApiResponseDto } from "types/dtos/sessionList";
+import type { CurriculumApiResponseDto } from "types/dtos/curriculumList";
 import type { StudyDifficultyType } from "types/entities/study";
 import getIsCurrentWeek from "utils/getIsCurrentWeek";
 import Tag from "wowds-ui/Tag";
 
-const SessionListItem = ({ session }: { session: SessionApiResponseDto }) => {
-  const { description = "", period, week, title, difficulty } = session;
+const CurriculumListItem = ({
+  curriculum,
+}: {
+  curriculum: CurriculumApiResponseDto;
+}) => {
+  const { description = "", period, week, title, difficulty } = curriculum;
   const { startDate, endDate } = period;
   const { month: startMonth, day: startDay } = parseISODate(startDate);
   const { month: endMonth, day: endDay } = parseISODate(endDate);
 
-  const sessionTimeLine = `${padWithZero(startMonth)}.${padWithZero(startDay)} - ${padWithZero(endMonth)}.${padWithZero(endDay)}`;
+  const curriculumTimeLine = `${padWithZero(startMonth)}.${padWithZero(startDay)} - ${padWithZero(endMonth)}.${padWithZero(endDay)}`;
   const thisWeekAssignment = getIsCurrentWeek(endDate);
 
   return (
@@ -45,13 +49,13 @@ const SessionListItem = ({ session }: { session: SessionApiResponseDto }) => {
         </Flex>
       </Table.Left>
       <Table.Right>
-        <Text typo="body1">{sessionTimeLine}</Text>
+        <Text typo="body1">{curriculumTimeLine}</Text>
       </Table.Right>
     </Table>
   );
 };
 
-export default SessionListItem;
+export default CurriculumListItem;
 
 const ThisWeekBarStyle = cva({
   base: {

apps/admin/app/studies/[studyId]/_components/session/EmptySessionList.tsx → apps/admin/app/studies/[studyId]/_components/curriculum/EmptyCurriculumList.tsx

@@ -2,15 +2,15 @@ import { Flex } from "@styled-system/jsx";
 import { Space, Text } from "@wow-class/ui";
 import Image from "next/image";
 
-const EmptySessionList = () => {
+const EmptyCurriculumList = () => {
   return (
-    <section aria-label="empty-session-list" style={{ width: "100%" }}>
+    <section aria-label="empty-curriculum-list" style={{ width: "100%" }}>
       <Text typo="h2">스터디 커리큘럼</Text>
       <Space height={24} />
       <Flex direction="column" width="100%">
         <Flex alignItems="center" direction="column" gap="xs">
           <Image
-            alt="empty-session"
+            alt="empty-curriculum"
             height={50}
             src="/images/empty.svg"
             width={150}
@@ -24,4 +24,4 @@ const EmptySessionList = () => {
   );
 };
 
-export default EmptySessionList;
+export default EmptyCurriculumList;

apps/admin/app/studies/[studyId]/page.tsx

@@ -5,8 +5,8 @@ import Divider from "wowds-ui/Divider";
 import StudyAnnouncement from "./_components/announcement/StudyAnnouncement";
 import AssignmentList from "./_components/assignment/AssignmentList";
 import CheckAttendanceNumber from "./_components/attendance/CheckAttendanceNumber";
+import CurriculumList from "./_components/curriculum/CurriculumList";
 import Header from "./_components/header/Header";
-import SessionList from "./_components/session/SessionList";
 
 const StudyPage = ({ params }: { params: { studyId: string } }) => {
   const { studyId } = params;
@@ -19,7 +19,7 @@ const StudyPage = ({ params }: { params: { studyId: string } }) => {
       <Divider style={MinHeightFullDividerStyle} />
       <StudyAnnouncement studyId={studyId} />
       <Divider style={MinHeightFullDividerStyle} />
-      <SessionList studyId={studyId} />
+      <CurriculumList studyId={studyId} />
       <Space height={64} />
     </Flex>
   );

apps/admin/app/studies/detail-info/[studyId]/@modal/(.)detail-Info-check/_hooks/useSubmitStudyDetailInfo.ts

@@ -0,0 +1,35 @@
+import { createStudyApi } from "apis/study/createStudyApi";
+import { routerPath } from "constants/router/routerPath";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import type { CreateStudyDetailInfoApiRequestDto } from "types/dtos/studyDetailInfo";
+
+const useSubmitStudyDetailInfo = (
+  studyId: number,
+  studyDetailData: CreateStudyDetailInfoApiRequestDto
+) => {
+  const [isSuccess, setIsSuccess] = useState(false);
+  const router = useRouter();
+
+  const handleSubmitDetailInfo = async () => {
+    const data = await createStudyApi.postStudyDetailInfo(
+      studyDetailData,
+      studyId
+    );
+    if (data.success) {
+      setIsSuccess(true);
+      const timerId = setTimeout(() => {
+        router.push(`${routerPath.root.href}/${studyId}`);
+      }, 500);
+      return () => clearTimeout(timerId);
+    } else {
+      setIsSuccess(false);
+      window.alert("스터디 상세 정보 저장에 실패했어요.");
+      router.push(`${routerPath.root.href}`);
+    }
+  };
+
+  return { isSuccess, handleSubmitDetailInfo };
+};
+
+export default useSubmitStudyDetailInfo;

apps/admin/app/studies/detail-info/[studyId]/@modal/(.)detail-Info-check/page.tsx

@@ -3,63 +3,59 @@
 import { Flex } from "@styled-system/jsx";
 import { Modal, Space, Text } from "@wow-class/ui";
 import { useModalRoute } from "@wow-class/ui/hooks";
-import { createStudyApi } from "apis/study/createStudyApi";
 import { studyApi } from "apis/study/studyApi";
-import { routerPath } from "constants/router/routerPath";
-import { tags } from "constants/tags";
 import useParseSearchParams from "hooks/useParseSearchParams";
-import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { revalidateTagByName } from "utils/revalidateTagByName";
+import type { CreateStudyDetailInfoApiRequestDto } from "types/dtos/studyDetailInfo";
 import Button from "wowds-ui/Button";
 
+import useSubmitStudyDetailInfo from "./_hooks/useSubmitStudyDetailInfo";
 const StudyDetailInfoCheckModal = () => {
+  const [studyName, setStudyName] = useState("");
   const { closeModal } = useModalRoute();
-  const { parseToJsonSearchParam, parseToStringSearchParams } =
+  const { parseToJsonSearchParam, parseToNumberSearchParams } =
     useParseSearchParams();
-  const router = useRouter();
-  const [saveDetailInfo, setSaveDetailInfo] = useState(false);
-  const [studyName, setStudyName] = useState("");
-
-  const data = parseToJsonSearchParam("data");
-  const studyId = parseToStringSearchParams("studyId");
+  const data =
+    parseToJsonSearchParam<CreateStudyDetailInfoApiRequestDto>("data");
+  const studyId = parseToNumberSearchParams("studyId");
+  const { isSuccess, handleSubmitDetailInfo } = useSubmitStudyDetailInfo(
+    studyId,
+    data
+  );
 
   useEffect(() => {
     const fetchStudyData = async () => {
-      const response = await studyApi.getStudyBasicInfo(parseInt(studyId, 10));
+      const response = await studyApi.getStudyBasicInfo(studyId);
       if (response) setStudyName(response.title);
     };
     fetchStudyData();
   }, [studyId]);
 
-  useEffect(() => {
-    if (saveDetailInfo) {
-      const timerId = setTimeout(() => {
-        router.push(`${routerPath.root.href}/${studyId}`);
-      }, 500);
-      return () => {
-        clearTimeout(timerId);
-      };
-    }
-  }, [saveDetailInfo, router, studyId]);
+  return (
+    <Modal>
+      <SubmitSuccessMessage studyName={studyName} success={isSuccess} />
+      <SubmitConfirmMessage
+        closeModal={closeModal}
+        handleSubmitDetailInfo={handleSubmitDetailInfo}
+        studyName={studyName}
+        success={isSuccess}
+      />
+    </Modal>
+  );
+};
 
-  const handleSubmitDetailInfo = async () => {
-    const success = await createStudyApi.postStudyDetailInfo(
-      data,
-      parseInt(studyId, 10)
-    );
-    if (success) {
-      setSaveDetailInfo(true);
-      revalidateTagByName(tags.sessions);
-    } else {
-      await window.alert("스터디 상세 정보 저장에 실패했어요.");
-      router.push(`${routerPath.root.href}`);
-    }
-  };
+export default StudyDetailInfoCheckModal;
 
+const SubmitSuccessMessage = ({
+  success,
+  studyName,
+}: {
+  success: boolean;
+  studyName: string;
+}) => {
   return (
-    <Modal>
-      {saveDetailInfo ? (
+    <>
+      {success && (
         <Flex alignItems="center" direction="column" gap="4px">
           <Text as="h1" color="primary" typo="h1">
             {studyName}
@@ -68,37 +64,46 @@ const StudyDetailInfoCheckModal = () => {
             상세 정보가 저장되었어요.
           </Text>
         </Flex>
-      ) : (
-        <>
-          <Flex
-            alignItems="center"
-            direction="column"
-            padding="24px"
-            width="100%"
-          >
-            <Flex alignItems="center" justify="center" marginBottom="2px">
-              <Text as="p" color="primary" typo="h1">
-                {studyName}
-              </Text>
-              <Text as="p" typo="h1">
-                의 상세정보
-              </Text>
-            </Flex>
-            <Text as="p" typo="h1">
-              입력 내용을 저장하시겠어요?
-            </Text>
-            <Space height={28} />
-            <Flex gap="sm" justify="center" width="21rem">
-              <Button variant="outline" onClick={closeModal}>
-                취소
-              </Button>
-              <Button onClick={handleSubmitDetailInfo}>저장하기</Button>
-            </Flex>
-          </Flex>
-        </>
       )}
-    </Modal>
+    </>
   );
 };
 
-export default StudyDetailInfoCheckModal;
+const SubmitConfirmMessage = ({
+  success,
+  studyName,
+  closeModal,
+  handleSubmitDetailInfo,
+}: {
+  success: boolean;
+  studyName: string;
+  closeModal: () => void;
+  handleSubmitDetailInfo: () => void;
+}) => {
+  if (!success) {
+    return (
+      <Flex alignItems="center" direction="column" padding="24px" width="100%">
+        <Flex alignItems="center" justify="center" marginBottom="2px">
+          <Text as="p" color="primary" typo="h1">
+            {studyName}
+          </Text>
+          <Text as="p" typo="h1">
+            의 상세정보
+          </Text>
+        </Flex>
+        <Text as="p" typo="h1">
+          입력 내용을 저장하시겠어요?
+        </Text>
+        <Space height={28} />
+        <Flex gap="sm" justify="center" width="21rem">
+          <Button variant="outline" onClick={closeModal}>
+            취소
+          </Button>
+          <Button onClick={handleSubmitDetailInfo}>저장하기</Button>
+        </Flex>
+      </Flex>
+    );
+  } else {
+    return;
+  }
+};