✨ Feat : Survey API 최종 수정 (#199)

Co-authored-by: geumbin <[email protected]>

src/components/survey/GenderRadio.tsx

@@ -7,7 +7,6 @@ interface Gender {
 }
 
 const GenderRadio: React.FC<Gender> = ({ onGenderChange }) => {
-
   const [gender, setGender] = useState<string>('FEMALE');
 
   const handleGenderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -23,12 +22,10 @@ const GenderRadio: React.FC<Gender> = ({ onGenderChange }) => {
         <S.RadioContainer>
           <RadioGroup onChange={setGender} value={gender}>
             <Stack direction="row">
-
               <Radio colorScheme="brand" value="FEMALE" onChange={handleGenderChange}>
                 여성
               </Radio>
               <Radio colorScheme="brand" value="MALE" onChange={handleGenderChange}>
-
                 남성
               </Radio>
             </Stack>

src/components/survey/PurposeCheckbox.tsx

@@ -1,11 +1,9 @@
-
 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;
 }
 
@@ -30,7 +28,6 @@ const PurposeCheckbox: React.FC<Purpose> = ({ onPurposeChange }) => {
     let updatedPurposes: string[];
 
     if (isChecked) {
-
       updatedPurposes = [...checkedPurposes, purpose];
     } else {
       updatedPurposes = checkedPurposes.filter(item => item !== purpose);
@@ -44,7 +41,6 @@ const PurposeCheckbox: React.FC<Purpose> = ({ onPurposeChange }) => {
     const newOtherPurpose = event.target.value;
     setOtherPurpose(newOtherPurpose);
     setIsOtherSelected(!!newOtherPurpose);
-
   };
 
   return (
@@ -72,7 +68,6 @@ const PurposeCheckbox: React.FC<Purpose> = ({ onPurposeChange }) => {
               </Checkbox>
             </Stack>
             <Stack direction="row">
-
               <Checkbox colorScheme="brand" isChecked={isOtherSelected}>
                 기타
               </Checkbox>
@@ -92,44 +87,3 @@ const PurposeCheckbox: React.FC<Purpose> = ({ onPurposeChange }) => {
 };
 
 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<Purpose> = ({ onPurposeChange }) => {
-//   const [purpose, setPurpose] = useState<string>('서울');
-//   const handlePurposeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-//     const newPurpose = event.target.value;
-//     setPurpose(newPurpose);
-//     onPurposeChange(newPurpose);
-//   };
-
-//   return (
-//     <>
-//       <S.CustomContainer>
-//         <Text fontSize="lg">Past-Forward 서비스를 알게 된 경로는 무엇입니까?</Text>
-//         <Text>(복수 선택 가능)</Text>
-//         <S.CheckboxContainer>
-//           <Stack direction="column" spacing={6}>
-//             <Stack direction="row" spacing={3}>
-//               <Checkbox colorScheme="brand">업무 목적</Checkbox>
-//               <Checkbox colorScheme="brand">개인 발전</Checkbox>
-//               <Checkbox colorScheme="brand">팀 협업</Checkbox>
-//               <Checkbox colorScheme="brand">프로젝트 관리</Checkbox>
-//               <Checkbox colorScheme="brand">학습 및 개선</Checkbox>
-//             </Stack>
-//             <Stack direction="row">
-//               <Checkbox colorScheme="brand">기타</Checkbox>
-//               <Input width="20rem" placeholder="직접 입력해주세요." />
-//             </Stack>
-//           </Stack>
-//         </S.CheckboxContainer>
-//       </S.CustomContainer>
-//     </>
-//   );
-// };

src/pages/SurveyPage.tsx

@@ -1,5 +1,4 @@
 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';
@@ -16,7 +15,6 @@ const SurveyPage: React.FC = () => {
     localStorage.setItem('surveyVisited', 'true');
   }, []);
 
-
   const navigate = useNavigate();
 
   const handleSurveyButtonClick = () => {
@@ -25,7 +23,6 @@ const SurveyPage: React.FC = () => {
 
   const handleSurvey = async () => {
     try {
-
       console.log(
         '나이는:',
         age,
@@ -39,31 +36,34 @@ const SurveyPage: React.FC = () => {
         path,
         '/목적은(복수선택):',
         purpose,
-
+      );
+      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<string>('');
-
   const [gender, setGender] = useState<string>('FEMALE');
   const [job, setJob] = useState<string>('');
   const [city, setCity] = useState<string>('서울');
   const [path, setPath] = useState<string>('');
   const [purpose, setPurpose] = useState<string[]>();
 
-
   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[]) => {
     setPurpose(purpose);
   };
 
-
   return (
     <>
       <S.Background>
@@ -99,9 +97,7 @@ const SurveyPage: React.FC = () => {
           <Divider />
           <PathRadio onPathChange={handlePathChange} />
           <Divider />
-
           <PurposeCheckbox onPurposeChange={handlePurposeChange} />
-
           <Button onClick={handleSurveyButtonClick} colorScheme="brand" width="80%" style={{ marginBottom: '4rem' }}>
             제출
           </Button>