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