feat: 이용약관 개인정보처리방침 모달

src/components/TermsAndPrivacy.tsx

@@ -1,25 +1,18 @@
 const TermsAndPrivacy = ({
-  setIsOpen
+  openModal
 }: {
-  setIsOpen: React.Dispatch<
-    React.SetStateAction<{ isOpen: boolean; terms: boolean; privacy: boolean }>
-  >;
+  openModal: (mode: "terms" | "privacy") => void;
 }) => {
-  const togglePopup = (mode: "terms" | "privacy") => {
-    // 이용약관 및 개인정보처리방침 메시지 팝업
-    setIsOpen((prev) => ({ ...prev, isOpen: true, [mode]: true }));
-  };
-
   return (
-    <div className="flex items-center w-screen text-gray-900 text-sm lex">
+    <div className="flex items-center w-screen text-gray-900 text-sm">
       <button
-        onClick={() => togglePopup("terms")}
+        onClick={() => openModal("terms")}
         className="flex justify-center border-r w-full hover:font-bold"
       >
         이용약관
       </button>
       <button
-        onClick={() => togglePopup("privacy")}
+        onClick={() => openModal("privacy")}
         className="w-full hover:font-bold"
       >
         개인정보처리방침
@@ -28,4 +21,4 @@ const TermsAndPrivacy = ({
   );
 };
 
-export default TermsAndPrivacy;
+export default TermsAndPrivacy;

src/components/modal/TermsAndPrivacyModal.tsx

@@ -1,31 +1,41 @@
+import { PRIVACY } from "@/constants/PRIVACY";
+import { TERMS } from "@/constants/TERMS";
+import { MouseEvent } from "react";
+
 const TermsAndPrivacyModal = ({
   mode,
   closeModal
 }: {
   mode: "terms" | "privacy";
-  closeModal: React.Dispatch<
-    React.SetStateAction<{ isOpen: boolean; terms: boolean; privacy: boolean }>
-  >;
+  closeModal: ()=>void;
 }) => {
   const title = mode === "terms" ? "이용약관" : "개인정보처리방침";
   const description =
     mode === "terms"
-      ? "나 이용약관 블라블라블라...."
-      : " 나 개인정보처리방침 블라블라블라";
+      ? TERMS
+      : PRIVACY;
+
+      const handleOuterClick = () => {
+        closeModal()
+      }
+
+      const handleInnerClick = (e:MouseEvent) => {
+        e.stopPropagation();
+      }
 
   return (
-    <div className="z-1 fixed inset-0 flex flex-col items-center bg-white px-[45px] py-[25px] w-screen h-screen">
-      <h1 className="font-bold text-2xl">{title}</h1>
-      <p className="mt-[30px]">{description}</p>
+    <div className="inset-0 fixed flex items-center justify-center z-50 bg-black/50" onClick={handleOuterClick}>
+    <div className="relative rounded-lg flex flex-col items-center w-[360px] h-[476px] bg-white px-[45px] py-[25px] overflow-scroll " onClick={handleInnerClick}>
+      <h1 className="font-bold text-2xl ">{title}</h1>
+      <p className="mt-[30px] whitespace-pre-wrap">{description}</p>
       <button
-        onClick={() =>
-          closeModal({ isOpen: false, terms: false, privacy: false })
-        }
-        className="top-4 right-4 fixed"
+        onClick={closeModal}
+        className="absolute top-6 right-4"
       >
-        <img src="/icon/close.svg" alt="닫기 버튼" width={28} height={28} />
+        <img src="/icon/close.svg" alt="닫기 버튼" width={22} height={22} />
       </button>
     </div>
+    </div>
   );
 };
 

src/constants/PRIVACY.ts

@@ -0,0 +1,36 @@
+export const PRIVACY = `제 1조 (목적)
+엠비팁스(이하 '서비스')는 MBTI 설정을 기반으로 한 AI 대화 시뮬레이션 서비스를 제공하기 위해 회원의 개인정보를 수집하고 처리합니다. 또한, 서비스 개선 및 사용자 경험 향상을 위해 비식별 데이터 분석을 수행할 수 있습니다.
+제 2조 (수집하는 개인정보 및 이용정보)
+서비스는 다음과 같은 개인정보 및 이용정보를 수집합니다.
+1. 카카오톡 간편로그인을 통해 수집하는 개인정보
+• 성별
+• 나이대
+• 이메일
+2. 서비스 이용 과정에서 자동으로 수집되는 정보(Google Analytics 활용)
+• 방문 기록(페이지 조회, 체류 시간 등)
+• 기기 및 브라우저 정보
+• 접속 IP 및 지역 정보(익명 처리됨)
+• 기타 서비스 이용 관련 로그 데이터
+제 3조 (개인정보 및 이용정보의 이용목적)
+수집한 개인정보 및 이용정보는 다음의 목적을 위해 사용됩니다.
+• 회원 구분 및 관리
+• 서비스 이용 관련 이슈 발생 시 연락
+• 서비스 품질 개선 및 사용자 경험 향상을 위한 데이터 분석(Google Analytics 활용)
+Google Analytics를 통해 수집된 데이터는 익명화 처리되며, 개인을 직접 식별할 수 없는 형태로 분석됩니다.
+제 4조 (개인정보 및 이용정보의 보유 및 이용기간)
+• 회원의 개인정보는 회원 탈퇴 시까지 보유하며, 탈퇴 후에는 관련 법률에 따라 일정 기간 보관 후 파기합니다.
+Google Analytics를 통해 수집된 비식별 데이터는 분석 목적으로 일정 기간 보관될 수 있습니다.
+제 5조 (개인정보 및 이용정보의 제3자 제공)
+서비스는 회원의 개인정보를 제3자에게 제공하지 않습니다. 단, 법률에 의해 요구되는 경우는 예외로 합니다.
+또한, Google Analytics를 활용한 데이터 분석 과정에서 일부 정보가 Google에 전송될 수 있으나, 이는 Google의 개인정보 보호 정책에 따라 관리됩니다.
+제 6조 (개인정보 및 이용정보 보호를 위한 기술적/관리적 조치)
+서비스는 회원의 개인정보 및 이용정보를 안전하게 보호하기 위해 다음과 같은 조치를 취합니다.
+• 데이터 암호화 및 보안 조치
+• 접근 권한 제한 및 관리적 보호 조치
+Google Analytics의 IP 익명화 기능 사용
+제 7조 (개인정보 및 이용정보의 열람, 정정 및 데이터 수집 거부 방법)
+회원은 언제든지 본인의 개인정보를 열람하거나 정정할 수 있으며, 이를 위해 본 서비스에 문의할 수 있습니다.
+• 문의처: [email protected]
+또한, 사용자는 Google Analytics에서 제공하는 옵트아웃 도구를 설치하거나, 브라우저 설정을 통해 쿠키를 차단함으로써 데이터 수집을 거부할 수 있습니다.
+제 8조 (개인정보 처리방침의 변경)
+본 개인정보처리방침은 법률 및 서비스 정책에 따라 변경될 수 있으며, 변경 시 서비스 내 공지사항을 통해 안내합니다.`;

src/constants/TERMS.ts

@@ -0,0 +1,25 @@
+export const TERMS = `제 1조 (목적)
+본 약관은 엠비팁스(이하 '서비스')의 이용에 관한 기본적인 사항을 규정합니다.
+제 2조 (회원가입)
+서비스 이용을 원하시는 분은 카카오톡 간편로그인을 통해 회원가입을 할 수 있습니다.
+회원가입 시 필요한 정보는 카카오톡을 통해 자동으로 수집됩니다.
+제 3조 (서비스의 제공)
+서비스는 MBTI 설정을 기반으로 한 AI 대화 시뮬레이션을 제공합니다.
+또한, 서비스 품질 개선 및 사용자 경험 향상을 위해 Google Analytics(GA)와 같은 데이터 분석 도구를 활용할 수 있습니다.
+제 4조 (이용자의 의무)
+회원은 서비스 이용 시 다음의 의무를 준수해야 합니다.
+• 제공된 정보를 정확하게 입력해야 합니다.
+• 타인의 개인정보를 침해하거나, 불법적인 행위를 해서는 안 됩니다.
+제 5조 (데이터 수집 및 활용)
+1. 서비스 품질 개선을 위한 데이터 수집
+• 서비스는 이용자의 서비스 사용 패턴을 분석하고, 품질 개선을 위해 Google Analytics(GA)를 활용할 수 있습니다.
+• GA를 통해 방문 기록, 기기 정보, 접속 지역 등의 비식별 데이터를 수집하며, 이는 개인을 식별할 수 없는 형태로 익명화되어 처리됩니다.
+2. 데이터 수집 거부 방법
+• 사용자는 Google에서 제공하는 Google Analytics 옵트아웃 도구를 설치하거나, 브라우저 설정을 통해 쿠키를 차단함으로써 데이터 수집을 거부할 수 있습니다.
+제 6조 (서비스의 변경 및 중단)
+서비스는 운영상 필요에 따라 서비스 내용을 변경하거나 중단할 수 있습니다.
+제 7조 (면책사항)
+서비스는 회원의 귀책사유로 발생한 손해에 대해서는 책임을 지지 않습니다.
+제 8조 (약관의 변경)
+서비스는 본 약관을 변경할 수 있으며, 변경 시 공지사항을 통해 안내합니다.
+`;

src/pages/Login.tsx

@@ -1,18 +1,23 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import KakaoLoginButton from "@/components/button/KakaoLoginButton";
 import TermsAndPrivacy from "@/components/TermsAndPrivacy";
 import TermsAndPrivacyModal from "@/components/modal/TermsAndPrivacyModal";
 
 const Login = () => {
-  const [isModalOpen, setIsModalOpen] = useState({
+  const [isModalOpen, setIsModalOpen] = useState<{isOpen : boolean, mode : "terms" | "privacy"}>({
     isOpen: false,
-    terms: false,
-    privacy: false
+    mode: "terms",
   });
 
-  useEffect(() => {
-    console.log(isModalOpen.isOpen);
-  }, []);
+  const openModal =(mode : "terms" | "privacy")=> {
+    setIsModalOpen({mode:mode, isOpen : true});
+  }
+  const closeModal = () => {
+    setIsModalOpen((state) => ({mode:state.mode, isOpen : false}));
+  }
+
+  const isOpen = isModalOpen.isOpen
+  const isTerms = isModalOpen.mode === "terms";
 
   return (
     <div className="flex flex-col items-center">
@@ -35,13 +40,13 @@ const Login = () => {
         <KakaoLoginButton />
       </div>
       <div className="mt-[72px]">
-        <TermsAndPrivacy setIsOpen={setIsModalOpen} />
+        <TermsAndPrivacy openModal={openModal} />
       </div>
-      {isModalOpen.isOpen ? (
-        isModalOpen.terms ? (
-          <TermsAndPrivacyModal mode="terms" closeModal={setIsModalOpen} />
+      {isOpen ? (
+        isTerms ? (
+          <TermsAndPrivacyModal mode="terms" closeModal={closeModal} />
         ) : (
-          <TermsAndPrivacyModal mode="privacy" closeModal={setIsModalOpen} />
+          <TermsAndPrivacyModal mode="privacy" closeModal={closeModal} />
         )
       ) : null}
     </div>