20250303_1322_Deploy (SWYP-team-2th#188)

* 마이페이지 미반영된 디자인을 대응한다. (SWYP-team-2th#169)

* 마이페이지 프로필 중앙 정렬

* 아이콘 사이즈 160px -> 120px

* 비회원일 경우 특정 버튼 클릭시, 로그인 팝업 띄우기 (SWYP-team-2th#182)

* 비회원일 경우 특정 버튼 클릭시, 로그인 팝업 띄우기

* 비회원 문구 추가

* 마감 시 UI 반영 안되는 문제 수정

* Fix 178/minor priority (SWYP-team-2th#184)

* 더보기 아이콘 추가

* favicon 수정

* 공유하기 바텀시트 아이콘 추가 및 디자인

* 게시글 삭제 텍스트 변경

* 마이페이지 tabs 텍스트 수정

* 댓글 List 하단 여백을 위하여 VotePage 내부 컴포넌트를 감싸는 div height 값 줄이기

* 내 투표 리스트 공유 버튼 UI 수정

* scrollbar hide 처리

* lint fix

* 댓글 작성 후에 댓글 칸에 이전에 적었던 내용이 남아있다. (SWYP-team-2th#185)

* 비회원으로 투표하고, 상세를 다시 조회하면 투표한 값이 반영되지 않는다. (SWYP-team-2th#186)

* 게스트 투표에도 로딩을 추가한다. (SWYP-team-2th#187)

* 첫 요청 시에 게스트 투표 결과가 반영되지 않는다.

---------

Co-authored-by: 정찬영 <[email protected]>

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<string | null> => {
   try {
     const response = await axiosInstance.post<{ accessToken: string }>(
@@ -38,41 +36,31 @@ const reissueToken = async (): Promise<string | null> => {
       },
     );
 
-    // 반환된 응답 데이터가 있으면
     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);
     return null;
   }
 };
 
-// 응답 인터셉터
-// 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';

src/api/useGetVoteDetail.ts

@@ -27,10 +27,16 @@ interface VoteDetailType {
 export default function useGetVoteDetail(shareUrl: string) {
   return useSuspenseQuery<VoteDetailType>({
     queryKey: ['voteDetail', shareUrl],
-    queryFn: () =>
-      request({
+    queryFn: () => {
+      const guestToken = localStorage.getItem('guestToken');
+
+      return request({
         method: 'GET',
         url: `/posts/shareUrl/${shareUrl}`,
-      }),
+        headers: {
+          ...(guestToken ? { 'Guest-Token': guestToken } : {}),
+        },
+      });
+    },
   });
 }

src/components/common/TextInput/TextInput.tsx

@@ -54,6 +54,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
             )}
             ref={ref}
             type="text"
+            value={value}
             {...restProps}
           />
           {rightNode && (

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 (
     <div className="flex w-full space-x-6 my-[15px] px-[12px] relative">
-      {isPending && (
+      {(isVotePending || isGuestVotePending) && (
         <div className="absolute w-full inset-0 z-10 bg-gray-100/50">
           <Loading />
         </div>