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

* ✨ Feat : Survey API 연결 * ✨ Feat : Survey API 최종 수정 --------- Co-authored-by: geumbin <[email protected]>
donga-it-club · Apr 20, 2024 · 92ce537 · 92ce537
1 parent d89b504
commit 92ce537
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 42 deletions.
diff --git a/src/api/@types/Survey.ts b/src/api/@types/Survey.ts
@@ -5,7 +5,8 @@ export interface PostSurveyRequest {
   occupation: string;
   region: string;
   source: string;
-  purpose: string;
+  purposes: string[] | undefined;
+
 }
 
 export interface PostSurveyResponse {

diff --git a/src/api/axiosConfig.tsx b/src/api/axiosConfig.tsx
@@ -65,7 +65,7 @@ axiosInstance.interceptors.request.use(
 
       // 헤더에 토큰 추가
       config.headers.Authorization = `Bearer ${authToken}`;
-      // console.log('헤더에 토큰 추가 확인', config.headers.Authorization);
+      console.log('헤더에 토큰 추가 확인', config.headers.Authorization);
       return config;
     } catch (err) {
       console.error('에러', err);

diff --git 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<PostSurveyResponse> => {
   try {
-    const response = await axiosInstance.post<PostSurveyResponse>('/surveys/response', requestData);
+    const response = await axiosInstance.post<PostSurveyResponse>('/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
@@ -7,7 +7,9 @@ interface Gender {
 }
 
 const GenderRadio: React.FC<Gender> = ({ onGenderChange }) => {
-  const [gender, setGender] = useState<string>('female');
+
+  const [gender, setGender] = useState<string>('FEMALE');
+
   const handleGenderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newGender = event.target.value;
     setGender(newGender);
@@ -21,10 +23,12 @@ const GenderRadio: React.FC<Gender> = ({ onGenderChange }) => {
         <S.RadioContainer>
           <RadioGroup onChange={setGender} value={gender}>
             <Stack direction="row">
-              <Radio colorScheme="brand" value="female" onChange={handleGenderChange}>
+
+              <Radio colorScheme="brand" value="FEMALE" onChange={handleGenderChange}>
                 여성
               </Radio>
-              <Radio colorScheme="brand" value="male" onChange={handleGenderChange}>
+              <Radio colorScheme="brand" value="MALE" onChange={handleGenderChange}>
+
                 남성
               </Radio>
             </Stack>

diff --git a/src/components/survey/PurposeCheckbox.tsx b/src/components/survey/PurposeCheckbox.tsx
@@ -1,36 +1,50 @@
-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<Purpose> = ({ onPurposeChange, onOtherPurposeChange }) => {
+const PurposeCheckbox: React.FC<Purpose> = ({ onPurposeChange }) => {
   const [checkedPurposes, setCheckedPurposes] = useState<string[]>([]);
+  const [otherPurpose, setOtherPurpose] = useState<string>('');
+  const [isOtherSelected, setIsOtherSelected] = useState<boolean>(false);
+
+  useEffect(() => {
+    const updatedPurposes = [...checkedPurposes];
+    if (isOtherSelected) {
+      updatedPurposes.push(otherPurpose);
+    }
+    onPurposeChange(updatedPurposes);
+  }, [checkedPurposes, otherPurpose, isOtherSelected, onPurposeChange]);
+
+  // purposes
 
   const handlePurposeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     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<string>('');
+  // otherPurpose
   const handleOtherPurposeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newOtherPurpose = event.target.value;
     setOtherPurpose(newOtherPurpose);
-    onOtherPurposeChange(newOtherPurpose);
+    setIsOtherSelected(!!newOtherPurpose);
+
   };
 
   return (
@@ -58,7 +72,11 @@ const PurposeCheckbox: React.FC<Purpose> = ({ onPurposeChange, onOtherPurposeCha
               </Checkbox>
             </Stack>
             <Stack direction="row">
-              <Checkbox colorScheme="brand">기타</Checkbox>
+
+              <Checkbox colorScheme="brand" isChecked={isOtherSelected}>
+                기타
+              </Checkbox>
+
               <Input
                 width="20rem"
                 placeholder="직접 입력해주세요."

diff --git a/src/pages/SurveyPage.tsx b/src/pages/SurveyPage.tsx
@@ -1,6 +1,8 @@
 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 +16,16 @@ 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 +39,31 @@ 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('설문조사가 전송되었습니다.');
+
+      console.log('설문조사 전송 성공', SurveyRequest);
+      alert('설문조사가 전송되었습니다.');
+      navigate('/');
+
     } catch (error) {
       console.error('실패입니다.', error);
     }
   };
 
   const [age, setAge] = useState<string>('');
-  const [gender, setGender] = useState<string>('female');
+
+  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 [otherPurpose, setOtherPurpose] = 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,12 @@ 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 (
     <>
       <S.Background>
@@ -99,7 +99,9 @@ const SurveyPage: React.FC = () => {
           <Divider />
           <PathRadio onPathChange={handlePathChange} />
           <Divider />
-          <PurposeCheckbox onPurposeChange={handlePurposeChange} onOtherPurposeChange={handleOtherPurposeChange} />
+
+          <PurposeCheckbox onPurposeChange={handlePurposeChange} />
+
           <Button onClick={handleSurveyButtonClick} colorScheme="brand" width="80%" style={{ marginBottom: '4rem' }}>
             제출
           </Button>