faet #18 Goods 조회 API 업데이트

jigume · Jan 27, 2024 · 5bf7722 · 5bf7722
1 parent 5f81d44
commit 5bf7722
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 69 deletions.
diff --git a/src/api/goods.ts b/src/api/goods.ts
@@ -10,20 +10,26 @@ import qs from 'qs';
 import jigumeAxios from './axios';
 
 export const getGoodsList = async (
-  bounds: kakao.maps.LatLngBounds | null
+  map: kakao.maps.Map | null
 ): Promise<GoodsMarkerListType | 'retry'> => {
-  if (!bounds) return 'retry';
+  if (!map) return 'retry';
+
+  const center = map.getCenter();
+  const bounds = map.getBounds();
+  const arr = stringLatLng2Arr(bounds);
+
+  // 인코딩
+  const query = qs.stringify({
+    coordinateRequestDto: {
+      latitude: center.getLat().toFixed(6),
+      longitude: center.getLng().toFixed(6),
+      latitudeDelta: (arr[1] - arr[0]).toFixed(6),
+      longitudeDelta: (arr[3] - arr[2]).toFixed(6),
+    },
+  });
 
-  const boundArr = stringLatLng2Arr(bounds);
   const response = await jigumeAxios
-    .get('/api/goods/marker/list', {
-      params: {
-        maxX: boundArr[3],
-        minX: boundArr[2],
-        maxY: boundArr[1],
-        minY: boundArr[0],
-      },
-    })
+    .get(`/api/goods/marker?${query}`)
     .then((res) => res.data);
   return response;
 };
@@ -41,19 +47,24 @@ export const getSheetGoods = async (
 };
 
 export const getSheetList = async ({
-  bounds,
+  map,
 }: {
-  bounds: kakao.maps.LatLngBounds | undefined;
+  map: kakao.maps.Map | null;
 }): Promise<GoodSheetDTO | 'retry'> => {
-  if (!bounds) return 'retry';
+  if (!map) return 'retry';
+
+  const center = map.getCenter();
+  const bounds = map.getBounds();
+  const arr = stringLatLng2Arr(bounds);
 
-  const boundArr = stringLatLng2Arr(bounds);
   // 특수문자 인코딩
   const query = qs.stringify({
-    maxX: boundArr[3],
-    minX: boundArr[2],
-    maxY: boundArr[1],
-    minY: boundArr[0],
+    coordinateRequestDto: {
+      latitude: center.getLat().toFixed(6),
+      longitude: center.getLng().toFixed(6),
+      latitudeDelta: (arr[1] - arr[0]).toFixed(6),
+      longitudeDelta: (arr[3] - arr[2]).toFixed(6),
+    },
     pageable: {
       page: 0,
       size: 5,

diff --git a/src/api/user.ts b/src/api/user.ts
@@ -17,13 +17,10 @@ export const setNewUser = async (param: InitUserType) => {
   const randomIdx = Math.round(Math.random() * 2);
   if (!param.position) return undefined;
   const response = await jigumeAxios.post('/api/member/info', {
-    method: 'post',
-    data: {
-      nickname: param.nickname,
-      mapX: param.position.lng,
-      mapY: param.position.lat,
-      profileImgUrl: param.image || initProfiles[randomIdx],
-    },
+    nickname: param.nickname,
+    longitude: param.position.lng,
+    latitude: param.position.lat,
+    profileImgUrl: param.image || initProfiles[randomIdx],
   });
 
   return response;
@@ -82,20 +79,24 @@ export const checkNickname = async (nickname: string) => {
 };
 
 export const updateProfile = async (param: NewProfileType) => {
-  const blobData = new Blob(
-    [JSON.stringify({ nickname: param.nickname, profileImgUrl: param.image })],
-    {
-      type: 'application/json',
-    }
-  );
+  // const blobData = new Blob(
+  //   { request: param.image },
+  //   {
+  //     type: 'application/json',
+  //   }
+  // );
 
   const formData = new FormData();
-  formData.append('UpdateMemberInfoDto', blobData);
+  formData.append('imageUploadRequest', param.image as string);
 
-  const response = await jigumeAxios.post('/api/member/info', {
-    data: formData,
+  console.log(formData);
+
+  const response = await jigumeAxios.post('/api/member/profile', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
   });
   console.log(response);
 
-  return response;
+  return response.data;
 };
diff --git a/src/pages/Auth/components/Init/components/initAddress.tsx b/src/pages/Auth/components/Init/components/initAddress.tsx
@@ -33,7 +33,10 @@ export default function InitAddress() {
       if (status === kakao.maps.services.Status.OK) {
         setInitUser((prev) => ({
           ...prev,
-          position: { lat: Number(result[0].x), lng: Number(result[0].y) },
+          position: {
+            latitude: Number(result[0].x),
+            longitude: Number(result[0].y),
+          },
         }));
         setAddress(fullAddress);
       }

diff --git a/src/pages/Map/components/BottomSheetComponent/index.d.ts b/src/pages/Map/components/BottomSheetComponent/index.d.ts
@@ -3,7 +3,7 @@ export type BottomSheetType = {
   handleToCenter: () => void;
   sheetProvider: sheetProvider;
   preViewer: PreViewerMarker;
-  bounds?: kakao.maps.LatLngBounds;
+  map: kakao.maps.Map | null;
 };
 
 export type sheetProvider = {

diff --git a/src/pages/Map/components/BottomSheetComponent/index.tsx b/src/pages/Map/components/BottomSheetComponent/index.tsx
@@ -14,7 +14,7 @@ export default function BottomSheetComponent({
   handleToCenter,
   sheetProvider,
   preViewer,
-  bounds,
+  map,
 }: BottomSheetType) {
   const [goodsArr, setGoodsArr] = useState<GoodsListDTO[]>([]);
   const [filter, setFilter] = useState<FilterType[]>(
@@ -52,15 +52,15 @@ export default function BottomSheetComponent({
     mutationFn: getSheetList,
     onSuccess: (res) => {
       console.log(res);
-      if (res === 'retry') allMutate({ bounds });
+      if (res === 'retry') allMutate({ map });
       else setGoodsArr(res.goodsListDtoList);
     },
   });
 
   useEffect(() => {
     if (isOpen)
       if (preViewer) preViewMutate(preViewer);
-      else allMutate({ bounds });
+      else allMutate({ map });
   }, [isOpen]);
 
   return (

diff --git a/src/pages/Map/index.tsx b/src/pages/Map/index.tsx
@@ -51,24 +51,20 @@ export default function Map() {
     }
   };
 
-  const { refetch } = useQuery(
-    'getGoods',
-    () => getGoodsList(mapRef.current && mapRef.current.getBounds()),
-    {
-      onSuccess: (res) => {
-        // init map list
-        if (res !== 'retry') {
-          // 중복 방지
-          res.markerList.forEach((item) => {
-            setMarkerList((prev) =>
-              prev?.filter((prevItem) => prevItem.goodsId !== item.categoryId)
-            );
-          });
-          initMap(markerList);
-        }
-      },
-    }
-  );
+  const { refetch } = useQuery('getGoods', () => getGoodsList(mapRef.current), {
+    onSuccess: (res) => {
+      // init map list
+      if (res !== 'retry') {
+        // 중복 방지
+        res.markerList.forEach((item) => {
+          setMarkerList((prev) =>
+            prev?.filter((prevItem) => prevItem.goodsId !== item.categoryId)
+          );
+        });
+        initMap(markerList);
+      }
+    },
+  });
 
   // 클러스터 완료되었을 때 데이터를 읽어 DOM으로 변환
   const drawCluster = () => {
@@ -186,9 +182,9 @@ export default function Map() {
     setIspositing(false);
   }, [user.position]);
 
-  useEffect(() => {
-    console.log(isPositing);
-  }, [isPositing]);
+  // useEffect(() => {
+  //   console.log(isPositing);
+  // }, [isPositing]);
 
   return (
     <div className="container mx-auto max-w-screen-sm px-0">
@@ -230,7 +226,7 @@ export default function Map() {
         handleToCenter={handleToCenter}
         sheetProvider={sheetProvider}
         preViewer={preViewer}
-        bounds={mapRef.current?.getBounds()}
+        map={mapRef.current}
       />
     </div>
   );

diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx
@@ -7,11 +7,11 @@ import { ProfileHeaderType } from './index.d';
 
 export default function Mypage() {
   // useQuery를 사용하여 fetch 함수 실행 (getProfile)
-  const { data: profile } = useQuery('getProfile', () => getProfile(), {
-    onSuccess: (data) => {
-      console.log(data);
-    },
-  });
+  // const { data: profile } = useQuery('getProfile', () => getProfile(), {
+  //   onSuccess: (data) => {
+  //     console.log(data);
+  //   },
+  // });
 
   const [profileHeader, setProfileHeader] = useState<ProfileHeaderType>({
     title: '마이페이지',
@@ -23,7 +23,7 @@ export default function Mypage() {
         title={profileHeader.title}
         isAlert={profileHeader.isAlert}
       />
-      <Outlet context={{ setProfileHeader, profile }} />
+      <Outlet context={{ setProfileHeader }} />
     </>
   );
 }