feat: 테스트용 버튼 만들기

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/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>