[Feature/#199] 나의 푸드트럭 등록 / 수정 api

apis/data-contracts.ts

@@ -76,7 +76,6 @@ export interface UpdateReservationRequest {
   /**
    * 운영 시간 (형식: HH:MM ~ HH:MM)
    * @minLength 1
-   * @pattern ^([01]\d|2[0-3]):([0-5]\d) ~ ([01]\d|2[0-3]):([0-5]\d)$
    * @example "15:00 ~ 16:00"
    */
   operationHour: string;

apis/http-client.ts

@@ -74,7 +74,7 @@ export class HttpClient<SecurityDataType = unknown> {
   }: ApiConfig<SecurityDataType> = {}) {
     this.instance = axios.create({
       ...axiosConfig,
-      baseURL: axiosConfig.baseURL || "http://52.79.221.101:8000",
+      baseURL: axiosConfig.baseURL || "http://13.125.207.84:8000",
     });
     this.secure = secure;
     this.format = format;

package.json

@@ -17,7 +17,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=chpt_b45a4ae4e58f49f",
-    "swagger-typescript-api": "swagger-typescript-api generate -p http://52.79.221.101:8000/v3/api-docs -r -o ./apis --modular -d --extract-request-body --extract-response-body --extract-response-error --axios --clean-output",
+    "swagger-typescript-api": "swagger-typescript-api generate -p http://13.125.207.84:8000/v3/api-docs -r -o ./apis --modular -d --extract-request-body --extract-response-body --extract-response-error --axios --clean-output",
     "update-icon-ids": "tsx src/shared/utils/extract-icon-ids.ts"
   },
   "dependencies": {

src/pages/@owner/estimate/hooks/use-estimate-form.ts

@@ -6,7 +6,7 @@ import type {
 } from 'apis/data-contracts';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import { formatEstimateDatesToAvailableDates } from '@utils/date';
+import { formatStringDatesToAvailableDates } from '@utils/date';
 import {
   estimateSchema,
   type EstimateFormData,
@@ -67,7 +67,7 @@ export const useEstimateForm = (
       {
         location: estimateData.address ?? '',
         detailLocation: estimateData.detailAddress ?? '',
-        availableDates: formatEstimateDatesToAvailableDates(
+        availableDates: formatStringDatesToAvailableDates(
           estimateData.reservationDates ?? []
         ),
         activeTime: estimateData.operationHour ?? undefined,

src/pages/@owner/estimate/utils/format-estimate.ts

@@ -2,6 +2,7 @@ import type {
   CreateReservationRequest,
   UpdateReservationRequest,
 } from 'apis/data-contracts';
+import { formatAvailableDatesToString } from '@utils/date';
 import type { EstimateFormData } from '@pages/@owner/estimate/schemas/estimate.schema';
 
 // 예약 견적서 작성 요청 body 형식으로 포맷
@@ -11,22 +12,15 @@ export const formatCreateEstimate = (
   reservationUserId: number,
   estimateFormData: EstimateFormData
 ) => {
-  const formattedDates = estimateFormData.availableDates
-    .filter(date => date.startDate)
-    .map(date => {
-      if (date.endDate) {
-        return `${date.startDate} ~ ${date.endDate}`;
-      }
-      return `${date.startDate} ~ ${date.startDate}`;
-    });
-
   const formattedEstimate: CreateReservationRequest = {
     foodTruckId,
     chatRoomId,
     reservationUserId,
     address: estimateFormData.location,
     detailAddress: estimateFormData.detailLocation,
-    reservationDates: formattedDates,
+    reservationDates: formatAvailableDatesToString(
+      estimateFormData.availableDates
+    ),
     operationHour: estimateFormData.activeTime,
     menu: estimateFormData.food,
     deposit: estimateFormData.price,
@@ -39,19 +33,12 @@ export const formatCreateEstimate = (
 
 // 예약 견적서 수정 요청 body 형식으로 포맷
 export const formatUpdateEstimate = (estimateFormData: EstimateFormData) => {
-  const formattedDates = estimateFormData.availableDates
-    .filter(date => date.startDate)
-    .map(date => {
-      if (date.endDate) {
-        return `${date.startDate} ~ ${date.endDate}`;
-      }
-      return `${date.startDate} ~ ${date.startDate}`;
-    });
-
   const formattedEstimate: UpdateReservationRequest = {
     address: estimateFormData.location,
     detailAddress: estimateFormData.detailLocation,
-    reservationDates: formattedDates,
+    reservationDates: formatAvailableDatesToString(
+      estimateFormData.availableDates
+    ),
     operationHour: estimateFormData.activeTime,
     menu: estimateFormData.food,
     deposit: estimateFormData.price,

src/pages/@owner/food-truck-form/@section/basic-info-section/FoodTruckName.tsx

@@ -6,15 +6,22 @@ import Button from '@ui/button/Button';
 import ErrorText from '@form/error-text/ErrorText';
 import { Icon } from '@icon/Icon';
 
-export default function FoodTruckNameInput() {
+interface FoodTruckNameInputProps {
+  previousName?: string;
+}
+
+export default function FoodTruckNameInput({
+  previousName,
+}: FoodTruckNameInputProps) {
   const {
     name,
     nameError,
     updateName,
     checkNameDuplicated,
     canCheckNameDuplicate,
-    nameDuplicate,
-  } = useBasicInfo();
+    isNameDuplicated,
+    isNameChecked,
+  } = useBasicInfo(previousName);
   return (
     <FormLayout isRequired={true} title='푸드트럭 이름'>
       <Input
@@ -23,19 +30,22 @@ export default function FoodTruckNameInput() {
         maxLength={FOOD_TRUCK_MAX_LENGTH.name.max}
         error={!!nameError}
         value={name}
-        handleRightClick={checkNameDuplicated}
         onChange={e => updateName(e.target.value)}
         rightComponent={
           <Button
             buttonStyle={canCheckNameDuplicate ? 'active' : 'disabled'}
             variant='verify'
+            disabled={!canCheckNameDuplicate}
           >
             중복확인
           </Button>
         }
+        handleRightClick={
+          canCheckNameDuplicate ? checkNameDuplicated : undefined
+        }
       />
       {nameError && <ErrorText text={nameError} />}
-      {nameDuplicate && (
+      {isNameChecked && !isNameDuplicated && (
         <div className='flex w-full items-center gap-[0.2rem]'>
           <Icon name='ic_check' />
           <p className='caption-m-12 text-green-500'>사용 가능한 이름입니다.</p>

src/pages/@owner/food-truck-form/@section/region-section/RegionSection.tsx

@@ -1,10 +1,10 @@
 import { useNavigate } from 'react-router-dom';
 import { useFormContext } from 'react-hook-form';
+
 import FormLayout from '@components/layout/form-layout/FormLayout';
 import { ROUTES } from '@router/constant/routes';
 import type { FoodTruckFormData } from '@pages/@owner/food-truck-form/schemas/food-truck-form.schema';
 import { getNavigateState } from '@pages/@owner/food-truck-form/utils/navigate-state';
-import { useRegion } from '@pages/@owner/set-region/hooks/use-region';
 import RegionButton from '@pages/@owner/food-truck-form/components/RegionButton';
 import useToast from '@hooks/use-toast';
 
@@ -29,7 +29,8 @@ export default function RegionSection({ foodTruckId }: RegionSectionProps) {
       state: getNavigateState(formData),
     });
   };
-  const { regionCodes } = useRegion(foodTruckId);
+
+  const regionCodes = formData.regionCodes ?? [];
 
   return (
     <FormLayout isRequired={true} title='활동 가능 지역'>

src/pages/@owner/food-truck-form/FoodTruckForm.tsx

@@ -4,6 +4,9 @@ import { FormProvider } from 'react-hook-form';
 import Navigation from '@layout/navigation/Navigation';
 import { Icon } from '@icon/Icon';
 import Button from '@ui/button/Button';
+import { ROUTES } from '@router/constant/routes';
+import useToast from '@hooks/use-toast';
+
 import {
   FoodTruckName,
   FoodTruckDescription,
@@ -12,7 +15,6 @@ import {
   FoodTruckOption,
   FoodTruckPhoto,
 } from '@pages/@owner/food-truck-form/@section/basic-info-section/index';
-
 import {
   AvailableQuantity,
   NeedElectricity,
@@ -30,8 +32,6 @@ import {
 } from '@pages/@owner/food-truck-form/constants/food-truck';
 import ActiveTime from '@components/active-time/ActiveTime';
 import ActiveDate from '@components/active-date/ActiveDate';
-import useFoodTruckDetail from '@pages/food-truck-detail/hooks/use-food-truck-detail';
-import { ROUTES } from '@router/constant/routes';
 
 // 메인 컴포넌트
 export default function FoodTruckForm() {
@@ -40,9 +40,10 @@ export default function FoodTruckForm() {
 
   const navigate = useNavigate();
   const location = useLocation();
+  const toast = useToast();
 
-  // TODO: id 값이 있을 시 푸드트럭 정보 가져오기
-  const { methods, reset, isFormValid, handleSubmit } = useFoodTruckForm();
+  const { isEdit, methods, reset, isFormValid, handleSubmit, previousName } =
+    useFoodTruckForm(foodTruckIdNumber);
 
   const {
     formActiveTime,
@@ -58,30 +59,32 @@ export default function FoodTruckForm() {
     handleActiveDateSetValue,
     handleActiveDateError,
   } = useFoodTruckFormDate(methods);
-  // 서버에서 활동 가능 지역은 지역코드로 받아야함
-  const { foodTruckDetailData } = useFoodTruckDetail(foodTruckIdNumber);
 
   useEffect(() => {
     if (location.state?.formData && location.state?.from) {
       reset(location.state.formData);
     }
   }, [location.state, reset]);
 
+  if (!foodTruckId || isNaN(foodTruckIdNumber)) {
+    toast.error('잘못된 접근입니다.');
+    navigate(ROUTES.FOOD_TRUCK_MANAGEMENT);
+    return null;
+  }
+
   const handleNavigateBack = () => {
     navigate(ROUTES.FOOD_TRUCK_MANAGEMENT);
   };
 
   return (
     <FormProvider {...methods}>
       <Navigation
-        centerContent={
-          foodTruckDetailData ? '나의 푸드트럭 수정' : '나의 푸드트럭 등록'
-        }
+        centerContent={isEdit ? '나의 푸드트럭 수정' : '나의 푸드트럭 등록'}
         leftIcon={<Icon name='ic_back' />}
         handleLeftClick={handleNavigateBack}
       />
       <div className='flex flex-col px-[2rem] pb-[12rem]'>
-        <FoodTruckName />
+        <FoodTruckName previousName={previousName} />
         <FoodTruckDescription />
         <FoodTruckPhoneNumber />
         <ActiveTime
@@ -91,7 +94,7 @@ export default function FoodTruckForm() {
           handleActiveTimeSetValue={handleActiveTimeSetValue}
           handleTimeDiscussRequiredSetValue={handleTimeDiscussRequiredSetValue}
         />
-        <RegionSection />
+        <RegionSection foodTruckId={foodTruckId} />
         <MenuCategory />
         <AvailableQuantity />
         <NeedElectricity />

src/pages/@owner/food-truck-form/api/index.ts

@@ -0,0 +1,30 @@
+import type { BaseResponseFoodTruckIdResponse } from 'apis/data-contracts';
+import { apiRequest } from '@api/apiRequest';
+
+export interface UpdateFoodTruckInfoApiRequest {
+  name: string;
+  description: string;
+  phoneNumber: string;
+  activeTime: string;
+  timeDiscussRequired: boolean;
+  foodTruckServiceAreas: number[];
+  menuCategories: string[];
+  availableQuantity: string;
+  needElectricity: string;
+  paymentMethod: string;
+  availableDates: string[];
+  photoUrls: string[];
+  operatingInfo?: string;
+  option?: string;
+}
+export const updateMyFoodTruckInfoApi = async (
+  foodTruckId: number,
+  data: UpdateFoodTruckInfoApiRequest
+) => {
+  const response = await apiRequest<BaseResponseFoodTruckIdResponse>({
+    endPoint: `/food-trucks/${foodTruckId}`,
+    method: 'PUT',
+    data,
+  });
+  return response.data;
+};

src/pages/@owner/food-truck-form/constants/food-truck.ts

@@ -23,7 +23,7 @@ export const FOOD_TRUCK_MAX_LENGTH = {
   },
   availableDates: {
     min: 1,
-    max: 2,
+    max: 4,
   },
   photoUrls: {
     min: 1,

src/pages/@owner/food-truck-form/hooks/use-basic-info.ts

@@ -6,41 +6,60 @@ import { CANNOT_UPLOAD_FILE_MB, NOT_ALLOWED_FILE_TYPE } from '@constant/image';
 import { formatPhoneNumber } from '@utils/phone-number';
 import { FOOD_TRUCK_ERROR_MESSAGE } from '@pages/@owner/food-truck-form/constants/food-truck';
 import { useFoodTruckImage } from '@pages/@owner/upload-food-truck-images/hooks/use-food-truck-image';
+import { useFoodTruckName } from '@pages/@owner/food-truck-onboarding/hooks/use-food-truck-name';
 
 //푸드트럭 이름, 한줄소개, 전화번호, 푸드트럭 사진, 운영정보, 기타 필드
-export const useBasicInfo = () => {
+export const useBasicInfo = (previousName?: string) => {
   const {
     setValue,
     watch,
     formState: { errors },
     setError,
+    clearErrors,
   } = useFormContext<FoodTruckFormData>();
 
+  const { handleCheckName } = useFoodTruckName();
+
   const formData = watch();
   const name = watch('name') ?? '';
+  const isChecked = watch('isNameChecked');
   // 중복체크 버튼을 누를 수 있는 상태: 이름이 있고, 중복체크가 완료되지 않은 경우
-  const canCheckNameDuplicate = name.trim() !== '' && !formData.nameDuplicate;
+  const canCheckNameDuplicate =
+    name.trim() !== '' && name !== previousName && !isChecked;
 
   const updateName = (name: string) => {
     setValue('name', name, { shouldValidate: true });
-    setValue('nameDuplicate', false, { shouldValidate: true });
+    if (previousName && name === previousName) {
+      setValue('isNameChecked', true, { shouldValidate: true });
+      setValue('isNameDuplicated', false, { shouldValidate: true });
+    } else {
+      setValue('isNameChecked', false, { shouldValidate: true });
+      setValue('isNameDuplicated', false, { shouldValidate: true });
+    }
   };
 
   const updateDescription = (description: string) => {
     setValue('description', description, { shouldValidate: true });
   };
 
-  const checkNameDuplicated = () => {
-    //TODO: 추후 중복확인 로직 추가
-    const isDuplicateSuccess = Math.random() > 0.5;
+  const checkNameDuplicated = async () => {
+    const name = formData.name;
+    try {
+      const response = await handleCheckName(name);
 
-    if (isDuplicateSuccess) {
-      setValue('nameDuplicate', true, { shouldValidate: true });
-    } else {
-      setValue('nameDuplicate', false, { shouldValidate: true });
-      setError('name', {
-        message: FOOD_TRUCK_ERROR_MESSAGE.nameDuplicate.duplicated,
-      });
+      if (response?.duplicated) {
+        setValue('isNameDuplicated', true, { shouldValidate: true });
+        setValue('isNameChecked', true, { shouldValidate: true });
+        setError('name', {
+          message: FOOD_TRUCK_ERROR_MESSAGE.nameDuplicate.duplicated,
+        });
+      } else {
+        setValue('isNameChecked', true, { shouldValidate: true });
+        setValue('isNameDuplicated', false, { shouldValidate: true });
+        clearErrors('name');
+      }
+    } catch {
+      // useFoodTruckName의 onError에서 토스트 처리됨
     }
   };
 
@@ -118,7 +137,8 @@ export const useBasicInfo = () => {
     photoUrls: formData.photoUrls,
     operatingInfo: formData.operatingInfo,
     option: formData.option,
-    nameDuplicate: formData.nameDuplicate,
+    isNameChecked: formData.isNameChecked,
+    isNameDuplicated: formData.isNameDuplicated,
     canCheckNameDuplicate,
     // Errors
     nameError: errors.name?.message,