diff --git a/src/api/goods.ts b/src/api/goods.ts index 0135efc..12e0271 100644 --- 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 => { - 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 => { - 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 index b668527..16a7be6 100644 --- 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 index 94a7db6..68e3af7 100644 --- 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 index 18f3973..7947145 100644 --- 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 index 1f80017..5e22a7d 100644 --- 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([]); const [filter, setFilter] = useState( @@ -52,7 +52,7 @@ 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); }, }); @@ -60,7 +60,7 @@ export default function BottomSheetComponent({ 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 index b9d8bc7..3916df4 100644 --- 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 (
@@ -230,7 +226,7 @@ export default function Map() { handleToCenter={handleToCenter} sheetProvider={sheetProvider} preViewer={preViewer} - bounds={mapRef.current?.getBounds()} + map={mapRef.current} />
); diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx index 3e70651..ac558b9 100644 --- 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({ title: '마이페이지', @@ -23,7 +23,7 @@ export default function Mypage() { title={profileHeader.title} isAlert={profileHeader.isAlert} /> - + ); }