Merge pull request #74 from MBTips/feature/mbti-테스트-페이지-ui-작업

feat: mbti 테스트 페이지 UI 작업

Author: junjeeong

public/icon/restart.svg

@@ -0,0 +1,17 @@
+const MbtiAnswerButtons = ({ content }: { content: string[] }) => {
+    
+    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";
+
+    return (
+        <div className="flex flex-col gap-9">
+            <button className={commonStyle}>
+            {content[0]}
+            </button>
+            <button className={commonStyle}>
+            {content[1]}
+            </button>
+        </div>
+  )
+}
+
+export default MbtiAnswerButtons;

public/image/ENTP.png

@@ -0,0 +1,17 @@
+import { useNavigate } from "react-router-dom";
+
+const RestartButton = () => {
+    const navigate = useNavigate();
+
+    const goFirstStep = () => {
+        navigate("/mbti-test");
+    }
+
+    return (
+        <button className="flex justify-center items-center bg-gray-100 rounded-lg w-[72px] h-[60px]" onClick={goFirstStep}>
+            <img src="/icon/restart.svg" alt="다시하기 버튼" width={24} height={24} />
+        </button>
+  )
+}
+
+export default RestartButton;

public/image/Rectangle.png

@@ -0,0 +1,9 @@
+const ShareButton = () => {
+    return (
+        <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">
+            공유하기
+      </button>
+  )
+}
+
+export default ShareButton;

public/image/mbti_test.png

@@ -0,0 +1,114 @@
+export const MBTI_RESULT_INFO = {
+    ENTP: {
+        tag: ["창의적인 도전자", "아이디어 뱅크"],
+        bgColor: "#DFFEC3",
+        textColor: "#5D7C01",
+        topic: ["새로운 아이디어, 사회 이슈", "철학적 토론, 반박과 논쟁"],
+        attitude: ["다양한 시각에서 생각하는 걸 좋아하며, 가볍게 논쟁하는 것도 즐겨요", "정해진 틀보다는 자유로운 사고를 추구하는 편이에요"]
+    },
+    ENTJ: {
+        tag: ["대담한 전략가", "리더형"],
+        bgColor: "#FFE3E4",
+        textColor: "#CA0F60",
+        topic: ["목표 설정, 효율적인 문제 해결", "리더십, 미래 계획, 업계 트렌드"],
+        attitude: ["논리적이고 직설적인 대화를 선호하며, 핵심을 짚고 빠르게 결론을 짓는 걸 좋아해요", "의미 없는 잡담보다는 실질적인 이야기를 나누는 걸 더 즐깁니다"]
+    },
+    INTJ: {
+        tag: ["전략적 사색가", "마스터마인드"],
+        bgColor: "#D5D6FF",
+        textColor: "#110097",
+        topic: ["미래 전망, 자기계발", "시스템 분석, 철학적 논의"],
+        attitude: ["논리적이고 깊이 있는 대화, 감정보다는 명확한 근거, 분석을 선호해요", "의미 없는 수다는 피하는 편이에요"]
+    },
+    INTP: {
+        tag: ["논리적인 사색가", "철학자형"],
+        bgColor: "#E3FDF0",
+        textColor: "#006E39",
+        topic: ["과학, 기술, 철학", "가설 검증, 개념적 사고"],
+        attitude: ["깊이 있는 탐구를 즐기며, 한 가지 주제를 깊게 파고드는 걸 좋아해요", "즉흥적인 감정 교류보다는 체계적인 논의를 선호합니다"]
+    },
+    ENFP: {
+        tag: ["에너제틱한 모험가", "자유로운 영혼"],
+        bgColor: "#FFDC92",
+        textColor: "#B66D00",
+        topic: ["꿈, 모험, 감정 표현", "창의적인 아이디어"],
+        attitude: ["즉흥적이고 밝은 분위기 감성적인 대화를 즐겨요", "활기찬 분위기에서 긍정적인 대화를 나누는 것을 선호해요"]
+    },
+    ISTJ: {
+        tag: ["신중한 관리자", "책임감 있는 성향"],
+        bgColor: "#C7D0FF",
+        textColor: "#1E35AB",
+        topic: ["업무, 전통적인 가치관", "실질적인 목표, 역사나 경험 공유"],
+        attitude: ["신중한 대화 태도와 논리적인 대화 주제를 선호해요", "가벼운 잡담보다는 현실적인 이야기를 좋아해요"]
+    },
+    ISFJ: {
+        tag: ["용감한 수호자", "성실한 보호자"],
+        bgColor: "#FFE4BA",
+        textColor: "#875900",
+        topic: ["인간관계, 따뜻한 기억", "전통적인 가치, 일상 이야기"],
+        attitude: ["조용하지만 공감력 있는 대화를 선호하며, 감정 공유를 중요하게 여겨요", "상대방의 기분을 배려하는 대화를 즐깁니다"]
+    },
+    ESTJ: {
+        tag: ["체계적인 관리자", "현실주의자"],
+        bgColor: "#BAF1FF",
+        textColor: "#064B8F",
+        topic: ["실용적인 해결책, 업무 관련 대화", "조직 관리, 책임감 있는 행동"],
+        attitude: ["현실적이고 구체적인 대화를 선호하며, 논리적으로 정리된 대화를 좋아해요", "감정적인 논의보다는 실질적인 결론을 중시하는 편이에요"]
+    },
+    ESFJ: {
+        tag: ["사교적인 보호자", "배려심 많음"],
+        bgColor: "#D1F1FF",
+        textColor: "#0044A2",
+        topic: ["인간관계, 일상 이야기", "감정 나누기, 친목"],
+        attitude: ["따뜻하고 사교적인 분위기를 조성하며 서로 정겨운 대화를 선호해요", "타인의 감정을 배려하는 대화를 중요하게 생각해요"]
+    },
+    INFJ: {
+        tag: ["조용한 이상주의자", "깊은 통찰력"],
+        bgColor: "#B8DFFF",
+        textColor: "#112B78",
+        topic: ["철학적 질문, 삶의 의미", "인간 심리, 영적인 이야기"],
+        attitude: ["가벼운 대화 주제보다 깊고 진지한 대화를 선호해요", "대화를 하면서 감정적으로 연결되는 걸 중요하게 여겨요."]
+    },
+    INFP: {
+        tag: ["이상적인 몽상가", "감성적인 성향"],
+        bgColor: "#F0D5FF",
+        textColor: "#5400C0",
+        topic: ["가치관, 꿈", "예술, 감정 표현"],
+        attitude: ["가벼운 주제보다는 진솔하고 감정적인 대화를 좋아해요", "타인의 감정을 배려하는 태도를 중요하게 여겨요"]
+    },
+    ENFJ: {
+        tag: ["타인을 이끄는 조력자", "따뜻한 리더형"],
+        bgColor: "#FFEBA5",
+        textColor: "#B66D00",
+        topic: ["인간관계, 감정 표현", "성장 이야기, 동기부여"],
+        attitude: ["상대방이 편안함을 느끼도록 이야기 하는 걸 중요하게 여겨요", "따뜻하고 공감하는 대화를 좋아해요"]
+    },
+    ISTP: {
+        tag: ["독립적인 실용주의자", "문제 해결사"],
+        bgColor: "#B7DEFF",
+        textColor: "#055FAB",
+        topic: ["기술, 기계, 스포츠", "실용적인 해결책"],
+        attitude: ["필요할 때만 말하는 편이며, 쓸데없는 감정적인 대화를 피하는 성향이 있어요", "ISTP의 관심사를 파악해서 차분하고 공감적으로 대화를 시도해보세요"]
+    },
+    ISFP: {
+        tag: ["호기심 많은 예술가", "자유로운 감성형"],
+        bgColor: "#DCFFE4",
+        textColor: "#008B1F",
+        topic: ["예술, 음악, 여행", "감성적인 경험, 자연"],
+        attitude: ["감정을 중시하며, 차분하고 자유로운 대화를 좋아해요", "즉흥적인 분위기에서 편안하게 이야기하는 걸 선호해요"]
+    },
+    ESTP: {
+        tag: ["에너제틱한 모험가", "문제 해결사"],
+        bgColor: "#C8F7EE",
+        textColor: "#064B8F",
+        topic: ["현실적인 문제 해결, 스포츠", "여행, 즉흥적인 활동"],
+        attitude: ["무거운 대화 주제보다 가볍고 재치 있는 대화를 선호해요", "지적인 논의보다는 실제적인 이야기를 좋아해요"]
+    },
+    ESFP: {
+        tag: ["활기찬 활동가", "분위기 메이커"],
+        bgColor: "#FFDBE4",
+        textColor: "#D01287",
+        topic: ["재미있는 경험, 유머", "연예인 이야기, 즉흥적인 활동"],
+        attitude: ["밝고 긍정적인 에너지를 중요하게 여기며 긍정적인 대화 주제를 선호해요", "가벼운 농담과 유머를 좋아해요"]
+    }
+};

public/image/mbti_test_result_image.png

@@ -0,0 +1,98 @@
+export const TEST_QNA = [
+    {
+        number: 1,
+        question: `상대방은 모임에서 주로\n어떤 모습을 보이나요?`,
+        answers: [
+            "중심에 서서 분위기를 띄우고 활발하게 교류한다.",
+            "조용히 관찰하며 필요할 때 의견을 낸다."
+        ]
+    },
+    {
+        number: 2,
+        question: "상대방은 새로운 아이디어를 어떻게 이야기 하나요?",
+        answers: [
+            "현실적이고 실용적인 예시를 든다.",
+            "개념적이고 추상적인 설명을 한다."
+        ]
+    },
+    {
+        number: 3,
+        question: "상대방은 고민을 어떻게 들어주나요?",
+        answers: [
+            "논리적으로 해결책을 분석하려 한다.",
+            "감정적으로 공감하며 들어준다."
+        ]
+    },
+    {
+        number: 4,
+        question: "상대방은 일정을 어떻게 세우는 편인가요?",
+        answers: [
+            "세부적인 계획을 세워 체계적으로 움직인다.",
+            "즉흥적으로 행동하며 변화에 유연하게 대처한다."
+        ]
+    },
+    {
+        number: 5,
+        question: "상대방은 스트레스를 받을 때 어떻게 행동하나요?",
+        answers: [
+            "혼자 조용히 해결하며 감정을 잘 드러내지 않는다.",
+            "주변 사람들과 이야기하며 감정을 공유한다."
+        ]
+    },
+    {
+        number: 6,
+        question: "상대방은 평소 대화에서 어떤 주제를 선호하나요?",
+        answers: [
+            "실생활과 관련된 구체적이고 현실적인 이야기",
+            "철학적이거나 미래에 대한 개념적인 이야기"
+        ]
+    },
+    {
+        number: 7,
+        question: "상대방이 다른 사람들과 갈등이 있을 때, 어떻게 행동하나요?",
+        answers: [
+            "논리적으로 상황을 정리하며 해결하려 한다.",
+            "상대방의 감정을 고려하며 의견을 조율한다."
+        ]
+    },
+    {
+        number: 8,
+        question: "상대방은 갑작스러운 변화에 어떻게 대응하나요?",
+        answers: [
+            "미리 준비된 계획을 기반으로 대처한다.",
+            "상황을 빠르게 파악하고 유연하게 대처한다."
+        ]
+    },
+    {
+        number: 9,
+        question: "상대방이 주변 사람들과 시간을 보낼 때, 어떤 모습인가요?",
+        answers: [
+            "여러 사람과 두루두루 친하게 지낸다.",
+            "소수의 사람들과 깊이 있는 대화를 나눈다."
+        ]
+    },
+    {
+        number: 10,
+        question: "상대방은 과거의 일을 기억할 때, 어떤 특징이 있나요?",
+        answers: [
+            "구체적인 날짜, 장소, 사람 등 정보를 기억한다.",
+            "전체적인 흐름과 의미를 중심으로 기억한다."
+        ]
+    },
+    {
+        number: 11,
+        question: "상대방은 문제를 해결할 때 어떤 접근 방식을 보이나요?",
+        answers: [
+            "원인을 분석하고 논리적으로 해결하려 한다.",
+            "직관을 따르거나 사람들의 감정을 고려한다."
+        ]
+    },
+    {
+        number: 12,
+        question: "상대방은 업무나 과제를 수행할 때 어떤 모습을 보이나요?",
+        answers: [
+            "미리 계획하고 체계적으로 진행한다.",
+            "기한에 맞춰 유동적으로 조정하며 마무리한다."
+        ]
+    }
+]