feat :: login & signup

src/pages/Login.tsx

@@ -1,17 +1,56 @@
 import styled from '@emotion/styled';
 import { Input } from '@/components/common/Input';
 import { XButton } from '@/components/common/XButton';
+import { useState } from 'react';
+import { login, signup } from '@/utils/apis/auth';
 
 export const Login = () => {
+  const [data, setData] = useState<{ account_id: string; password: string }>({ account_id: '', password: '' });
+
+  const { account_id, password } = data;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setData({
+      ...data,
+      [name]: value,
+    });
+  };
+
+  const onLogin = () => {
+    login(data)
+      .then((res) => {
+        console.log(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+        if (err.response.status === 404) {
+          const email: string | null = prompt('회원가입이 되지 않았습니다.\n이메일을 입력해주세요');
+          console.log(123);
+
+          if (email == null) return;
+          console.log(456);
+
+          signup({ ...data, email: email })
+            .then((res) => {
+              console.log(res.data);
+            })
+            .catch((err) => {
+              console.log(err);
+            });
+        }
+      });
+  };
+
   return (
     <Wrapper>
       <Title>Xquare에 로그인</Title>
       <InputContainer>
-        <Input label="이메일" width={326} />
-        <Input label="암호" width={326} type="password" />
+        <Input label="아이디" width={326} value={account_id} onChange={onChange} name="account_id" />
+        <Input label="암호" width={326} type="password" value={password} onChange={onChange} name="password" />
       </InputContainer>
       <ButtonContainer>
-        <XButton width={100} height={50}>
+        <XButton width={100} height={50} onClick={onLogin}>
           로그인
         </XButton>
       </ButtonContainer>

src/utils/apis/auth.ts

@@ -0,0 +1,12 @@
+import { instance } from './axios';
+import { SignInType, SignUpType } from '../types/authType';
+
+const router = 'auth';
+
+export const login = async (data: SignInType) => {
+  return await instance.post(`${router}/login`, data);
+};
+
+export const signup = async (data: SignUpType) => {
+  return await instance.post(`${router}/signup`, data);
+};