From 592b9c45b4247a5ea6b916b0c6bfecedccbbb3fc Mon Sep 17 00:00:00 2001 From: geumbin Date: Sun, 21 Apr 2024 03:39:12 +0900 Subject: [PATCH] =?UTF-8?q?:sparkles:=20Feat=20:=20Survey=20API=20?= =?UTF-8?q?=EC=B5=9C=EC=A2=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/@types/Survey.ts | 2 +- src/api/survey/postSurvey.tsx | 2 +- src/components/survey/GenderRadio.tsx | 6 +- src/components/survey/PurposeCheckbox.tsx | 75 +++++++---------------- src/pages/SurveyPage.tsx | 44 +++++++------ 5 files changed, 48 insertions(+), 81 deletions(-) diff --git a/src/api/@types/Survey.ts b/src/api/@types/Survey.ts index c5c02db..3d1b2aa 100644 --- a/src/api/@types/Survey.ts +++ b/src/api/@types/Survey.ts @@ -5,7 +5,7 @@ export interface PostSurveyRequest { occupation: string; region: string; source: string; - purpose: string; + purposes: string[] | undefined; } export interface PostSurveyResponse { diff --git a/src/api/survey/postSurvey.tsx b/src/api/survey/postSurvey.tsx index ace0538..79f11cb 100644 --- a/src/api/survey/postSurvey.tsx +++ b/src/api/survey/postSurvey.tsx @@ -4,7 +4,7 @@ import axiosInstance from '../axiosConfig'; // post 요청 export const PostSurvey = async (requestData: PostSurveyRequest): Promise => { try { - const response = await axiosInstance.post('/surveys/response', requestData); + const response = await axiosInstance.post('/surveys/responses', requestData); console.log('설문조사 전송 성공', response.data); return response.data; } catch (error) { diff --git a/src/components/survey/GenderRadio.tsx b/src/components/survey/GenderRadio.tsx index 88958ab..6b74831 100644 --- a/src/components/survey/GenderRadio.tsx +++ b/src/components/survey/GenderRadio.tsx @@ -7,7 +7,7 @@ interface Gender { } const GenderRadio: React.FC = ({ onGenderChange }) => { - const [gender, setGender] = useState('female'); + const [gender, setGender] = useState('FEMALE'); const handleGenderChange = (event: React.ChangeEvent) => { const newGender = event.target.value; setGender(newGender); @@ -21,10 +21,10 @@ const GenderRadio: React.FC = ({ onGenderChange }) => { - + 여성 - + 남성 diff --git a/src/components/survey/PurposeCheckbox.tsx b/src/components/survey/PurposeCheckbox.tsx index bf76002..c4b7003 100644 --- a/src/components/survey/PurposeCheckbox.tsx +++ b/src/components/survey/PurposeCheckbox.tsx @@ -1,36 +1,44 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Checkbox, Stack, Input, Text } from '@chakra-ui/react'; import * as S from '@/styles/survey/PurposeCheckbox.style'; interface Purpose { - onPurposeChange: (purpose: string) => void; - onOtherPurposeChange: (otherPurpose: string) => void; - // onPurposeChange: (purpose: string[]) => void; + onPurposeChange: (purpose: string[]) => void; } -const PurposeCheckbox: React.FC = ({ onPurposeChange, onOtherPurposeChange }) => { +const PurposeCheckbox: React.FC = ({ onPurposeChange }) => { const [checkedPurposes, setCheckedPurposes] = useState([]); + const [otherPurpose, setOtherPurpose] = useState(''); + const [isOtherSelected, setIsOtherSelected] = useState(false); + + useEffect(() => { + const updatedPurposes = [...checkedPurposes]; + if (isOtherSelected) { + updatedPurposes.push(otherPurpose); + } + onPurposeChange(updatedPurposes); + }, [checkedPurposes, otherPurpose, isOtherSelected, onPurposeChange]); + // purposes const handlePurposeChange = (event: React.ChangeEvent) => { const isChecked = event.target.checked; const purpose = event.target.value; let updatedPurposes: string[]; if (isChecked) { - updatedPurposes = [...checkedPurposes, purpose]; // 체크된 경우 배열에 추가 + updatedPurposes = [...checkedPurposes, purpose]; } else { - updatedPurposes = checkedPurposes.filter(item => item !== purpose); // 체크 해제된 경우 배열에서 제거 + updatedPurposes = checkedPurposes.filter(item => item !== purpose); } - setCheckedPurposes(updatedPurposes); // 최종 업데이트 한번만 수행 - onPurposeChange(updatedPurposes.join(', ')); // 선택된 목적들을 문자열로 변환하여 전달 + setCheckedPurposes(updatedPurposes); }; - const [otherPurpose, setOtherPurpose] = useState(''); + // otherPurpose const handleOtherPurposeChange = (event: React.ChangeEvent) => { const newOtherPurpose = event.target.value; setOtherPurpose(newOtherPurpose); - onOtherPurposeChange(newOtherPurpose); + setIsOtherSelected(!!newOtherPurpose); }; return ( @@ -58,7 +66,9 @@ const PurposeCheckbox: React.FC = ({ onPurposeChange, onOtherPurposeCha - 기타 + + 기타 + = ({ onPurposeChange, onOtherPurposeCha }; export default PurposeCheckbox; - -// import React from 'react'; -// import { Checkbox, Stack, Input, Text } from '@chakra-ui/react'; -// import * as S from '@/styles/survey/PurposeCheckbox.style'; - -// interface Purpose { -// onPurposeChange: (city: string) => void; -// } - -// const PurposeCheckbox: React.FC = ({ onPurposeChange }) => { -// const [purpose, setPurpose] = useState('서울'); -// const handlePurposeChange = (event: React.ChangeEvent) => { -// const newPurpose = event.target.value; -// setPurpose(newPurpose); -// onPurposeChange(newPurpose); -// }; - -// return ( -// <> -// -// Past-Forward 서비스를 알게 된 경로는 무엇입니까? -// (복수 선택 가능) -// -// -// -// 업무 목적 -// 개인 발전 -// 팀 협업 -// 프로젝트 관리 -// 학습 및 개선 -// -// -// 기타 -// -// -// -// -// -// -// ); -// }; diff --git a/src/pages/SurveyPage.tsx b/src/pages/SurveyPage.tsx index 7e3403d..4cf9f43 100644 --- a/src/pages/SurveyPage.tsx +++ b/src/pages/SurveyPage.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; import { Text, Button, Divider } from '@chakra-ui/react'; -// import { PostSurvey } from '@/api/survey/postSurvey'; +import { PostSurvey } from '@/api/survey/postSurvey'; import AgeInput from '@/components/survey/AgeInput'; import CityRadio from '@/components/survey/CityRadio'; import GenderRadio from '@/components/survey/GenderRadio'; @@ -14,13 +15,14 @@ const SurveyPage: React.FC = () => { localStorage.setItem('surveyVisited', 'true'); }, []); + const navigate = useNavigate(); + const handleSurveyButtonClick = () => { handleSurvey(); }; const handleSurvey = async () => { try { - // + path 기타 + purpose 기타 + purpose 복수 답안 + 직업 value console.log( '나이는:', age, @@ -34,36 +36,34 @@ const SurveyPage: React.FC = () => { path, '/목적은(복수선택):', purpose, - '/기타 목적은:', - otherPurpose, ); - // const SurveyRequest = await PostSurvey({ - // age: age, - // gender: gender, - // occupation: job, - // region: city, - // source: path, - // purpose: purpose, - // otherPurpose: otherPurpose - // }); - // console.log('설문조사 전송 성공', SurveyRequest); - // alert('설문조사가 전송되었습니다.'); + const SurveyRequest = await PostSurvey({ + age: numAge, + gender: gender, + occupation: job, + region: city, + source: path, + purposes: purpose, + }); + console.log('설문조사 전송 성공', SurveyRequest); + alert('설문조사가 전송되었습니다.'); + navigate('/'); } catch (error) { console.error('실패입니다.', error); } }; const [age, setAge] = useState(''); - const [gender, setGender] = useState('female'); + const [gender, setGender] = useState('FEMALE'); const [job, setJob] = useState(''); const [city, setCity] = useState('서울'); const [path, setPath] = useState(''); - const [purpose, setPurpose] = useState(); - const [otherPurpose, setOtherPurpose] = useState(); + const [purpose, setPurpose] = useState(); const handleAgeChange = (age: string) => { setAge(age); }; + const numAge: number = parseInt(age, 10); const handleGenderChange = (gender: string) => { setGender(gender); }; @@ -76,12 +76,10 @@ const SurveyPage: React.FC = () => { const handlePathChange = (path: string) => { setPath(path); }; - const handlePurposeChange = (purpose: string) => { + const handlePurposeChange = (purpose: string[]) => { setPurpose(purpose); }; - const handleOtherPurposeChange = (otherPurpose: string) => { - setOtherPurpose(otherPurpose); - }; + return ( <> @@ -99,7 +97,7 @@ const SurveyPage: React.FC = () => { - +