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

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

@@ -0,0 +1,93 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Modal, Text } from "@wow-class/ui";
+import { routePath } from "constants/routePath";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import Button from "wowds-ui/Button";
+import TextField from "wowds-ui/TextField";
+
+const AttendanceCheckModal = () => {
+  const [error] = useState(false);
+  const [attendanceNumber, setAttendanceNumber] = useState("");
+
+  const router = useRouter();
+
+  const handleChangeAttendanceNumber = (value: string) => {
+    setAttendanceNumber(value);
+  };
+
+  const handleClickAttendanceCheckButton = () => {
+    // TODO api 요청 및 에러 처리 필요
+    router.push(routePath["attendance-complete"]);
+  };
+
+  return (
+    <Modal>
+      <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",
+};

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

@@ -0,0 +1,57 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Modal, Text } from "@wow-class/ui";
+import { routePath } from "constants/routePath";
+import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
+
+const AttendanceCompleteModal = () => {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const handleCloseModal = () => {
+    router.push(routePath["my-study"]);
+  };
+
+  if (pathname === routePath["my-study"]) {
+    return null;
+  }
+
+  return (
+    <Modal onClose={handleCloseModal}>
+      <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>
+    </Modal>
+  );
+};
+
+export default AttendanceCompleteModal;
+
+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/myStudy";
 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"]}/1`}
+            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/[id]/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/attendance-complete/page.tsx

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

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,10 @@ 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",
+  ["attendance-complete"]: "/my-study/attendance-complete",
   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",