9 feat 설문조사 페이지 퍼블리싱

src/App.tsx

@@ -3,6 +3,7 @@ import Layout from './components/Layout';
 import EbtiResultPage from './pages/EbtiResultPage';
 import LoginPage from './pages/Login/LoginPage.tsx';
 import RegisterPage from './pages/Login/RegisterPage.tsx';
+import SurveyPage from './pages/Survey/SurveyPage.tsx';
 
 function TeamPage() {
   return (
@@ -17,6 +18,7 @@ export default function App() {
     <Routes>
       <Route path="/login" element={<LoginPage />} />
       <Route path="/register" element={<RegisterPage />} />
+      <Route path="/survey" element={<SurveyPage />} />
       <Route element={<Layout />}>
         <Route path="/resultpage" element={<EbtiResultPage />} />
         <Route path="/team" element={<TeamPage />} />

src/pages/EbtiResultPage.tsx

@@ -1,47 +1,51 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+// ✅ 이미지 import
+import ICDEImage from '../assets/images/ICDE.png';
 
 export default function EbtiResultPage() {
   const navigate = useNavigate();
+  const location = useLocation();
+
+  // ✅ 설문 결과에서 전달받은 유형 (백엔드 연동 시 실제 값 사용)
+  const type = location.state?.type || 'ICDE'; // 백엔드 없을 땐 임시값 ICDE
 
-  // ✅ 임시 데이터
-  const type = 'ICDE';
+  // ✅ 유형별 이미지 매핑
+  const imageMap: Record<string, string> = {
+    ICDE: ICDEImage,
+  };
 
-  // ✅ 수정된 부분: EBTI 유형에 따라 이미지 파일명 자동 매칭
-  const imageUrl = `/images/ebti/${type}.png`;
+  // ✅ 이미지 경로
+  const imageUrl =
+    imageMap[type] || 'https://placehold.co/221x429?text=No+Image';
 
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-20 overflow-hidden bg-orange-50 pt-[50px]">
       {/* 본문 */}
       <div className="flex w-80 flex-col items-center justify-start">
         <div className="flex flex-col items-center justify-start gap-2 self-stretch">
-          <div className="h-11 self-stretch text-center font-['Pretendard_Variable'] text-3xl leading-9 font-semibold text-black">
+          <div className="h-11 text-center font-['Pretendard_Variable'] text-3xl font-semibold text-black">
             당신의 EBTI 유형은:
           </div>
-          <div className="h-14 self-stretch text-center font-['Pretendard_Variable'] text-5xl leading-[48px] font-semibold text-black">
+          <div className="h-14 text-center font-['Pretendard_Variable'] text-5xl font-semibold text-black">
             {type}
           </div>
         </div>
 
-        {/* ✅ 수정된 이미지 부분 */}
+        {/* 이미지 */}
         <img
           className="mt-4 h-96 w-56 object-contain"
           src={imageUrl}
           alt={type}
-          onError={(e) => {
-            // 이미지가 없을 경우 기본 placeholder 표시
-            (e.currentTarget as HTMLImageElement).src =
-              'https://placehold.co/221x429?text=No+Image';
-          }}
         />
       </div>
 
       {/* 버튼 */}
       <button
         onClick={() => navigate('/team')}
-        className="flex h-12 w-[600px] items-center justify-center gap-1.5 rounded-lg bg-yellow-400 px-6 py-2"
+        className="flex h-12 w-[600px] items-center justify-center rounded-lg bg-yellow-400 px-6 py-2"
       >
-        <span className="font-['Pretendard_Variable'] text-2xl leading-7 font-semibold text-white">
+        <span className="font-['Pretendard_Variable'] text-2xl font-semibold text-white">
           팀원 찾으러 가기
         </span>
       </button>

src/pages/Survey/SurveyPage.tsx

@@ -0,0 +1,101 @@
+// src/pages/Survey/SurveyPage.tsx
+import QuestionBox from './component/QuestionBox.tsx';
+import Button from '../../components/Button';
+import { useSurveyStore } from '../../stores/ useSurveyStore.ts';
+// import axiosInstance from "../../apis/axiosInstance";
+import { useNavigate } from 'react-router-dom';
+
+export default function SurveyPage() {
+  const { answers } = useSurveyStore();
+  const navigate = useNavigate();
+
+  const questions = [
+    '나는 좋아하는 일을 자주 한다',
+    '나는 행복과 보람을 자주 느낀다',
+    '내가 어떤 사람인지 자주 생각한다',
+    '내가 무엇을 원하는지 자주 생각한다',
+    '나는 정보를 얻기 위해 다른 사람들과 자주 교류 한다',
+    '나는 정기적으로 신문, 잡지, 뉴스레터 등을 통해 정보를 얻는다',
+    '나는 정보검색 할 때 새로운 사업 아이디어에 주목한다',
+    '나는 인터넷, SNS 등 매일 하고 새 정보를 적극적으로 검색한다',
+    '나는 관계없는 정보, 기술, 아이디어 등 연관성을 잘 발견한다',
+    '나는 관계없는 정보, 기술, 아이디어 등을 잘 조합한다',
+    '나는 서로 다른 분야 간 연결점을 잘 발견한다',
+    '나는 서로 다른 분야 간 연결점을 잘 결합한다',
+    '나는 사람들과 대화를 즐기며 자금을 잘 마련한다',
+    '나는 이익과 상관없이 콘텐츠 개발에 열정과 헌신을 다한다',
+    '나는 사람들을 설득해서 새로운 프로젝트에 참여시키고 앞서 행동을 잘 한다.',
+    '나는 사람들에게 용기와 희망을 주며 신중한 편이다',
+    '나는 잠재적인 기회를 직감적으로 느낀다',
+    '나는 수익성 있는 기회와 비영리 기회를 잘 구분한다',
+    '나는 부정 가치보다 긍정 가치를 더 자주 말한다',
+    '나는 다양한 기회 중에서 더 선한 것을 잘 선택한다',
+  ];
+
+  // ✅ 설문 응답을 백엔드 형식에 맞게 변환
+  const buildPayload = () => {
+    return {
+      data: {
+        question: questions.map((_, idx) => ({
+          QuestionId: idx,
+          answer: answers[idx + 1] || 0,
+        })),
+      },
+    };
+  };
+
+  const handleSubmit = async () => {
+    const answeredCount = Object.keys(answers).length;
+    if (answeredCount < questions.length) {
+      alert(`아직 ${questions.length - answeredCount}문항이 남았습니다!`);
+      return;
+    }
+
+    const payload = buildPayload();
+    console.log('📤 전송 준비 데이터:', payload);
+
+    try {
+      // ⚙️ 나중에 백엔드 연결 시 이 부분만 주석 해제
+      // const res = await axiosInstance.post("/api/survey/result", payload);
+      // navigate("/resultpage", { state: res.data });
+
+      // ✅ 지금은 mock 데이터로 결과 페이지로 이동
+      navigate('/resultpage', { state: payload });
+    } catch (error) {
+      console.error('❌ 설문 전송 실패:', error);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center justify-start gap-14 overflow-y-auto bg-orange-50 p-12">
+      {/* 상단 타이틀 */}
+      <div className="flex items-center justify-center">
+        <div className="flex h-12 w-[700px] items-center justify-center rounded-[20px] bg-yellow-400">
+          <div className="font-[Pretendard_Variable] text-4xl font-medium text-white">
+            EBTI 유형 검사
+          </div>
+        </div>
+      </div>
+
+      {/* 질문 영역 */}
+      <div className="flex w-full max-w-[1000px] flex-col gap-10 rounded-[30px] bg-white p-10 shadow-[0px_4px_4px_rgba(0,0,0,0.05)]">
+        {questions.map((q, index) => (
+          <QuestionBox key={index} index={index + 1} text={q} />
+        ))}
+      </div>
+
+      {/* 제출 버튼 */}
+      <div className="w-80">
+        <Button
+          variant="primary"
+          width="100%"
+          height="48px"
+          fontSize="20px"
+          onClick={handleSubmit}
+        >
+          내 유형 결과 보기
+        </Button>
+      </div>
+    </div>
+  );
+}

src/pages/Survey/component/QuestionBox.tsx

@@ -0,0 +1,46 @@
+// src/pages/Survey/components/QuestionBox.tsx
+import { useSurveyStore } from '../../../stores/ useSurveyStore.ts';
+
+interface QuestionBoxProps {
+  index: number;
+  text: string;
+}
+
+export default function QuestionBox({ index, text }: QuestionBoxProps) {
+  const numbers = Array.from({ length: 10 }, (_, i) => i + 1);
+  const { answers, setAnswer } = useSurveyStore();
+  const selected = answers[index];
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-6">
+      <div className="flex w-[922px] flex-col items-start justify-start gap-7">
+        <div className="font-[Pretendard_Variable] text-2xl font-semibold text-black">
+          {index}. {text}
+        </div>
+
+        <div className="flex flex-wrap items-center justify-start gap-10 px-7">
+          {numbers.map((num) => (
+            <div
+              key={num}
+              onClick={() => setAnswer(index, num)}
+              className={`flex h-12 w-12 cursor-pointer items-center justify-center rounded-3xl outline outline-1 outline-black/40 transition-all ${
+                selected === num
+                  ? 'bg-yellow-400 text-white'
+                  : 'bg-white hover:bg-yellow-100'
+              }`}
+            >
+              <span className="font-[Pretendard_Variable] text-2xl font-medium">
+                {num}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex w-[922px] items-center justify-between">
+        <span className="text-xl font-semibold text-black">&lt;&lt; Low</span>
+        <span className="text-xl font-semibold text-black">High &gt;&gt;</span>
+      </div>
+    </div>
+  );
+}

src/stores/ useSurveyStore.ts

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+
+interface SurveyState {
+  answers: Record<number, number>; // {문항번호: 선택값}
+  setAnswer: (id: number, value: number) => void;
+  resetAnswers: () => void;
+}
+
+export const useSurveyStore = create<SurveyState>((set) => ({
+  answers: {},
+  setAnswer: (id, value) =>
+    set((state) => ({
+      answers: { ...state.answers, [id]: value },
+    })),
+  resetAnswers: () => set({ answers: {} }),
+}));