{
+ openModal({
+ modalType: MODAL_TYPES.PRIVACY,
+ modalProps: {
+ initialState: {
+ privacy: watch("terms") || false,
+ marketing: watch("marketing") || false,
+ },
+ onAgree: (agreements) => {
+ setValue("marketing", agreements.marketing);
+ if (agreements.privacy) {
+ setValue("terms", true, { shouldValidate: true });
+ toast.success("약관에 동의하였습니다.");
+ } else {
+ setValue("terms", false, { shouldValidate: true });
+ }
+ },
+ },
+ });
+ }}
+ >
(필수)
@@ -88,9 +116,8 @@ export default function SignupProfile() {
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
new file mode 100644
index 0000000..04e20c1
--- /dev/null
+++ b/src/components/modal/Modal.tsx
@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+import CloseIcon from "@/assets/icon/x-icon.svg?react";
+
+type TModalprops = {
+ isOpen?: boolean;
+ children: ReactNode;
+ onClose: () => void;
+};
+
+export default function Modal({
+ isOpen = true,
+ children,
+ onClose,
+}: TModalprops) {
+ const [isVisible, setIsVisible] = useState(isOpen);
+
+ useEffect(() => {
+ setIsVisible(isOpen);
+ }, [isOpen]);
+
+ return createPortal(
+ isVisible && (
+
+ ),
+ document.getElementById("modal-root")!,
+ );
+}
diff --git a/src/components/modal/ModalProvider.tsx b/src/components/modal/ModalProvider.tsx
new file mode 100644
index 0000000..1dc1431
--- /dev/null
+++ b/src/components/modal/ModalProvider.tsx
@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+import PrivacyModal from "./privacyModal/PrivacyModal";
+
+import useModalStore from "@/store/useModalStore";
+
+export const MODAL_TYPES = {
+ PRIVACY: "PRIVACY",
+} as const;
+
+// 모달 등록
+export const MODAL_COMPONENTS = {
+ [MODAL_TYPES.PRIVACY]: PrivacyModal,
+};
+
+export default function ModalProvider() {
+ const { modalType, closeModal, modalProps } = useModalStore();
+ const location = useLocation();
+ useEffect(() => {
+ closeModal();
+ }, [location]);
+
+ if (!modalType) {
+ return null;
+ }
+
+ const ModalComponent = MODAL_COMPONENTS[modalType];
+
+ return
;
+}
diff --git a/src/components/modal/privacyModal/AgreementItem.tsx b/src/components/modal/privacyModal/AgreementItem.tsx
new file mode 100644
index 0000000..a9d6ef3
--- /dev/null
+++ b/src/components/modal/privacyModal/AgreementItem.tsx
@@ -0,0 +1,100 @@
+import ReactMarkdown, { type Components } from "react-markdown";
+
+type TAgreementItemProps = {
+ label: string;
+ required?: boolean;
+ checked: boolean;
+ expanded: boolean;
+ onToggleCheck: () => void;
+ onToggleExpand: () => void;
+ content: string;
+};
+
+const markdownComponents: Components = {
+ h2: ({ ...props }) => (
+
+ ),
+ h3: ({ ...props }) => (
+
+ ),
+ p: ({ ...props }) => (
+
+ ),
+ ul: ({ ...props }) => (
+
+ ),
+ ol: ({ ...props }) => (
+
+ ),
+ li: ({ ...props }) => (
+
+ ),
+};
+
+export default function AgreementItem({
+ label,
+ required,
+ checked,
+ expanded,
+ onToggleCheck,
+ onToggleExpand,
+ content,
+}: TAgreementItemProps) {
+ return (
+
+
+
{
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ onToggleCheck();
+ }
+ }}
+ >
+
+
+ {label}
+
+ ({required ? "필수" : "선택"})
+
+
+
+
+
+
+ {expanded && (
+
+
+ {content}
+
+
+ )}
+
+ );
+}
diff --git a/src/components/modal/privacyModal/PrivacyModal.tsx b/src/components/modal/privacyModal/PrivacyModal.tsx
new file mode 100644
index 0000000..4b434e9
--- /dev/null
+++ b/src/components/modal/privacyModal/PrivacyModal.tsx
@@ -0,0 +1,122 @@
+import { useState } from "react";
+
+import Button from "@/components/common/Button";
+
+import AgreementItem from "./AgreementItem";
+import Modal from "../Modal";
+
+import marketingContent from "@/assets/docs/marketing-agreement.md?raw";
+import privacyContent from "@/assets/docs/privacy-collection.md?raw";
+
+type TAgreementType = "privacy" | "marketing";
+
+type TPrivacyModalProps = {
+ onClose: () => void;
+ onAgree?: (agreements: { privacy: boolean; marketing: boolean }) => void;
+ initialState?: { privacy: boolean; marketing: boolean };
+};
+
+export default function PrivacyModal({
+ onClose,
+ onAgree,
+ initialState,
+}: TPrivacyModalProps) {
+ const [agreements, setAgreements] = useState({
+ privacy: initialState?.privacy ?? false,
+ marketing: initialState?.marketing ?? false,
+ });
+
+ const [expanded, setExpanded] = useState
>({
+ privacy: false,
+ marketing: false,
+ });
+
+ const toggleAgreement = (key: TAgreementType) => {
+ setAgreements((prev) => ({ ...prev, [key]: !prev[key] }));
+ };
+
+ const toggleExpand = (key: TAgreementType) => {
+ setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));
+ };
+
+ const handleAllAgree = () => {
+ const allChecked = Object.values(agreements).every(Boolean);
+ const newState = !allChecked;
+ setAgreements({
+ privacy: newState,
+ marketing: newState,
+ });
+ };
+
+ const handleConfirm = () => {
+ if (!agreements.privacy) {
+ return;
+ }
+ if (onAgree) {
+ onAgree(agreements);
+ }
+ onClose();
+ };
+
+ const isAllChecked = Object.values(agreements).every(Boolean);
+
+ const isRequiredChecked = agreements.privacy;
+
+ return (
+
+
+
+
개인정보 수집 동의
+
+
+
+
+
+ 전체 동의하기
+
+
+
+
+
toggleAgreement("privacy")}
+ onToggleExpand={() => toggleExpand("privacy")}
+ content={privacyContent}
+ />
+ toggleAgreement("marketing")}
+ onToggleExpand={() => toggleExpand("marketing")}
+ content={marketingContent}
+ />
+
+
+
+
+
+