Merge pull request #162 from TEAM-COMFIT/feat/#159/onboarding-agree-modal

[Feat] 이용약관 및 개인정보처리방침 모달, 페이지 구현

Author: odukong

src/app/providers/modal-provider.tsx

@@ -9,6 +9,7 @@ interface ModalItem {
   id: string;
   content: ReactNode;
   autoPlay?: number;
+  size?: "default" | "auto";
 }
 
 export const ModalProvider = () => {
@@ -33,6 +34,7 @@ export const ModalProvider = () => {
             isOpen={true}
             autoPlay={modal.autoPlay}
             onClose={() => modalStore.close(modal.id)}
+            size={modal.size}
           >
             {modal.content}
           </Modal>

src/app/routes/paths.ts

@@ -15,5 +15,8 @@ export const ROUTES = {
   EXPERIENCE_DETAIL: (id = ":id") => `/experience/${id}`, // 경험 상세
   EXPERIENCE_EDIT: (id = ":id") => `/experience/${id}/edit`, // 경험 수정
 
+  POLICY_USE: "/policy/terms", // 이용약관
+  POLICY_PRIVACY: "/policy/privacy", // 개인정보처리방침
+
   MYPAGE: "/mypage",
 };

src/app/routes/public-routes.tsx

@@ -32,11 +32,19 @@ const CompanyDetailPage = lazy(() =>
   }))
 );
 
+const PolicyPage = lazy(() =>
+  import("@/pages/policy/policy-page").then((module) => ({
+    default: module.PolicyPage,
+  }))
+);
+
 export const guestRoutes = [{ path: ROUTES.LOGIN, element: <LoginPage /> }];
 
 export const publicRoutes = [
   { path: ROUTES.LOGIN_AUTH, element: <KakaoLoginPage /> },
   { path: ROUTES.LANDING, element: <LandingPage /> },
   { path: ROUTES.HOME, element: <HomePage /> },
   { path: ROUTES.COMPANY(), element: <CompanyDetailPage /> },
+  { path: ROUTES.POLICY_USE, element: <PolicyPage mode="USE" /> },
+  { path: ROUTES.POLICY_PRIVACY, element: <PolicyPage mode="PRIVACY" /> },
 ];

src/features/experience-detail/model/use-leave-confirm.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useCallback } from "react";
 import { useBlocker } from "react-router-dom";
 
+import { IconWarn } from "@/shared/assets/icons";
 import { modalStore } from "@/shared/model/store";
 import { ModalBasic } from "@/shared/ui";
 
@@ -65,12 +66,13 @@ export const useLeaveConfirm = () => {
     if (blocker.state === "blocked") {
       modalStore.open(
         <ModalBasic
-          title={`작성중인 내용이 있습니다.\n정말 나가시겠습니까?`}
-          subTitle="저장하지 않으면 내용이 사라져요."
-          closeText="이어서 작성"
-          confirmText="나가기"
-          onClose={cancelLeave}
-          onConfirm={confirmLeave}
+          icon={<IconWarn width={48} height={48} />}
+          title={`작성 중인 내용이 있어요`}
+          subTitle="저장하지 않으면 내용이 모두 사라져요."
+          closeText="나가기"
+          confirmText="계속 작성하기"
+          onClose={confirmLeave}
+          onConfirm={cancelLeave}
         />,
         0,
         undefined,

src/features/experience-detail/ui/experience-viewer/experience-viewer.tsx

@@ -1,3 +1,4 @@
+import { IconTrash } from "@/shared/assets/icons";
 import {
   EXPERIENCE_TYPE,
   type ExperienceTypeCode,
@@ -48,15 +49,18 @@ const ExperienceViewer = () => {
   const handleOpenDeleteModal = () => {
     modalStore.open(
       <ModalBasic
-        title="이 경험을 삭제하시겠습니까?"
-        subTitle="작성한 내용은 즉시 제거되며, 복구할 수 없습니다."
-        closeText="취소"
-        confirmText="삭제"
-        onClose={() => modalStore.reset()} // 취소 시 닫기
-        onConfirm={() => {
+        icon={<IconTrash width={48} height={48} />}
+        title="이 경험을 삭제할까요?"
+        subTitle="삭제하면 다시 복구할 수 없어요"
+        closeText="삭제하기"
+        confirmText="취소하기"
+        onClose={() => {
           onClickDelete(); // 실제 삭제 동작
           modalStore.reset(); // 모달 닫기
         }}
+        onConfirm={() => {
+          modalStore.reset(); // 취소 시 닫기
+        }}
       />
     );
   };

src/features/experience-matching/ui/analyzing/analyzing.tsx

@@ -10,38 +10,44 @@ import * as styles from "./analyzing.css";
 
 import type { CustomErrorResponse } from "@/shared/api/generate/http-client";
 
+let isRequesting = false;
+
 export const Analyzing = ({ nextStep }: { nextStep: () => void }) => {
   const { company, experience, jobDescription, setReportId } = useReportStore();
-  const { mutate } = useCreateReport();
+  const { mutateAsync } = useCreateReport();
 
   // 에러 핸들링 (임시)
   const [open, setOpen] = useState(false);
   const [errorMsg, setErrorMsg] = useState("");
 
   useEffect(() => {
-    mutate(
-      {
-        companyId: company?.id ?? 0,
-        experienceId: experience?.id ?? 0,
-        jobDescription: jobDescription,
-      },
-      {
-        onSuccess: (response) => {
-          setReportId(response?.id ?? 0);
-          nextStep();
-        },
-        onError: (error: CustomErrorResponse) => {
-          const serverMessage =
-            error.message || "리포트 생성 중 에러가 발생했습니다";
-          setErrorMsg(serverMessage);
-          setOpen(true);
+    if (isRequesting) return;
+    isRequesting = true;
+
+    const handleRequest = async () => {
+      try {
+        const response = await mutateAsync({
+          companyId: company?.id ?? 0,
+          experienceId: experience?.id ?? 0,
+          jobDescription: jobDescription,
+        });
 
-          setTimeout(() => setOpen(false), 3000);
-        },
+        setReportId(response?.id ?? 0);
+        nextStep();
+      } catch (err) {
+        const error = err as CustomErrorResponse;
+        const serverMessage =
+          error.message || "리포트 생성 중 에러가 발생했습니다";
+        setErrorMsg(serverMessage);
+        setOpen(true);
+        setTimeout(() => setOpen(false), 3000);
+      } finally {
+        isRequesting = false;
       }
-    );
-  }, [nextStep, setReportId, mutate]);
+    };
 
+    handleRequest();
+  }, []);
   return (
     <>
       <div className={styles.layout}>

src/features/experience-matching/ui/select-company/select-company.tsx

@@ -3,8 +3,9 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { ROUTES } from "@/app/routes/paths";
+import { IconPen } from "@/shared/assets/icons";
 import { modalStore } from "@/shared/model/store";
-import { Button, Modal } from "@/shared/ui";
+import { Modal, ModalBasic } from "@/shared/ui";
 import {
   useGetExperience,
   useGetCompanyList,
@@ -36,23 +37,21 @@ export const SelectCompany = ({ onClick }: { onClick: () => void }) => {
   useEffect(() => {
     if (data?.totalElements === 0) {
       modalStore.open(
-        <>
-          <Modal.Content>
-            <Modal.Title>아직 등록된 경험이 없습니다</Modal.Title>
-            <Modal.SubTitle>지금 바로 경험을 등록하러 가볼까요?</Modal.SubTitle>
-          </Modal.Content>
-          <Modal.Buttons>
-            <Button variant="secondary" onClick={() => navigate(ROUTES.HOME)}>
-              나가기
-            </Button>
-            <Button
-              variant="primary"
-              onClick={() => navigate(ROUTES.EXPERIENCE_CREATE)}
-            >
-              이동하기
-            </Button>
-          </Modal.Buttons>
-        </>,
+        <ModalBasic
+          onClose={() => {
+            modalStore.close("NO-EXPERIENCE");
+            navigate(ROUTES.HOME);
+          }}
+          onConfirm={() => {
+            modalStore.close("NO-EXPERIENCE");
+            navigate(ROUTES.EXPERIENCE_CREATE);
+          }}
+          icon={<IconPen width={48} height={48} />}
+          title="아직 등록된 경험이 없어요"
+          subTitle="경험을 등록하고 AI매칭을 시작해보세요"
+          closeText="나중에 할게요"
+          confirmText="경험 등록하기"
+        />,
         undefined,
         undefined,
         "NO-EXPERIENCE"
@@ -65,13 +64,15 @@ export const SelectCompany = ({ onClick }: { onClick: () => void }) => {
     // 기업 선택 후, 대기하는 모달
     modalStore.open(
       <>
-        <Modal.Content type="auto">
-          <Modal.Title>
-            {josa(selectedCompany.name, "을/를")} 선택하셨습니다
-          </Modal.Title>
-          <Modal.SubTitle>기업분석 내용을 불러오는 중입니다.</Modal.SubTitle>
+        <Modal.Content>
+          <Modal.Image />
+          <Modal.TitleGroup>
+            <Modal.Title>
+              {josa(selectedCompany.name, "을/를")} 선택했어요
+            </Modal.Title>
+            <Modal.SubTitle>기업분석 내용을 불러오고 있어요</Modal.SubTitle>
+          </Modal.TitleGroup>
         </Modal.Content>
-        <Modal.Image />
       </>,
       3000,
       () => {

src/features/onboarding/index.ts

@@ -7,3 +7,5 @@ export * from "./store/interest-select/selectors";
 
 export { useGetUniversity } from "./api/use-get-university.query";
 export { usePostOnboarding } from "./api/use-post-onboarding.mutation";
+
+export { PolicyModal } from "./ui/policy-modal/policy-modal";

src/features/onboarding/lib/onboarding-form.validator.ts

@@ -6,14 +6,16 @@ export const isOnboardingFormComplete = (params: {
   selectedUniversity: SearchItem | null;
   industry: Record<number, unknown>;
   job: Record<number, unknown>;
+  isAgreed: boolean;
 }) => {
-  const { selectedEducation, selectedUniversity, industry, job } = params;
+  const { selectedEducation, selectedUniversity, industry, job, isAgreed } =
+    params;
 
   const hasEducation = Boolean(selectedEducation);
   const hasUniversity = Boolean(selectedUniversity);
 
   const hasIndustry1 = Boolean(industry[1]);
   const hasJob1 = Boolean(job[1]);
 
-  return hasEducation && hasUniversity && hasIndustry1 && hasJob1;
+  return hasEducation && hasUniversity && hasIndustry1 && hasJob1 && isAgreed;
 };