게스트 로그인 로직을 작성한다. (SWYP-team-2th#159)

src/App.tsx

@@ -7,7 +7,11 @@ import { getAccessToken } from '@/components/login/Auth/token';
 function App() {
   const navigate = useNavigate();
   const accessToken = getAccessToken();
-  const { data: myInfo, isLoading: isMyInfoLoading } = useGetMyInfo({
+  const {
+    data: myInfo,
+    isLoading: isMyInfoLoading,
+    isSuccess: isMyInfoSuccess,
+  } = useGetMyInfo({
     enabled: !!accessToken,
   });
 
@@ -18,10 +22,10 @@ function App() {
       return;
     }
 
-    if (myInfo) {
+    if (myInfo && isMyInfoSuccess) {
       navigate(`/user/${myInfo.id}`, { replace: true });
     }
-  }, [navigate, myInfo]);
+  }, [navigate, myInfo, isMyInfoSuccess]);
 
   return (
     <div className="w-full max-w-[480px] mx-auto my-0 h-[100dvh] flex items-center justify-center">

src/api/config.ts

@@ -79,6 +79,28 @@ axiosInstance.interceptors.response.use(
       }
     }
 
+    if (
+      error.response?.status === 400 &&
+      error.response.data.errorCode === 'INVALID_GUEST_HEADER'
+    ) {
+      try {
+        const response = await axiosInstance.post<{ guestToken: string }>(
+          '/auth/guest/token',
+          null,
+        );
+
+        if (response.data.guestToken) {
+          localStorage.setItem('guestToken', response.data.guestToken);
+          error.config.headers['Guest-Token'] = response.data.guestToken;
+          return axios(error.config);
+        }
+      } catch (err) {
+        console.error('400시 게스트 토큰 발급 중 오류:', err);
+        removeAccessToken();
+        window.location.href = '/onboarding';
+      }
+    }
+
     return Promise.reject(error);
   },
 );

src/api/usePostGuestVote.ts

@@ -0,0 +1,26 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { request } from '@/api/config';
+
+export default function usePostGuestVote(
+  postId: number,
+  options?: UseMutationOptions<unknown, Error, number>,
+) {
+  return useMutation<unknown, Error, number>({
+    mutationFn: (imageId: number) => {
+      return request({
+        method: 'POST',
+        url: `/posts/${postId}/votes/guest`,
+        headers: {
+          'Guest-Token': localStorage.getItem('guestToken') ?? '',
+        },
+        data: {
+          imageId,
+        },
+      });
+    },
+    onError: (err) => {
+      console.error('투표 에러:', err);
+    },
+    ...options,
+  });
+}

src/components/my/Profile/VoteList/ParticipatedVoteList/ParticipatedVoteList.tsx

@@ -23,7 +23,7 @@ export default function MyVoteList() {
     <div className="overflow-scroll grid grid-cols-3 gap-2">
       {participatedVoteList.map((vote) => (
         <Link
-          to={vote.shareUrl}
+          to={`/votes/${vote.shareUrl}`}
           key={vote.id}
           className="relative aspect-[71/106] rounded-xl overflow-hidden"
         >

src/components/vote-detail/Vote/VoteCard/VoteCardList.tsx

@@ -2,13 +2,16 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import VoteCardItem from './VoteCardItem';
 import ImageDetailModal from '../../ImageDetailModal';
+import usePostGuestVote from '@/api/usePostGuestVote';
 import useVote from '@/api/useVote';
 import { useDialog } from '@/components/common/Dialog/hooks';
 import Loading from '@/components/common/Loading';
+import { getAccessToken } from '@/components/login/Auth/token';
 import useVoteDetail from '@/components/vote-detail/Vote/VoteCard/hooks';
 
 export default function VoteCardList() {
   const { shareUrl } = useParams<{ shareUrl: string }>();
+  const { openDialog } = useDialog();
   const { voteDetail } = useVoteDetail(shareUrl ?? '');
   const queryClient = useQueryClient();
   const { mutate: voteMutate, isPending } = useVote(voteDetail.id, {
@@ -21,7 +24,13 @@ export default function VoteCardList() {
       });
     },
   });
-  const { openDialog } = useDialog();
+  const { mutate: postGuestVote } = usePostGuestVote(voteDetail.id, {
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['voteDetail', shareUrl],
+      });
+    },
+  });
 
   const handleClickVoteCardItem = (id: number) => {
     openDialog(
@@ -32,7 +41,13 @@ export default function VoteCardList() {
   const handleVote =
     (id: number) => (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
-      voteMutate(id);
+      const accessToken = getAccessToken();
+
+      if (accessToken) {
+        voteMutate(id);
+      } else {
+        postGuestVote(id);
+      }
     };
 
   return (