diff --git a/src/api/config.ts b/src/api/config.ts index e2c667c..b1958ce 100644 --- a/src/api/config.ts +++ b/src/api/config.ts @@ -18,7 +18,6 @@ const axiosConfig: AxiosRequestConfig = { const axiosInstance = axios.create(axiosConfig); -// 요청시 localStorage에서 헤더에 토큰 넣어줌 axiosInstance.interceptors.request.use((config) => { const accessToken = getAccessToken(); if (accessToken) { @@ -27,7 +26,6 @@ axiosInstance.interceptors.request.use((config) => { return config; }); -// 토큰 재발급 함수 const reissueToken = async (): Promise => { try { const response = await axiosInstance.post<{ accessToken: string }>( @@ -38,14 +36,11 @@ const reissueToken = async (): Promise => { }, ); - // 반환된 응답 데이터가 있으면 if (response.data?.accessToken) { - // accessToken 저장 (재발급 성공) setAccessToken(response.data.accessToken); - console.log('토큰 재발급 성공:', response.data.accessToken); return response.data.accessToken; } - // 반환된 응답 값 없으면 null 반환시킴 + return null; } catch (error) { console.error('토큰 재발급 실패:', error); @@ -53,26 +48,19 @@ const reissueToken = async (): Promise => { } }; -// 응답 인터셉터 -// 401이면 토큰 재발급 API('/auth/reissue')를 호출 -// 재발급 성공 시 새 토큰으로 다시 요청 -// 실패 시 토큰 삭제 후 '/onboarding' 이동 - axiosInstance.interceptors.response.use( (response) => response, async (error) => { if (error.response?.status === 401 && error.config) { try { - const newAccessToken = await reissueToken(); // 401 에러시 새로운 토큰 요청 + const newAccessToken = await reissueToken(); - // 새로운 토큰 들어오면 새로운 토큰으로 다시 저장시키기 if (newAccessToken) { setAccessToken(newAccessToken); error.config.headers.Authorization = `Bearer ${newAccessToken}`; - return axios(error.config); // 재요청 + return axios(error.config); } } catch (err) { - // 토큰 재발급 실패 시 로그아웃 후 온보딩 페이지로 이동 console.error('401시 토큰 재발급 중 오류:', err); removeAccessToken(); window.location.href = '/onboarding'; diff --git a/src/api/useGetVoteDetail.ts b/src/api/useGetVoteDetail.ts index 2d1e8a6..3580eb8 100644 --- a/src/api/useGetVoteDetail.ts +++ b/src/api/useGetVoteDetail.ts @@ -27,10 +27,16 @@ interface VoteDetailType { export default function useGetVoteDetail(shareUrl: string) { return useSuspenseQuery({ queryKey: ['voteDetail', shareUrl], - queryFn: () => - request({ + queryFn: () => { + const guestToken = localStorage.getItem('guestToken'); + + return request({ method: 'GET', url: `/posts/shareUrl/${shareUrl}`, - }), + headers: { + ...(guestToken ? { 'Guest-Token': guestToken } : {}), + }, + }); + }, }); } diff --git a/src/components/common/TextInput/TextInput.tsx b/src/components/common/TextInput/TextInput.tsx index c84effc..97ba5b0 100644 --- a/src/components/common/TextInput/TextInput.tsx +++ b/src/components/common/TextInput/TextInput.tsx @@ -54,6 +54,7 @@ const TextInput = React.forwardRef( )} ref={ref} type="text" + value={value} {...restProps} /> {rightNode && ( diff --git a/src/components/vote-detail/Vote/VoteCard/VoteCardList.tsx b/src/components/vote-detail/Vote/VoteCard/VoteCardList.tsx index 216942d..568f8ef 100644 --- a/src/components/vote-detail/Vote/VoteCard/VoteCardList.tsx +++ b/src/components/vote-detail/Vote/VoteCard/VoteCardList.tsx @@ -14,23 +14,27 @@ export default function VoteCardList() { const { openDialog } = useDialog(); const { voteDetail } = useVoteDetail(shareUrl ?? ''); const queryClient = useQueryClient(); - const { mutate: voteMutate, isPending } = useVote(voteDetail.id, { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: ['voteDetail', shareUrl], - }); - queryClient.invalidateQueries({ - queryKey: ['voteStatus', voteDetail.id], - }); + const { mutate: voteMutate, isPending: isVotePending } = useVote( + voteDetail.id, + { + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ['voteDetail', shareUrl], + }); + queryClient.invalidateQueries({ + queryKey: ['voteStatus', voteDetail.id], + }); + }, }, - }); - const { mutate: postGuestVote } = usePostGuestVote(voteDetail.id, { - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: ['voteDetail', shareUrl], - }); - }, - }); + ); + const { mutate: postGuestVote, isPending: isGuestVotePending } = + usePostGuestVote(voteDetail.id, { + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ['voteDetail', shareUrl], + }); + }, + }); const handleClickVoteCardItem = (id: number) => { openDialog( @@ -52,7 +56,7 @@ export default function VoteCardList() { return (
- {isPending && ( + {(isVotePending || isGuestVotePending) && (