Merge pull request #15 from DevKor-github/feat/#3/auth-client

Feat/#3/auth client

Author: halionaz

src/common/components/TestAPIButton/index.tsx

@@ -0,0 +1,13 @@
+import useGetIsLogin from '@/common/hooks/apis/useGetIsLogin';
+
+import * as s from './style.css';
+
+const TestAPIButton = () => {
+  const { refetch } = useGetIsLogin();
+  return (
+    <button className={s.Button} onClick={() => refetch()}>
+      API 테스팅하기
+    </button>
+  );
+};
+export default TestAPIButton;

src/common/components/TestAPIButton/style.css.ts

@@ -0,0 +1,22 @@
+import { css } from '@styled-system/css';
+
+export const Button = css({
+  padding: '10px 24px',
+  background: 'linear-gradient(90deg, #6a11cb 0%, #2575fc 100%)',
+  color: 'white',
+  border: 'none',
+  borderRadius: '8px',
+  fontWeight: 'bold',
+  fontSize: '16px',
+  cursor: 'pointer',
+  boxShadow: '0 2px 8px rgba(106, 17, 203, 0.15)',
+  transition: 'background 0.2s, transform 0.1s',
+  _hover: {
+    background: 'linear-gradient(90deg, #2575fc 0%, #6a11cb 100%)',
+    transform: 'translateY(-2px) scale(1.03)',
+  },
+  _active: {
+    background: 'linear-gradient(90deg, #6a11cb 0%, #2575fc 100%)',
+    transform: 'scale(0.98)',
+  },
+});

src/common/hooks/apis/useGetIsLogin.ts

@@ -0,0 +1,17 @@
+import client from '@/common/utils/client';
+import { useQuery } from '@tanstack/react-query';
+
+const getIsLogin = async () => {
+  const response = await client.get('/api/test/is-login');
+  return response.data;
+};
+
+const useGetIsLogin = () => {
+  return useQuery({
+    queryKey: ['isLogin'],
+    queryFn: getIsLogin,
+    enabled: false,
+  });
+};
+
+export default useGetIsLogin;

src/common/utils/client.ts

@@ -0,0 +1,31 @@
+import axios, { AxiosError } from 'axios';
+
+const client = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true,
+});
+
+const REFRESH_URL = '/api/v1/refresh-token';
+
+// TODO: Pending Requests Queue 추가 필요
+// 여러 요청이 동시에 발생할 경우 문제 발생 가능
+const responseErrorHandler = async (error: AxiosError) => {
+  const { config, response } = error;
+
+  if (response?.status === 401 && config && config.url !== REFRESH_URL) {
+    try {
+      await client.post(REFRESH_URL);
+      return client(config);
+    } catch {
+      return Promise.reject(error);
+    }
+  }
+
+  return Promise.reject(error);
+};
+
+client.interceptors.response.use(response => response, responseErrorHandler);
+export default client;

src/pages/HomePage/index.tsx

@@ -5,6 +5,7 @@ import type { ActivityComponentType } from '@stackflow/react';
 import * as s from './style.css';
 
 import AppScreenWithSafeArea from '@/common/components/AppScreenWithSafeArea';
+import TestAPIButton from '@/common/components/TestAPIButton';
 
 const HomePage: ActivityComponentType = () => {
   const { push } = useFlow();
@@ -16,6 +17,7 @@ const HomePage: ActivityComponentType = () => {
         <a href={`${import.meta.env.VITE_API_URL}/oauth2/authorization/kakao`}>카카오톡 로그인</a>
         <a href={`${import.meta.env.VITE_API_URL}/oauth2/authorization/google`}>구글 로그인</a>
         <i className={s.Container}>백엔드에몽 로그인 고쳐줘</i>
+        <TestAPIButton />
         <button onClick={() => push('PostPage', {})}>이동</button>
       </div>
     </AppScreenWithSafeArea>