[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/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,
+});

src/features/onboarding/ui/policy-modal/policy-modal.tsx

@@ -0,0 +1,33 @@
+import { Button, Modal } from "@/shared/ui";
+
+import * as styles from "./policy-modal.css";
+import { PrivacyPolicyContent } from "./privacy-policy-content";
+import { UsePolicyContent } from "./use-policy-content";
+
+interface PolicyModalProps {
+  type: "USE" | "PRIVACY";
+  onClose: () => void;
+}
+
+export const PolicyModal = ({ type, onClose }: PolicyModalProps) => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.modalHeader}>
+        <h2>{type === "USE" ? "이용약관" : "개인정보처리방침"}</h2>
+        <div className={styles.buttonWrapper}>
+          <Modal.XButton />
+        </div>
+      </div>
+      <Modal.Content>
+        <div className={styles.modalContent}>
+          {type === "USE" ? <UsePolicyContent /> : <PrivacyPolicyContent />}
+        </div>
+      </Modal.Content>
+      <Modal.Buttons>
+        <Button variant="primary" size="full" onClick={onClose}>
+          확인
+        </Button>
+      </Modal.Buttons>
+    </div>
+  );
+};

src/features/onboarding/ui/policy-modal/privacy-policy-content.tsx

@@ -0,0 +1,94 @@
+import {
+  TERMS_OF_PRIVACY_INFO,
+  type Article,
+  type Section,
+} from "@/shared/config";
+
+import * as styles from "./policy-modal.css";
+
+export const PrivacyPolicyContent = () => {
+  return (
+    <div className={`${styles.content} ${styles.flexColumn({ gap: 24 })}`}>
+      {/** 개인정보처리방침 타이틀 */}
+      <div className={styles.flexColumn({ gap: 16 })}>
+        <div>
+          <h3 className={styles.textStyle()}>{TERMS_OF_PRIVACY_INFO.title}</h3>
+          <p>{TERMS_OF_PRIVACY_INFO.date}</p>
+        </div>
+        <p>{TERMS_OF_PRIVACY_INFO.description}</p>
+      </div>
+      {/** 조항 리스트 (ex. 1. 개인정보의 수집 및 이용) */}
+      {TERMS_OF_PRIVACY_INFO.sections.map((section: Section) => (
+        <section key={section.title} className={styles.flexColumn({ gap: 8 })}>
+          {/* 조항 타이틀 및 설명 */}
+          <div>
+            <h4 className={styles.textStyle({ type: "title2" })}>
+              {section.title}
+            </h4>
+            <p>{section.description}</p>
+          </div>
+          {/** 조항 상세설명 */}
+          <div className={styles.flexColumn({ gap: 16 })}>
+            {section.articles?.map((article: Article) => (
+              <article
+                key={article.title}
+                className={styles.flexColumn({ gap: 8 })}
+              >
+                {/** 조항 상세설명의 타이틀 (ex. 가. 회원가입 및 계정 관리) */}
+                {article.title && (
+                  <p className={styles.textStyle({ type: "title3" })}>
+                    {article.title}
+                  </p>
+                )}
+                <div>
+                  {article.content && (
+                    <div>
+                      {/* 줄글 형태의 컨텐츠 */}
+                      {"text" in article.content && (
+                        <div>{article.content.text}</div>
+                      )}
+                      {/* 테이블 형태의 컨텐츠 */}
+                      {"table" in article.content && (
+                        <div className={`${styles.tableWrapper}`}>
+                          <table className={`${styles.table}`}>
+                            <thead className={styles.thead}>
+                              <tr>
+                                {article.content.table.header.map(
+                                  (th, thIdx) => (
+                                    <th
+                                      key={thIdx}
+                                      className={`${styles.tCell} ${styles.th}`}
+                                    >
+                                      {th}
+                                    </th>
+                                  )
+                                )}
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {article.content.table.rows.map((row, rowIdx) => (
+                                <tr key={rowIdx}>
+                                  {row.map((td, tdIdx) => (
+                                    <td key={tdIdx} className={styles.tCell}>
+                                      {td}
+                                    </td>
+                                  ))}
+                                </tr>
+                              ))}
+                            </tbody>
+                          </table>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </article>
+            ))}
+          </div>
+          {/** 조항 추가사항 */}
+          {section.alert && <div>{section.alert}</div>}
+        </section>
+      ))}
+    </div>
+  );
+};

src/features/onboarding/ui/policy-modal/use-policy-content.tsx

@@ -0,0 +1,26 @@
+import { TERMS_OF_USE, type Chapters, type Chapter } from "@/shared/config";
+
+import * as styles from "./policy-modal.css";
+
+export const UsePolicyContent = () => {
+  return TERMS_OF_USE.map((policy: Chapters) => {
+    return (
+      <section key={policy.chapterTitle}>
+        <h2 className={styles.title}>{policy.chapterTitle}</h2>
+
+        {policy.chapter.map((chapter: Chapter, idx) => (
+          <article key={idx}>
+            {chapter.title && (
+              <h3 className={styles.subTitle}>{chapter.title}</h3>
+            )}
+            <div className={styles.content}>
+              {chapter.contents.map((content) => (
+                <p>{content}</p>
+              ))}
+            </div>
+          </article>
+        ))}
+      </section>
+    );
+  });
+};