From 5412f28576e8a43d528df417d7ee075c6f14fff3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Wed, 24 Jan 2024 00:58:53 +0900
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20&=20?=
=?UTF-8?q?=EC=BF=A0=ED=8F=B0=20=EC=88=98=EC=A0=95=20=EA=B3=B5=EC=9A=A9=20?=
=?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
=?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/common/ErrorModal/index.tsx | 104 +++++++++++++++++++++
src/components/common/index.tsx | 1 +
src/types/errorModal.ts | 9 ++
3 files changed, 114 insertions(+)
create mode 100644 src/components/common/ErrorModal/index.tsx
create mode 100644 src/types/errorModal.ts
diff --git a/src/components/common/ErrorModal/index.tsx b/src/components/common/ErrorModal/index.tsx
new file mode 100644
index 00000000..0dfdd3a5
--- /dev/null
+++ b/src/components/common/ErrorModal/index.tsx
@@ -0,0 +1,104 @@
+import styled from '@emotion/styled';
+
+import ErrorIcon from '@assets/icons/ic-error.svg';
+import { ErrorModalProps } from '@/types/errorModal';
+
+const ErrorModal = ({ modalContent, ButtonFunc }: ErrorModalProps) => {
+ return (
+
+
+ <>
+
+ {modalContent.text}
+ {modalContent.errorText}
+ 확인
+ >
+
+
+ );
+};
+
+export default ErrorModal;
+
+const Backdrop = styled.div`
+ position: fixed;
+
+ width: 100vw;
+ height: 100vh;
+
+ background: rgba(66, 66, 66, 0.5);
+
+ z-index: 110;
+`;
+
+const Modal = styled.div`
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ width: 517px;
+ height: 249px;
+
+ padding: 59px auto 32px;
+ border-radius: 16px;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ background-color: #fff;
+ box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.25);
+`;
+
+const Icon = styled.img`
+ width: 28px;
+ height: 28px;
+
+ margin-bottom: 14px;
+`;
+
+const Text = styled.p`
+ color: #404446;
+ text-align: center;
+ font-family: 'Noto Sans KR';
+ font-size: 15px;
+ font-weight: 500;
+ line-height: 22px;
+`;
+
+const ErrorText = styled.p`
+ margin-bottom: 28px;
+
+ color: #da1e28;
+ text-align: center;
+ font-family: 'Noto Sans KR';
+ font-size: 15px;
+ font-weight: 700;
+ line-height: 22px;
+`;
+
+const ConfirmButton = styled.button`
+ width: 220px;
+ height: 44px;
+
+ border-radius: 12px;
+ border: none;
+
+ color: #fff;
+ font-family: 'Noto Sans KR';
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 32px;
+
+ background-color: #1a2849;
+
+ &:hover {
+ background-color: #5f6980;
+ cursor: pointer;
+ }
+`;
diff --git a/src/components/common/index.tsx b/src/components/common/index.tsx
index 72b83916..55216cec 100644
--- a/src/components/common/index.tsx
+++ b/src/components/common/index.tsx
@@ -2,3 +2,4 @@ export { default as Layout } from './Layout';
export { default as DashboardHeader } from './DashboardHeader';
export { default as MobileDashboardHeader } from './MobileDashboardHeader';
export { default as Footer } from './Footer';
+export { default as ErrorModal } from './ErrorModal';
diff --git a/src/types/errorModal.ts b/src/types/errorModal.ts
new file mode 100644
index 00000000..d496bfa8
--- /dev/null
+++ b/src/types/errorModal.ts
@@ -0,0 +1,9 @@
+export type ModalContent = {
+ text: string;
+ errorText: string;
+};
+
+export type ErrorModalProps = {
+ modalContent: ModalContent;
+ ButtonFunc: () => void;
+};
From 940754da7b2358e5b2eb591c42819c85a357d0d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Wed, 24 Jan 2024 01:35:03 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20API=20?=
=?UTF-8?q?=EC=9D=91=EB=8B=B5=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=AA=A8?=
=?UTF-8?q?=EB=8B=AC=20=EB=9D=84=EC=9A=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/lib/postLogin.ts | 11 ++++--
src/components/Login/LoginForm/index.tsx | 11 +++---
src/pages/Login/index.tsx | 43 ++++++++++++++++++------
src/types/login.ts | 4 +++
4 files changed, 50 insertions(+), 19 deletions(-)
diff --git a/src/api/lib/postLogin.ts b/src/api/lib/postLogin.ts
index 1879c6ef..d582b3cf 100644
--- a/src/api/lib/postLogin.ts
+++ b/src/api/lib/postLogin.ts
@@ -1,9 +1,16 @@
import { LoginData } from '@/types/auth';
import { instance } from '..';
+import { AxiosError } from 'axios';
const postLogin = async (loginData: LoginData) => {
- const response = await instance.post('/v1/member/login', loginData);
- return response.data;
+ try {
+ const response = await instance.post('/v1/member/login', loginData);
+ return response.data;
+ } catch (error) {
+ if (error instanceof AxiosError) {
+ throw error;
+ }
+ }
};
export default postLogin;
diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx
index eec62c84..5a380919 100644
--- a/src/components/Login/LoginForm/index.tsx
+++ b/src/components/Login/LoginForm/index.tsx
@@ -8,7 +8,7 @@ import {
FieldValues
} from 'react-hook-form';
-import { InputValidation } from '@/types/login';
+import { InputValidation, LoginFormProps } from '@/types/login';
import {
AuthButton,
AuthInputNormal,
@@ -18,7 +18,7 @@ import { LoginData } from '@/types/auth';
import { postLogin } from 'src/api';
import { setCookies } from '@utils/lib/cookies';
-const LoginForm = () => {
+const LoginForm = ({ handleModalOpen }: LoginFormProps) => {
const navigate = useNavigate();
const { state } = useLocation();
@@ -55,10 +55,9 @@ const LoginForm = () => {
}
} catch (error) {
if (error instanceof AxiosError) {
- console.log(error);
- // TODO : 에러코드에 따라 모달 표시 예정
- // error.response?.data.code;
- // error.response?.data.message;
+ if (error.response?.status === 404) {
+ handleModalOpen(error.response?.data.message);
+ }
}
}
};
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 128a460f..655d3911 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,20 +1,41 @@
+import { useState } from 'react';
import styled from '@emotion/styled';
-import { Footer } from '@components/common';
+import { ErrorModal, Footer } from '@components/common';
import { LoginForm, LoginTitle } from '@components/Login';
const Login = () => {
+ const initialValue = {
+ text: '이메일 또는 비밀번호를 잘못 입력했습니다.',
+ errorText: '입력하신 내용을 다시 확인해주세요.'
+ };
+ const [modalContent, setModalContent] = useState(initialValue);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const handleModalClose = () => setIsModalOpen(prev => !prev);
+ const handleModalOpen = (text: string) => {
+ setModalContent(prev => ({ ...prev, text }));
+ setIsModalOpen(true);
+ };
+
+ console.log('isModalOpen : ', isModalOpen);
return (
-
-
-
-
-
-
-
-
- {/* HACK: 모달 제작 후 오류 메세지 표시 예정 */}
-
+ <>
+
+
+
+
+
+
+
+
+ {isModalOpen && (
+
+ )}
+
+ >
);
};
diff --git a/src/types/login.ts b/src/types/login.ts
index 78ad6373..9b5ee382 100644
--- a/src/types/login.ts
+++ b/src/types/login.ts
@@ -3,3 +3,7 @@ export type LoginFormStyleProps = {
};
export type InputValidation = Pick;
+
+export type LoginFormProps = {
+ handleModalOpen: (text: string) => void;
+};
From b0fdff9de29f358ede7edb6814609a3837dbdfee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Wed, 24 Jan 2024 01:52:37 +0900
Subject: [PATCH 3/5] =?UTF-8?q?modify:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20API?=
=?UTF-8?q?=20=EC=9D=91=EB=8B=B5=20=EC=83=81=ED=83=9C=20=EC=BD=94=EB=93=9C?=
=?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EC=A1=B0=EA=B1=B4=EB=AC=B8=20?=
=?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/lib/postLogin.ts | 7 +++--
src/components/Login/LoginForm/index.tsx | 35 +++++++++++++-----------
src/pages/Login/index.tsx | 1 -
3 files changed, 23 insertions(+), 20 deletions(-)
diff --git a/src/api/lib/postLogin.ts b/src/api/lib/postLogin.ts
index d582b3cf..4d9a5e16 100644
--- a/src/api/lib/postLogin.ts
+++ b/src/api/lib/postLogin.ts
@@ -1,14 +1,15 @@
+import { AxiosError } from 'axios';
+
import { LoginData } from '@/types/auth';
import { instance } from '..';
-import { AxiosError } from 'axios';
const postLogin = async (loginData: LoginData) => {
try {
const response = await instance.post('/v1/member/login', loginData);
- return response.data;
+ return response;
} catch (error) {
if (error instanceof AxiosError) {
- throw error;
+ return error.response;
}
}
};
diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx
index 5a380919..e53b309b 100644
--- a/src/components/Login/LoginForm/index.tsx
+++ b/src/components/Login/LoginForm/index.tsx
@@ -1,5 +1,4 @@
import { useLocation, useNavigate } from 'react-router-dom';
-import { AxiosError } from 'axios';
import styled from '@emotion/styled';
import {
FormProvider,
@@ -22,9 +21,7 @@ const LoginForm = ({ handleModalOpen }: LoginFormProps) => {
const navigate = useNavigate();
const { state } = useLocation();
- const methods = useForm({
- mode: 'onBlur'
- });
+ const methods = useForm({ mode: 'onBlur' });
const {
formState: { errors, isValid },
handleSubmit
@@ -41,24 +38,30 @@ const LoginForm = ({ handleModalOpen }: LoginFormProps) => {
email: data.user_id,
password: data.user_password
};
- try {
- const response = await postLogin(formData);
- setCookies('userName', response.name, response.expires_in);
- setCookies('userEmail', response.email, response.expires_in);
- setCookies('accessToken', response.access_token, response.expires_in);
- setCookies('refreshToken', response.refresh_token, response.expires_in);
+
+ const response = await postLogin(formData);
+
+ if (response?.status === 200) {
+ setCookies('userName', response.data.name, response.data.expires_in);
+ setCookies('userEmail', response.data.email, response.data.expires_in);
+ setCookies(
+ 'accessToken',
+ response.data.access_token,
+ response.data.expires_in
+ );
+ setCookies(
+ 'refreshToken',
+ response.data.refresh_token,
+ response.data.expires_in
+ );
if (state) {
navigate(state);
} else {
navigate('/');
}
- } catch (error) {
- if (error instanceof AxiosError) {
- if (error.response?.status === 404) {
- handleModalOpen(error.response?.data.message);
- }
- }
+ } else if (response?.status === 404) {
+ handleModalOpen(response?.data.message);
}
};
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 655d3911..acaee058 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -17,7 +17,6 @@ const Login = () => {
setIsModalOpen(true);
};
- console.log('isModalOpen : ', isModalOpen);
return (
<>
From eebcf2bb3a81f20d8658a27dec2d77b6e994b3c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Wed, 24 Jan 2024 01:55:49 +0900
Subject: [PATCH 4/5] =?UTF-8?q?remove:=20=EB=B6=88=ED=95=84=EC=9A=94?=
=?UTF-8?q?=ED=95=9C=20fragment=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/Login/index.tsx | 33 ++++++++++++++++-----------------
1 file changed, 16 insertions(+), 17 deletions(-)
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index acaee058..4283e532 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -11,6 +11,7 @@ const Login = () => {
};
const [modalContent, setModalContent] = useState(initialValue);
const [isModalOpen, setIsModalOpen] = useState(false);
+
const handleModalClose = () => setIsModalOpen(prev => !prev);
const handleModalOpen = (text: string) => {
setModalContent(prev => ({ ...prev, text }));
@@ -18,23 +19,21 @@ const Login = () => {
};
return (
- <>
-
-
-
-
-
-
-
-
- {isModalOpen && (
-
- )}
-
- >
+
+
+
+
+
+
+
+
+ {isModalOpen && (
+
+ )}
+
);
};
From 87b5aaca5c7b5783e0664b8d6d32ad3fd7d15ca3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Wed, 24 Jan 2024 02:16:36 +0900
Subject: [PATCH 5/5] =?UTF-8?q?remove:=20=EB=B6=88=ED=95=84=EC=9A=94?=
=?UTF-8?q?=ED=95=9C=20fragment=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/common/ErrorModal/index.tsx | 16 +++++++---------
1 file changed, 7 insertions(+), 9 deletions(-)
diff --git a/src/components/common/ErrorModal/index.tsx b/src/components/common/ErrorModal/index.tsx
index 0dfdd3a5..918186cd 100644
--- a/src/components/common/ErrorModal/index.tsx
+++ b/src/components/common/ErrorModal/index.tsx
@@ -7,15 +7,13 @@ const ErrorModal = ({ modalContent, ButtonFunc }: ErrorModalProps) => {
return (
- <>
-
- {modalContent.text}
- {modalContent.errorText}
- 확인
- >
+
+ {modalContent.text}
+ {modalContent.errorText}
+ 확인
);