feat: 인증 모달 API 연결

Author: hyunmindev

public/assets/icons/loading.svg

@@ -2,17 +2,23 @@ import PropTypes from 'prop-types';
 
 import { Wrapper } from './styles';
 
-function ModalButton({ children, type }) {
-  return <Wrapper type={type}>{children}</Wrapper>;
+function ModalButton({ children, type, isLoading }) {
+  return (
+    <Wrapper type={type} isLoading={isLoading}>
+      {children}
+    </Wrapper>
+  );
 }
 
 ModalButton.propTypes = {
   children: PropTypes.node.isRequired,
   type: PropTypes.node,
+  isLoading: PropTypes.bool,
 };
 
 ModalButton.defaultProps = {
   type: 'button',
+  isLoading: false,
 };
 
 export default ModalButton;

src/components/atoms/ModalButton/index.jsx

@@ -4,7 +4,7 @@ export const Wrapper = styled.button`
   align-self: center;
   background: transparent;
   height: 60px;
-  width: 168px;
+  width: ${({ isLoading }) => (isLoading ? '60px' : '168px')};
   padding: 0 24px;
   margin: 28px 0;
   border: none;

src/components/atoms/ModalButton/styles.js

@@ -2,20 +2,24 @@ import PropTypes from 'prop-types';
 
 import { Input } from './styles';
 
-function ModalInput({ type, placeholder, autoFocus, name }) {
-  return <Input type={type} placeholder={placeholder} autoFocus={autoFocus} name={name} />;
+function ModalInput({ type, placeholder, autoFocus, name, value }) {
+  return (
+    <Input type={type} placeholder={placeholder} autoFocus={autoFocus} name={name} value={value} />
+  );
 }
 
 ModalInput.propTypes = {
   type: PropTypes.string.isRequired,
   placeholder: PropTypes.string.isRequired,
   autoFocus: PropTypes.bool,
   name: PropTypes.string,
+  value: PropTypes.string,
 };
 
 ModalInput.defaultProps = {
   autoFocus: false,
   name: '',
+  value: '',
 };
 
 export default ModalInput;

src/components/atoms/ModalInput/index.jsx

@@ -12,29 +12,29 @@ import { Form, Title } from './styles';
 
 function AuthModal() {
   const [isAuthModalShow, setIsAuthModalShow] = useRecoilState(isAuthModalShowAtom);
-  const mutation = useMutation(({ email, password }) =>
-    axios.post('api/sign-in', { email, password }),
+  const { mutate, isLoading } = useMutation(
+    ({ email, password }) => axios.post('api/sign-in', { email, password }),
+    {
+      onSuccess: () => setIsAuthModalShow(false),
+    },
   );
 
   const signIn = (event) => {
     event.preventDefault();
     const formData = new FormData(event.target);
     const data = Object.fromEntries(formData);
-    mutation.mutate(data);
+    mutate(data);
   };
 
   return (
-    <ModalBase
-      isVisible={isAuthModalShow}
-      onClose={() => {
-        setIsAuthModalShow(false);
-      }}
-    >
+    <ModalBase isVisible={isAuthModalShow} onClose={() => setIsAuthModalShow(false)}>
       <Form onSubmit={signIn}>
         <Title>Welcome</Title>
-        <ModalInput type='email' placeholder='Email' autoFocus name='email' value='' />
+        <ModalInput type='email' placeholder='Email' autoFocus name='email' />
         <ModalInput type='password' placeholder='Password' name='password' />
-        <ModalButton type='submit'>Sign in</ModalButton>
+        <ModalButton type='submit' isLoading={isLoading}>
+          Sign in
+        </ModalButton>
       </Form>
     </ModalBase>
   );

src/components/molecules/AuthModal/index.jsx

@@ -1,9 +1,10 @@
 import axios from 'axios';
 
+const url = 'https://auth.kalgory.com/sign-in';
 async function handler(req, res) {
-  const { email: id, password } = req.body;
-  await axios.post('https://auth.kalgory.com/sign-in', { id, password });
-  res.status(200).json({ name: 'John Doe' });
+  const response = await axios.post(url, req.body);
+  res.setHeader('set-cookie', response.headers['set-cookie']);
+  res.status(response.status).end();
 }
 
 export default handler;