[Feat] 수강 신청,마이 페이지 관련 QA 반영

apps/client/app/(afterLogin)/study-apply/@modal/(.)study-application/[studyId]/page.tsx

@@ -3,18 +3,22 @@
 import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Modal, Space, Text } from "@wow-class/ui";
+import { useModalRoute } from "@wow-class/ui/hooks";
 import { studyApplyApi } from "apis/studyApplyApi";
 import { tags } from "constants/tags";
 import { useEffect, useState } from "react";
 import { revalidateTagByName } from "utils/revalidateTagByName";
 import Button from "wowds-ui/Button";
 
+const MODAL_CLOSE_TIME = 1000;
 const StudyApplication = ({ params }: { params: { studyId: number } }) => {
   const studyId = params.studyId;
 
   const [applySuccess, setApplySuccess] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [studyTitle, setStudyTitle] = useState("");
 
+  const { closeModal } = useModalRoute();
   useEffect(() => {
     const fetchStudyData = async () => {
       const data = await studyApplyApi.getStudyList();
@@ -27,11 +31,21 @@ const StudyApplication = ({ params }: { params: { studyId: number } }) => {
       if (selectedStudy) {
         setStudyTitle(selectedStudy.title);
       }
+      setIsLoading(false);
     };
 
     fetchStudyData();
   }, [studyId]);
 
+  useEffect(() => {
+    if (applySuccess) {
+      const timer = setTimeout(() => {
+        closeModal();
+      }, MODAL_CLOSE_TIME);
+      return () => clearTimeout(timer);
+    }
+  }, [applySuccess, closeModal]);
+
   const handleClickApplyButton = async () => {
     const result = await studyApplyApi.applyStudy(Number(studyId));
     if (result.success) {
@@ -41,6 +55,10 @@ const StudyApplication = ({ params }: { params: { studyId: number } }) => {
     }
   };
 
+  if (isLoading) {
+    return null;
+  }
+
   return (
     <Modal>
       <Flex direction="column" textAlign="center" width="21rem">

apps/client/app/(afterLogin)/study-apply/@modal/(.)study-cancellation/[studyId]/page.tsx

@@ -3,16 +3,21 @@
 import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Modal, Space, Text } from "@wow-class/ui";
+import { useModalRoute } from "@wow-class/ui/hooks";
 import { studyApplyApi } from "apis/studyApplyApi";
 import { tags } from "constants/tags";
 import { useEffect, useState } from "react";
 import { revalidateTagByName } from "utils/revalidateTagByName";
 import Button from "wowds-ui/Button";
 
+const MODAL_CLOSE_TIME = 1000;
+
 const StudyCancel = ({ params }: { params: { studyId: number } }) => {
   const studyId = params.studyId;
   const [cancelSucces, setCancelSuccess] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [studyTitle, setStudyTitle] = useState("");
+  const { closeModal } = useModalRoute();
 
   useEffect(() => {
     const fetchStudyData = async () => {
@@ -26,11 +31,21 @@ const StudyCancel = ({ params }: { params: { studyId: number } }) => {
       if (selectedStudy) {
         setStudyTitle(selectedStudy.title);
       }
+      setIsLoading(false);
     };
 
     fetchStudyData();
   }, [studyId]);
 
+  useEffect(() => {
+    if (cancelSucces) {
+      const timer = setTimeout(() => {
+        closeModal();
+      }, MODAL_CLOSE_TIME);
+      return () => clearTimeout(timer);
+    }
+  }, [cancelSucces, closeModal]);
+
   const handleClickCancelButton = async () => {
     const result = await studyApplyApi.cancelStudyApplication(Number(studyId));
 
@@ -41,6 +56,10 @@ const StudyCancel = ({ params }: { params: { studyId: number } }) => {
     }
   };
 
+  if (isLoading) {
+    return null;
+  }
+
   return (
     <Modal>
       <Flex direction="column" textAlign="center" width="21rem">

apps/client/app/(afterLogin)/study-apply/_components/StudyItem.tsx

@@ -49,34 +49,41 @@ const StudyItem = ({ study, appliedStudyId }: StudyItemProps) => {
   const isCancelable = appliedStudyId === studyId;
   const isNotApplicable = !isApplicable && !isCancelable;
   return (
-    <Table>
+    <Table className={tableStyle}>
       <Flex direction="column" gap="xxs" justifyContent="center" width={334}>
         <Flex className={contentStyle} gap="xs">
-          <Text typo="h3">{title}</Text>
-          <Tag color={sessionColors[studyType] ?? "green"} variant="solid1">
+          <Text className={titleStyle} typo="h3">
+            {title}
+          </Text>
+          <Tag
+            color={sessionColors[studyType] ?? "green"}
+            style={tagButtonStyle}
+            variant="solid1"
+          >
             {studyType}
           </Tag>
         </Flex>
-        <Link href={notionLink ?? ""} target="_blank">
-          <Text className={introductionLinkTextStyle} color="sub" typo="body2">
-            {`(${introduction})`}
-          </Text>
-        </Link>
+        {introduction && (
+          <Link href={notionLink ?? ""} target="_blank">
+            <Text
+              className={introductionLinkTextStyle}
+              color="sub"
+              typo="body2"
+            >
+              {introduction}
+            </Text>
+          </Link>
+        )}
       </Flex>
       <Text className={textCellStyle}>{mentorName}</Text>
-      <Text
-        className={textCellStyle}
-        style={{ width: "11rem", textAlign: "center" }}
-      >
-        {studyTime}
-      </Text>
+      <Text className={timeCellStyle}>{studyTime}</Text>
       <Text className={textCellStyle}>{totalWeek}주 코스</Text>
       <Flex direction="column" textAlign="center">
-        <Text className={textCellStyle}>
-          {`${openingDate.month}.${openingDate.day} 개강`}
-        </Text>
+        <Text
+          className={dateStyle}
+        >{`${openingDate.month}.${openingDate.day} 개강`}</Text>
         {isCancelable && (
-          <Text color="error" typo="body3">
+          <Text className={dateStyle} color="error" typo="body3">
             {`${endDate.month}.${endDate.day} 까지 취소 가능`}
           </Text>
         )}
@@ -91,13 +98,13 @@ const StudyItem = ({ study, appliedStudyId }: StudyItemProps) => {
         )}
         {isCancelable && (
           <Link href={`${routePath["study-cancellation-modal"]}/${studyId}`}>
-            <Button size="sm" variant="solid">
+            <Button size="sm" style={tagButtonStyle} variant="solid">
               신청 취소
             </Button>
           </Link>
         )}
         {isNotApplicable && (
-          <Button disabled size="sm" variant="solid">
+          <Button disabled size="sm" style={tagButtonStyle} variant="solid">
             신청 불가
           </Button>
         )}
@@ -106,20 +113,64 @@ const StudyItem = ({ study, appliedStudyId }: StudyItemProps) => {
   );
 };
 
+const tableStyle = css({
+  justifyContent: "unset",
+});
+
+const titleStyle = css({
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  maxWidth: "210px",
+  whiteSpace: "nowrap",
+});
+
+const dateStyle = css({
+  width: "118px",
+  "@media (max-width: 1439px)": {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    width: "38px",
+  },
+});
+
+const timeCellStyle = css({
+  paddingX: "28px",
+  width: "178px",
+  textAlign: "center",
+  "@media (max-width: 1439px)": {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    padding: "0",
+  },
+});
 const textCellStyle = css({
   paddingX: "28px",
+  "@media (max-width: 1439px)": {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    padding: "0",
+    width: "38px",
+  },
 });
 
 const contentStyle = css({
   minWidth: "313px",
+  width: "313px",
 });
 
 const introductionLinkTextStyle = css({
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis",
+  textDecoration: "underline",
 });
 
+const tagButtonStyle = {
+  whiteSpace: "nowrap",
+};
 const sessionColors: Record<StudyType, ComponentProps<typeof Tag>["color"]> = {
   "과제 스터디": "green",
   "온라인 커리큘럼": "blue",

apps/client/types/dtos/applyStudy.ts

@@ -5,8 +5,8 @@ export interface StudyList {
   studyId: number;
   title: string;
   studyType: StudyType;
-  notionLink: string;
-  introduction: string;
+  notionLink?: string;
+  introduction?: string;
   mentorName: string;
   dayOfWeek: DayOfWeekType;
   startTime: Time | null;