[Bug] 나의 스터디 페이지 QA 반영 (#87)

* refactor: LinkButton 대신 Button asProp 활용하도록 수정 * chore: navbar 로고 클릭 시 홈으로 가도록 수정 * chore: 외부 링크 새 탭으로 열리도록 수정 * chore: navbar 멘토 페이지로 전환 버튼 클릭 시 멘토 페이지로 전환되도록 수정 * fix: notionLink null인 경우 예외 처리 * chore: 헤더 반응형 스타일 적용 * feat: ui 패키지 스타일 변경사항 반영 * fix: og image 안 보이는 문제 해결 * feat: 출석 체크 후 모달 사라지게 하는 로직 추가 * feat: 출석 체크 후 모달 사라지게 하는 로직 추가 * chore: NavItem href 경로 상대 경로로 변경 * rename: useModalRoute 모달 닫는 함수 onClose로 네이밍 변경 * chore: 로고 클릭 시 나의 스터디 페이지로 가도록 수정
GDSC-Hongik · Aug 30, 2024 · bccc86d · bccc86d
1 parent 6fea1c7
commit bccc86d
Show file tree

Hide file tree

Showing 22 changed files with 939 additions and 117 deletions.
diff --git a/apps/admin/app/@modal/(.)participants/page.tsx b/apps/admin/app/@modal/(.)participants/page.tsx
@@ -6,11 +6,12 @@ import { useModalRoute } from "@wow-class/ui/hooks";
 import Button from "wowds-ui/Button";
 
 const TestModal = () => {
-  const { closeModal } = useModalRoute();
+  const { onClose } = useModalRoute();
+
   return (
-    <Modal onClose={closeModal}>
+    <Modal>
       <Flex gap="sm" width="21rem">
-        <Button variant="outline" onClick={closeModal}>
+        <Button variant="outline" onClick={onClose}>
           취소
         </Button>
         <Button>저장하기</Button>

diff --git a/apps/admin/app/studies/[studyId]/@modal/(.)announcement-delete/page.tsx b/apps/admin/app/studies/[studyId]/@modal/(.)announcement-delete/page.tsx
@@ -14,15 +14,15 @@ const AnnouncementDeleteModal = () => {
 
   const studyAnnouncementId = searchParams.get("studyAnnouncementId");
 
-  const { closeModal } = useModalRoute();
+  const { onClose } = useModalRoute();
 
   const handleClickDeleteButton = async () => {
     const result = await studyApi.deleteStudyAnnouncement(
       Number(studyAnnouncementId)
     );
     if (result.success) {
       revalidateTagByName(tags.announcements);
-      closeModal();
+      onClose();
     }
   };
 
@@ -33,7 +33,7 @@ const AnnouncementDeleteModal = () => {
         <Space height={33} />
 
         <Flex gap="sm">
-          <Button variant="outline" onClick={closeModal}>
+          <Button variant="outline" onClick={onClose}>
             취소
           </Button>
           <Button onClick={handleClickDeleteButton}>삭제하기</Button>

diff --git a/apps/admin/app/studies/[studyId]/@modal/(.)announcement-modify/page.tsx b/apps/admin/app/studies/[studyId]/@modal/(.)announcement-modify/page.tsx
@@ -22,7 +22,7 @@ const AnnouncementModifyModal = () => {
 
   const studyAnnouncementId = searchParams.get("studyAnnouncementId");
 
-  const { closeModal } = useModalRoute();
+  const { onClose } = useModalRoute();
 
   const handleClickModifyButton = async () => {
     const result = await studyApi.modifyStudyAnnouncement(
@@ -31,7 +31,7 @@ const AnnouncementModifyModal = () => {
     );
     if (result.success) {
       revalidateTagByName(tags.announcements);
-      closeModal();
+      onClose();
     }
   };
 
@@ -58,7 +58,7 @@ const AnnouncementModifyModal = () => {
         </Flex>
         <Space height={28} />
         <Flex gap="sm">
-          <Button variant="outline" onClick={closeModal}>
+          <Button variant="outline" onClick={onClose}>
             취소
           </Button>
           <Button onClick={handleClickModifyButton}>수정하기</Button>

diff --git a/apps/admin/app/studies/create-study/@modal/(.)created-study-check/page.tsx b/apps/admin/app/studies/create-study/@modal/(.)created-study-check/page.tsx
@@ -17,7 +17,7 @@ const CreatedStudyCheckModal = () => {
   const { parseQueryString } = useParseSearchParams();
   const searchParams = useSearchParams();
   const router = useRouter();
-  const { closeModal } = useModalRoute();
+  const { onClose } = useModalRoute();
 
   const data = parseQueryString<CreateStudyApiRequestDto>(
     searchParams.toString()
@@ -53,7 +53,7 @@ const CreatedStudyCheckModal = () => {
         <Text typo="h1">새로운 스터디를 개설하시겠어요?</Text>
         <Space height={28} />
         <Flex gap="sm" justify="center" width="21rem">
-          <Button variant="outline" onClick={closeModal}>
+          <Button variant="outline" onClick={onClose}>
             취소
           </Button>
           <Button onClick={handleClickSubmitButton}>개설하기</Button>

diff --git a/apps/admin/app/studies/detail-info/[studyId]/@modal/(.)detail-Info-check/page.tsx b/apps/admin/app/studies/detail-info/[studyId]/@modal/(.)detail-Info-check/page.tsx
@@ -14,7 +14,7 @@ import useSubmitStudyDetailInfo from "./_hooks/useSubmitStudyDetailInfo";
 
 const StudyDetailInfoCheckModal = () => {
   const [studyName, setStudyName] = useState("");
-  const { closeModal } = useModalRoute();
+  const { onClose } = useModalRoute();
   const { parseToNumberSearchParams, parseQueryString } =
     useParseSearchParams();
   const searchParams = useSearchParams();
@@ -39,7 +39,7 @@ const StudyDetailInfoCheckModal = () => {
     <Modal>
       <SubmitSuccessMessage studyName={studyName} success={isSuccess} />
       <SubmitConfirmMessage
-        closeModal={closeModal}
+        closeModal={onClose}
         handleSubmitDetailInfo={handleSubmitDetailInfo}
         studyName={studyName}
         success={isSuccess}

diff --git a/apps/client/app/(afterLogin)/my-page/@modal/(.)logout/page.tsx b/apps/client/app/(afterLogin)/my-page/@modal/(.)logout/page.tsx
@@ -11,7 +11,7 @@ import Button from "wowds-ui/Button";
 
 const LogoutModal = () => {
   const router = useRouter();
-  const { closeModal } = useModalRoute();
+  const { onClose } = useModalRoute();
   const handleClickLogoutButton = async () => {
     const response = await authApi.logout();
     if (response.success) {
@@ -33,7 +33,7 @@ const LogoutModal = () => {
             size="lg"
             style={buttonStyle}
             variant="outline"
-            onClick={closeModal}
+            onClick={onClose}
           >
             취소
           </Button>

diff --git a/apps/client/app/(afterLogin)/my-study/@modal/(.)attendance-check/page.tsx b/apps/client/app/(afterLogin)/my-study/@modal/(.)attendance-check/page.tsx
@@ -3,6 +3,7 @@
 import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Modal, Text } from "@wow-class/ui";
+import { useModalRoute } from "@wow-class/ui/hooks";
 import { myStudyApi } from "apis/myStudyApi";
 import useFetchAttendanceCheckModalInfoData from "hooks/useFetchAttendanceCheckModalInfoData";
 import Image from "next/image";
@@ -16,35 +17,52 @@ const AttendanceCheckModal = () => {
   const [error, setError] = useState(false);
   const [attendanceNumber, setAttendanceNumber] = useState("");
 
+  const { onClose } = useModalRoute();
+
   const { studyInfo } = useFetchAttendanceCheckModalInfoData();
 
   const handleChangeAttendanceNumber = (value: string) => {
     setAttendanceNumber(value);
   };
 
-  const handleClickAttendanceCheckButton = async () => {
+  const fetchOngoingStudyInfo = async () => {
     const myOngoingStudyInfoData = await myStudyApi.getMyOngoingStudyInfo();
+    return myOngoingStudyInfoData?.studyId || null;
+  };
 
-    if (!myOngoingStudyInfoData?.studyId) {
-      return;
-    }
-
-    const isValidAttendanceNumber = validateAttendanceNumber(attendanceNumber);
-
-    if (!isValidAttendanceNumber) {
-      return setError(true);
-    }
+  const isAttendanceNumberValid = (attendanceNumber: string) => {
+    return validateAttendanceNumber(attendanceNumber);
+  };
 
+  const checkAttendance = async (studyId: number, attendanceNumber: string) => {
     const { success } = await myStudyApi.checkAttendance(
-      myOngoingStudyInfoData?.studyId,
+      studyId,
       attendanceNumber
     );
+    return success;
+  };
+
+  const handleClickAttendanceCheckButton = async () => {
+    const studyId = await fetchOngoingStudyInfo();
+    if (!studyId) return;
+
+    if (!isAttendanceNumberValid(attendanceNumber)) {
+      return setError(true);
+    }
 
+    const success = await checkAttendance(studyId, attendanceNumber);
     if (!success) {
       return setError(true);
     }
 
+    handleAttendanceSuccess();
+  };
+
+  const handleAttendanceSuccess = () => {
     setAttended(true);
+    setTimeout(() => {
+      onClose();
+    }, 500);
   };
 
   return (

diff --git a/apps/client/app/(afterLogin)/my-study/_components/AssignmentStatusBox.tsx b/apps/client/app/(afterLogin)/my-study/_components/AssignmentStatusBox.tsx
@@ -2,11 +2,12 @@ import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Text } from "@wow-class/ui";
 import { parseISODate } from "@wow-class/utils";
-import LinkButton from "components/LinkButton";
 import { routePath } from "constants/routePath";
+import Link from "next/link";
 import type { ComponentProps } from "react";
 import type { AssignmentSubmissionStatusType } from "types/entities/myStudy";
 import Box from "wowds-ui/Box";
+import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
 
 interface AssignmentStatusBoxProps {
@@ -63,14 +64,15 @@ const AssignmentStatusBox = ({
               </Text>
             </Flex>
           </Flex>
-          <LinkButton
+          <Button
+            asProp={Link}
             disabled={assignmentSubmissionStatus !== "SUCCESS"}
             href={routePath["my-assignment"]}
             size="lg"
             style={assignmentButtonStyle}
           >
             나의 과제 바로가기
-          </LinkButton>
+          </Button>
         </Flex>
       }
     />

diff --git a/apps/client/app/(afterLogin)/my-study/_components/AttendanceStatusBox.tsx b/apps/client/app/(afterLogin)/my-study/_components/AttendanceStatusBox.tsx
@@ -2,11 +2,12 @@ import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Text } from "@wow-class/ui";
 import { padWithZero, parseISODate } from "@wow-class/utils";
-import LinkButton from "components/LinkButton";
 import { attendanceStatusMap } from "constants/attendanceStatusMap";
 import { routePath } from "constants/routePath";
+import Link from "next/link";
 import type { AttendanceStatusType } from "types/entities/myStudy";
 import Box from "wowds-ui/Box";
+import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
 
 interface AttendanceStatusBoxProps {
@@ -59,13 +60,14 @@ const AttendanceStatusBox = ({
               </Text>
             </Flex>
           </Flex>
-          <LinkButton
+          <Button
+            asProp={Link}
             href={`${routePath["attendance-check"]}`}
             size="lg"
             style={attendanceButtonStyle}
           >
             출석 체크하기
-          </LinkButton>
+          </Button>
         </Flex>
       }
     />

diff --git a/apps/client/app/(afterLogin)/my-study/_components/Header.tsx b/apps/client/app/(afterLogin)/my-study/_components/Header.tsx
@@ -132,9 +132,10 @@ const Header = () => {
                 </Text>
                 <Link
                   className={introduceLinkStyle}
-                  href={notionLink}
+                  href={notionLink || ""}
                   role="button"
                   tabIndex={0}
+                  target="_blank"
                 >
                   <Image
                     alt="link-icon"

diff --git a/apps/client/app/(afterLogin)/my-study/_components/StudyAnnouncementList.tsx b/apps/client/app/(afterLogin)/my-study/_components/StudyAnnouncementList.tsx
@@ -27,6 +27,7 @@ const StudyAnnouncementList = async () => {
             className={studyAnnouncementListBoxStyle}
             href={link}
             key={studyAnnounceId}
+            target="_blank"
             style={{
               backgroundColor:
                 index === 0 ? `${color.monoBackgroundPressed}` : "white",

diff --git a/apps/client/app/(afterLogin)/my-study/_components/StudyCurriculum.tsx b/apps/client/app/(afterLogin)/my-study/_components/StudyCurriculum.tsx
@@ -3,11 +3,12 @@ import { Flex } from "@styled-system/jsx";
 import { Table, Text } from "@wow-class/ui";
 import { formatWeekPeriod } from "@wow-class/utils";
 import { myStudyApi } from "apis/myStudyApi";
-import LinkButton from "components/LinkButton";
 import { attendanceStatusMap } from "constants/attendanceStatusMap";
+import Link from "next/link";
 import type { ComponentProps } from "react";
 import type { StudyDifficultyType } from "types/entities/myStudy";
 import { getIsCurrentWeek } from "utils/getIsCurrentWeek";
+import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
 
 const StudyCurriculum = async () => {
@@ -101,20 +102,22 @@ const StudyCurriculum = async () => {
                   >
                     {attendanceStatusLabel}
                   </Tag>
-                  <LinkButton
+                  <Button
                     aria-label="check-submitted-assignment"
+                    asProp={Link}
                     disabled={assignmentSubmissionStatus === "FAILURE"}
                     href={submissionLink || ""}
                     size="sm"
                     style={assignmentButtonStyle}
+                    target="_blank"
                     variant={
                       assignmentSubmissionStatus === "SUCCESS"
                         ? "outline"
                         : "solid"
                     }
                   >
                     {assignmentButtonText}
-                  </LinkButton>
+                  </Button>
                 </Table.Right>
               </Table>
             );

diff --git a/apps/client/app/layout.tsx b/apps/client/app/layout.tsx
@@ -17,7 +17,7 @@ export const metadata: Metadata = {
     title: "GDSC Hongik 스터디 서비스, 와우클래스",
     description:
       "와우클래스는 GDSC Hongik이 제공하는 스터디 관리 플랫폼입니다. 이 서비스는 정규 스터디 과제 제출, 출석 체크 등 전반적인 스터디 활동을 효율적으로 관리할 수 있는 기능을 제공합니다.",
-    images: ["/images/og-image.svg"],
+    images: ["/images/og-image.png"],
     siteName: "GDSC Hongik 스터디 서비스, 와우클래스",
     type: "website",
   },
@@ -26,7 +26,7 @@ export const metadata: Metadata = {
     title: "GDSC Hongik 스터디 서비스, 와우클래스",
     description:
       "와우클래스는 GDSC Hongik이 제공하는 스터디 관리 플랫폼입니다. 이 서비스는 정규 스터디 과제 제출, 출석 체크 등 전반적인 스터디 활동을 효율적으로 관리할 수 있는 기능을 제공합니다.",
-    images: ["/images/og-image.svg"],
+    images: ["/images/og-image.png"],
   },
   robots: {
     index: true,

diff --git a/apps/client/components/LinkButton.tsx b/apps/client/components/LinkButton.tsx