feat #11 마이페이지 API 수정

jigume · Feb 16, 2024 · 08f0ad3 · 08f0ad3
1 parent 5bf7722
commit 08f0ad3
Show file tree

Hide file tree

Showing 15 changed files with 126 additions and 117 deletions.
diff --git a/src/api/goods.ts b/src/api/goods.ts
@@ -1,17 +1,12 @@
 import { PreViewerMarker } from '@src/pages/Map/index.d';
 import { stringLatLng2Arr } from '@src/utils';
-import {
-  GoodSheetDTO,
-  GoodsDetailDTO,
-  GoodsListDTO,
-  GoodsMarkerListType,
-} from '@src/types/goods';
+import { GoodSheetDTO, GoodsDetailDTO, Marker } from '@src/types/goods';
 import qs from 'qs';
 import jigumeAxios from './axios';
 
 export const getGoodsList = async (
   map: kakao.maps.Map | null
-): Promise<GoodsMarkerListType | 'retry'> => {
+): Promise<Marker[] | 'retry'> => {
   if (!map) return 'retry';
 
   const center = map.getCenter();
@@ -20,22 +15,20 @@ export const getGoodsList = async (
 
   // 인코딩
   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),
-    },
+    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 response = await jigumeAxios
-    .get(`/api/goods/marker?${query}`)
-    .then((res) => res.data);
-  return response;
+  const response = await jigumeAxios.get(`/api/goods/marker?${query}`);
+
+  return response.data;
 };
 
 export const getSheetGoods = async (
-  preViewer: PreViewerMarker
+  preViewer: PreViewerMarker,
+  map: kakao.maps.Map | null
 ): Promise<GoodsDetailDTO | 'retry'> => {
   // if (!preViewer) return 'retry';
 
@@ -46,11 +39,9 @@ export const getSheetGoods = async (
   return response;
 };
 
-export const getSheetList = async ({
-  map,
-}: {
-  map: kakao.maps.Map | null;
-}): Promise<GoodSheetDTO | 'retry'> => {
+export const getSheetList = async (
+  map: kakao.maps.Map | null
+): Promise<GoodSheetDTO | 'retry'> => {
   if (!map) return 'retry';
 
   const center = map.getCenter();
@@ -80,3 +71,13 @@ export const getSheetList = async ({
 
   return response;
 };
+
+export const getGoodsPage = async (
+  id: number | string
+): Promise<GoodsDetailDTO> => {
+  const response = await jigumeAxios
+    .get(`/api/goods/${id}`)
+    .then((res) => res.data);
+
+  return response;
+};
diff --git a/src/api/introduce.ts b/src/api/introduce.ts
diff --git a/src/api/register.ts b/src/api/register.ts
@@ -9,7 +9,8 @@ import jigumeAxios from './axios';
 
 export const postGoods = async (
   images: File[],
-  goodsDto_: GoodsData
+  goodsDto_: GoodsData,
+  position: PositionType
 ): Promise<string> => {
   const imageFormData = new FormData();
   images.forEach((item, idx) => imageFormData.append(`images[${idx}]`, item));
@@ -28,7 +29,21 @@ export const postGoods = async (
         'Content-Type': 'multipart/form-data',
       },
     })
-    .then((res) => res.data);
+    .then(async (res) => {
+      const goodsId = res.data;
+      console.log('GOODS ID', goodsId);
+      await jigumeAxios
+        .post(`/api/goods/${goodsId}/coordinate/new`, {
+          latitude: position.lat,
+          longitude: position.lng,
+        })
+        .then(async () => {
+          await jigumeAxios.post(`/api/goods/${goodsId}/board`, {
+            content: goodsDto_.introduction,
+          });
+        });
+      return res.data;
+    });
 
   return response;
 };

diff --git a/src/common.ts b/src/common.ts
@@ -4,8 +4,6 @@ export const primaryPurple = '#E4CCFF';
 export const primaryBlue = '#0D99FF';
 
 export const backURL = 'http://43.201.105.35:8080';
-// export const backURL = 'https://api.jigume.site:8080/';
-// export const backURL = 'http://192.168.219.138:8080';
 
 export const prohibition = {
   description1:

diff --git a/src/pages/Goods/index.tsx b/src/pages/Goods/index.tsx
@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { useNavigate, Outlet, useLocation, useParams } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { add } from 'date-fns';
+import { getGoodsPage } from '@src/api/goods';
 import CarouselBox from './components/CarouselBox';
 import HeaderProfile from './components/HeaderProfile';
 import ProductInfo from './components/ProductInfo';
 import ProductContent from './components/ProductContent';
 import ChevronLeft from '../../asset/icon/chevronLeft.svg';
-import getIntroduce from '../../api/introduce';
 import PlaceInfo from './components/PlaceInfo';
 import IntroCategory from './components/IntroCategory';
 
@@ -27,12 +27,12 @@ export default function Goods() {
 
   const { data: goods, isSuccess } = useQuery(
     'itemDetail',
-    () => getIntroduce(idx as string),
+    () => getGoodsPage(idx as string),
     {
       onSuccess: (res) => {
         setLimitDate(dateFormetter(res.goodsPageDto.goodsLimitTime));
       },
-      onError: () => navigate('/err'),
+      // onError: () => navigate('/err'),
     }
   );
 

diff --git a/src/pages/Map/components/BottomSheetComponent/index.tsx b/src/pages/Map/components/BottomSheetComponent/index.tsx
@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import { useMutation } from 'react-query';
 import { GoodsListDTO, GoodsPageDTO } from '@src/types/goods';
-import { getSheetGoods, getSheetList } from '../../../../api/goods';
+
+import { getGoodsList, getSheetGoods, getSheetList } from '@src/api/goods';
 import { BottomSheetType, FilterType } from './index.d';
 import category from './data';
 import SheetHeader from './components/SheetHeader';
@@ -26,7 +27,7 @@ export default function BottomSheetComponent({
   // 미리보기 fetch fn
   const { mutate: preViewMutate } = useMutation({
     mutationKey: 'getSheetDetail',
-    mutationFn: () => getSheetGoods(preViewer),
+    mutationFn: () => getSheetGoods(preViewer, map),
     onSuccess: (res) => {
       if (res === 'retry') preViewMutate(preViewer);
       else
@@ -52,15 +53,15 @@ export default function BottomSheetComponent({
     mutationFn: getSheetList,
     onSuccess: (res) => {
       console.log(res);
-      if (res === 'retry') allMutate({ map });
+      if (res === 'retry') allMutate(map);
       else setGoodsArr(res.goodsListDtoList);
     },
   });
 
   useEffect(() => {
     if (isOpen)
       if (preViewer) preViewMutate(preViewer);
-      else allMutate({ map });
+      else allMutate(map);
   }, [isOpen]);
 
   return (

diff --git a/src/pages/Map/index.d.ts b/src/pages/Map/index.d.ts
@@ -1,12 +1,21 @@
 export type AddressType = {
-  maxX: number;
-  mapY: number;
+  lat: number;
+  lng: number;
 };
 
 // 상품 미리보기 오브젝트 @main
 export interface PreViewerMarker {
-  address: AddressType;
+  position: AddressType;
   categoryId: number;
   goodsId: number;
   goodsRepImgUrl?: string;
 }
+
+export type sheetProviderType = {
+  handle: React.RefObject<HTMLDivElement>;
+  sheet: React.RefObject<HTMLDivElement>;
+  content: React.RefObject<HTMLDivElement>;
+  isOpen: boolean;
+  sheetLevel: SheetLevelType;
+  handleSheet: (level?: SheetLevelType) => void;
+};
diff --git a/src/pages/Map/index.tsx b/src/pages/Map/index.tsx
@@ -10,11 +10,12 @@ import { throttle } from 'lodash';
 import { Marker } from '@src/types/goods';
 import { UserType } from '@src/types/data';
 import { PositionType } from '@src/types/map';
+import { getGoodsList } from '@src/api/goods';
+import jigumeAxios from '@src/api/axios';
 import { getCurrentLocation } from '../../utils';
 import BottomSheetComponent from './components/BottomSheetComponent';
 import Loading from './components/Loading';
 import { userState } from '../../data';
-import { getGoodsList } from '../../api/goods';
 import useBottomSheet from '../../hooks/useBottomSheet';
 import { setClusterDom, setMarkerDom } from './utils';
 import CurrentPoint from './components/CurrentPoint';
@@ -36,11 +37,10 @@ export default function Map() {
   const [isPositing, setIspositing] = useState(false);
 
   const initMap = (list: Marker[] | undefined) => {
-    if (!list) return;
     // marker to array
     const markersArray = list?.map((item) => {
       return new kakao.maps.CustomOverlay({
-        position: new kakao.maps.LatLng(item.address.mapY, item.address.mapX),
+        position: new kakao.maps.LatLng(item.latitude, item.longitude),
         content: setMarkerDom(item, sheetProvider, setPreViewer),
       });
     });
@@ -56,12 +56,14 @@ export default function Map() {
       // init map list
       if (res !== 'retry') {
         // 중복 방지
-        res.markerList.forEach((item) => {
-          setMarkerList((prev) =>
-            prev?.filter((prevItem) => prevItem.goodsId !== item.categoryId)
-          );
+        res.forEach((item) => {
+          setMarkerList((prev) => {
+            const temp = prev?.filter(
+              (prevItem) => prevItem.goodsId !== item.goodsId
+            );
+            return [...(temp || []), item];
+          });
         });
-        initMap(markerList);
       }
     },
   });
@@ -74,12 +76,8 @@ export default function Map() {
         'clustered',
         (cluster: kakao.maps.Cluster[]) => {
           cluster.forEach((item: any) => {
-            const imageUrl = item._markers[0].cc.querySelector('.prodImg').src;
-            const clusterDom = setClusterDom(
-              imageUrl,
-
-              item._markers.length
-            );
+            // const imageUrl = item._markers[0].cc.querySelector('.prodImg').src;
+            const clusterDom = setClusterDom('', item._markers.length);
             const clusterOberlay = item.getClusterMarker();
             clusterOberlay.setContent(clusterDom);
           });
@@ -158,7 +156,13 @@ export default function Map() {
     refetch();
   }, []);
 
-  // 주소 변환 및 마커 등록
+  // 마커 등록
+  useEffect(() => {
+    if (markerList) initMap(markerList);
+    console.log(markerList);
+  }, [markerList]);
+
+  // 주소 변환
   useEffect(() => {
     if (user.position && position !== undefined) {
       handleAddress();

diff --git a/src/pages/Map/utils.ts b/src/pages/Map/utils.ts
@@ -1,37 +1,53 @@
+import { Marker } from '@src/types/goods';
 import MarkerPin from '../../asset/icon/markerPin.svg';
+import { PreViewerMarker, sheetProviderType } from './index.d';
 
-export const setMarkerDom = (item, sheetProvider, setPreViewer) => {
+export const setMarkerDom = (
+  item: Marker,
+  sheetProvider: sheetProviderType,
+  setPreViewer: React.Dispatch<
+    React.SetStateAction<PreViewerMarker | undefined>
+  >
+) => {
   const markerElement = document.createElement('div');
   markerElement.className = 'relative z-10 w-[40px] h-[57px]';
   const markerPin = document.createElement('img');
   markerPin.src = MarkerPin;
   const markerImage = document.createElement('img');
   markerImage.className =
-    'absolute left-[5px] top-[5px] z-50 h-[30px] w-[30px] rounded-full bg-gray-300 prodImg';
-  markerImage.src = item.goodsRepImgUrl;
+    'absolute left-[5px] top-[5px] z-[99] h-[30px] w-[30px] rounded-full bg-gray-300 prodImg';
+  // markerImage.src = item.goodsRepImgUrl;
   markerElement.appendChild(markerPin);
   markerElement.appendChild(markerImage);
   markerElement.onclick = () => {
     sheetProvider.handleSheet('mid');
-    setPreViewer(item);
+    setPreViewer({
+      position: {
+        lat: item.latitude,
+        lng: item.longitude,
+      },
+      categoryId: item.categoryId,
+      goodsId: item.goodsId,
+      goodsRepImgUrl: '',
+    });
   };
 
   return markerElement;
 };
 
-export const setClusterDom = (imageUrl, count) => {
+export const setClusterDom = (imageUrl: string, count: number) => {
   const markerElement = document.createElement('div');
   markerElement.className = 'relative z-30 w-[40px] h-[57px]';
   const markerPin = document.createElement('img');
   markerPin.src = MarkerPin;
   const markerImage = document.createElement('img');
   markerImage.className =
     'absolute left-[5px] top-[5px] z-50 h-[30px] w-[30px] rounded-full bg-gray-300';
-  markerImage.src = imageUrl;
+  // markerImage.src = imageUrl;
   const markerCount = document.createElement('div');
   markerCount.className =
     'absolute w-7 h-7 rounded-full flex items-center justify-center text-sm z-50 -top-3 -right-4 text-white bg-[#F5535E]';
-  markerCount.textContent = count;
+  markerCount.textContent = String(count);
   markerElement.appendChild(markerPin);
   markerElement.appendChild(markerImage);
   markerElement.appendChild(markerCount);

diff --git a/src/pages/Register/components/Image/index.tsx b/src/pages/Register/components/Image/index.tsx
@@ -14,7 +14,6 @@ function Image() {
   const [slidesPerView, setSlidePerView] = useState<
     number | 'auto' | undefined
   >(1);
-  const fileRef = useRef<HTMLInputElement>(null);
 
   const encodeFileToBase64 = (fileBlob: File) => {
     // 이미지 선택 취소 시 예외처리
@@ -40,13 +39,6 @@ function Image() {
 
   const isMovable = data.image.length === 0;
 
-  useEffect(() => {
-    if (fileRef.current) {
-      fileRef.current.value = '';
-      setData((prev) => ({ ...prev, image: [], imageInput: [] }));
-    }
-  }, []);
-
   return (
     <div className="absolute left-1/2 flex h-[calc(100svh-48px)] w-screen max-w-screen-sm -translate-x-1/2 flex-col justify-between">
       <div />
@@ -69,7 +61,6 @@ function Image() {
           >
             <label htmlFor="image">
               <input
-                ref={fileRef}
                 type="file"
                 accept="image/jpg,image/png,image/jpeg,image/gif"
                 className="hidden"