From e3abbb13b3e6c9d14070a310b320ea0fc9b60fc7 Mon Sep 17 00:00:00 2001 From: iziz9 <46iz.us2@gmail.com> Date: Sun, 22 Oct 2023 23:59:06 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Refactor:=20=EC=9D=B4=EC=A0=84=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EB=B0=8F=20=ED=98=84=EC=9E=AC=20=EB=AA=A8=EB=8B=AC?= =?UTF-8?q?=20=ED=8F=B4=EB=8D=94=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 4 +- src/components/Style/Modal.tsx | 184 ------------------ .../{ModalWithHook.tsx => common/Modal.tsx} | 4 +- 3 files changed, 4 insertions(+), 188 deletions(-) delete mode 100644 src/components/Style/Modal.tsx rename src/components/{ModalWithHook.tsx => common/Modal.tsx} (98%) diff --git a/src/App.tsx b/src/App.tsx index 3fd9269..6caa238 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,7 +7,7 @@ import Sidebar from './components/Main/Sidebar' import { useEffect } from 'react' import { cheakOpenBox } from './store/slices/searchChkSlice' import { useDispatch } from 'react-redux' -import ModalWithHook from './components/ModalWithHook' +import Modal from './components/common/Modal' import Overlay from './components/Style/Overlay' import Interceptor from './hooks/useAxiosInterceptor' @@ -25,7 +25,7 @@ const App = () => { - +
diff --git a/src/components/Style/Modal.tsx b/src/components/Style/Modal.tsx deleted file mode 100644 index 9f71f84..0000000 --- a/src/components/Style/Modal.tsx +++ /dev/null @@ -1,184 +0,0 @@ -import { COLORS } from '@src/globalStyles' -import { styled } from 'styled-components' -import { CloseButton, InfoIcon } from '@src/constants/icons' -import { useMediaQuery } from 'react-responsive' -import { useNavigate } from 'react-router' - -const Modal = ({ modalOpen, setModalOpen, content, isConfirm, navigateOption, confirmFn }: IModalProps) => { - const isMobile = useMediaQuery({ - query: '(max-width: 833px)', - }) - - const navigate = useNavigate() - - const closeModal = () => { - setModalOpen(false) - } - - return ( - <> - {modalOpen && ( - - {!isMobile && ( - { - navigateOption && navigate(navigateOption) - closeModal() - }} - > - - - )} - - - {content.map((text) => { - return {text} - })} - - {!isMobile && isConfirm && ( - - { - confirmFn && confirmFn() - navigateOption && navigate(navigateOption) - closeModal() - }} - > - 확인 - - { - closeModal() - }} - > - 취소 - - - )} - {isMobile && !isConfirm && ( - { - confirmFn && confirmFn() - navigateOption && navigate(navigateOption) - closeModal() - }} - > - 확인 - - )} - {isMobile && isConfirm && ( - - { - navigateOption && navigate(navigateOption) - closeModal() - }} - > - 확인 - - { - closeModal() - }} - > - 취소 - - - )} - - )} - - ) -} - -const Container = styled.div` - position: fixed; - z-index: 1000; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: white; - width: 80%; - max-width: 500px; - height: 190px; - margin: auto; - border: none; - border-radius: 8px; - display: flex; - flex-direction: column; - justify-content: space-evenly; - font-weight: 700; - border: 1px solid ${COLORS.gray20}; - line-height: 23px; - - @media (min-width: 834px) { - min-width: 500px; - width: 50%; - max-width: 620px; - height: 240px; - } - - .info { - width: 64px; - height: 64px; - color: ${COLORS.gray20}; - margin: 0 auto; - - @media (max-width: 833px) { - display: none; - } - } -` - -const Content = styled.div` - display: flex; - flex-direction: column; - gap: 21px; - width: 90%; - margin: 0 auto; - text-align: center; - - span { - color: ${COLORS.font}; - font-size: 16px; - } -` - -const MobileButton = styled.button` - width: 90%; - height: 45px; - background-color: ${COLORS.gray20}; - border-radius: 8px; - margin: 0 auto; - font-size: 16px; - color: ${COLORS.gray40}; - font-weight: 700; - - &:hover { - color: ${COLORS.font}; - } -` - -const PcButton = styled.button` - position: absolute; - top: 26px; - right: 26px; -` - -const ConfirmContainer = styled.div` - position: relative; - width: 90%; - height: 45px; - display: flex; - justify-content: space-around; - margin: 0 auto; -` - -const ConfirmButton = styled.button` - font-size: 16px; - background-color: ${COLORS.gray20}; - width: 40%; - height: 40px; -` - -export default Modal diff --git a/src/components/ModalWithHook.tsx b/src/components/common/Modal.tsx similarity index 98% rename from src/components/ModalWithHook.tsx rename to src/components/common/Modal.tsx index d26f4dc..e19c53f 100644 --- a/src/components/ModalWithHook.tsx +++ b/src/components/common/Modal.tsx @@ -7,7 +7,7 @@ import { useSelector } from 'react-redux' import { RootState } from '@src/store/config' import { Mobile, PC } from '@src/hooks/useScreenHook' -const ModalWithHook = () => { +const Modal = () => { const { isModalOpen, isConfirm, content, navigateOption, confirmAction } = useSelector( (state: RootState) => state.modal ) @@ -186,4 +186,4 @@ const ConfirmButton = styled.button` height: 40px; ` -export default ModalWithHook +export default Modal From da74af691d73e73647cfd830b085f85a52c22045 Mon Sep 17 00:00:00 2001 From: iziz9 <46iz.us2@gmail.com> Date: Mon, 23 Oct 2023 00:14:51 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Refactor:=20=EB=AF=B8=EC=82=AC=EC=9A=A9=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Main/Footer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Main/Footer.tsx b/src/components/Main/Footer.tsx index 0f3abe2..865ecb0 100644 --- a/src/components/Main/Footer.tsx +++ b/src/components/Main/Footer.tsx @@ -48,7 +48,6 @@ const FooterContainer = styled.footer` background-color: ${COLORS.gray10}; color: ${COLORS.font}; margin-top: 50px; - /* bottom: 0; */ width: 100%; position: relative; padding: 30px 0;