From 9505251e789b6d37c01249807008b0ce940601de Mon Sep 17 00:00:00 2001 From: YOOJS1205 Date: Mon, 3 Mar 2025 04:23:15 +0000 Subject: [PATCH] 20250303_1322_Deploy (#188) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 마이페이지 미반영된 디자인을 대응한다. (#169) * 마이페이지 프로필 중앙 정렬 * 아이콘 사이즈 160px -> 120px * 비회원일 경우 특정 버튼 클릭시, 로그인 팝업 띄우기 (#182) * 비회원일 경우 특정 버튼 클릭시, 로그인 팝업 띄우기 * 비회원 문구 추가 * 마감 시 UI 반영 안되는 문제 수정 * Fix 178/minor priority (#184) * 더보기 아이콘 추가 * favicon 수정 * 공유하기 바텀시트 아이콘 추가 및 디자인 * 게시글 삭제 텍스트 변경 * 마이페이지 tabs 텍스트 수정 * 댓글 List 하단 여백을 위하여 VotePage 내부 컴포넌트를 감싸는 div height 값 줄이기 * 내 투표 리스트 공유 버튼 UI 수정 * scrollbar hide 처리 * lint fix * 댓글 작성 후에 댓글 칸에 이전에 적었던 내용이 남아있다. (#185) * 비회원으로 투표하고, 상세를 다시 조회하면 투표한 값이 반영되지 않는다. (#186) * 게스트 투표에도 로딩을 추가한다. (#187) * 첫 요청 시에 게스트 투표 결과가 반영되지 않는다. --------- Co-authored-by: 정찬영 --- src/api/config.ts | 18 ++------- src/api/useGetVoteDetail.ts | 12 ++++-- src/components/common/TextInput/TextInput.tsx | 1 + .../Vote/VoteCard/VoteCardList.tsx | 38 ++++++++++--------- 4 files changed, 34 insertions(+), 35 deletions(-) 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) && (