chore: dev와 merge

Author: 이정원

src/App.tsx

@@ -10,7 +10,7 @@ const queryClient = new QueryClient({
       refetchOnReconnect: true, // 네트워크 재연결 시 데이터 요청 여부
       refetchOnWindowFocus: true, // 브라우저 포커스 시 데이터 요청 여부
       staleTime: 1000 * 10, // 10초 동안 데이터 살아있삼
-      throwOnError: true, // 에러 발생 시 예외 던지기 여부
+      throwOnError: false, // 에러 발생 시 예외 던지기 여부
     },
   },
 });

src/assets/icons/Arrow.tsx

@@ -0,0 +1,11 @@
+const Arrow = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
+      <path
+        d="M10.0152 4.24986C9.89675 4.13147 9.73615 4.06496 9.5687 4.06496C9.40125 4.06496 9.24065 4.13147 9.12222 4.24986L5.99626 7.37582L2.8703 4.24986C2.75119 4.13482 2.59167 4.07117 2.42609 4.07261C2.26051 4.07405 2.10212 4.14046 1.98504 4.25755C1.86795 4.37464 1.80154 4.53303 1.8001 4.69861C1.79866 4.86419 1.86231 5.02371 1.97734 5.14281L5.54978 8.71525C5.66821 8.83364 5.82881 8.90015 5.99626 8.90015C6.16371 8.90015 6.32431 8.83364 6.44274 8.71525L10.0152 5.14281C10.1336 5.02438 10.2001 4.86379 10.2001 4.69633C10.2001 4.52888 10.1336 4.36828 10.0152 4.24986Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+export default Arrow;

src/common/components/Chip/index.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import * as s from './style.css';
+
+interface Props extends PropsWithChildren {
+  color?: 'gray' | 'main';
+  onClick?: () => void;
+}
+const Chip = ({ children, color = 'gray', onClick }: Props) => {
+  return (
+    <div className={s.Container({ color })} onClick={onClick}>
+      {children}
+    </div>
+  );
+};
+export default Chip;

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

@@ -0,0 +1,30 @@
+import { cva } from '@styled-system/css';
+
+export const Container = cva({
+  base: {
+    padding: '0.5rem 0.75rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '0.25rem',
+    rounded: 'full',
+    width: 'fit-content',
+    fontSize: '0.875rem',
+    fontWeight: 400,
+    cursor: 'pointer',
+  },
+  variants: {
+    color: {
+      main: {
+        backgroundColor: 'main-26',
+        border: '1px solid',
+        borderColor: 'main-54',
+        color: '100',
+      },
+      gray: {
+        backgroundColor: 'systemGray5',
+        color: '80',
+      },
+    },
+  },
+});

src/common/components/SelectButton/index.tsx

@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from 'react';
+
+import * as s from './style.css';
+import Arrow from '@/assets/icons/Arrow';
+
+interface Props extends PropsWithChildren {
+  active: boolean;
+  onClick?: () => void;
+}
+
+const SelectButton = ({ children, active, onClick }: Props) => {
+  // TODO: 자연스럽게 바뀌게 애니메이션 추가
+  return (
+    <button className={s.Container({ color: active ? 'main' : 'gray' })} onClick={onClick}>
+      {children}
+      <div className={s.Icon({ direction: active ? 'up' : 'down' })}>
+        <Arrow />
+      </div>
+    </button>
+  );
+};
+export default SelectButton;

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

@@ -0,0 +1,44 @@
+import { cva } from '@styled-system/css';
+
+export const Container = cva({
+  base: {
+    borderRadius: 'full',
+    padding: '0.375rem 0.375rem 0.375rem 0.625rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '0.25rem',
+    fontSize: '0.75rem',
+    fontWeight: 500,
+    cursor: 'pointer',
+    color: '100',
+  },
+  variants: {
+    color: {
+      main: {
+        border: '1px solid',
+        borderColor: 'main-54',
+        bgColor: 'main-26',
+      },
+      gray: {
+        bgColor: 'systemGray5',
+      },
+    },
+  },
+});
+
+export const Icon = cva({
+  base: {
+    color: '54',
+  },
+  variants: {
+    direction: {
+      up: {
+        transform: 'rotate(180deg)',
+      },
+      down: {
+        transform: 'rotate(0deg)',
+      },
+    },
+  },
+});

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,23 @@
+import client from '@/common/utils/client';
+import { useQuery } from '@tanstack/react-query';
+
+const getIsLogin = async () => {
+  try {
+    const response = await client.get('/api/test/is-login');
+    if (response.status === 200) {
+      if (response.data.data) return true;
+    }
+    return false;
+  } catch {
+    return false;
+  }
+};
+
+const useGetIsLogin = () => {
+  return useQuery({
+    queryKey: ['isLogin'],
+    queryFn: getIsLogin,
+  });
+};
+
+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 (err) {
+      return Promise.reject(err);
+    }
+  }
+
+  return Promise.reject(error);
+};
+
+client.interceptors.response.use(response => response, responseErrorHandler);
+export default client;