From ebe8500e9f7676cb13fd14a32592f24c00fd4db5 Mon Sep 17 00:00:00 2001
From: Cha-Yunseul <117149045+Cha-Yunseul@users.noreply.github.com>
Date: Thu, 7 Dec 2023 15:00:47 +0900
Subject: [PATCH] =?UTF-8?q?#21=20Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20api?=
 =?UTF-8?q?=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/authPage/SignInOnlyCulPop.jsx | 25 +++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/authPage/SignInOnlyCulPop.jsx b/src/components/authPage/SignInOnlyCulPop.jsx
index 0211279..1708a5f 100644
--- a/src/components/authPage/SignInOnlyCulPop.jsx
+++ b/src/components/authPage/SignInOnlyCulPop.jsx
@@ -3,24 +3,37 @@ import { useDisclosure } from '@mantine/hooks';
 import { MdOutlineAlternateEmail } from 'react-icons/md';
 import { useNavigate } from 'react-router-dom';
 import { useForm, isEmail, hasLength } from '@mantine/form';
+import axios from 'axios';
+import { useSetRecoilState } from 'recoil';
+import userState from '../../recoil/atom/userState';
+import showNotification from '../../utils/showNotification';
 
 const SignInOnlyCulPop = () => {
+  const setUser = useSetRecoilState(userState);
+
   const navigate = useNavigate();
   const icon = <MdOutlineAlternateEmail style={{ width: rem(16), height: rem(16) }} />;
   const [visible, { toggle }] = useDisclosure(false);
 
   const form = useForm({
     validateInputOnChange: true,
-    initialValues: { email: '', password: '' },
+    initialValues: { email: '', pwd: '' },
     validate: {
       email: isEmail('이메일 형식이 유효하지 않습니다'),
-      password: hasLength({ min: 6, max: 12 }, '6자 이상, 12자 이하로 입력해주세요'),
+      pwd: hasLength({ min: 6, max: 12 }, '6자 이상, 12자 이하로 입력해주세요'),
     },
   });
 
-  const handleSubmit = data => {
-    console.log(data);
-    navigate('/');
+  const handleSubmit = async data => {
+    try {
+      const user = await axios.get('/users/login', data);
+
+      setUser(user);
+      navigate('/');
+    } catch (error) {
+      const message = error.response && error.response.statusCode === 401 ? error.response.statusMessage : undefined;
+      showNotification(false, '로그인', message);
+    }
   };
 
   return (
@@ -50,7 +63,7 @@ const SignInOnlyCulPop = () => {
             placeholder="Your password"
             visible={visible}
             onVisibilityChange={toggle}
-            {...form.getInputProps('password')}
+            {...form.getInputProps('pwd')}
           />
         </Flex>
         <Button type="submit" w={'100%'} size="md" my={20}>