Refactor/#54 API 응답 형식 수정 및 연결 테스트, 로직 수정

apps/web/app/_apis/mutations/useCreateNewPlace.ts

@@ -0,0 +1,25 @@
+import { useMutation } from '@tanstack/react-query'
+import type { NewPlaceRequest } from '@/_apis/schemas/place'
+import { createNewPlace } from '@/_apis/services/place'
+import { useRouter } from 'next/navigation'
+import { CLIENT_PATH } from '@/_constants/path'
+
+export const useCreateNewPlace = () => {
+  const { replace } = useRouter()
+
+  return useMutation({
+    mutationFn: async (placeData: NewPlaceRequest) =>
+      await createNewPlace(placeData),
+    onSuccess: (res) => {
+      if (res.status === 'OK') {
+        replace(CLIENT_PATH.PLACE_NEW_SUCCESS)
+      } else {
+        replace(CLIENT_PATH.PLACE_NEW_FAIL)
+      }
+    },
+    onError: (error) => {
+      console.error(error)
+      replace(CLIENT_PATH.PLACE_NEW_FAIL)
+    },
+  })
+}

apps/web/app/_apis/queries/place.ts

@@ -17,7 +17,8 @@ export const PlaceQueryKeys = {
     [...PlaceQueryKeys.all(), 'ranking', sort, campus] as const,
   byCategory: (id: string, campus: CampusType) =>
     [...PlaceQueryKeys.all(), 'category', id, campus] as const,
-  byMap: () => [...PlaceQueryKeys.all(), 'map'] as const,
+  byMap: (bounds: MapBounds | null) =>
+    [...PlaceQueryKeys.all(), 'map', bounds] as const,
   byPreview: (kakaoPlaceId: string) =>
     [...PlaceQueryKeys.all(), 'preview', kakaoPlaceId] as const,
   byLike: () => [...PlaceQueryKeys.all(), 'like'] as const,
@@ -44,7 +45,7 @@ export const usePlaceQueries = {
 
   byMap: (bounds: MapBounds | null) => {
     return queryOptions({
-      queryKey: PlaceQueryKeys.byMap(),
+      queryKey: PlaceQueryKeys.byMap(bounds),
       queryFn: () => {
         if (!bounds) return Promise.resolve([])
         return getPlacesByMap(bounds)

apps/web/app/_apis/schemas/place.ts

@@ -9,6 +9,7 @@ const location = z.object({
 
 const menus = z.array(
   z.object({
+    menuId: z.number(),
     name: z.string(),
     price: z.number(),
     isRecommended: z.boolean(),
@@ -17,7 +18,7 @@ const menus = z.array(
 
 const photos = z.array(
   z.object({
-    photoId: z.number().transform(String),
+    photoId: z.nullable(z.number().transform(String)),
     photoUrl: z.url(),
     displayOrder: z.number(),
   }),
@@ -77,3 +78,6 @@ export type PlaceByMap = z.infer<typeof PlaceByMapSchema>
 export type PlaceDetail = z.infer<typeof PlaceDetailSchema>
 export type PlaceByPreview = z.infer<typeof PlaceByPreviewSchema>
 export type NewPlaceRequest = z.infer<typeof NewPlaceRequestSchema>
+export type NewPlaceResponse = {
+  status: 'OK' | 'ERROR'
+}

apps/web/app/_apis/services/category.ts

@@ -3,6 +3,7 @@ import { API_PATH } from '@/_constants/path'
 import { CategorySchema, Category } from '../schemas/category'
 
 export const getCategories = async (): Promise<Category[]> => {
-  const { data } = await axiosInstance.get(API_PATH.CATEGORY)
+  const { data: response } = await axiosInstance.get(API_PATH.CATEGORY)
+  const { data } = response
   return CategorySchema.array().parse(data)
 }

apps/web/app/_apis/services/event.ts

@@ -8,19 +8,25 @@ import {
 } from '@/_apis/schemas/event'
 
 export const getEventInfo = async (): Promise<Event> => {
-  const { data } = await axiosInstance.get(API_PATH.EVENT.INFO)
+  const { data: response } = await axiosInstance.get(API_PATH.EVENT.INFO)
+  const { data } = response
   return EventSchema.parse(data)
 }
 
 export const participationEvent = async (body: {
   eventId: string
   ticketsCount: number
 }) => {
-  const { data } = await axiosInstance.post(API_PATH.EVENT.PARTICIPATIONS, body)
+  const { data: response } = await axiosInstance.post(
+    API_PATH.EVENT.PARTICIPATIONS,
+    body,
+  )
+  const { data } = response
   return data
 }
 
 export const getEventResult = async (): Promise<EventResult | null> => {
-  const { data } = await axiosInstance.get(API_PATH.EVENT.RESULT)
+  const { data: response } = await axiosInstance.get(API_PATH.EVENT.RESULT)
+  const { data } = response
   return EventResultSchema.parse(data)
 }

apps/web/app/_apis/services/like.ts

@@ -7,13 +7,17 @@ type Response = {
 }
 
 export const addLike = async (placeId: string): Promise<Response> => {
-  const { data } = await axiosInstance.post(API_PATH.PLACES.LIKE.POST(placeId))
+  const { data: response } = await axiosInstance.post(
+    API_PATH.PLACES.LIKE.POST(placeId),
+  )
+  const { data } = response
   return data
 }
 
 export const removeLike = async (placeId: string): Promise<Response> => {
-  const { data } = await axiosInstance.delete(
+  const { data: response } = await axiosInstance.delete(
     API_PATH.PLACES.LIKE.DELETE(placeId),
   )
+  const { data } = response
   return data
 }

apps/web/app/_apis/services/place.ts

@@ -9,6 +9,8 @@ import {
   type MapBounds,
   type PlaceByMap,
   type PlaceByPreview,
+  type NewPlaceRequest,
+  type NewPlaceResponse,
   BasePlaceSchema,
   PlaceByMapSchema,
   PlaceDetailSchema,
@@ -23,19 +25,21 @@ export const getPlacesByRanking = async (
   sort: RankingPlaceSort,
   campus: CampusType,
 ): Promise<BasePlace[]> => {
-  const { data } = await axiosInstance.get(
+  const { data: response } = await axiosInstance.get(
     API_PATH.PLACES.BY_RANKING(sort, campus),
   )
+  const { data } = response
   return BasePlaceSchema.array().parse(data)
 }
 
 export const getPlacesByCategory = async (
   id: string,
   campus: CampusType,
 ): Promise<BasePlace[]> => {
-  const { data } = await axiosInstance.get(
+  const { data: response } = await axiosInstance.get(
     API_PATH.PLACES.BY_CATEGORY(id, campus),
   )
+  const { data } = response
   return BasePlaceSchema.array().parse(data)
 }
 
@@ -45,20 +49,21 @@ export const getPlacesByMap = async ({
   maxLatitude,
   maxLongitude,
 }: MapBounds): Promise<PlaceByMap[]> => {
-  const { data } = await axiosInstance.get(
+  const { data: response } = await axiosInstance.get(
     API_PATH.PLACES.BY_MAP({
       minLatitude,
       minLongitude,
       maxLatitude,
       maxLongitude,
     }),
   )
-
+  const { data } = response
   return PlaceByMapSchema.array().parse(data)
 }
 
 export const getPlaceDetail = async (id: string): Promise<PlaceDetail> => {
-  const { data } = await axiosInstance.get(API_PATH.PLACES.DETAIL(id))
+  const { data: response } = await axiosInstance.get(API_PATH.PLACES.DETAIL(id))
+  const { data } = response
   return PlaceDetailSchema.parse(data)
 }
 
@@ -78,20 +83,33 @@ export const getSearchPlaceByKakao = async ({
       },
     },
   )
-
   return data
 }
 
 export const getPlaceByPreview = async (
   kakaoPlaceId: string,
 ): Promise<PlaceByPreview> => {
-  const { data } = await axiosInstance.get(
+  const { data: response } = await axiosInstance.get(
     API_PATH.PLACES.NEW.PREVIEW(kakaoPlaceId),
   )
+  const { data } = response
   return PlaceByPreviewSchema.parse(data)
 }
 
 export const getPlacesByLike = async (): Promise<BasePlace[]> => {
-  const { data } = await axiosInstance.get(API_PATH.PLACES.LIKE.GET)
+  const { data: response } = await axiosInstance.get(API_PATH.PLACES.LIKE.GET)
+  const { data } = response
   return BasePlaceSchema.array().parse(data)
 }
+
+export const createNewPlace = async (
+  placeData: NewPlaceRequest,
+): Promise<NewPlaceResponse> => {
+  const dataSet = {
+    ...placeData,
+    tagIds: placeData.tagIds.map(Number),
+    categoryIds: placeData.categoryIds.map(Number),
+  }
+  const { data } = await axiosInstance.post(API_PATH.PLACES.NEW.CREATE, dataSet)
+  return data
+}

apps/web/app/_apis/services/request.ts

@@ -8,11 +8,15 @@ import {
 } from '@/_apis/schemas/request'
 
 export const getRequests = async (): Promise<Request[]> => {
-  const { data } = await axiosInstance.get(API_PATH.REQUEST.LIST)
+  const { data: response } = await axiosInstance.get(API_PATH.REQUEST.LIST)
+  const { data } = response
   return RequestSchema.array().parse(data)
 }
 
 export const getRequestDetail = async (id: string): Promise<RequestDetail> => {
-  const { data } = await axiosInstance.get(API_PATH.REQUEST.DETAIL(id))
+  const { data: response } = await axiosInstance.get(
+    API_PATH.REQUEST.DETAIL(id),
+  )
+  const { data } = response
   return RequestDetailSchema.parse(data)
 }

apps/web/app/_constants/campus.ts

@@ -1,21 +1,21 @@
 import { COLOR_VARIANTS } from '@repo/ui/consts/colorVariant'
 
 export const CAMPUS = {
-  singwan: '신관',
-  cheonan: '천안',
-  yesan: '예산',
+  SINGWAN: '신관',
+  CHEONAN: '천안',
+  YESAN: '예산',
 } as const
 
 export const CAMPUS_LOCATION = {
-  singwan: { latitude: 36.469483428385914, longitude: 127.14059828594706 },
-  cheonan: { latitude: 36.85101236046876, longitude: 127.15093333537096 },
-  yesan: { latitude: 36.66990298154316, longitude: 126.85937468290652 },
+  SINGWAN: { latitude: 36.469483428385914, longitude: 127.14059828594706 },
+  CHEONAN: { latitude: 36.85101236046876, longitude: 127.15093333537096 },
+  YESAN: { latitude: 36.66990298154316, longitude: 126.85937468290652 },
 } as const
 
 export const CAMPUS_COLOR = {
-  singwan: COLOR_VARIANTS.red,
-  cheonan: COLOR_VARIANTS.blue,
-  yesan: COLOR_VARIANTS.yellow,
+  SINGWAN: COLOR_VARIANTS.red,
+  CHEONAN: COLOR_VARIANTS.blue,
+  YESAN: COLOR_VARIANTS.yellow,
 } as const
 export type CampusType = keyof typeof CAMPUS
 export const CAMPUS_LIST = Object.keys(CAMPUS) as CampusType[]

apps/web/app/_constants/path.ts

@@ -5,7 +5,7 @@ export const API_PATH = {
   CATEGORY: '/categories',
   PLACES: {
     BY_CATEGORY: (id: string, campus: CampusType) =>
-      `/places?categoryId=${id}&campus=${campus}`,
+      `/categories/${id}/places?campus=${campus}`,
     BY_RANKING: (sort: RankingPlaceSort, campus: CampusType) =>
       `/places/ranking?sort=${sort}&campus=${campus}`,
     BY_MAP: ({
@@ -14,11 +14,12 @@ export const API_PATH = {
       maxLatitude,
       maxLongitude,
     }: MapBounds) =>
-      `/places?northEastLatitude=${maxLatitude}&northEastLongitudede=${maxLongitude}&southWestLatitude=${minLatitude}&southWestLongitude=${minLongitude}`,
+      `/places?maxLat=${maxLatitude}&maxLng=${maxLongitude}&minLat=${minLatitude}&minLng=${minLongitude}`,
     DETAIL: (id: string) => `/places/${id}`,
     NEW: {
       PREVIEW: (kakaoPlaceId: string) =>
         `/places/preview?kakaoPlaceId=${kakaoPlaceId}`,
+      CREATE: '/places',
     },
     LIKE: {
       GET: '/places/like',
@@ -45,6 +46,8 @@ export const CLIENT_PATH = {
   MAIN: '/',
   MAP: '/map',
   PLACE_NEW: '/places/new',
+  PLACE_NEW_SUCCESS: '/places/new/success',
+  PLACE_NEW_FAIL: '/places/new/fail',
   PLACE_SEARCH: '/places/search',
   PLACE_DETAIL: (id: string | number) => `/places/${id}`,
   CATEGORY_DETAIL: (id: string | number) => `/categories/${id}`,

apps/web/app/_mocks/handlers/index.ts

@@ -1,11 +1,11 @@
-import { CategoryHandlers } from './categoryHandlers'
+// import { CategoryHandlers } from './categoryHandlers'
 import { PlaceHandlers } from './placeHandlers'
 import { EventHandlers } from './eventHandlers'
 import { LikeHandlers } from './likeHandlers'
 import { RequestHandlers } from './requestHandlers'
 
 export const handlers = [
-  ...CategoryHandlers,
+  // ...CategoryHandlers,
   ...PlaceHandlers,
   ...EventHandlers,
   ...LikeHandlers,

apps/web/app/_mocks/handlers/placeHandlers.ts

@@ -2,41 +2,41 @@ import { http, HttpResponse } from 'msw'
 import { API_PATH } from '@/_constants/path'
 import { addBaseUrl } from './addBaseUrl'
 import {
-  PlaceDetail,
+  // PlaceDetail,
   Places,
-  PlacesWithLocation,
-  PlacePreview,
+  // PlacesWithLocation,
+  // PlacePreview,
 } from '../data/place'
 
 export const PlaceHandlers = [
-  http.get(
-    addBaseUrl(
-      API_PATH.PLACES.BY_MAP({
-        maxLatitude: 36.4756348,
-        maxLongitude: 127.1454263,
-        minLatitude: 36.4633315,
-        minLongitude: 127.1357703,
-      }),
-    ),
-    () => {
-      return HttpResponse.json(PlacesWithLocation)
-    },
-  ),
-  http.get(addBaseUrl(API_PATH.PLACES.BY_RANKING('likes', 'singwan')), () => {
-    return HttpResponse.json(Places)
-  }),
-  http.get(addBaseUrl(API_PATH.PLACES.BY_RANKING('views', 'singwan')), () => {
-    return HttpResponse.json(Places)
-  }),
-  http.get(addBaseUrl(API_PATH.PLACES.BY_CATEGORY('1', 'singwan')), () => {
-    return HttpResponse.json(Places)
-  }),
-  http.get(addBaseUrl(API_PATH.PLACES.DETAIL('1')), () => {
-    return HttpResponse.json(PlaceDetail)
-  }),
-  http.get(addBaseUrl(API_PATH.PLACES.NEW.PREVIEW('1')), () => {
-    return HttpResponse.json(PlacePreview)
-  }),
+  // http.get(
+  //   addBaseUrl(
+  //     API_PATH.PLACES.BY_MAP({
+  //       maxLatitude: 36.4756348,
+  //       maxLongitude: 127.1454263,
+  //       minLatitude: 36.4633315,
+  //       minLongitude: 127.1357703,
+  //     }),
+  //   ),
+  //   () => {
+  //     return HttpResponse.json(PlacesWithLocation)
+  //   },
+  // ),
+  // http.get(addBaseUrl(API_PATH.PLACES.BY_RANKING('likes', 'singwan')), () => {
+  //   return HttpResponse.json(Places)
+  // }),
+  // http.get(addBaseUrl(API_PATH.PLACES.BY_RANKING('views', 'singwan')), () => {
+  //   return HttpResponse.json(Places)
+  // }),
+  // http.get(addBaseUrl(API_PATH.PLACES.BY_CATEGORY('1', 'singwan')), () => {
+  //   return HttpResponse.json(Places)
+  // }),
+  // http.get(addBaseUrl(API_PATH.PLACES.DETAIL('1')), () => {
+  //   return HttpResponse.json(PlaceDetail)
+  // }),
+  // http.get(addBaseUrl(API_PATH.PLACES.NEW.PREVIEW('1')), () => {
+  //   return HttpResponse.json(PlacePreview)
+  // }),
   http.get(addBaseUrl(API_PATH.PLACES.LIKE.GET), () => {
     return HttpResponse.json(Places)
   }),

apps/web/app/_store/campus.ts

@@ -7,6 +7,6 @@ type CampusStore = {
 }
 
 export const useCampusStore = create<CampusStore>((set) => ({
-  campus: 'singwan',
+  campus: 'SINGWAN',
   setCampus: (campus: CampusType) => set({ campus: campus }),
 }))