Merge pull request #125 from kakao-tech-campus-2nd-step3/fix-login-error

Fix login error

src/api/services/user/login.api.ts

@@ -25,3 +25,16 @@ export const useKakaoLogin = ({ code }: KakaoLoginParam) => {
     queryFn: () => kakaoLogin({ code }),
   })
 }
+
+const login = async () => {
+  await fetchInstance.get('/api/user/login')
+}
+
+export const useLogin = () => {
+  return useQuery({
+    queryKey: ['login'],
+    queryFn: () => login(),
+    refetchOnWindowFocus: false,
+    enabled: false,
+  })
+}

src/pages/LoginPage/KakaoLoginButton/index.tsx

@@ -1,26 +1,26 @@
-import { Link } from 'react-router-dom'
-
 import { Flex, Image, Text } from '@chakra-ui/react'
 
+import { useLogin } from '@/api/services/user/login.api'
 import KakaoSymbol from '@/assets/kakao-logo-symbol.svg'
 
 export const KakaoLoginButton = () => {
+  const { refetch } = useLogin()
+
   return (
-    <Link to="/api/user/login">
-      <Flex
-        background="kakao"
-        rounded="6px"
-        justifyContent="center"
-        alignItems="center"
-        height={10}
-        gap={3}
-        _hover={{ cursor: 'pointer' }}
-      >
-        <Image src={KakaoSymbol} width={5} />
-        <Text fontSize="14px" fontWeight="bold" color="rgba(0, 0, 0, 0.85)">
-          카카오 로그인
-        </Text>
-      </Flex>
-    </Link>
+    <Flex
+      background="kakao"
+      rounded="6px"
+      justifyContent="center"
+      alignItems="center"
+      height={10}
+      gap={3}
+      _hover={{ cursor: 'pointer' }}
+      onClick={() => refetch()}
+    >
+      <Image src={KakaoSymbol} width={5} />
+      <Text fontSize="14px" fontWeight="bold" color="rgba(0, 0, 0, 0.85)">
+        카카오 로그인
+      </Text>
+    </Flex>
   )
 }