✨ Feat : Survey API 연결

donga-it-club · Apr 19, 2024 · b6c314d · b6c314d
1 parent 36a960d
commit b6c314d
Show file tree

Hide file tree

Showing 11 changed files with 637 additions and 672 deletions.
diff --git a/src/api/@types/Survey.ts b/src/api/@types/Survey.ts
@@ -0,0 +1,15 @@
+// post
+export interface PostSurveyRequest {
+  age: number;
+  gender: string;
+  occupation: string;
+  region: string;
+  source: string;
+  purpose: string;
+}
+
+export interface PostSurveyResponse {
+  code: number;
+  message: string;
+  data: string;
+}
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
@@ -0,0 +1,13 @@
+import { PostSurveyRequest, PostSurveyResponse } from '../@types/Survey';
+import axiosInstance from '../axiosConfig';
+
+// post 요청
+export const PostSurvey = async (requestData: PostSurveyRequest): Promise<PostSurveyResponse> => {
+  try {
+    const response = await axiosInstance.post<PostSurveyResponse>('/surveys/response', requestData);
+    console.log('설문조사 전송 성공', response.data);
+    return response.data;
+  } catch (error) {
+    throw new Error('실패');
+  }
+};
diff --git a/src/components/survey/AgeInput.tsx b/src/components/survey/AgeInput.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   NumberInput,
   NumberInputField,
@@ -9,18 +9,42 @@ import {
 } from '@chakra-ui/react';
 import * as S from '@/styles/survey/AgeInput.style';
 
-const AgeInput: React.FC = () => {
+interface Age {
+  onAgeChange: (age: string) => void;
+}
+
+const AgeInput: React.FC<Age> = ({ onAgeChange }) => {
+  const [age, setAge] = useState<string>('');
+
+  const handleAgeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newAge = event.target.value;
+    setAge(newAge);
+    onAgeChange(newAge);
+  };
+
+  const handleIncrement = () => {
+    const incrementedAge = parseInt(age) + 1;
+    setAge(String(incrementedAge));
+    onAgeChange(String(incrementedAge));
+  };
+
+  const handleDecrement = () => {
+    const decrementedAge = parseInt(age) - 1;
+    setAge(String(decrementedAge));
+    onAgeChange(String(decrementedAge));
+  };
+
   return (
     <>
       <S.CustomContainer>
         <Text fontSize="lg">귀하의 연령은 어떻게 되십니까?</Text>
         <S.CustomInput>
           <Text>만</Text>
           <NumberInput>
-            <NumberInputField />
+            <NumberInputField value={age} onChange={handleAgeChange} />
             <NumberInputStepper>
-              <NumberIncrementStepper />
-              <NumberDecrementStepper />
+              <NumberIncrementStepper onClick={handleIncrement} />
+              <NumberDecrementStepper onClick={handleDecrement} />
             </NumberInputStepper>
           </NumberInput>
           <Text>세</Text>

diff --git a/src/components/survey/CityRadio.tsx b/src/components/survey/CityRadio.tsx
@@ -2,74 +2,83 @@ import React, { useState } from 'react';
 import { Radio, RadioGroup, Stack, Text } from '@chakra-ui/react';
 import * as S from '@/styles/survey/CityRadio.style';
 
-const CityRadio: React.FC = () => {
-  const [value, setValue] = useState<string>('1');
+interface City {
+  onCityChange: (city: string) => void;
+}
+
+const CityRadio: React.FC<City> = ({ onCityChange }) => {
+  const [city, setCity] = useState<string>('서울');
+  const handleCityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newCity = event.target.value;
+    setCity(newCity);
+    onCityChange(newCity);
+  };
 
   return (
     <>
       <S.CustomContainer>
         <Text fontSize="lg">귀하가 현재 거주하는 지역은 무엇입니까?</Text>
         <S.RadioContainer>
-          <RadioGroup onChange={setValue} value={value}>
+          <RadioGroup onChange={setCity} value={city}>
             <Stack direction="column" spacing={10}>
               <Stack direction="row" spacing={6}>
-                <Radio colorScheme="brand" value="1">
+                <Radio colorScheme="brand" value="서울" onChange={handleCityChange}>
                   서울
                 </Radio>
-                <Radio colorScheme="brand" value="2">
+                <Radio colorScheme="brand" value="경기" onChange={handleCityChange}>
                   경기
                 </Radio>
-                <Radio colorScheme="brand" value="3">
+                <Radio colorScheme="brand" value="인천" onChange={handleCityChange}>
                   인천
                 </Radio>
-                <Radio colorScheme="brand" value="4">
+                <Radio colorScheme="brand" value="대전" onChange={handleCityChange}>
                   대전
                 </Radio>
-                <Radio colorScheme="brand" value="5">
+                <Radio colorScheme="brand" value="세종" onChange={handleCityChange}>
                   세종
                 </Radio>
-                <Radio colorScheme="brand" value="6">
+                <Radio colorScheme="brand" value="충남" onChange={handleCityChange}>
                   충남
                 </Radio>
               </Stack>
               <Stack direction="row" spacing={6}>
-                <Radio colorScheme="brand" value="7">
+                <Radio colorScheme="brand" value="충북" onChange={handleCityChange}>
                   충북
                 </Radio>
-                <Radio colorScheme="brand" value="8">
+                <Radio colorScheme="brand" value="광주" onChange={handleCityChange}>
                   광주
                 </Radio>
 
-                <Radio colorScheme="brand" value="9">
+                <Radio colorScheme="brand" value="전남" onChange={handleCityChange}>
                   전남
                 </Radio>
-                <Radio colorScheme="brand" value="10">
+                <Radio colorScheme="brand" value="전북" onChange={handleCityChange}>
                   전북
                 </Radio>
-                <Radio colorScheme="brand" value="11">
+                <Radio colorScheme="brand" value="대구" onChange={handleCityChange}>
                   대구
                 </Radio>
-                <Radio colorScheme="brand" value="12">
+                <Radio colorScheme="brand" value="경북" onChange={handleCityChange}>
                   경북
                 </Radio>
               </Stack>
               <Stack direction="row" spacing={6}>
-                <Radio colorScheme="brand" value="13">
+                <Radio colorScheme="brand" value="부산" onChange={handleCityChange}>
                   부산
                 </Radio>
-                <Radio colorScheme="brand" value="14">
+                <Radio colorScheme="brand" value="울산" onChange={handleCityChange}>
                   울산
                 </Radio>
-                <Radio colorScheme="brand" value="15">
+                <Radio colorScheme="brand" value="경남" onChange={handleCityChange}>
                   경남
                 </Radio>
-                <Radio colorScheme="brand" value="16">
+                <Radio colorScheme="brand" value="강원" onChange={handleCityChange}>
                   강원
                 </Radio>
-                <Radio colorScheme="brand" value="17">
+                <Radio colorScheme="brand" value="제주" onChange={handleCityChange}>
                   제주
                 </Radio>
-                <Radio colorScheme="brand" value="18">
+                <Radio colorScheme="brand" value="해외" onChange={handleCityChange}>
                   해외
                 </Radio>
               </Stack>

diff --git a/src/components/survey/GenderRadio.tsx b/src/components/survey/GenderRadio.tsx
@@ -2,20 +2,29 @@ import React, { useState } from 'react';
 import { Radio, RadioGroup, Stack, Text } from '@chakra-ui/react';
 import * as S from '@/styles/survey/GenderRadio.style';
 
-const GenderRadio: React.FC = () => {
-  const [value, setValue] = useState<string>('1');
+interface Gender {
+  onGenderChange: (age: string) => void;
+}
+
+const GenderRadio: React.FC<Gender> = ({ onGenderChange }) => {
+  const [gender, setGender] = useState<string>('female');
+  const handleGenderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newGender = event.target.value;
+    setGender(newGender);
+    onGenderChange(newGender);
+  };
 
   return (
     <>
       <S.CustomContainer>
         <Text fontSize="lg">귀하의 성별은 어떻게 되십니까?</Text>
         <S.RadioContainer>
-          <RadioGroup onChange={setValue} value={value}>
+          <RadioGroup onChange={setGender} value={gender}>
             <Stack direction="row">
-              <Radio colorScheme="brand" value="1">
+              <Radio colorScheme="brand" value="female" onChange={handleGenderChange}>
                 여성
               </Radio>
-              <Radio colorScheme="brand" value="2">
+              <Radio colorScheme="brand" value="male" onChange={handleGenderChange}>
                 남성
               </Radio>
             </Stack>

diff --git a/src/components/survey/JobSelect.tsx b/src/components/survey/JobSelect.tsx
@@ -1,14 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Select, Text } from '@chakra-ui/react';
 import * as S from '@/styles/survey/JobSelect.style';
 
-const JobSelect: React.FC = () => {
+interface Job {
+  onJobChange: (job: string) => void;
+}
+
+const JobSelect: React.FC<Job> = ({ onJobChange }) => {
+  const [job, setJob] = useState<string>('');
+  const handleJobChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newJob = event.target.value;
+    setJob(newJob);
+    onJobChange(newJob);
+  };
+
   return (
     <>
       <S.CustomContainer>
         <Text fontSize="lg">귀하의 현재 직업은 무엇입니까?</Text>
         <S.SelectContainer>
-          <Select placeholder="Select option">
+          <Select placeholder="Select option" onChange={handleJobChange} value={job}>
             <option value="대학생(원)">대학생(원)</option>
             <option value="무직">무직</option>
             <option value="경영">경영 · 비지니스</option>
@@ -22,7 +33,7 @@ const JobSelect: React.FC = () => {
             <option value="게임제작">게임 제작</option>
             <option value="금융">금융</option>
             <option value="제조">제조 · 생산</option>
-            <option value="교육">의료 · 제약 · 바이오</option>
+            <option value="의료">의료 · 제약 · 바이오</option>
             <option value="물류무역">물류무역</option>
             <option value="법률">법률 · 법집행기관</option>
             <option value="식음료">식 · 음료</option>

diff --git a/src/components/survey/PathRadio.tsx b/src/components/survey/PathRadio.tsx
@@ -2,38 +2,60 @@ import React, { useState } from 'react';
 import { Radio, RadioGroup, Stack, Input, Text } from '@chakra-ui/react';
 import * as S from '@/styles/survey/PathRadio.style';
 
-const PathRadio: React.FC = () => {
-  const [value, setValue] = useState<string>('1');
+interface Path {
+  onPathChange: (path: string) => void;
+}
+
+const PathRadio: React.FC<Path> = ({ onPathChange }) => {
+  const [path, setPath] = useState<string>('블라인드');
+  const [inputValue, setInputValue] = useState<string>(''); // 입력값 상태 추가
+
+  const handlePathChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newPath = event.target.value;
+    setPath(newPath);
+    onPathChange(newPath);
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    setPath('기타'); // 입력값이 변할 때, 경로를 '기타'로 설정
+    onPathChange(event.target.value); // 경로를 '기타'로 설정
+  };
 
   return (
     <>
       <S.CustomContainer>
         <Text fontSize="lg">Past-Forward 서비스를 알게 된 경로는 무엇입니까?</Text>
         <S.RadioContainer>
-          <RadioGroup onChange={setValue} value={value}>
+          <RadioGroup onChange={setPath} value={path}>
             <Stack direction="column" spacing={6}>
               <Stack direction="row" spacing={3}>
-                <Radio colorScheme="brand" value="1">
+                <Radio colorScheme="brand" value="블라인드" onChange={handlePathChange}>
                   블라인드
                 </Radio>
-                <Radio colorScheme="brand" value="2">
+                <Radio colorScheme="brand" value="에브리타임" onChange={handlePathChange}>
                   에브리타임
                 </Radio>
-                <Radio colorScheme="brand" value="3">
+                <Radio colorScheme="brand" value="카카오톡" onChange={handlePathChange}>
                   카카오톡
                 </Radio>
-                <Radio colorScheme="brand" value="4">
+                <Radio colorScheme="brand" value="인스타그램" onChange={handlePathChange}>
                   인스타그램
                 </Radio>
-                <Radio colorScheme="brand" value="5">
+                <Radio colorScheme="brand" value="슬랙" onChange={handlePathChange}>
                   슬랙
                 </Radio>
               </Stack>
               <Stack direction="row">
-                <Radio colorScheme="brand" value="6">
+                <Radio colorScheme="brand" value="기타" onChange={handlePathChange}>
                   기타
                 </Radio>
-                <Input width="20rem" placeholder="직접 입력해주세요." />
+                <Input
+                  width="20rem"
+                  placeholder="직접 입력해주세요."
+                  value={inputValue} // 입력값 상태를 value로 사용
+                  onChange={handleInputChange} // 입력값 변경 핸들러 추가
+                />
               </Stack>
             </Stack>
           </RadioGroup>