Skip to content

Commit b1914ed

Browse files
SoohyuniiiSoohyuniii
authored
Merge pull request #175 from Soohyuniii/feat/content-내-대화-시작하기-버튼-핸들러-구현
feat: Content 내 대화 시작하기 버튼 핸들러 구현
2 parents 5f1c122 + 80542e3 commit b1914ed

File tree

2 files changed

+163
-178
lines changed

2 files changed

+163
-178
lines changed

‎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/pages/Content.tsx‎

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

1717
const Content = () => {
8+
const navigate = useNavigate();
1729
const { id } = useParams<{ id: string }>();
173-
const content = contentData[Number(id)];
10+
const content = CONTENT_DATA[Number(id) - 1];
17411

17512
if (!content) {
17613
return <div className="mt-10 text-center">Content not found</div>;
17714
}
17815

179-
const handleStartChat = async () => {
180-
try {
181-
trackEvent("Click", {
182-
page: "일반 콘텐츠",
183-
element: "대화 시작하기"
184-
});
185-
const response = await instance.post("/api/fast-friend");
186-
console.log("Success!!", response.data);
187-
} catch (error) {
188-
console.error("Select Info Error", error);
189-
}
16+
const handleStartChat = () => {
17+
trackEvent("Click", {
18+
page: "일반 콘텐츠",
19+
element: "대화 시작하기"
20+
});
21+
22+
navigate("/select-info", { state: "fastFriend" });
19023
};
19124

19225
const renderContentWithLineBreaks = (text: string) => {

0 commit comments

Comments
 (0)