diff --git a/src/App.tsx b/src/App.tsx index 1c6bc5d..a650727 100644 --- a/src/App.tsx +++ b/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() { } /> } /> + } /> }> } /> } /> diff --git a/src/assets/images/CDEI.png b/src/assets/images/CDEI.png new file mode 100644 index 0000000..2e86a0d Binary files /dev/null and b/src/assets/images/CDEI.png differ diff --git a/src/assets/images/CDIE.png b/src/assets/images/CDIE.png new file mode 100644 index 0000000..e79df9c Binary files /dev/null and b/src/assets/images/CDIE.png differ diff --git a/src/assets/images/CEDI.png b/src/assets/images/CEDI.png new file mode 100644 index 0000000..714665b Binary files /dev/null and b/src/assets/images/CEDI.png differ diff --git a/src/assets/images/CEID.png b/src/assets/images/CEID.png new file mode 100644 index 0000000..87dbd21 Binary files /dev/null and b/src/assets/images/CEID.png differ diff --git a/src/assets/images/CIDE.png b/src/assets/images/CIDE.png new file mode 100644 index 0000000..01e044e Binary files /dev/null and b/src/assets/images/CIDE.png differ diff --git a/src/assets/images/CIED.png b/src/assets/images/CIED.png new file mode 100644 index 0000000..0dd93a0 Binary files /dev/null and b/src/assets/images/CIED.png differ diff --git a/src/assets/images/DCEI.png b/src/assets/images/DCEI.png new file mode 100644 index 0000000..2a09e5f Binary files /dev/null and b/src/assets/images/DCEI.png differ diff --git a/src/assets/images/DCIE.png b/src/assets/images/DCIE.png new file mode 100644 index 0000000..d1e01f1 Binary files /dev/null and b/src/assets/images/DCIE.png differ diff --git a/src/assets/images/DECI.png b/src/assets/images/DECI.png new file mode 100644 index 0000000..e906030 Binary files /dev/null and b/src/assets/images/DECI.png differ diff --git a/src/assets/images/DEIC.png b/src/assets/images/DEIC.png new file mode 100644 index 0000000..d564e58 Binary files /dev/null and b/src/assets/images/DEIC.png differ diff --git a/src/assets/images/DICE.png b/src/assets/images/DICE.png new file mode 100644 index 0000000..0b0ae97 Binary files /dev/null and b/src/assets/images/DICE.png differ diff --git a/src/assets/images/DIEC.png b/src/assets/images/DIEC.png new file mode 100644 index 0000000..542f53d Binary files /dev/null and b/src/assets/images/DIEC.png differ diff --git a/src/assets/images/ECDI.png b/src/assets/images/ECDI.png new file mode 100644 index 0000000..d26bf33 Binary files /dev/null and b/src/assets/images/ECDI.png differ diff --git a/src/assets/images/ECID.png b/src/assets/images/ECID.png new file mode 100644 index 0000000..8e1afd9 Binary files /dev/null and b/src/assets/images/ECID.png differ diff --git a/src/assets/images/EDCI.png b/src/assets/images/EDCI.png new file mode 100644 index 0000000..7d55e85 Binary files /dev/null and b/src/assets/images/EDCI.png differ diff --git a/src/assets/images/EDIC.png b/src/assets/images/EDIC.png new file mode 100644 index 0000000..559ee9c Binary files /dev/null and b/src/assets/images/EDIC.png differ diff --git a/src/assets/images/EICD.png b/src/assets/images/EICD.png new file mode 100644 index 0000000..62bf973 Binary files /dev/null and b/src/assets/images/EICD.png differ diff --git a/src/assets/images/EIDC.png b/src/assets/images/EIDC.png new file mode 100644 index 0000000..a7b936c Binary files /dev/null and b/src/assets/images/EIDC.png differ diff --git a/src/assets/images/ICDE.png b/src/assets/images/ICDE.png new file mode 100644 index 0000000..4d032f5 Binary files /dev/null and b/src/assets/images/ICDE.png differ diff --git a/src/assets/images/ICED.png b/src/assets/images/ICED.png new file mode 100644 index 0000000..5d447bf Binary files /dev/null and b/src/assets/images/ICED.png differ diff --git a/src/assets/images/IDCE.png b/src/assets/images/IDCE.png new file mode 100644 index 0000000..5adfbf6 Binary files /dev/null and b/src/assets/images/IDCE.png differ diff --git a/src/assets/images/IDEC.png b/src/assets/images/IDEC.png new file mode 100644 index 0000000..1915b8e Binary files /dev/null and b/src/assets/images/IDEC.png differ diff --git a/src/assets/images/IECD.png b/src/assets/images/IECD.png new file mode 100644 index 0000000..c457a22 Binary files /dev/null and b/src/assets/images/IECD.png differ diff --git a/src/assets/images/IEDC.png b/src/assets/images/IEDC.png new file mode 100644 index 0000000..15b43ee Binary files /dev/null and b/src/assets/images/IEDC.png differ diff --git a/src/pages/EbtiResultPage.tsx b/src/pages/EbtiResultPage.tsx index a486ceb..ffd00a3 100644 --- a/src/pages/EbtiResultPage.tsx +++ b/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 = { + ICDE: ICDEImage, + }; - // ✅ 수정된 부분: EBTI 유형에 따라 이미지 파일명 자동 매칭 - const imageUrl = `/images/ebti/${type}.png`; + // ✅ 이미지 경로 + const imageUrl = + imageMap[type] || 'https://placehold.co/221x429?text=No+Image'; return (
{/* 본문 */}
-
+
당신의 EBTI 유형은:
-
+
{type}
- {/* ✅ 수정된 이미지 부분 */} + {/* 이미지 */} {type} { - // 이미지가 없을 경우 기본 placeholder 표시 - (e.currentTarget as HTMLImageElement).src = - 'https://placehold.co/221x429?text=No+Image'; - }} />
{/* 버튼 */} diff --git a/src/pages/Survey/SurveyPage.tsx b/src/pages/Survey/SurveyPage.tsx new file mode 100644 index 0000000..bd5621a --- /dev/null +++ b/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 ( +
+ {/* 상단 타이틀 */} +
+
+
+ EBTI 유형 검사 +
+
+
+ + {/* 질문 영역 */} +
+ {questions.map((q, index) => ( + + ))} +
+ + {/* 제출 버튼 */} +
+ +
+
+ ); +} diff --git a/src/pages/Survey/component/QuestionBox.tsx b/src/pages/Survey/component/QuestionBox.tsx new file mode 100644 index 0000000..ed45e16 --- /dev/null +++ b/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 ( +
+
+
+ {index}. {text} +
+ +
+ {numbers.map((num) => ( +
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' + }`} + > + + {num} + +
+ ))} +
+
+ +
+ << Low + High >> +
+
+ ); +} diff --git a/src/stores/ useSurveyStore.ts b/src/stores/ useSurveyStore.ts new file mode 100644 index 0000000..4ebcec2 --- /dev/null +++ b/src/stores/ useSurveyStore.ts @@ -0,0 +1,16 @@ +import { create } from 'zustand'; + +interface SurveyState { + answers: Record; // {문항번호: 선택값} + setAnswer: (id: number, value: number) => void; + resetAnswers: () => void; +} + +export const useSurveyStore = create((set) => ({ + answers: {}, + setAnswer: (id, value) => + set((state) => ({ + answers: { ...state.answers, [id]: value }, + })), + resetAnswers: () => set({ answers: {} }), +}));