chore: 코드 리뷰 반영

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

@@ -5,14 +5,15 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
-import CarColorPicker from '@details/car-details/CarColorPicker';
-import CarDetails from '@details/car-details/CarDetails';
-import DetailsLoading from '@details/details-loading/DetailsLoading';
-import useCarColor from '@remote/queries/details/useCarColor';
-import useCarDriving from '@remote/queries/details/useCarDriving';
-import useCarParking from '@remote/queries/details/useCarParking';
-import useCarSegment from '@remote/queries/details/useCarSegment';
-import useCarType from '@remote/queries/details/useCarType';
+import CarColorPicker from '@additional-info/car-details/CarColorPicker';
+import CarDetails from '@additional-info/car-details/CarDetails';
+import DetailsLoading from '@additional-info/details-loading/DetailsLoading';
+
+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 Header from '@shared/header/Header';
 import ProgressBar from '@shared/progress-bar/ProgressBar';
 import Spacing from '@shared/spacing/Spacing';

src/app/car-details/page.tsx

@@ -4,7 +4,7 @@ import { dehydrate, Hydrate } from '@tanstack/react-query';
 import getQueryClient from '@lib/getQueryClient';
 import {
   getCarColor, getCarDriving, getCarParking, getCarSegment, getCarType,
-} from '@remote/api/requests/details/details.get.api';
+} from '@remote/api/requests/additional-info/additional-info.get.api';
 
 import CarDetailsPage from './hydrated-page';
 

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

@@ -1,10 +1,10 @@
 import { FieldValues, UseFormRegister } from 'react-hook-form';
 
+import ColorPicker from '@additional-info/car-details/color-picker/ColorPicker';
+import Description from '@additional-info/description/Description';
 import classNames from 'classnames/bind';
 
-import ColorPicker from '@details/color-picker/ColorPicker';
-import Description from '@details/description/Description';
-import { IDetails } from '@remote/api/types/details';
+import { IAdditionalInfo } from '@/remote/api/types/additional-info';
 import FixedBottomButton from '@shared/fixedBottomButton/FixedBottomButton';
 import Spacing from '@shared/spacing/Spacing';
 
@@ -16,7 +16,7 @@ interface CarColorPickerProps {
   onClick: () => void
   main: string
   sub: string
-  options: IDetails[]
+  options: IAdditionalInfo[]
   register: UseFormRegister<FieldValues>;
   dirtyFields: Record<string, boolean>
 }

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

@@ -1,7 +1,8 @@
 import { FieldValues, UseFormRegister } from 'react-hook-form';
 
-import Description from '@details/description/Description';
-import { IDetails } from '@remote/api/types/details';
+import Description from '@additional-info/description/Description';
+
+import { IAdditionalInfo } from '@/remote/api/types/additional-info';
 import FixedBottomButton from '@shared/fixedBottomButton/FixedBottomButton';
 import Flex from '@shared/flex/Flex';
 import Radio from '@shared/radio/Radio';
@@ -11,7 +12,7 @@ interface CarDetailsProps {
   onClick: () => void
   main: string
   sub: string
-  options: IDetails[]
+  options: IAdditionalInfo[]
   register: UseFormRegister<FieldValues>
   dirtyFields: Record<string, boolean>
 }

src/components/details/description/Description.tsx → src/components/additional-info/description/Description.tsx

@@ -1,4 +1,4 @@
-import Flex from '@components/shared/flex/Flex';
+import Flex from '@shared/flex/Flex';
 import Spacing from '@shared/spacing/Spacing';
 import Text from '@shared/text/Text';
 

src/constants/delay.ts

@@ -0,0 +1 @@
+export const ADDITIONAL_INFO_DELAY_TIME = 2000;

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

@@ -0,0 +1,32 @@
+import { IAdditionalInfo } from '../../types/additional-info';
+import { getRequest } from '../requests.api';
+
+export const getCarSegment = async () => {
+  const response = await getRequest<IAdditionalInfo[]>('/commoncode/segment');
+
+  return response;
+};
+
+export const getCarType = async () => {
+  const response = await getRequest<IAdditionalInfo[]>('/commoncode/cartype');
+
+  return response;
+};
+
+export const getCarColor = async () => {
+  const response = await getRequest<IAdditionalInfo[]>('/commoncode/color');
+
+  return response;
+};
+
+export const getCarDriving = async () => {
+  const response = await getRequest<IAdditionalInfo[]>('/commoncode/driving');
+
+  return response;
+};
+
+export const getCarParking = async () => {
+  const response = await getRequest<IAdditionalInfo[]>('/commoncode/parking');
+
+  return response;
+};

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

@@ -1,4 +1,4 @@
-export interface IDetails {
+export interface IAdditionalInfo {
   codeNo: number
   codeName: string
   upperNo: number

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

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getCarColor } from '@remote/api/requests/additional-info/additional-info.get.api';
+import { IAdditionalInfo } from '@remote/api/types/additional-info';
+
+function useCarColor() {
+  return useQuery<IAdditionalInfo[]>({ queryKey: ['car-color'], queryFn: getCarColor });
+}
+
+export default useCarColor;

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

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getCarDriving } from '@remote/api/requests/additional-info/additional-info.get.api';
+import { IAdditionalInfo } from '@remote/api/types/additional-info';
+
+function useCarDriving() {
+  return useQuery<IAdditionalInfo[]>({ queryKey: ['car-driving'], queryFn: getCarDriving });
+}
+
+export default useCarDriving;

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

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getCarParking } from '@remote/api/requests/additional-info/additional-info.get.api';
+import { IAdditionalInfo } from '@remote/api/types/additional-info';
+
+function useCarParking() {
+  return useQuery<IAdditionalInfo[]>({ queryKey: ['car-parking'], queryFn: getCarParking });
+}
+
+export default useCarParking;

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

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getCarSegment } from '@remote/api/requests/additional-info/additional-info.get.api';
+import { IAdditionalInfo } from '@remote/api/types/additional-info';
+
+function useCarSegment() {
+  return useQuery<IAdditionalInfo[]>({ queryKey: ['car-segment'], queryFn: getCarSegment });
+}
+
+export default useCarSegment;

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

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getCarType } from '@remote/api/requests/additional-info/additional-info.get.api';
+import { IAdditionalInfo } from '@remote/api/types/additional-info';
+
+function useCarType() {
+  return useQuery<IAdditionalInfo[]>({ queryKey: ['car-type'], queryFn: getCarType });
+}
+
+export default useCarType;

tsconfig.json

@@ -36,8 +36,8 @@
       "@shared/*": [
         "src/components/shared/*"
       ],
-      "@details/*": [
-        "src/components/details/*"
+      "@additional-info/*": [
+        "src/components/additional-info/*"
       ],
       "@styles/*": [
         "src/styles/*"