[Feature] 나의 스터디 페이지 모달 구현

apps/client/app/(afterLogin)/my-study/@modal/(.)attendance-check/page.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Modal, Text } from "@wow-class/ui";
+import Image from "next/image";
+import { useState } from "react";
+import Button from "wowds-ui/Button";
+import TextField from "wowds-ui/TextField";
+
+const AttendanceCheckModal = () => {
+  const [attended, setAttended] = useState(false);
+  const [error] = useState(false);
+  const [attendanceNumber, setAttendanceNumber] = useState("");
+
+  const handleChangeAttendanceNumber = (value: string) => {
+    setAttendanceNumber(value);
+  };
+
+  const handleClickAttendanceCheckButton = () => {
+    setAttended(true);
+  };
+
+  return (
+    <Modal>
+      {attended ? (
+        <Flex alignItems="center" direction="column" gap="4px">
+          <section
+            aria-label="attendance-complete-title"
+            className={attendanceCompleteTitleStyle}
+          >
+            <Text as="h1" color="primary" typo="h1">
+              기초 웹스터디
+            </Text>
+            <Image
+              alt="item separator"
+              height={6}
+              src="/images/dot.svg"
+              width={6}
+            />
+            <Text as="h1" color="primary" typo="h1">
+              4주차
+            </Text>
+          </section>
+          <section aria-label="attendance-complete-description">
+            <Text as="h1" color="textBlack" typo="h1">
+              출석이 완료되었어요.
+            </Text>
+          </section>
+        </Flex>
+      ) : (
+        <>
+          <Flex
+            alignItems="center"
+            direction="column"
+            gap="sm"
+            marginBottom="40px"
+          >
+            <section
+              aria-label="attendance-check-title"
+              className={attendanceCheckTitleStyle}
+            >
+              <Text as="h1" typo="h1">
+                기초 웹스터디
+              </Text>
+              <Image
+                alt="item separator"
+                height={6}
+                src="/images/dot.svg"
+                width={6}
+              />
+              <Text as="h1" typo="h1">
+                4주차
+              </Text>
+            </section>
+            <section
+              aria-label="attendance-check-description"
+              className={attendanceCheckDescriptionStyle}
+            >
+              <Text as="p" color="sub" typo="body1">
+                스터디 시작 후 멘토의 안내에 따라 출결번호를 입력해주세요.
+              </Text>
+              <Text as="p" color="error" typo="body1">
+                2024년 5월 23일 0:00 - 23:59까지
+              </Text>
+            </section>
+          </Flex>
+          <TextField
+            error={error}
+            helperText={error ? textfieldHelperText : ""}
+            label="출결번호 입력"
+            placeholder="Ex. 0000"
+            style={textfieldStyle}
+            value={attendanceNumber}
+            onChange={handleChangeAttendanceNumber}
+          />
+          <Button onClick={handleClickAttendanceCheckButton}>
+            출석 체크하기
+          </Button>
+        </>
+      )}
+    </Modal>
+  );
+};
+
+export default AttendanceCheckModal;
+
+const textfieldHelperText = <div>• 출석 실패! 출결번호를 확인해주세요.</div>;
+
+const attendanceCheckTitleStyle = css({
+  display: "flex",
+  gap: "sm",
+});
+
+const attendanceCheckDescriptionStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: "xxs",
+});
+
+const textfieldStyle = {
+  height: "89px",
+  marginBottom: "20px",
+};
+
+const attendanceCompleteTitleStyle = css({
+  display: "flex",
+  gap: "sm",
+});

apps/client/app/(afterLogin)/my-study/@modal/default.tsx

@@ -0,0 +1,5 @@
+const Default = () => {
+  return null;
+};
+
+export default Default;

apps/client/app/(afterLogin)/my-study/_components/AssignmentStatusBox.tsx

@@ -2,10 +2,11 @@ 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 { assignmentSubmissionStatusMap } from "constants/assignmentSubmissionStatusMap";
+import { routePath } from "constants/routePath";
 import type { AssignmentSubmissionStatusType } from "types/entities/common/assignment";
 import Box from "wowds-ui/Box";
-import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
 
 interface AssignmentStatusBoxProps {
@@ -59,13 +60,14 @@ const AssignmentStatusBox = ({
               </Text>
             </Flex>
           </Flex>
-          <Button
+          <LinkButton
             disabled={assignmentSubmissionStatus !== "SUCCESS"}
+            href={routePath["my-assignment"]}
             size="lg"
             style={assignmentButtonStyle}
           >
             나의 과제 바로가기
-          </Button>
+          </LinkButton>
         </Flex>
       }
     />

apps/client/app/(afterLogin)/my-study/_components/AttendanceStatusBox.tsx

@@ -2,10 +2,11 @@ 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 { attendanceStatusMap } from "constants/attendanceStatusMap";
+import { routePath } from "constants/routePath";
 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 {
@@ -62,9 +63,13 @@ const AttendanceStatusBox = ({
               </Text>
             </Flex>
           </Flex>
-          <Button size="lg" style={attendanceButtonStyle}>
+          <LinkButton
+            href={`${routePath["attendance-check"]}`}
+            size="lg"
+            style={attendanceButtonStyle}
+          >
             출석 체크하기
-          </Button>
+          </LinkButton>
         </Flex>
       }
     />

apps/client/app/(afterLogin)/my-study/_components/StudyCurriculum.tsx

@@ -2,12 +2,11 @@ import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Table, Text } from "@wow-class/ui";
 import { padWithZero, parseISODate } from "@wow-class/utils";
-import { assignmentSubmissionStatusMap } from "constants/assignmentSubmissionStatusMap";
+import LinkButton from "components/LinkButton";
 import { attendanceStatusMap } from "constants/attendanceStatusMap";
 import { studyCurriculumMockData } from "constants/mockData";
 import type { ComponentProps } from "react";
 import type { LevelType } from "types/entities/myStudy";
-import Button from "wowds-ui/Button";
 import Tag from "wowds-ui/Tag";
 
 const formatWeekPeriod = (startDate: string, endDate: string) => {
@@ -54,8 +53,10 @@ const StudyCurriculum = () => {
               label: attendanceStatusLabel,
               color: attendanceStatusColor,
             } = attendanceStatusMap[attendanceStatus];
-            const { label: assignmentSubmissionStatusLabel } =
-              assignmentSubmissionStatusMap[assignmentSubmissionStatus];
+            const assignmentButtonText =
+              assignmentSubmissionStatus === "SUCCESS"
+                ? "제출한 과제 확인"
+                : "과제 제출하기";
 
             return (
               <Table key={index}>
@@ -95,9 +96,10 @@ const StudyCurriculum = () => {
                   >
                     {attendanceStatusLabel}
                   </Tag>
-                  <Button
+                  <LinkButton
                     aria-label="check-submitted-assignment"
                     disabled={assignmentSubmissionStatus === "PENDING"}
+                    href=""
                     size="sm"
                     style={assignmentButtonStyle}
                     variant={
@@ -106,8 +108,8 @@ const StudyCurriculum = () => {
                         : "solid"
                     }
                   >
-                    {assignmentSubmissionStatusLabel}
-                  </Button>
+                    {assignmentButtonText}
+                  </LinkButton>
                 </Table.Right>
               </Table>
             );

apps/client/app/(afterLogin)/my-study/attendance-check/page.tsx

@@ -0,0 +1,8 @@
+import { routePath } from "constants/routePath";
+import { redirect } from "next/navigation";
+
+const CheckAttendancePage = () => {
+  return redirect(routePath["my-study"]);
+};
+
+export default CheckAttendancePage;

apps/client/app/(afterLogin)/my-study/default.tsx

@@ -0,0 +1,5 @@
+const Default = () => {
+  return null;
+};
+
+export default Default;

apps/client/app/(afterLogin)/my-study/layout.tsx

@@ -0,0 +1,16 @@
+const Layout = ({
+  children,
+  modal,
+}: {
+  children: React.ReactNode;
+  modal: React.ReactNode;
+}) => {
+  return (
+    <main>
+      {children}
+      {modal}
+    </main>
+  );
+};
+
+export default Layout;

apps/client/components/LinkButton.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import type { ComponentProps } from "react";
+import Button from "wowds-ui/Button";
+
+interface LinkButtonProps extends ComponentProps<typeof Button> {
+  href: string;
+}
+
+const LinkButton = ({ href, ...rest }: LinkButtonProps) => {
+  const router = useRouter();
+
+  const handleClickLinkButton = () => {
+    router.push(href);
+  };
+
+  return <Button onClick={handleClickLinkButton} {...rest} />;
+};
+
+export default LinkButton;

apps/client/constants/routePath.ts

@@ -2,7 +2,9 @@ export const routePath = {
   auth: "/auth",
   landing: "/landing",
   ["my-study"]: "/my-study",
+  ["my-assignment"]: "/my-study/my-assignment",
   ["auth-error-during-recruitment"]: "/auth-error-during-recruitment",
   ["auth-error-after-recruitment"]: "/auth-error-after-recruitment",
+  ["attendance-check"]: "/my-study/attendance-check",
   onboarding: "https://onboarding.gdschongik.com",
 } as const;

apps/client/package.json

@@ -15,7 +15,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "wowds-icons": "^0.1.3",
-    "wowds-tokens": "^0.1.1"
+    "wowds-tokens": "^0.1.1",
+    "wowds-ui": "^0.1.8"
   },
   "devDependencies": {
     "@types/node": "^20",

packages/ui/.storybook/preview.ts

@@ -9,6 +9,9 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    nextjs: {
+      appDirectory: true,
+    },
   },
 };
 

packages/ui/src/components/Modal/index.tsx

@@ -3,35 +3,44 @@
 import { css } from "@styled-system/css";
 import { Flex, styled } from "@styled-system/jsx";
 import Image from "next/image";
-import type { PropsWithChildren } from "react";
+import { useRouter } from "next/navigation";
+import type { CSSProperties, PropsWithChildren } from "react";
 
 import closeUrl from "../../assets/images/close.svg";
 import { useClickOutside } from "../../hooks";
 
 /**
  * @description 모달 컴포넌트입니다.
  *
- * @param {() => void} onClose - 모달 컴포넌트를 닫기 위한 함수.
+ * @param {() => void} [onClose] - 모달 컴포넌트를 닫기 위한 함수.
  * @param {ReactNode} [children] - 모달 컴포넌트에 들어갈 자식 요소.
+ * @param {CSSProperties} [style] - 커스텀 스타일을 적용하기 위한 객체.
+ * @param {string} [className] - 커스텀 클래스를 적용하기 위한 문자열.
  */
 
-export interface ModalProps extends PropsWithChildren {
-  onClose: () => void;
+interface ModalProps extends PropsWithChildren {
+  onClose?: () => void;
+  style?: CSSProperties;
+  className?: string;
 }
 
-const Modal = ({ children, onClose }: ModalProps) => {
-  const modal = useClickOutside<HTMLDialogElement>(onClose);
+const Modal = ({ children, onClose, ...rest }: ModalProps) => {
+  const router = useRouter();
+
+  const handleClose = onClose || router.back;
+
+  const modal = useClickOutside<HTMLDialogElement>(handleClose);
 
   return (
     <Flex alignItems="center" className={backDropStyle} justifyContent="center">
-      <styled.dialog className={dialogStyle} ref={modal}>
+      <styled.dialog className={dialogStyle} ref={modal} {...rest}>
         <Image
           alt="close-icon"
           className={closeButtonStyle}
           height={24}
           src={closeUrl}
           width={24}
-          onClick={onClose}
+          onClick={handleClose}
         />
         {children}
       </styled.dialog>
@@ -46,6 +55,7 @@ const dialogStyle = css({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
+  flexDirection: "column",
 
   position: "relative",