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

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 } from "@/shared/config/experience";
 import { parseYMD } from "@/shared/lib/format-date";
 import { modalStore } from "@/shared/model/store";
@@ -42,15 +43,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/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;
 };

src/features/onboarding/ui/policy-modal/policy-modal.css.ts

@@ -0,0 +1,154 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+import { themeVars } from "@/app/styles";
+
+export const wrapper = style({
+  width: "40rem",
+  paddingBottom: "1.6rem",
+});
+
+export const modalHeader = style({
+  width: "100%",
+  position: "relative",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "1.6rem",
+  borderBottom: `1px solid ${themeVars.color.normal}`,
+  ...themeVars.fontStyles.hline_b_18,
+});
+
+export const buttonWrapper = style({
+  position: "absolute",
+  right: "1.6rem",
+  width: "2.4rem",
+  height: "2.4rem",
+});
+
+export const modalContent = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "2.4rem",
+  textAlign: "left",
+  height: "28rem",
+  padding: "2rem 3rem",
+  marginBottom: "2rem",
+  overflowY: "auto",
+
+  selectors: {
+    "&::-webkit-scrollbar": {
+      width: "1.2rem",
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: themeVars.color.gray300,
+      height: "5rem",
+      borderRadius: "100px",
+      backgroundClip: "padding-box",
+      border: `4px solid transparent`,
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: "transparent",
+      margin: "0.8rem 1.2rem",
+    },
+  },
+});
+
+export const title = style({
+  color: themeVars.color.gray800,
+  ...themeVars.fontStyles.body_b_14,
+  fontWeight: 600,
+  marginBottom: "0.8rem",
+});
+
+export const subTitle = style({
+  color: themeVars.color.gray800,
+  ...themeVars.fontStyles.cap_m_12,
+  fontWeight: 500,
+});
+
+export const content = style({
+  display: "flex",
+  flexDirection: "column",
+  color: themeVars.color.gray500,
+  ...themeVars.fontStyles.cap_m_12,
+  fontWeight: 500,
+  whiteSpace: "pre-wrap",
+});
+
+export const textStyle = recipe({
+  base: {
+    color: themeVars.color.gray800,
+  },
+  variants: {
+    type: {
+      title1: {
+        ...themeVars.fontStyles.body_b_16,
+        fontWeight: 700,
+      },
+      title2: {
+        ...themeVars.fontStyles.body_b_14,
+      },
+      title3: {
+        ...themeVars.fontStyles.body_r_14,
+        fontWeight: 400,
+      },
+    },
+  },
+  defaultVariants: {
+    type: "title1",
+  },
+});
+
+export const flexColumn = recipe({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  variants: {
+    gap: {
+      8: { gap: "0.8rem" },
+      16: { gap: "1.6rem" },
+      24: { gap: "2.4rem" },
+    },
+  },
+});
+
+export const tableWrapper = style({
+  width: "100%",
+  overflowX: "auto",
+  selectors: {
+    "&::-webkit-scrollbar": {
+      display: "none",
+    },
+  },
+});
+
+export const table = style({
+  width: "max-content",
+  minWidth: "100%",
+  borderCollapse: "collapse",
+});
+
+export const tCell = style({
+  minWidth: "10rem",
+  maxWidth: "25rem",
+  padding: "0.8rem",
+  border: `1px solid ${themeVars.color.gray200}`,
+  fontWeight: 400,
+  verticalAlign: "top",
+  wordBreak: "keep-all",
+});
+
+export const thead = style({
+  backgroundColor: themeVars.color.gray100,
+});
+
+export const th = style({
+  whiteSpace: "nowrap",
+  padding: "1rem 0.8rem",
+});
+
+export const tableText = style({
+  fontWeight: 400,
+});