Skip to content

Commit 5ac7bb3

Browse files
authored
Merge pull request #74 from MBTips/feature/mbti-테스트-페이지-ui-작업
feat: mbti 테스트 페이지 UI 작업
2 parents aa9ac4d + cf72458 commit 5ac7bb3

File tree

15 files changed

+412
-3
lines changed

15 files changed

+412
-3
lines changed

public/icon/restart.svg

Lines changed: 3 additions & 0 deletions
Loading

public/image/ENTP.png

-6.59 KB
Loading

public/image/Rectangle.png

5.95 KB
Loading

public/image/mbti_test.png

4.6 KB
Loading
4.04 KB
Loading
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const MbtiAnswerButtons = ({ content }: { content: string[] }) => {
2+
3+
const commonStyle = "flex justify-center items-center bg-primary-pale border-1 border-primary-light rounded-lg w-[335px] h-[80px] font-medium text-primary-normal text-lg";
4+
5+
return (
6+
<div className="flex flex-col gap-9">
7+
<button className={commonStyle}>
8+
{content[0]}
9+
</button>
10+
<button className={commonStyle}>
11+
{content[1]}
12+
</button>
13+
</div>
14+
)
15+
}
16+
17+
export default MbtiAnswerButtons;
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { useNavigate } from "react-router-dom";
2+
3+
const RestartButton = () => {
4+
const navigate = useNavigate();
5+
6+
const goFirstStep = () => {
7+
navigate("/mbti-test");
8+
}
9+
10+
return (
11+
<button className="flex justify-center items-center bg-gray-100 rounded-lg w-[72px] h-[60px]" onClick={goFirstStep}>
12+
<img src="/icon/restart.svg" alt="다시하기 버튼" width={24} height={24} />
13+
</button>
14+
)
15+
}
16+
17+
export default RestartButton;
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const ShareButton = () => {
2+
return (
3+
<button className="flex justify-center items-center bg-primary-pale border border-primary-light rounded-lg w-full h-[60px] font-bold text-primary-normal">
4+
공유하기
5+
</button>
6+
)
7+
}
8+
9+
export default ShareButton;

src/constants/MBTI_RESULT_INFO.ts

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
export const MBTI_RESULT_INFO = {
2+
ENTP: {
3+
tag: ["창의적인 도전자", "아이디어 뱅크"],
4+
bgColor: "#DFFEC3",
5+
textColor: "#5D7C01",
6+
topic: ["새로운 아이디어, 사회 이슈", "철학적 토론, 반박과 논쟁"],
7+
attitude: ["다양한 시각에서 생각하는 걸 좋아하며, 가볍게 논쟁하는 것도 즐겨요", "정해진 틀보다는 자유로운 사고를 추구하는 편이에요"]
8+
},
9+
ENTJ: {
10+
tag: ["대담한 전략가", "리더형"],
11+
bgColor: "#FFE3E4",
12+
textColor: "#CA0F60",
13+
topic: ["목표 설정, 효율적인 문제 해결", "리더십, 미래 계획, 업계 트렌드"],
14+
attitude: ["논리적이고 직설적인 대화를 선호하며, 핵심을 짚고 빠르게 결론을 짓는 걸 좋아해요", "의미 없는 잡담보다는 실질적인 이야기를 나누는 걸 더 즐깁니다"]
15+
},
16+
INTJ: {
17+
tag: ["전략적 사색가", "마스터마인드"],
18+
bgColor: "#D5D6FF",
19+
textColor: "#110097",
20+
topic: ["미래 전망, 자기계발", "시스템 분석, 철학적 논의"],
21+
attitude: ["논리적이고 깊이 있는 대화, 감정보다는 명확한 근거, 분석을 선호해요", "의미 없는 수다는 피하는 편이에요"]
22+
},
23+
INTP: {
24+
tag: ["논리적인 사색가", "철학자형"],
25+
bgColor: "#E3FDF0",
26+
textColor: "#006E39",
27+
topic: ["과학, 기술, 철학", "가설 검증, 개념적 사고"],
28+
attitude: ["깊이 있는 탐구를 즐기며, 한 가지 주제를 깊게 파고드는 걸 좋아해요", "즉흥적인 감정 교류보다는 체계적인 논의를 선호합니다"]
29+
},
30+
ENFP: {
31+
tag: ["에너제틱한 모험가", "자유로운 영혼"],
32+
bgColor: "#FFDC92",
33+
textColor: "#B66D00",
34+
topic: ["꿈, 모험, 감정 표현", "창의적인 아이디어"],
35+
attitude: ["즉흥적이고 밝은 분위기 감성적인 대화를 즐겨요", "활기찬 분위기에서 긍정적인 대화를 나누는 것을 선호해요"]
36+
},
37+
ISTJ: {
38+
tag: ["신중한 관리자", "책임감 있는 성향"],
39+
bgColor: "#C7D0FF",
40+
textColor: "#1E35AB",
41+
topic: ["업무, 전통적인 가치관", "실질적인 목표, 역사나 경험 공유"],
42+
attitude: ["신중한 대화 태도와 논리적인 대화 주제를 선호해요", "가벼운 잡담보다는 현실적인 이야기를 좋아해요"]
43+
},
44+
ISFJ: {
45+
tag: ["용감한 수호자", "성실한 보호자"],
46+
bgColor: "#FFE4BA",
47+
textColor: "#875900",
48+
topic: ["인간관계, 따뜻한 기억", "전통적인 가치, 일상 이야기"],
49+
attitude: ["조용하지만 공감력 있는 대화를 선호하며, 감정 공유를 중요하게 여겨요", "상대방의 기분을 배려하는 대화를 즐깁니다"]
50+
},
51+
ESTJ: {
52+
tag: ["체계적인 관리자", "현실주의자"],
53+
bgColor: "#BAF1FF",
54+
textColor: "#064B8F",
55+
topic: ["실용적인 해결책, 업무 관련 대화", "조직 관리, 책임감 있는 행동"],
56+
attitude: ["현실적이고 구체적인 대화를 선호하며, 논리적으로 정리된 대화를 좋아해요", "감정적인 논의보다는 실질적인 결론을 중시하는 편이에요"]
57+
},
58+
ESFJ: {
59+
tag: ["사교적인 보호자", "배려심 많음"],
60+
bgColor: "#D1F1FF",
61+
textColor: "#0044A2",
62+
topic: ["인간관계, 일상 이야기", "감정 나누기, 친목"],
63+
attitude: ["따뜻하고 사교적인 분위기를 조성하며 서로 정겨운 대화를 선호해요", "타인의 감정을 배려하는 대화를 중요하게 생각해요"]
64+
},
65+
INFJ: {
66+
tag: ["조용한 이상주의자", "깊은 통찰력"],
67+
bgColor: "#B8DFFF",
68+
textColor: "#112B78",
69+
topic: ["철학적 질문, 삶의 의미", "인간 심리, 영적인 이야기"],
70+
attitude: ["가벼운 대화 주제보다 깊고 진지한 대화를 선호해요", "대화를 하면서 감정적으로 연결되는 걸 중요하게 여겨요."]
71+
},
72+
INFP: {
73+
tag: ["이상적인 몽상가", "감성적인 성향"],
74+
bgColor: "#F0D5FF",
75+
textColor: "#5400C0",
76+
topic: ["가치관, 꿈", "예술, 감정 표현"],
77+
attitude: ["가벼운 주제보다는 진솔하고 감정적인 대화를 좋아해요", "타인의 감정을 배려하는 태도를 중요하게 여겨요"]
78+
},
79+
ENFJ: {
80+
tag: ["타인을 이끄는 조력자", "따뜻한 리더형"],
81+
bgColor: "#FFEBA5",
82+
textColor: "#B66D00",
83+
topic: ["인간관계, 감정 표현", "성장 이야기, 동기부여"],
84+
attitude: ["상대방이 편안함을 느끼도록 이야기 하는 걸 중요하게 여겨요", "따뜻하고 공감하는 대화를 좋아해요"]
85+
},
86+
ISTP: {
87+
tag: ["독립적인 실용주의자", "문제 해결사"],
88+
bgColor: "#B7DEFF",
89+
textColor: "#055FAB",
90+
topic: ["기술, 기계, 스포츠", "실용적인 해결책"],
91+
attitude: ["필요할 때만 말하는 편이며, 쓸데없는 감정적인 대화를 피하는 성향이 있어요", "ISTP의 관심사를 파악해서 차분하고 공감적으로 대화를 시도해보세요"]
92+
},
93+
ISFP: {
94+
tag: ["호기심 많은 예술가", "자유로운 감성형"],
95+
bgColor: "#DCFFE4",
96+
textColor: "#008B1F",
97+
topic: ["예술, 음악, 여행", "감성적인 경험, 자연"],
98+
attitude: ["감정을 중시하며, 차분하고 자유로운 대화를 좋아해요", "즉흥적인 분위기에서 편안하게 이야기하는 걸 선호해요"]
99+
},
100+
ESTP: {
101+
tag: ["에너제틱한 모험가", "문제 해결사"],
102+
bgColor: "#C8F7EE",
103+
textColor: "#064B8F",
104+
topic: ["현실적인 문제 해결, 스포츠", "여행, 즉흥적인 활동"],
105+
attitude: ["무거운 대화 주제보다 가볍고 재치 있는 대화를 선호해요", "지적인 논의보다는 실제적인 이야기를 좋아해요"]
106+
},
107+
ESFP: {
108+
tag: ["활기찬 활동가", "분위기 메이커"],
109+
bgColor: "#FFDBE4",
110+
textColor: "#D01287",
111+
topic: ["재미있는 경험, 유머", "연예인 이야기, 즉흥적인 활동"],
112+
attitude: ["밝고 긍정적인 에너지를 중요하게 여기며 긍정적인 대화 주제를 선호해요", "가벼운 농담과 유머를 좋아해요"]
113+
}
114+
};

src/constants/TEST_QNA.ts

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
export const TEST_QNA = [
2+
{
3+
number: 1,
4+
question: `상대방은 모임에서 주로\n어떤 모습을 보이나요?`,
5+
answers: [
6+
"중심에 서서 분위기를 띄우고 활발하게 교류한다.",
7+
"조용히 관찰하며 필요할 때 의견을 낸다."
8+
]
9+
},
10+
{
11+
number: 2,
12+
question: "상대방은 새로운 아이디어를 어떻게 이야기 하나요?",
13+
answers: [
14+
"현실적이고 실용적인 예시를 든다.",
15+
"개념적이고 추상적인 설명을 한다."
16+
]
17+
},
18+
{
19+
number: 3,
20+
question: "상대방은 고민을 어떻게 들어주나요?",
21+
answers: [
22+
"논리적으로 해결책을 분석하려 한다.",
23+
"감정적으로 공감하며 들어준다."
24+
]
25+
},
26+
{
27+
number: 4,
28+
question: "상대방은 일정을 어떻게 세우는 편인가요?",
29+
answers: [
30+
"세부적인 계획을 세워 체계적으로 움직인다.",
31+
"즉흥적으로 행동하며 변화에 유연하게 대처한다."
32+
]
33+
},
34+
{
35+
number: 5,
36+
question: "상대방은 스트레스를 받을 때 어떻게 행동하나요?",
37+
answers: [
38+
"혼자 조용히 해결하며 감정을 잘 드러내지 않는다.",
39+
"주변 사람들과 이야기하며 감정을 공유한다."
40+
]
41+
},
42+
{
43+
number: 6,
44+
question: "상대방은 평소 대화에서 어떤 주제를 선호하나요?",
45+
answers: [
46+
"실생활과 관련된 구체적이고 현실적인 이야기",
47+
"철학적이거나 미래에 대한 개념적인 이야기"
48+
]
49+
},
50+
{
51+
number: 7,
52+
question: "상대방이 다른 사람들과 갈등이 있을 때, 어떻게 행동하나요?",
53+
answers: [
54+
"논리적으로 상황을 정리하며 해결하려 한다.",
55+
"상대방의 감정을 고려하며 의견을 조율한다."
56+
]
57+
},
58+
{
59+
number: 8,
60+
question: "상대방은 갑작스러운 변화에 어떻게 대응하나요?",
61+
answers: [
62+
"미리 준비된 계획을 기반으로 대처한다.",
63+
"상황을 빠르게 파악하고 유연하게 대처한다."
64+
]
65+
},
66+
{
67+
number: 9,
68+
question: "상대방이 주변 사람들과 시간을 보낼 때, 어떤 모습인가요?",
69+
answers: [
70+
"여러 사람과 두루두루 친하게 지낸다.",
71+
"소수의 사람들과 깊이 있는 대화를 나눈다."
72+
]
73+
},
74+
{
75+
number: 10,
76+
question: "상대방은 과거의 일을 기억할 때, 어떤 특징이 있나요?",
77+
answers: [
78+
"구체적인 날짜, 장소, 사람 등 정보를 기억한다.",
79+
"전체적인 흐름과 의미를 중심으로 기억한다."
80+
]
81+
},
82+
{
83+
number: 11,
84+
question: "상대방은 문제를 해결할 때 어떤 접근 방식을 보이나요?",
85+
answers: [
86+
"원인을 분석하고 논리적으로 해결하려 한다.",
87+
"직관을 따르거나 사람들의 감정을 고려한다."
88+
]
89+
},
90+
{
91+
number: 12,
92+
question: "상대방은 업무나 과제를 수행할 때 어떤 모습을 보이나요?",
93+
answers: [
94+
"미리 계획하고 체계적으로 진행한다.",
95+
"기한에 맞춰 유동적으로 조정하며 마무리한다."
96+
]
97+
}
98+
]

0 commit comments

Comments
 (0)