Skip to content

Commit 39cf7ba

Browse files
SoohyuniiiSoohyuniii
committed
Merge branch 'dev' of https://github.com/MBTips/FE-MBTips into feat/myinfo-화면-내-terms,-privacy-모달-연동-작업
2 parents d381e67 + 7472e4f commit 39cf7ba

File tree

8 files changed

+302
-236
lines changed

8 files changed

+302
-236
lines changed

‎src/components/TermsAndPrivacy.tsx‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,18 @@
11
const TermsAndPrivacy = ({
2-
setIsOpen
2+
openModal
33
}: {
4-
setIsOpen: React.Dispatch<
5-
React.SetStateAction<{ isOpen: boolean; terms: boolean; privacy: boolean }>
6-
>;
4+
openModal: (mode: "terms" | "privacy") => void;
75
}) => {
8-
const togglePopup = (mode: "terms" | "privacy") => {
9-
// 이용약관 및 개인정보처리방침 메시지 팝업
10-
setIsOpen((prev) => ({ ...prev, isOpen: true, [mode]: true }));
11-
};
12-
136
return (
14-
<div className="flex items-center w-screen text-gray-900 text-sm lex">
7+
<div className="flex items-center w-screen text-gray-900 text-sm">
158
<button
16-
onClick={() => togglePopup("terms")}
9+
onClick={() => openModal("terms")}
1710
className="flex justify-center border-r w-full hover:font-bold"
1811
>
1912
이용약관
2013
</button>
2114
<button
22-
onClick={() => togglePopup("privacy")}
15+
onClick={() => openModal("privacy")}
2316
className="w-full hover:font-bold"
2417
>
2518
개인정보처리방침
@@ -28,4 +21,4 @@ const TermsAndPrivacy = ({
2821
);
2922
};
3023

31-
export default TermsAndPrivacy;
24+
export default TermsAndPrivacy;

‎src/components/header/MainHeader.tsx‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,37 @@
1-
import { Link } from "react-router-dom";
2-
import LoginButton from "../button/LoginButton";
1+
import { Link, useNavigate } from "react-router-dom";
2+
import LoginButton from "@/components/button/LoginButton";
3+
4+
const MainHeader = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
5+
const navigate = useNavigate();
6+
7+
const handleNavigate = () => {
8+
navigate("/my-info");
9+
};
310

4-
const MainHeader = ({isLoggedIn}: {isLoggedIn : boolean})=> {
511
return (
6-
<header className="bg-white flex h-[56px] w-full justify-between px-5">
12+
<header className="flex h-[56px] w-full items-center justify-between bg-white px-5">
713
<Link to="/" className="flex items-center">
8-
<img
9-
src="/public/icon/mbtipslogo.svg"
10-
alt="Logo"
11-
width={110}
12-
height={31}
13-
/>
14+
<img
15+
src="/public/icon/mbtipslogo.svg"
16+
alt="Logo"
17+
width={110}
18+
height={31}
19+
/>
1420
</Link>
15-
{isLoggedIn ? <LoginButton/> : <img
16-
src="/public/icon/people.svg"
17-
alt="Login Done"
18-
className="mx-auto mr-[20px]"
19-
width={24}
20-
height={24}
21-
/>}
22-
</header>)
23-
}
21+
{!isLoggedIn ? (
22+
<LoginButton />
23+
) : (
24+
<img
25+
src="/public/icon/people.svg"
26+
alt="Login Done"
27+
className="mx-auto mr-[20px] cursor-pointer"
28+
width={24}
29+
height={24}
30+
onClick={handleNavigate}
31+
/>
32+
)}
33+
</header>
34+
);
35+
};
2436

25-
export default MainHeader;
37+
export default MainHeader;

‎src/components/modal/TermsAndPrivacyModal.tsx‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,41 @@
1+
import { PRIVACY } from "@/constants/PRIVACY";
2+
import { TERMS } from "@/constants/TERMS";
3+
import { MouseEvent } from "react";
4+
15
const TermsAndPrivacyModal = ({
26
mode,
37
closeModal
48
}: {
59
mode: "terms" | "privacy";
6-
closeModal: React.Dispatch<
7-
React.SetStateAction<{ isOpen: boolean; terms: boolean; privacy: boolean }>
8-
>;
10+
closeModal: ()=>void;
911
}) => {
1012
const title = mode === "terms" ? "이용약관" : "개인정보처리방침";
1113
const description =
1214
mode === "terms"
13-
? "나 이용약관 블라블라블라...."
14-
: " 나 개인정보처리방침 블라블라블라";
15+
? TERMS
16+
: PRIVACY;
17+
18+
const handleOuterClick = () => {
19+
closeModal()
20+
}
21+
22+
const handleInnerClick = (e:MouseEvent) => {
23+
e.stopPropagation();
24+
}
1525

1626
return (
17-
<div className="z-1 fixed inset-0 flex flex-col items-center bg-white px-[45px] py-[25px] w-screen h-screen">
18-
<h1 className="font-bold text-2xl">{title}</h1>
19-
<p className="mt-[30px]">{description}</p>
27+
<div className="inset-0 fixed flex items-center justify-center z-50 bg-black/50" onClick={handleOuterClick}>
28+
<div className="relative rounded-lg flex flex-col items-center w-[360px] h-[476px] bg-white px-[45px] py-[25px] overflow-scroll " onClick={handleInnerClick}>
29+
<h1 className="font-bold text-2xl ">{title}</h1>
30+
<p className="mt-[30px] whitespace-pre-wrap">{description}</p>
2031
<button
21-
onClick={() =>
22-
closeModal({ isOpen: false, terms: false, privacy: false })
23-
}
24-
className="top-4 right-4 fixed"
32+
onClick={closeModal}
33+
className="absolute top-6 right-4"
2534
>
26-
<img src="/icon/close.svg" alt="닫기 버튼" width={28} height={28} />
35+
<img src="/icon/close.svg" alt="닫기 버튼" width={22} height={22} />
2736
</button>
2837
</div>
38+
</div>
2939
);
3040
};
3141

‎src/constants/CONTENT.ts‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
export const CONTENT_DATA = [
2+
{
3+
id: 1,
4+
title: "썸탈 때 대화주제 추천 MBTI별 대백과",
5+
image: {
6+
sm: "/image/home_banner2_sm.png",
7+
md: "/image/home_banner2_md.png",
8+
lg: "/image/home_banner2_lg.png"
9+
},
10+
subTitle: "썸탈 때 대화주제 추천(MBTI별)",
11+
content: `썸 탈 때 이런 주제를 활용해보세요! MBTI 별로 추천드려요. 조금 더 자세한 대화주제 추천을 원한다면? 대화를 시작해보세요~
12+
13+
ISTJ (청렴한 관리자):
14+
- "이번 주말에 뭐 할 계획이야? 나는 친구들과 등산 가기로 했어."
15+
- 설명: 구체적인 계획에 대해 이야기하며 서로의 일정을 공유하는 것을 좋아해요!
16+
17+
ISFJ (세심한 보호자):
18+
- "가족이랑 휴가는 보통 어떻게 보내?"
19+
- 설명: 가족과의 관계나 전통적인 활동에 대해 이야기하는 것을 선호해요!
20+
21+
INFJ (통찰력 있는 상담자):
22+
- "최근에 읽은 책 중에 감명 깊었던 게 있어? 나는 '인간의 조건'이라는 책을 읽었는데, 정말 많은 생각을 하게 해."
23+
- 설명: 깊이 있는 주제에 대해 이야기하며 서로의 감정을 나누는 것을 좋아해요!
24+
25+
INTJ (전략가):
26+
- "5년 후에 어떤 모습이 되고 싶어?"
27+
- 설명: 미래에 대한 비전이나 목표에 대해 이야기하는 것을 선호해요!
28+
29+
ISTP (유연한 문제 해결사):
30+
- "혹시 취미가 있어? 나는 드론 촬영에 빠져 있어."
31+
- 설명: 취미나 액티비티에 대한 이야기를 나누며 실용적인 대화를 좋아해요!
32+
33+
ISFP (자유로운 예술가):
34+
- "혹시 전시회 좋아해? 나는 미술 전시회에 갔었는데, 정말 감동적이었어."
35+
- 설명: 예술적 경험이나 감정에 대해 이야기하는 것을 선호해요!
36+
37+
INFP (이상적인 중재자):
38+
- "이 다음에 하고 싶은 일 이써? 나는 언젠가 나만의 책을 쓰고 싶어."
39+
- 설명: 개인의 가치관이나 꿈에 대해 이야기하며 감정적인 연결을 중요시해요!
40+
41+
INTP (논리적인 사색가):
42+
- "양자역학에 대해 들어봤어?"
43+
- 설명: 새로운 아이디어나 이론에 대한 논의, 호기심을 자극하는 주제를 좋아해요!
44+
45+
ESTP (모험적인 활동가):
46+
- "혹시 스카이다이빙 해봤어? 정말 짜릿했어!"
47+
- 설명: 새로운 경험이나 모험에 대한 이야기를 나누는 것을 선호해요!
48+
49+
ESFP (사교적인 연예인):
50+
- "이번 주말에 ㅇㅇ컨퍼런스 가는 거 어때? 재미있을 것 같아!"
51+
- 설명: 즐거운 경험이나 사회적 활동에 대한 이야기를 나누는 것을 좋아해요!
52+
53+
ENFP (열정적인 활동가):
54+
- "너는 어떤 가능성을 탐색하고 있어? 나는 새로운 프로젝트를 시작할까 고민 중이야."
55+
- 설명: 다양한 가능성이나 창의적인 아이디어에 대한 이야기를 나누는 것을 선호해요!
56+
57+
ENTP (발명가):
58+
- "너는 AI의 미래에 대해 어떻게 생각해?"
59+
- 설명: 논쟁적인 주제나 새로운 아이디어에 대한 토론을 즐겨요!
60+
61+
ESTJ (효율적인 관리자):
62+
- "최근에 일 할 때 가장 뿌듯했던 경험있어?"
63+
- 설명: 목표 달성이나 성과에 대한 이야기를 나누는 것을 선호해요!
64+
65+
ESFJ (사교적인 조정자):
66+
- "친구들이랑 보통 뭐하고 놀아?"
67+
- 설명: 사람들과의 관계나 사회적 활동에 대한 이야기를 나누는 것을 좋아해요!
68+
69+
ENFJ (카리스마 있는 리더):
70+
- "사람들과의 관계에서 가장 중요하다고 생각하는 건 뭐야? 나는 신뢰가 가장 중요하다고 생각해."
71+
- 설명: 사람들의 감정이나 관계에 대한 이야기를 나누는 것을 선호해요!
72+
73+
ENTJ (결단력 있는 지휘관):
74+
- "회사에서 좋은 리더란 어떤 리더일까?"
75+
- 설명: 전략적 사고나 리더십에 대한 이야기를 나누는 것을 좋아해요!`
76+
},
77+
{
78+
id: 2,
79+
title: "MBTI별 피해야 할 대화스타일 및 주제",
80+
image: {
81+
sm: "/image/home_banner3_sm.png",
82+
md: "/image/home_banner3_md.png",
83+
lg: "/image/home_banner3_lg.png"
84+
},
85+
subTitle: "MBTI 별 피해야할 대화스타일 & 주제",
86+
content: `MBTI 별로 피해야 하는 대화 스타일, 주제를 알아보아요!
87+
88+
ISTJ (청렴한 관리자):
89+
- 비효율적인 대화, 감정적인 논의.
90+
- 예시 : 계획이나 규칙을 무시하고 즉흥적으로 행동하는 사람과의 대화. 감정적인 불만이나 개인적인 이야기를 과도하게 나누는 것.
91+
92+
ISFJ (세심한 보호자):
93+
- 비판적이거나 공격적인 대화.
94+
- 예시 : 자신의 가치관이나 선택을 비난하는 대화. 갈등을 일으키는 주제, 예를 들어 정치적 논쟁.
95+
96+
INFJ (통찰력 있는 상담자):
97+
- 피상적인 대화.
98+
- 예시 : 날씨나 소소한 일상 이야기만 하는 것. 깊이 있는 감정이나 철학적 주제를 회피하는 대화.
99+
100+
INTJ (전략가):
101+
- 비논리적이거나 비효율적인 대화.
102+
- 예시 : 감정에 치우친 주장이나 비합리적인 결정에 대한 논의. 구체적인 근거 없이 의견을 제시하는 것.
103+
104+
ISTP (유연한 문제 해결사):
105+
- 지나치게 감정적인 대화.
106+
- 예시 : 감정적인 문제를 과도하게 분석하거나, 감정 표현을 강요하는 대화.
107+
108+
ISFP (자유로운 예술가):
109+
- 강압적인 대화나 비판.
110+
- 예시 : 자신의 창의적인 아이디어를 부정하거나, 강제로 의견을 바꾸려는 대화.
111+
112+
INFP (이상적인 중재자):
113+
- 비인간적이거나 냉정한 대화.
114+
- 예시 : 사람의 감정을 무시하고 논리만 강조하는 대화. 비인간적인 결정이나 정책에 대한 논의.
115+
116+
INTP (논리적인 사색가):
117+
- 비논리적이거나 감정적인 대화.
118+
- 예시 : 감정에 기반한 주장을 하거나, 논리적 근거 없이 의견을 제시하는 것.
119+
120+
ESTP (모험적인 활동가):
121+
- 지루한 대화나 지나치게 이론적인 논의.
122+
- 예시 : 복잡한 이론이나 과도한 분석을 요구하는 대화. 즉흥적인 행동을 비판하는 것.
123+
124+
ESFP (사교적인 연예인):
125+
- 부정적인 대화나 지나치게 심각한 주제.
126+
- 예시 : 우울한 이야기나 비관적인 전망을 이야기하는 것. 너무 진지한 주제로 대화하는 것.
127+
128+
ENFP (열정적인 활동가):
129+
- 제한적이거나 비판적인 대화.
130+
- 예시 : 새로운 아이디어를 억누르거나, 비판적인 태도로 접근하는 대화.
131+
132+
ENTP (발명가):
133+
- 고정관념이나 전통적인 대화.
134+
- 예시 : 기존의 방식을 고수하고 새로운 아이디어를 받아들이지 않는 대화.
135+
136+
ESTJ (효율적인 관리자):
137+
- 비효율적인 대화나 감정적인 논의.
138+
- 예시 : 감정적인 문제를 과도하게 다루거나, 실질적인 해결책 없이 불만을 토로하는 것.
139+
140+
ESFJ (사교적인 조정자):
141+
- 갈등을 일으키는 대화.
142+
- 예시 : 사람들 간의 갈등을 부추기거나, 비판적인 태도로 대화하는 것.
143+
144+
ENFJ (카리스마 있는 리더):
145+
- 비협조적인 대화.
146+
- 예시 : 팀워크를 무시하고 개인적인 이익만을 추구하는 대화.
147+
148+
ENTJ (결단력 있는 지휘관):
149+
- 비효율적이거나 비논리적인 대화.
150+
- 예시 : 목표 달성을 방해하는 비효율적인 논의나, 감정적인 요소를 과도하게 강조하는 것.`
151+
}
152+
];

‎src/constants/PRIVACY.ts‎

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

‎src/constants/TERMS.ts‎

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

0 commit comments

Comments
 (0)