diff --git a/src/api/axios.ts b/src/api/axios.ts index 32342a8..6f28a8e 100644 --- a/src/api/axios.ts +++ b/src/api/axios.ts @@ -1,5 +1,4 @@ import { backURL } from '@src/common'; -import { getToken } from '@src/utils'; import axios from 'axios'; export const jigumeAxios = axios.create({ @@ -11,6 +10,6 @@ export const jigumeAxios = axios.create({ }, }); -export const axiosHeaderAuth = { - Authorization: `Bearer ${getToken().accessToken}`, +export const axiosHeaderAuth = (token?: string) => { + return { Authorization: `Bearer ${token}` }; }; diff --git a/src/api/goods.ts b/src/api/goods.ts index b3c9ea9..af44437 100644 --- a/src/api/goods.ts +++ b/src/api/goods.ts @@ -11,7 +11,8 @@ import qs from 'qs'; import { axiosHeaderAuth, jigumeAxios } from './axios'; export const getGoodsList = async ( - map: kakao.maps.Map | null + map: kakao.maps.Map | null, + accessToken: string ): Promise => { if (!map) return 'retry'; @@ -29,7 +30,7 @@ export const getGoodsList = async ( const response = await jigumeAxios .get(`/api/goods/marker?${query}`, { - headers: axiosHeaderAuth, + headers: { ...axiosHeaderAuth(accessToken) }, }) .catch((res) => { throw Error(res); @@ -39,12 +40,15 @@ export const getGoodsList = async ( }; export const getSheetGoods = async ( - preViewer: PreViewerMarker + preViewer: PreViewerMarker, + accessToken: string ): Promise => { // if (!preViewer) return 'retry'; const response = await jigumeAxios - .get(`/api/goods/${preViewer.goodsId}`, { headers: axiosHeaderAuth }) + .get(`/api/goods/${preViewer.goodsId}`, { + headers: { ...axiosHeaderAuth(accessToken) }, + }) .then((res) => res.data) .catch((res) => { throw Error(res); @@ -53,9 +57,13 @@ export const getSheetGoods = async ( return response; }; -export const getSheetList = async ( - map: kakao.maps.Map | null -): Promise => { +export const getSheetList = async ({ + map, + accessToken, +}: { + map: kakao.maps.Map | null; + accessToken: string; +}): Promise => { if (!map) return 'retry'; const center = map.getCenter(); @@ -64,18 +72,6 @@ export const getSheetList = 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), - // }, - // pageable: { - // page: 0, - // size: 10, - // sort: [], - // }, - latitude: center.getLat().toFixed(6), longitude: center.getLng().toFixed(6), latitudeDelta: (arr[1] - arr[0]).toFixed(6), @@ -84,7 +80,7 @@ export const getSheetList = async ( const response = await jigumeAxios .get(`/api/goods/marker/list?${query}`, { - headers: axiosHeaderAuth, + headers: { ...axiosHeaderAuth(accessToken) }, }) .catch((res) => { throw Error(res); @@ -94,10 +90,11 @@ export const getSheetList = async ( }; export const getGoodsPage = async ( - id: number | string + id: number | string, + accessToken: string ): Promise => { const response = await jigumeAxios - .get(`/api/goods/${id}`, { headers: axiosHeaderAuth }) + .get(`/api/goods/${id}`, { headers: { ...axiosHeaderAuth(accessToken) } }) .then((res) => res.data) .catch((res) => { throw Error(res); @@ -109,20 +106,28 @@ export const getGoodsPage = async ( export const setWishGoods = async ({ id, isWished, + accessToken, }: { id: number | string; isWished: boolean; + accessToken: string; }) => { // await console.log('hello', isWished); const response = !isWished ? await jigumeAxios - .post(`/api/wish/${id}`, {}, { headers: axiosHeaderAuth }) + .post( + `/api/wish/${id}`, + {}, + { headers: { ...axiosHeaderAuth(accessToken) } } + ) .catch((res) => { throw Error(res); }) : await jigumeAxios - .delete(`/api/wish/${id}`, { headers: axiosHeaderAuth }) + .delete(`/api/wish/${id}`, { + headers: { ...axiosHeaderAuth(accessToken) }, + }) .catch((res) => { throw Error(res); }); @@ -130,9 +135,12 @@ export const setWishGoods = async ({ return response.data; }; -export const deleteWishGoods = async (id: number | string) => { +export const deleteWishGoods = async ( + id: number | string, + accessToken: string +) => { const response = await jigumeAxios - .delete(`/api/wish/${id}`, { headers: axiosHeaderAuth }) + .delete(`/api/wish/${id}`, { headers: { ...axiosHeaderAuth(accessToken) } }) .then((res) => res.data) .catch((res) => { throw Error(res); @@ -143,10 +151,13 @@ export const deleteWishGoods = async (id: number | string) => { export const getNotice = async ( goodsId: number | string, - boardId: number | string + boardId: number | string, + accessToken: string ): Promise => { const response = await jigumeAxios - .get(`/api/goods/${goodsId}/board/${boardId}`, { headers: axiosHeaderAuth }) + .get(`/api/goods/${goodsId}/board/${boardId}`, { + headers: { ...axiosHeaderAuth(accessToken) }, + }) .then((res) => res.data) .catch((res) => { throw Error(res); @@ -157,11 +168,12 @@ export const getNotice = async ( export const getComment = async ( goodsId: number | string, - boardId: number | string + boardId: number | string, + accessToken: string ): Promise => { const response = await jigumeAxios .get(`/api/goods/${goodsId}/board/${boardId}/comment`, { - headers: axiosHeaderAuth, + headers: { ...axiosHeaderAuth(accessToken) }, }) .then((res) => res.data) .catch((res) => { @@ -174,7 +186,8 @@ export const getComment = async ( export const postCommentAtBoard = async ( goodsId: number | string, boardId: number | string, - content: string + content: string, + accessToken: string ) => { const response = await jigumeAxios .post( @@ -182,7 +195,7 @@ export const postCommentAtBoard = async ( { content, }, - { headers: axiosHeaderAuth } + { headers: { ...axiosHeaderAuth(accessToken) } } ) .then((res) => res.data) .catch((res) => { @@ -197,11 +210,13 @@ export const postCommentAtComment = async ({ boardId, parentCommentId, content, + accessToken, }: { goodsId: number | string; boardId: number | string; parentCommentId: number; content: string; + accessToken: string; }) => { const response = await jigumeAxios .post( @@ -210,7 +225,7 @@ export const postCommentAtComment = async ({ parentCommentId, content, }, - { headers: axiosHeaderAuth } + { headers: { ...axiosHeaderAuth(accessToken) } } ) .then((res) => res.data) .catch((res) => { @@ -224,10 +239,12 @@ export const postModifyNotice = async ({ goodsId, boardId, boardContent, + accessToken, }: { goodsId: number | string; boardId: number | string; boardContent: string; + accessToken: string; }) => { const response = await jigumeAxios .post( @@ -235,7 +252,7 @@ export const postModifyNotice = async ({ { boardContent, }, - { headers: axiosHeaderAuth } + { headers: { ...axiosHeaderAuth(accessToken) } } ) .then((res) => res.data) .catch((res) => { diff --git a/src/api/user.ts b/src/api/user.ts index b8d6a7e..16fcf93 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -1,11 +1,10 @@ import axios from 'axios'; import { TokenProviderType } from '@src/types/user'; -import { InitUserType } from '@src/pages/Auth/components/Init/index.d'; import { AuthType } from '@src/types/data'; import img0 from '@src/asset/images/profiles/initProfile0.png'; import img1 from '@src/asset/images/profiles/initProfile1.png'; import img2 from '@src/asset/images/profiles/initProfile2.png'; -import { backURL, siteDomain } from '@src/common'; +import { backURL } from '@src/common'; import { axiosHeaderAuth, jigumeAxios } from './axios'; /** @@ -41,9 +40,15 @@ export const handleRefreshToken = async (auth: AuthType) => { return 'valid'; const response = await jigumeAxios - .post('/api/member/token', { - refreshToken: auth.refreshToken, - }) + .post( + '/api/member/token', + { + refreshToken: auth.refreshToken, + }, + { + headers: { ...axiosHeaderAuth(auth.accessToken) }, + } + ) .catch((err) => { throw Error(err); }); @@ -56,16 +61,18 @@ export const handleRefreshToken = async (auth: AuthType) => { */ export const codeProvide = async ( code: string | null, - domain?: string + auth: AuthType ): Promise => { /** @type {string} */ if (!code) throw Error('인가코드가 옳바르지 않습니다.'); const response: TokenProviderType = await axios .post( - `${backURL}/api/member/login?login-provider=${domain}&authorization-code=${code}`, + `${backURL}/api/member/login?login-provider=${auth.domain}&authorization-code=${code}`, {}, - { headers: { ...axiosHeaderAuth } } + { + headers: { ...axiosHeaderAuth(auth.accessToken) }, + } ) .then((res) => res.data) .catch((err) => { @@ -75,13 +82,13 @@ export const codeProvide = async ( return response; }; -export const kakaoLogout = async () => { +export const kakaoLogout = async (accessToken?: string) => { // kakao 서버에 요청 const response = await axios .post( 'https://kapi.kakao.com/v1/user/logout', {}, - { headers: axiosHeaderAuth } + { headers: axiosHeaderAuth(accessToken) } ) .catch((err) => { throw Error(err); @@ -90,10 +97,10 @@ export const kakaoLogout = async () => { return response; }; -export const checkNickname = async (nickname: string) => { +export const checkNickname = async (nickname: string, accessToken?: string) => { const response = await jigumeAxios .get('/api/member/nickname', { - headers: axiosHeaderAuth, + headers: { ...axiosHeaderAuth(accessToken) }, params: { nickname, }, @@ -105,7 +112,7 @@ export const checkNickname = async (nickname: string) => { return response; }; -export const updateProfile = async (file?: File) => { +export const updateProfile = async (file?: File, accessToken?: string) => { const initProfiles = [img0, img1, img2]; const formData = new FormData(); if (!file) { @@ -118,7 +125,7 @@ export const updateProfile = async (file?: File) => { const response = await jigumeAxios .post('/api/member/profile', formData, { headers: { - ...axiosHeaderAuth, + ...axiosHeaderAuth(accessToken), 'Content-Type': 'multipart/form-data', }, }) diff --git a/src/pages/Auth/components/Init/components/initUser.tsx b/src/pages/Auth/components/Init/components/initUser.tsx index 9eda3f8..8f91af0 100644 --- a/src/pages/Auth/components/Init/components/initUser.tsx +++ b/src/pages/Auth/components/Init/components/initUser.tsx @@ -4,8 +4,11 @@ import { useMutation } from 'react-query'; import NextButton from '@src/components/NextButton'; import { checkNickname } from '@src/api/user'; import { handleTextFieldColor, validNickname } from '@src/utils'; -import CircularProgress from './circularProgress'; +import { useRecoilState } from 'recoil'; +import { AuthType } from '@src/types/data'; +import { authState } from '@src/data'; import { InitContextType } from '../index.d'; +import CircularProgress from './circularProgress'; const initText = '최소 2글자, 최대 10글자까지 한글,영어, 숫자만 입력가능해요.'; @@ -13,6 +16,7 @@ export default function InitUser() { const [valid, setValid] = useState(false); const [alertText, setAlertText] = useState(initText); const { initUser, setInitUser } = useOutletContext(); + const [auth] = useRecoilState(authState); const handleNickname = (text: string) => { setValid(validNickname(text)); @@ -21,7 +25,7 @@ export default function InitUser() { const { mutate, isLoading, isError, isSuccess } = useMutation( 'checkNickname', - () => checkNickname(initUser.nickname) + () => checkNickname(initUser.nickname, auth.accessToken) ); const getTextColor = () => { diff --git a/src/pages/Auth/index.tsx b/src/pages/Auth/index.tsx index 489040e..766420d 100644 --- a/src/pages/Auth/index.tsx +++ b/src/pages/Auth/index.tsx @@ -13,7 +13,7 @@ export default function Auth() { const [searchParams] = useSearchParams(); const code = searchParams.get('code'); - useQuery('oauth', () => codeProvide(code, auth.domain), { + useQuery('oauth', () => codeProvide(code, auth), { retry: false, onSuccess: (data) => { // 초기 유저의 정보 입력 폼 diff --git a/src/pages/Goods/components/GoodsNotice/index.tsx b/src/pages/Goods/components/GoodsNotice/index.tsx index f297667..19b0189 100644 --- a/src/pages/Goods/components/GoodsNotice/index.tsx +++ b/src/pages/Goods/components/GoodsNotice/index.tsx @@ -2,10 +2,14 @@ import { getComment, getNotice } from '@src/api/goods'; import { useMutation } from 'react-query'; import { Outlet, useOutletContext } from 'react-router-dom'; import { useEffect } from 'react'; +import { authState } from '@src/data'; +import { AuthType } from '@src/types/data'; +import { useRecoilState } from 'recoil'; import { GoodsContextType } from '../../index.d'; export default function GoodsNotice() { const { goods, isSuccess } = useOutletContext(); + const [auth] = useRecoilState(authState); const { data: notice, @@ -14,7 +18,8 @@ export default function GoodsNotice() { } = useMutation('goodsNotice', () => getNotice( goods.goodsPageDto.goodsId as number, - goods.goodsPageDto.boardId as number + goods.goodsPageDto.boardId as number, + auth.accessToken as string ) ); @@ -25,7 +30,8 @@ export default function GoodsNotice() { } = useMutation('goodsNotice', () => getComment( goods.goodsPageDto.goodsId as number, - goods.goodsPageDto.boardId as number + goods.goodsPageDto.boardId as number, + auth.accessToken as string ) ); diff --git a/src/pages/Goods/components/GoodsNoticeContent/components/CommentsContent.tsx b/src/pages/Goods/components/GoodsNoticeContent/components/CommentsContent.tsx index 438443c..ea20b68 100644 --- a/src/pages/Goods/components/GoodsNoticeContent/components/CommentsContent.tsx +++ b/src/pages/Goods/components/GoodsNoticeContent/components/CommentsContent.tsx @@ -1,8 +1,6 @@ +import React from 'react'; import addCommentIcon from '@src/asset/icon/addCommentIcon.svg'; -import { GetCommentsDTO, GoodsPageDTO } from '@src/types/goods'; -import { useMutation } from 'react-query'; -import { getComment } from '@src/api/goods'; -import React, { useEffect } from 'react'; +import { GetCommentsDTO } from '@src/types/goods'; import { getFormettedDate } from '@src/utils'; import { CommentSkeleton } from '@src/components/Skeltons'; import { PostCommentStateType } from '@src/pages/Goods/index.d'; diff --git a/src/pages/Goods/components/GoodsNoticeContent/components/CommentsInput.tsx b/src/pages/Goods/components/GoodsNoticeContent/components/CommentsInput.tsx index fe85dfd..31d1258 100644 --- a/src/pages/Goods/components/GoodsNoticeContent/components/CommentsInput.tsx +++ b/src/pages/Goods/components/GoodsNoticeContent/components/CommentsInput.tsx @@ -3,6 +3,9 @@ import SendIcon from '@src/asset/icon/SendIcon.svg'; import { GoodsPageDTO } from '@src/types/goods'; import { useMutation } from 'react-query'; import { PostCommentStateType } from '@src/pages/Goods/index.d'; +import { authState } from '@src/data'; +import { AuthType } from '@src/types/data'; +import { useRecoilState } from 'recoil'; const initContent = { value: '', targetCommentId: -1 }; @@ -15,6 +18,7 @@ export default function CommentsInput({ content: PostCommentStateType; setContent: React.Dispatch>; }) { + const [auth] = useRecoilState(authState); const handleContent = (e: React.ChangeEvent) => { setContent((prev) => ({ ...prev, value: e.target.value })); }; @@ -25,7 +29,8 @@ export default function CommentsInput({ postCommentAtBoard( data.goodsId as number, data.boardId as number, - content.value + content.value, + auth.accessToken as string ), { onSuccess: () => setContent(initContent), @@ -49,6 +54,7 @@ export default function CommentsInput({ boardId: data.boardId as number, parentCommentId: content.targetCommentId, content: content.value, + accessToken: auth.accessToken as string, }); } }; diff --git a/src/pages/Goods/components/GoodsNoticeModify/index.tsx b/src/pages/Goods/components/GoodsNoticeModify/index.tsx index 56ae2f5..e18fe5f 100644 --- a/src/pages/Goods/components/GoodsNoticeModify/index.tsx +++ b/src/pages/Goods/components/GoodsNoticeModify/index.tsx @@ -4,6 +4,9 @@ import Loading from '@src/pages/Map/components/Loading'; import StyledTextarea from '@src/components/StyledTextarea'; import { useMutation } from 'react-query'; import { postModifyNotice } from '@src/api/goods'; +import { authState } from '@src/data'; +import { AuthType } from '@src/types/data'; +import { useRecoilState } from 'recoil'; import { GoodsNoticeContextType } from '../../index.d'; import ConfirmAlert from '../ConfirmAlert'; import NoticeModifyHeader from './components/NoticeModifyHeader'; @@ -13,6 +16,7 @@ export default function GoodsNoticeModify() { useOutletContext(); const [newNotice, setNewNotice] = useState(''); const [isConfirm, setIsConfirm] = useState(false); + const [auth] = useRecoilState(authState); const handleNotice = (e: React.ChangeEvent) => { setNewNotice(e.target.value); @@ -29,6 +33,7 @@ export default function GoodsNoticeModify() { goodsId: goods.goodsPageDto.goodsId, boardId: goods.goodsPageDto.boardId, boardContent: newNotice, + accessToken: auth.accessToken as string, }); }; diff --git a/src/pages/Goods/index.tsx b/src/pages/Goods/index.tsx index 6867250..1af187a 100644 --- a/src/pages/Goods/index.tsx +++ b/src/pages/Goods/index.tsx @@ -2,12 +2,16 @@ import React from 'react'; import { Outlet, useParams } from 'react-router-dom'; import { useQuery } from 'react-query'; import { getGoodsPage } from '@src/api/goods'; +import { useRecoilState } from 'recoil'; +import { AuthType } from '@src/types/data'; +import { authState } from '@src/data'; export default function Goods() { const { idx } = useParams(); + const [auth] = useRecoilState(authState); const { data: goods, isSuccess } = useQuery('goodsDetail', () => - getGoodsPage(idx as string) + getGoodsPage(idx as string, auth.accessToken as string) ); return ; diff --git a/src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx b/src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx index 453dd09..f7e2bb9 100644 --- a/src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx +++ b/src/pages/Map/components/BottomSheetComponent/components/ItemComponent.tsx @@ -7,8 +7,12 @@ import favoriteBordered from '@src/asset/icon/favoriteBordered.svg'; import { useMutation } from 'react-query'; import { throttle } from 'lodash'; import { setWishGoods } from '@src/api/goods'; +import { authState } from '@src/data'; +import { AuthType } from '@src/types/data'; +import { useRecoilState } from 'recoil'; export default function ItemComponent({ goods }: { goods?: GoodsListDTO }) { + const [auth] = useRecoilState(authState); const isWished = useRef(false); const navigate = useNavigate(); @@ -19,7 +23,11 @@ export default function ItemComponent({ goods }: { goods?: GoodsListDTO }) { }); const handleWish = () => { - setWish({ id: goods?.goodsId as number, isWished: isWished.current }); + setWish({ + id: goods?.goodsId as number, + isWished: isWished.current, + accessToken: auth.accessToken as string, + }); }; // 쓰롤틀링으로 요청 제한 diff --git a/src/pages/Map/components/BottomSheetComponent/index.tsx b/src/pages/Map/components/BottomSheetComponent/index.tsx index 253367a..072c128 100644 --- a/src/pages/Map/components/BottomSheetComponent/index.tsx +++ b/src/pages/Map/components/BottomSheetComponent/index.tsx @@ -3,6 +3,9 @@ import { motion } from 'framer-motion'; import { useMutation } from 'react-query'; import { GoodsListDTO } from '@src/types/goods'; import { getSheetGoods, getSheetList } from '@src/api/goods'; +import { useRecoilState } from 'recoil'; +import { AuthType } from '@src/types/data'; +import { authState } from '@src/data'; import { BottomSheetType, FilterType } from './index.d'; import category from './data'; import SheetHeader from './components/SheetHeader'; @@ -16,6 +19,7 @@ export default function BottomSheetComponent({ preViewer, map, }: BottomSheetType) { + const [auth] = useRecoilState(authState); const [goodsArr, setGoodsArr] = useState([]); const [filter, setFilter] = useState( category.map((item) => ({ ...item, checked: true })) @@ -26,7 +30,7 @@ export default function BottomSheetComponent({ // 미리보기 fetch fn const { mutate: preViewMutate } = useMutation({ mutationKey: 'getSheetDetail', - mutationFn: () => getSheetGoods(preViewer), + mutationFn: () => getSheetGoods(preViewer, auth.accessToken as string), onSuccess: (res) => { console.log(res); if (res === 'retry') preViewMutate(preViewer); @@ -53,7 +57,8 @@ export default function BottomSheetComponent({ mutationFn: getSheetList, onSuccess: (res) => { console.log(res); - if (res === 'retry') allMutate(map); + if (res === 'retry') + allMutate({ map, accessToken: auth.accessToken as string }); else setGoodsArr(res.goodsListDtoList); }, }); @@ -61,7 +66,7 @@ export default function BottomSheetComponent({ useEffect(() => { if (isOpen) if (preViewer) preViewMutate(preViewer); - else allMutate(map); + else allMutate({ map, accessToken: auth.accessToken as string }); }, [isOpen]); return ( diff --git a/src/pages/Map/index.tsx b/src/pages/Map/index.tsx index 07de911..c2e1d16 100644 --- a/src/pages/Map/index.tsx +++ b/src/pages/Map/index.tsx @@ -8,13 +8,13 @@ import { useRecoilState } from 'recoil'; import { useQuery } from 'react-query'; import { throttle } from 'lodash'; import { Marker } from '@src/types/goods'; -import { UserType } from '@src/types/data'; +import { AuthType, UserType } from '@src/types/data'; import { PositionType } from '@src/types/map'; import { getGoodsList } from '@src/api/goods'; import { getCurrentLocation } from '../../utils'; import BottomSheetComponent from './components/BottomSheetComponent'; import Loading from './components/Loading'; -import { userState } from '../../data'; +import { authState, userState } from '../../data'; import useBottomSheet from '../../hooks/useBottomSheet'; import { setClusterDom, setMarkerDom } from './utils'; import CurrentPoint from './components/CurrentPoint'; @@ -27,6 +27,7 @@ export default function Map() { const sheetProvider = useBottomSheet(); const [user, setUser] = useRecoilState(userState); + const [auth] = useRecoilState(authState); const [position, setPosition] = useState(undefined); const [address, setAddress] = useState('-'); const [preViewer, setPreViewer] = useState( @@ -50,22 +51,26 @@ export default function Map() { } }; - const { refetch } = useQuery('getGoods', () => getGoodsList(mapRef.current), { - onSuccess: (res) => { - // init map list - if (res !== 'retry') { - // 중복 방지 - res.forEach((item) => { - setMarkerList((prev) => { - const temp = prev?.filter( - (prevItem) => prevItem.goodsId !== item.goodsId - ); - return [...(temp || []), item]; + const { refetch } = useQuery( + 'getGoods', + () => getGoodsList(mapRef.current, auth.accessToken as string), + { + onSuccess: (res) => { + // init map list + if (res !== 'retry') { + // 중복 방지 + res.forEach((item) => { + setMarkerList((prev) => { + const temp = prev?.filter( + (prevItem) => prevItem.goodsId !== item.goodsId + ); + return [...(temp || []), item]; + }); }); - }); - } - }, - }); + } + }, + } + ); // 클러스터 완료되었을 때 데이터를 읽어 DOM으로 변환 const drawCluster = () => { diff --git a/src/pages/Mypage/components/EditProfile.tsx b/src/pages/Mypage/components/EditProfile.tsx index dd4b3df..679a8a3 100644 --- a/src/pages/Mypage/components/EditProfile.tsx +++ b/src/pages/Mypage/components/EditProfile.tsx @@ -1,6 +1,9 @@ import React, { useEffect, useState } from 'react'; import { useNavigate, useOutletContext } from 'react-router-dom'; import { useMutation } from 'react-query'; +import { authState } from '@src/data'; +import { AuthType } from '@src/types/data'; +import { useRecoilState } from 'recoil'; import NextButton from '../../../components/NextButton'; import cameraIcon from '../../../asset/icon/mdi_camera.svg'; import { @@ -25,6 +28,7 @@ export default function EditProfile() { image: false, nickname: false, }); + const [auth] = useRecoilState(authState); const navigate = useNavigate(); const handleNickname = (text: string) => { @@ -56,7 +60,9 @@ export default function EditProfile() { mutate: checkName, isLoading, isError, - } = useMutation('checkNickname', () => checkNickname(newProfile.nickname)); + } = useMutation('checkNickname', () => + checkNickname(newProfile.nickname, auth.accessToken) + ); const { mutate: updateImage } = useMutation( 'updateProfile', diff --git a/src/pages/Mypage/components/Profile.tsx b/src/pages/Mypage/components/Profile.tsx index 436184e..2eabf32 100644 --- a/src/pages/Mypage/components/Profile.tsx +++ b/src/pages/Mypage/components/Profile.tsx @@ -1,7 +1,8 @@ import { Link, useNavigate, useOutletContext } from 'react-router-dom'; import React, { useEffect } from 'react'; -import { useResetRecoilState } from 'recoil'; -import { useMutation, useQuery } from 'react-query'; +import { useRecoilState, useResetRecoilState } from 'recoil'; +import { useMutation } from 'react-query'; +import { AuthType } from '@src/types/data'; import { authState } from '../../../data'; import { kakaoLogout } from '../../../api/user'; @@ -16,8 +17,9 @@ export default function Profile() { const resetAuth = useResetRecoilState(authState); const { setProfileHeader, profile, isSuccess } = useOutletContext(); + const [auth] = useRecoilState(authState); - const logout = useMutation('logout', () => kakaoLogout(), { + const logout = useMutation('logout', () => kakaoLogout(auth.accessToken), { onMutate: () => console.log('RUN logout'), onSuccess: () => { resetAuth(); diff --git a/src/utils.tsx b/src/utils.tsx index 14d50e3..4ebe93d 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -147,6 +147,7 @@ export const getToken = (): { accessToken: string; refreshToken: string } => { const local = localStorage.getItem('recoil-persist'); const token = JSON.parse(local as string)?.jigumeAuth; + console.log(token); if (!token?.accessToken) throw Error('accessToken is not exist'); return token; } catch (error) {