feat: 레포지토리 입력 모달

apps/client/apis/studyApplyApi.ts

@@ -10,6 +10,9 @@ export const studyApplyApi = {
       {
         next: { tags: [tags.studyApply] },
         cache: "force-cache",
+        headers: {
+          Authorization: `Bearer ${process.env.DEV_AUTH_TOKEN}`,
+        },
       }
     );
 

apps/client/app/(afterLogin)/my-study/my-assignment/@modal/(.)submit-modal/page.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+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 { useSearchParams } from "next/navigation";
+import Button from "wowds-ui/Button";
+
+const SubmitModal = () => {
+  const searchParams = useSearchParams();
+  const { closeModal } = useModalRoute();
+
+  const url = searchParams.get("url");
+
+  const handleClickSubmitButton = () => {
+    //TODO: studyHistoryId 넣어주기
+    //await studyHistoryApi.putRepository(1, url);
+
+    //TODO: 제출 후에 RepositoryBox 를 SUBMITTED 로 상태로 바꿔줘야함.
+    //customRevalidateTags(tags.studyDetailDashboard)
+    closeModal();
+  };
+  return (
+    <Modal onClose={closeModal}>
+      <Flex alignItems="center" direction="column" width="21rem">
+        <Text typo="h1">레포지토리를 입력하시겠어요?</Text>
+        <Space height={12} />
+        <Text color="sub">최초 과제 제출 전까지 수정이 가능해요.</Text>
+        <Space height={8} />
+        <div className={urlBoxStyle}>{url}</div>
+        <Space height={28} />
+        <Button onClick={handleClickSubmitButton}>제출하기</Button>
+      </Flex>
+    </Modal>
+  );
+};
+
+export default SubmitModal;
+
+const urlBoxStyle = css({
+  backgroundColor: "backgroundAlternative",
+  borderRadius: "5px",
+  color: "sub",
+  paddingX: "lg",
+  paddingY: "md",
+  textStyle: "h2",
+});

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

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

apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/RepositorySubmissionBox.tsx

@@ -3,6 +3,8 @@
 import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Space, Text } from "@wow-class/ui";
+import { routePath } from "constants/routePath";
+import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import type { RepositorySubmissionStatusType } from "types/entities/myAssignment";
 import { Edit, Trash, Warn } from "wowds-icons";
@@ -15,13 +17,14 @@ interface RepositorySubmissionBoxProps {
 }
 
 export const RepositorySubmissionBox = ({
-  repositoryLink,
+  repositoryLink: initialUrl,
 }: RepositorySubmissionBoxProps) => {
-  const [url, setUrl] = useState(repositoryLink);
+  const [url, setUrl] = useState(initialUrl);
   const [isInitialSubmit, setIsInitialSubmit] = useState(true);
   const [repositorySubmissionStatus, setRepositorySubmissionStatus] =
     useState<RepositorySubmissionStatusType>("EDITING");
 
+  const router = useRouter();
   const handleClickChange = useCallback((value: string) => {
     setUrl(value);
   }, []);
@@ -31,21 +34,22 @@ export const RepositorySubmissionBox = ({
   }, []);
 
   const handleClickSubmitButton = useCallback(async () => {
-    if (isInitialSubmit) {
+    if (isInitialSubmit && !initialUrl) {
       setIsInitialSubmit(false);
+      setRepositorySubmissionStatus("SUBMITTED");
+      //TODO: studyHistoryId 넣어주기
+      //await studyHistoryApi.putRepository(1, url);
     } else {
-      console.log("모달 오픈");
+      router.push(`${routePath["my-assignment-submit-modal"]}?url=${url}`);
     }
-    setRepositorySubmissionStatus("SUBMITTED");
-    //TODO: studyHistoryId 넣어주기
-    //await studyHistoryApi.putRepository(1, url);
-  }, [isInitialSubmit]);
+  }, [initialUrl, isInitialSubmit, router, url]);
 
   useEffect(() => {
     if (isInitialSubmit) {
-      setRepositorySubmissionStatus(repositoryLink ? "SUBMITTED" : "EDITING");
+      setRepositorySubmissionStatus(initialUrl ? "SUBMITTED" : "EDITING");
+      initialUrl && setIsInitialSubmit(false);
     }
-  }, [isInitialSubmit, repositoryLink]);
+  }, [isInitialSubmit, initialUrl]);
 
   return (
     <Box
@@ -98,12 +102,14 @@ export const RepositorySubmissionBox = ({
             </Flex>
           )}
           <Space height={62} />
-          <Button
-            style={{ maxWidth: "100%" }}
-            onClick={handleClickSubmitButton}
-          >
-            입력하기
-          </Button>
+          {repositorySubmissionStatus === "EDITING" && (
+            <Button
+              style={{ maxWidth: "100%" }}
+              onClick={handleClickSubmitButton}
+            >
+              입력하기
+            </Button>
+          )}
         </>
       }
     />

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

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

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

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

apps/client/app/(afterLogin)/my-study/my-assignment/submit-modal/page.tsx

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

apps/client/constants/assignmentMockData.ts

@@ -27,7 +27,7 @@ export const history: AssignmentHistoryDto[] = [
 
 export const studyDashBoardData: StudyDetailDashboardDto = {
   repositoryLink: "",
-  isLinkEditable: false,
+  isLinkEditable: true,
   submittableAssignments: [
     {
       studyDetailId: 1,

apps/client/constants/routePath.ts

@@ -2,6 +2,8 @@ export const routePath = {
   auth: "/auth",
   landing: "/landing",
   ["my-study"]: "/my-study",
+  ["my-assignment"]: "/my-study/my-assignment",
+  ["my-assignment-submit-modal"]: "/my-study/my-assignment/submit-modal",
   ["study-apply"]: "/study-apply",
   ["study-apply-modal"]: "/study-apply/apply-modal",
   ["study-cancel-modal"]: "/study-apply/cancel-modal",