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

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/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 } =
+    useFoodTruckForm(foodTruckIdNumber);
 
   const {
     formActiveTime,
@@ -58,25 +59,26 @@ 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);
+  }
+
   const handleNavigateBack = () => {
     navigate(ROUTES.FOOD_TRUCK_MANAGEMENT);
   };
 
   return (
     <FormProvider {...methods}>
       <Navigation
-        centerContent={
-          foodTruckDetailData ? '나의 푸드트럭 수정' : '나의 푸드트럭 등록'
-        }
+        centerContent={isEdit ? '나의 푸드트럭 수정' : '나의 푸드트럭 등록'}
         leftIcon={<Icon name='ic_back' />}
         handleLeftClick={handleNavigateBack}
       />
@@ -91,7 +93,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,17 @@
+import type {
+  BaseResponseFoodTruckIdResponse,
+  UpdateFoodTruckInfoRequest,
+} from 'apis/data-contracts';
+import { apiRequest } from '@api/apiRequest';
+
+export const updateMyFoodTruckInfoApi = async (
+  foodTruckId: number,
+  data: UpdateFoodTruckInfoRequest
+) => {
+  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-food-truck-form.ts

@@ -1,10 +1,17 @@
-import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { FOOD_TRUCK_ERROR_MESSAGE } from '@pages/@owner/food-truck-form/constants/food-truck';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import useToast from '@hooks/use-toast';
+
+import useFoodTruckDetail from '@pages/food-truck-detail/hooks/use-food-truck-detail';
+import { useMenusQuery } from '@pages/@owner/menu/hooks/use-menus-query';
 import {
   foodTruckSchema,
   type FoodTruckFormData,
 } from '@pages/@owner/food-truck-form/schemas/food-truck-form.schema';
+import { resetFoodTruckFormValue } from '@pages/@owner/food-truck-form/utils/reset-food-truck-form-value';
+import { FOOD_TRUCK_ERROR_MESSAGE } from '@pages/@owner/food-truck-form/constants/food-truck';
 
 const initialData = {
   name: '',
@@ -25,10 +32,11 @@ const initialData = {
   menus: false,
 };
 
-export const useFoodTruckForm = (prevData?: FoodTruckFormData) => {
+export const useFoodTruckForm = (foodTruckIdNumber: number) => {
+  const toast = useToast();
   const methods = useForm<FoodTruckFormData>({
     resolver: zodResolver(foodTruckSchema),
-    defaultValues: prevData ?? initialData,
+    defaultValues: initialData,
     mode: 'onChange',
   });
 
@@ -39,6 +47,27 @@ export const useFoodTruckForm = (prevData?: FoodTruckFormData) => {
     setError,
   } = methods;
 
+  // 기존 등록 푸드트럭 데이터 조회
+  const { foodTruckDetailData } = useFoodTruckDetail(foodTruckIdNumber);
+
+  // 메뉴 등록 여부를 위한 조회
+  const { data: menuData } = useMenusQuery(foodTruckIdNumber, '최신순');
+
+  const isEdit = !!foodTruckDetailData;
+
+  useEffect(() => {
+    if (!foodTruckDetailData) return;
+
+    const menus = menuData?.pages.flatMap(page => page?.content || []);
+    const result = resetFoodTruckFormValue(foodTruckDetailData, menus);
+
+    if (result.isError) {
+      toast.error('잘못된 정보입니다. 다시 시도해주세요.');
+      return;
+    }
+    reset(result.values);
+  }, [foodTruckDetailData, menuData, reset, toast]);
+
   const onSubmit = async (formData: FoodTruckFormData) => {
     if (!formData.nameDuplicate) {
       setError('name', {
@@ -47,13 +76,14 @@ export const useFoodTruckForm = (prevData?: FoodTruckFormData) => {
       return;
     }
     if (isValid && formData) {
-      //TODO: 계좌 등록 제출
+      // TODO: 푸드트럭 등록 api 호출
       alert('푸드트럭 등록 제출');
     }
   };
 
   return {
     // Form methods
+    isEdit,
     methods,
     handleSubmit: handleSubmit(onSubmit),
     reset,

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

@@ -0,0 +1,36 @@
+import { useNavigate } from 'react-router-dom';
+import type { UpdateFoodTruckInfoRequest } from 'apis/data-contracts';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import useToast from '@hooks/use-toast';
+import { updateMyFoodTruckInfoApi } from '@pages/@owner/food-truck-form/api';
+import { ROUTES } from '@router/constant/routes';
+import { FOOD_TRUCKS_QUERY_KEY } from '@shared/querykey/food-trucks';
+
+export const useMutationFoodTruckForm = () => {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const queryClient = useQueryClient();
+
+  const { mutate: updateFoodTruckInfo } = useMutation({
+    mutationFn: ({
+      foodTruckId,
+      data,
+    }: {
+      foodTruckId: number;
+      data: UpdateFoodTruckInfoRequest;
+    }) => updateMyFoodTruckInfoApi(foodTruckId, data),
+    onSuccess: () => {
+      toast.success('푸드트럭 정보가 업데이트 되었습니다.');
+      queryClient.invalidateQueries({ queryKey: FOOD_TRUCKS_QUERY_KEY.ALL });
+      navigate(ROUTES.FOOD_TRUCK_MANAGEMENT);
+    },
+    onError: error => {
+      toast.error(`업데이트 실패 : ${error.message}`);
+    },
+  });
+
+  return {
+    updateFoodTruckInfo,
+  };
+};

src/pages/@owner/food-truck-form/schemas/food-truck-form.schema.ts

@@ -5,12 +5,12 @@ import {
   FOOD_TRUCK_ERROR_MESSAGE,
   FOOD_TRUCK_MAX_LENGTH,
 } from '@pages/@owner/food-truck-form/constants/food-truck';
-import { AVAILABLE_QUANTITY } from '@constant/available-quantity';
-import { NEED_ELECTRICITY } from '@constant/need-electricity';
-import { PAYMENT_METHOD } from '@constant/payment-method';
-import { FOOD_CATEGORIES } from '@constant/food-categories';
+
 import type { AvailableDate } from '@type/available-date';
 import { validateFoodTruckFormTime } from '@pages/@owner/food-truck-form/utils/validate-food-truck-form-time';
+import { NEED_ELECTRICITY } from '@constant/need-electricity';
+import { PAYMENT_METHOD } from '@constant/payment-method';
+import { AVAILABLE_QUANTITY } from '@constant/available-quantity';
 
 export const foodTruckSchema = z.object({
   name: z
@@ -34,10 +34,12 @@ export const foodTruckSchema = z.object({
       FOOD_TRUCK_ERROR_MESSAGE.phoneNumber.required
     ),
   regionCodes: z.array(z.custom<RegionResponse>()),
-  availableQuantity: z.nativeEnum(AVAILABLE_QUANTITY),
-  needElectricity: z.nativeEnum(NEED_ELECTRICITY),
-  paymentMethod: z.nativeEnum(PAYMENT_METHOD),
-  menuCategories: z.array(z.nativeEnum(FOOD_CATEGORIES)),
+  availableQuantity: z.enum(
+    Object.values(AVAILABLE_QUANTITY).map(item => item)
+  ),
+  needElectricity: z.enum(Object.values(NEED_ELECTRICITY).map(item => item)),
+  paymentMethod: z.enum(Object.values(PAYMENT_METHOD).map(item => item)),
+  menuCategories: z.array(z.string()),
   photoUrls: z.array(z.string()).min(1, {
     message: FOOD_TRUCK_ERROR_MESSAGE.photoUrls.required,
   }),

src/pages/@owner/food-truck-form/utils/reset-food-truck-form-value.ts

@@ -0,0 +1,57 @@
+import type {
+  FoodTruckDetailResponse,
+  MyFoodTruckMenuResponse,
+} from 'apis/data-contracts';
+
+import { normalizeEnumValue } from '@utils/normalize-enum-value';
+import { AVAILABLE_QUANTITY } from '@constant/available-quantity';
+import { NEED_ELECTRICITY } from '@constant/need-electricity';
+import { PAYMENT_METHOD } from '@constant/payment-method';
+import { formatStringDatesToAvailableDates } from '@utils/date';
+
+export const resetFoodTruckFormValue = (
+  foodTruckDetailData: FoodTruckDetailResponse,
+  menus?: MyFoodTruckMenuResponse[]
+) => {
+  const availableQuantity = normalizeEnumValue(
+    AVAILABLE_QUANTITY,
+    foodTruckDetailData.availableQuantity
+  );
+  const needElectricity = normalizeEnumValue(
+    NEED_ELECTRICITY,
+    foodTruckDetailData.needElectricity
+  );
+  const payment = normalizeEnumValue(
+    PAYMENT_METHOD,
+    foodTruckDetailData.paymentMethod
+  );
+  if (!availableQuantity || !needElectricity || !payment) {
+    return {
+      isError: true,
+    };
+  }
+
+  return {
+    isError: false,
+    values: {
+      name: foodTruckDetailData.name,
+      nameDuplicate: true,
+      description: foodTruckDetailData.description,
+      phoneNumber: foodTruckDetailData.phoneNumber,
+      regionCodes: foodTruckDetailData.regionCodes,
+      availableQuantity: availableQuantity,
+      needElectricity: needElectricity,
+      paymentMethod: payment,
+      menuCategories: foodTruckDetailData.menuCategories,
+      photoUrls: foodTruckDetailData.photoUrl,
+      operatingInfo: foodTruckDetailData.operatingInfo,
+      option: foodTruckDetailData.option,
+      availableDates: formatStringDatesToAvailableDates(
+        foodTruckDetailData.availableDates ?? []
+      ),
+      activeTime: foodTruckDetailData.activeTime,
+      timeDiscussRequired: foodTruckDetailData.timeDiscussRequired,
+      menus: menus && menus.length > 0,
+    },
+  };
+};