페이지 기능: 차량 정보 입력 api 기능 추가

src/app/car-details/hydrated-page.tsx

@@ -8,11 +8,13 @@ import { useForm } from 'react-hook-form';
 import CarColorPicker from '@components/additional-info/car-details/CarColorPicker';
 import CarDetails from '@components/additional-info/car-details/CarDetails';
 import DetailsLoading from '@components/additional-info/details-loading/DetailsLoading';
+import { ICarDetails } from '@remote/api/types/additional-info';
 import useCarColor from '@remote/queries/additional-info/car-details/useCarColor';
 import useCarDriving from '@remote/queries/additional-info/car-details/useCarDriving';
 import useCarParking from '@remote/queries/additional-info/car-details/useCarParking';
 import useCarSegment from '@remote/queries/additional-info/car-details/useCarSegment';
 import useCarType from '@remote/queries/additional-info/car-details/useCarType';
+import useRegisterCarDetails from '@remote/queries/additional-info/car-details/useRegisterCarDetails';
 import Header from '@shared/header/Header';
 import Loader from '@shared/loader/Loader';
 import ProgressBar from '@shared/progress-bar/ProgressBar';
@@ -24,7 +26,7 @@ function CarDetailsPage() {
   const { data: carColorData, isLoading: isCarColorLoading } = useCarColor();
   const { data: carDrivingData, isLoading: isCarDrivingLoading } = useCarDriving();
   const { data: carParkingData, isLoading: isCarParkingLoading } = useCarParking();
-
+  const { mutate } = useRegisterCarDetails();
   const [step, setStep] = useState(1);
 
   const {
@@ -38,9 +40,7 @@ function CarDetailsPage() {
 
   // eslint-disable-next-line @typescript-eslint/require-await
   const onSubmit = async () => {
-    onNext();
-    // TODO: 쿼리훅 제작 및 테스트
-    // console.log(getValues());
+    mutate({ ...getValues() as ICarDetails });
   };
 
   // TODO: Loader 컴포넌트 제작
@@ -60,7 +60,6 @@ function CarDetailsPage() {
     return null;
   }
 
-  // TODO: 헤더 아이콘 클릭 시 뒤로가기 기능 추가
   return (
     <>
       {step <= 5 && (

src/app/car-wash-details/hydrated-page.tsx

@@ -7,9 +7,11 @@ import { useForm } from 'react-hook-form';
 
 import CarDetails from '@components/additional-info/car-details/CarDetails';
 import DetailsLoading from '@components/additional-info/details-loading/DetailsLoading';
+import { ICarWashDetails } from '@remote/api/types/additional-info';
 import useCarWashCost from '@remote/queries/additional-info/car-wash-details/useCarWashCost';
 import useCarWashFrequency from '@remote/queries/additional-info/car-wash-details/useCarWashFrequency';
 import useCarWashInterest from '@remote/queries/additional-info/car-wash-details/useCarWashInterest';
+import useRegisterCarWashDetails from '@remote/queries/additional-info/car-wash-details/useRegisterCarWashDetails';
 import Header from '@shared/header/Header';
 import Loader from '@shared/loader/Loader';
 import ProgressBar from '@shared/progress-bar/ProgressBar';
@@ -19,7 +21,7 @@ function CarWashDetailsPage() {
   const { data: carWashFrequencyData } = useCarWashFrequency();
   const { data: carWashCostData } = useCarWashCost();
   const { data: carWashInterestData } = useCarWashInterest();
-
+  const { mutate } = useRegisterCarWashDetails();
   const [step, setStep] = useState(1);
 
   const {
@@ -38,8 +40,7 @@ function CarWashDetailsPage() {
   // eslint-disable-next-line @typescript-eslint/require-await
   const onSubmit = async () => {
     onNext();
-    // TODO: 쿼리훅 제작
-    // console.log(getValues());
+    mutate({ ...getValues() as ICarWashDetails });
   };
 
   // TODO: Loader 컴포넌트 제작

src/components/additional-info/car-details/CarColorPicker.tsx

@@ -43,7 +43,7 @@ function CarColorPicker({
             <ColorPicker
               key={option.codeNo}
               label={option.description}
-              value={option.codeName}
+              value={option.codeNo}
               color={option.codeName}
               {...register(option.upperName, {
                 required: true,

src/components/additional-info/car-details/CarDetails.tsx

@@ -41,7 +41,7 @@ function CarDetails({
                 key={option.codeNo}
                 type="additionalInfo"
                 label={option.description}
-                value={option.codeName}
+                value={option.codeNo}
                 {...register(option.upperName, {
                   required: true,
                 })}

src/components/additional-info/car-details/color-picker/ColorPicker.stories.tsx

@@ -18,15 +18,15 @@ type Story = StoryObj<typeof meta>;
 export const black: Story = {
   args: {
     label: '검은색',
-    value: '37383C',
+    value: 21,
     color: 'black',
   },
 };
 
 export const green: Story = {
   args: {
     label: '초록',
-    value: '2F4F4F',
+    value: 26,
     color: 'green',
   },
 };

src/components/additional-info/car-details/color-picker/ColorPicker.tsx

@@ -12,7 +12,7 @@ import { ColorMapType, colorMap } from './colorPicker.type';
 
 interface ColorPickerProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string
-  value: string
+  value: number
   color: ColorMapType
 }
 

src/remote/api/requests/additional-info/additional-info.post.api.ts

@@ -0,0 +1,25 @@
+import { ICarDetails, ICarWashDetails } from '../../types/additional-info';
+import { ICommon } from '../../types/common';
+import { postRequest } from '../requests.api';
+
+/* ----- 차량 정보 입력 api ----- */
+export const postCarDetails = async ({
+  segment, carType, color, driving, parking,
+}: ICarDetails) => {
+  const response = await postRequest<ICommon<null>, ICarDetails>('/member/car', {
+    segment, carType, color, driving, parking,
+  });
+
+  return response;
+};
+
+/* ----- 세차 용품 정보 입력 api ----- */
+export const postCarWashDetails = async ({
+  frequency, cost, interest,
+}: ICarWashDetails) => {
+  const response = await postRequest<ICommon<null>, ICarWashDetails>('/member/wash', {
+    frequency, cost, interest,
+  });
+
+  return response;
+};

src/remote/api/types/additional-info.ts

@@ -16,4 +16,18 @@ export interface IAdditionalInfo {
   modifiedBy: string | null
 }
 
+export interface ICarDetails {
+  segment: number
+  carType: number
+  color: number
+  driving: number
+  parking: number
+}
+
+export interface ICarWashDetails {
+  frequency: number
+  cost: number
+  interest: number
+}
+
 export type AdditionalInfoType = ICommon<IAdditionalInfo[]>;

src/remote/queries/additional-info/car-details/useRegisterCarDetails.tsx

@@ -0,0 +1,22 @@
+import { toast } from 'react-toastify';
+
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+
+import { postCarDetails } from '@remote/api/requests/additional-info/additional-info.post.api';
+
+function useRegisterCarDetails() {
+  const router = useRouter();
+  return useMutation({
+    mutationFn: postCarDetails,
+    onSuccess: () => {
+      router.push('/');
+      toast.success('등록을 완료하였습니다!');
+    },
+    onError: () => {
+      toast.error('다시 입력해주세요');
+    },
+  });
+}
+
+export default useRegisterCarDetails;

src/remote/queries/additional-info/car-wash-details/useRegisterCarWashDetails.tsx

@@ -0,0 +1,22 @@
+import { toast } from 'react-toastify';
+
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+
+import { postCarWashDetails } from '@remote/api/requests/additional-info/additional-info.post.api';
+
+function useRegisterCarWashDetails() {
+  const router = useRouter();
+  return useMutation({
+    mutationFn: postCarWashDetails,
+    onSuccess: () => {
+      router.push('/');
+      toast.success('등록을 완료하였습니다!');
+    },
+    onError: () => {
+      toast.error('다시 입력해주세요');
+    },
+  });
+}
+
+export default useRegisterCarWashDetails;