From 2bbcdfa6afb365d475e78b6d90c13e3e85af8f5d Mon Sep 17 00:00:00 2001 From: By_juun <78716842+BY-juun@users.noreply.github.com> Date: Wed, 15 Nov 2023 08:22:16 +0900 Subject: [PATCH 1/8] Delete yarn.lock --- yarn.lock | 28 ---------------------------- 1 file changed, 28 deletions(-) delete mode 100644 yarn.lock diff --git a/yarn.lock b/yarn.lock deleted file mode 100644 index b0213c30..00000000 --- a/yarn.lock +++ /dev/null @@ -1,28 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 - - -"@playwright/test@^1.31.2": - version "1.31.2" - resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.31.2.tgz#426d8545143a97a6fed250a2a27aa1c8e5e2548e" - integrity sha512-BYVutxDI4JeZKV1+ups6dt5WiqKhjBtIYowyZIJ3kBDmJgsuPKsqqKNIMFbUePLSCmp2cZu+BDL427RcNKTRYw== - dependencies: - "@types/node" "*" - playwright-core "1.31.2" - optionalDependencies: - fsevents "2.3.2" - -"@types/node@*": - version "18.15.3" - resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.3.tgz#f0b991c32cfc6a4e7f3399d6cb4b8cf9a0315014" - integrity sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw== - -fsevents@2.3.2: - version "2.3.2" - resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" - integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== - -playwright-core@1.31.2: - version "1.31.2" - resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.31.2.tgz#debf4b215d14cb619adb7e511c164d068075b2ed" - integrity sha512-a1dFgCNQw4vCsG7bnojZjDnPewZcw7tZUNFN0ZkcLYKj+mPmXvg4MpaaKZ5SgqPsOmqIf2YsVRkgqiRDxD+fDQ== From c799d61dba4be2042f065fe6fa7ccb0425c513d9 Mon Sep 17 00:00:00 2001 From: BY-juun Date: Tue, 14 Nov 2023 18:07:28 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EC=84=9C=EB=B2=84=EB=B0=B0?= =?UTF-8?q?=ED=8F=AC=20action=20=ED=85=8C=EC=8A=A4=ED=8A=B8=EB=A5=BC=20?= =?UTF-8?q?=EC=9C=84=ED=95=B4=20=EB=A7=8C=EB=93=A4=EC=97=88=EB=8D=98=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=84=B0=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- server/build/config/express.js | 3 --- server/src/config/express.ts | 4 ---- 2 files changed, 7 deletions(-) diff --git a/server/build/config/express.js b/server/build/config/express.js index 410e0c88..a72aba04 100644 --- a/server/build/config/express.js +++ b/server/build/config/express.js @@ -53,9 +53,6 @@ function default_1() { app.use(passport_1.default.initialize()); app.use(passport_1.default.session()); app.set("trust proxy", 1); - app.use("/test", (req, res, next) => { - res.send("github action deploy test44"); - }); _routes_1.default.forEach(({ url, router }) => { app.use(url, router); }); diff --git a/server/src/config/express.ts b/server/src/config/express.ts index 66afb295..9d9df033 100644 --- a/server/src/config/express.ts +++ b/server/src/config/express.ts @@ -47,10 +47,6 @@ export default async function () { app.use(passport.session()); app.set("trust proxy", 1); - app.use("/test", (req, res, next) => { - res.send("github action deploy test44"); - }); - ROUTER_LIST.forEach(({ url, router }) => { app.use(url, router); }); From cd428e4af5e8f5dfecc4c247781d42b146503886 Mon Sep 17 00:00:00 2001 From: BY-juun Date: Wed, 15 Nov 2023 17:08:33 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20MobileMenu=EB=A5=BC=20useModals=20?= =?UTF-8?q?=ED=9B=85=EC=9D=84=20=ED=86=B5=ED=95=B4=20=EC=97=B4=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/Header/MobileMenu.tsx | 17 +++++++------- .../Header/MobileMenuToggleButton.tsx | 22 +++++++++++-------- client/components/Header/styles.module.scss | 6 +++++ client/components/shared/Modals/Modals.tsx | 5 +++++ 4 files changed, 32 insertions(+), 18 deletions(-) diff --git a/client/components/Header/MobileMenu.tsx b/client/components/Header/MobileMenu.tsx index 60ac9d8d..c4e3fb2a 100644 --- a/client/components/Header/MobileMenu.tsx +++ b/client/components/Header/MobileMenu.tsx @@ -4,7 +4,6 @@ import React from "react"; import styles from "./styles.module.scss"; import { IoClose } from "react-icons/io5"; import { usePathname } from "next/navigation"; -import LeftSlideLayer from "@components/shared/LeftSlideLayer"; import FontAppliedElement from "@components/shared/FontAppliedElement"; import classnames from "classnames"; import { useModals } from "@hooks"; @@ -12,27 +11,27 @@ import { MODALS } from "@components/shared/Modals/Modals"; interface Props { isOpen: boolean; - handleClose: () => void; + onClose: () => void; } -const MobileMenu = ({ isOpen, handleClose }: Props) => { +const MobileMenu = ({ onClose }: Props) => { const pathname = usePathname(); const { openModal } = useModals(); const handleClickLoginButton = () => { - handleClose(); + onClose(); openModal(MODALS.LOGIN); }; const handleClickSignUpButton = () => { - handleClose(); + onClose(); openModal(MODALS.SIGNUP); }; return ( - +
-
@@ -47,7 +46,7 @@ const MobileMenu = ({ isOpen, handleClose }: Props) => { { ))} - +
); }; diff --git a/client/components/Header/MobileMenuToggleButton.tsx b/client/components/Header/MobileMenuToggleButton.tsx index 06bd8190..b0f7c793 100644 --- a/client/components/Header/MobileMenuToggleButton.tsx +++ b/client/components/Header/MobileMenuToggleButton.tsx @@ -1,19 +1,23 @@ import React from "react"; import { HiMenu } from "react-icons/hi"; import styles from "./styles.module.scss"; -import MobileMenu from "./MobileMenu"; -import { useBooleanState } from "@hooks"; +import { useModals } from "@hooks"; +import { MODALS } from "@components/shared/Modals/Modals"; const MobileMenuToggleButton = () => { - const [isOpen, , close, toggleState] = useBooleanState(false); + const { openModal } = useModals(); + + const handleClickMobileMenuOpenButton = () => { + openModal(MODALS.MOBILE_MENU_MDAPL); + }; return ( - <> - - - + ); }; diff --git a/client/components/Header/styles.module.scss b/client/components/Header/styles.module.scss index f2d92f42..b9f16c82 100644 --- a/client/components/Header/styles.module.scss +++ b/client/components/Header/styles.module.scss @@ -155,6 +155,12 @@ } .MobileMenu { + overflow: hidden; + position: fixed; + top: 0; + width: 100vw; + height: 100vh; + z-index: 101; gap: 32px; background-color: var(--slight-layer2); transition-duration: 500ms; diff --git a/client/components/shared/Modals/Modals.tsx b/client/components/shared/Modals/Modals.tsx index 336ff1cf..081a7256 100644 --- a/client/components/shared/Modals/Modals.tsx +++ b/client/components/shared/Modals/Modals.tsx @@ -17,10 +17,15 @@ const SeriesFormModal = dynamic(() => import("./SeriesFormModal"), { ssr: false, }); +const MobileMenuModal = dynamic(() => import("@components/Header/MobileMenu"), { + ssr: false, +}); + export const MODALS = { LOGIN: LoginModal, SIGNUP: SignUpModal, SERIES_FORM: SeriesFormModal, + MOBILE_MENU_MDAPL: MobileMenuModal, }; const Modals = () => { From 5d45c68628080eda80e92f08428ac0d5f1849c1c Mon Sep 17 00:00:00 2001 From: BY-juun Date: Wed, 15 Nov 2023 17:15:38 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20Modal=20->=20Overlay?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/Hooks/index.ts | 2 +- client/Hooks/useModals.ts | 20 ----- client/Hooks/useOverlay.ts | 20 +++++ client/app/layout.tsx | 4 +- client/components/Header/AuthButton.tsx | 8 +- client/components/Header/MobileMenu.tsx | 10 +-- .../Header/MobileMenuToggleButton.tsx | 8 +- client/components/Providers.tsx | 4 +- .../post/TableOfContents/TOCButton.tsx | 6 +- .../SeriesCreateModalOpenButton.tsx | 20 +++-- client/components/shared/Modals/index.ts | 1 - .../LoginModal/LoginModal.tsx | 9 +-- .../{Modals => Overlays}/LoginModal/index.ts | 0 .../LoginModal/styles.module.scss | 0 .../Modals.tsx => Overlays/Overlays.tsx} | 20 ++--- .../SeriesFormModal/SeriesFormModal.tsx | 0 .../SeriesFormModal/index.ts | 0 .../SeriesFormModal/styles.module.scss | 0 .../SignUpModal/SignUpModal.tsx | 0 .../{Modals => Overlays}/SignUpModal/index.ts | 0 .../SignUpModal/styles.module.scss | 0 client/components/shared/Overlays/index.ts | 1 + client/contexts/modalContex.tsx | 70 ----------------- client/contexts/overlayContex.tsx | 76 +++++++++++++++++++ 24 files changed, 141 insertions(+), 138 deletions(-) delete mode 100644 client/Hooks/useModals.ts create mode 100644 client/Hooks/useOverlay.ts delete mode 100644 client/components/shared/Modals/index.ts rename client/components/shared/{Modals => Overlays}/LoginModal/LoginModal.tsx (90%) rename client/components/shared/{Modals => Overlays}/LoginModal/index.ts (100%) rename client/components/shared/{Modals => Overlays}/LoginModal/styles.module.scss (100%) rename client/components/shared/{Modals/Modals.tsx => Overlays/Overlays.tsx} (64%) rename client/components/shared/{Modals => Overlays}/SeriesFormModal/SeriesFormModal.tsx (100%) rename client/components/shared/{Modals => Overlays}/SeriesFormModal/index.ts (100%) rename client/components/shared/{Modals => Overlays}/SeriesFormModal/styles.module.scss (100%) rename client/components/shared/{Modals => Overlays}/SignUpModal/SignUpModal.tsx (100%) rename client/components/shared/{Modals => Overlays}/SignUpModal/index.ts (100%) rename client/components/shared/{Modals => Overlays}/SignUpModal/styles.module.scss (100%) create mode 100644 client/components/shared/Overlays/index.ts delete mode 100644 client/contexts/modalContex.tsx create mode 100644 client/contexts/overlayContex.tsx diff --git a/client/Hooks/index.ts b/client/Hooks/index.ts index 717abb63..8e8c50a0 100644 --- a/client/Hooks/index.ts +++ b/client/Hooks/index.ts @@ -6,4 +6,4 @@ export { default as useRestoreSrollPos } from "./useRestoreScrollPos"; export { default as useScrollIntoElement } from "./useScrollIntoElement"; export { default as useVerticalScrollHandler } from "./useVerticalScrollHandler"; export { default as useInput } from "./useInput"; -export { default as useModals } from "./useModals"; +export { default as useOverlay } from "./useOverlay"; diff --git a/client/Hooks/useModals.ts b/client/Hooks/useModals.ts deleted file mode 100644 index 3214d6bb..00000000 --- a/client/Hooks/useModals.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { useModalDispatchContext } from "@contexts/modalContex"; - -const useModals = () => { - const { open, close } = useModalDispatchContext(); - - const openModal: typeof open = (Component, props) => { - open(Component, props); - }; - - const closeModal: typeof close = (Component) => { - close(Component); - }; - - return { - openModal, - closeModal, - }; -}; - -export default useModals; diff --git a/client/Hooks/useOverlay.ts b/client/Hooks/useOverlay.ts new file mode 100644 index 00000000..9231acb5 --- /dev/null +++ b/client/Hooks/useOverlay.ts @@ -0,0 +1,20 @@ +import { useOverlayDispatchContext } from "@contexts/overlayContex"; + +const useOverlay = () => { + const { open, close } = useOverlayDispatchContext(); + + const openOverlay: typeof open = (Component, props) => { + open(Component, props); + }; + + const closeOverlay: typeof close = (Component) => { + close(Component); + }; + + return { + openOverlay, + closeOverlay, + }; +}; + +export default useOverlay; diff --git a/client/app/layout.tsx b/client/app/layout.tsx index 5277d5ba..6f49268c 100644 --- a/client/app/layout.tsx +++ b/client/app/layout.tsx @@ -4,7 +4,7 @@ import "react-toastify/dist/ReactToastify.css"; import Header from "@components/Header"; import Providers from "@components/Providers"; -import { Modals } from "@components/shared/Modals"; +import Overlays from "@components/shared/Overlays"; import MyToastContainer from "@components/shared/MyToastContainer"; import { PropsWithChildren } from "react"; import ProgressBar from "@components/shared/ProgressBar"; @@ -31,7 +31,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
{children} - +
diff --git a/client/components/Header/AuthButton.tsx b/client/components/Header/AuthButton.tsx index c407232a..f5f07cd2 100644 --- a/client/components/Header/AuthButton.tsx +++ b/client/components/Header/AuthButton.tsx @@ -3,15 +3,15 @@ import styles from "./styles.module.scss"; import { toast } from "react-toastify"; import { MESSAGE } from "@constants"; import { useLogOut } from "@hooks/query"; -import useModals from "@hooks/useModals"; -import { MODALS } from "@components/shared/Modals/Modals"; +import { useOverlay } from "@hooks"; +import { OVERLAYS } from "@components/shared/Overlays/Overlays"; interface AuthButtonProps { isLoggedIn: boolean; } const AuthButton = ({ isLoggedIn }: AuthButtonProps) => { - const { openModal } = useModals(); + const { openOverlay } = useOverlay(); const { mutate: logoutMutate } = useLogOut({ onSuccess: () => toast.success(MESSAGE.LOGOUT_SUCCESS), @@ -21,7 +21,7 @@ const AuthButton = ({ isLoggedIn }: AuthButtonProps) => { if (isLoggedIn) { logoutMutate(); } else { - openModal(MODALS.LOGIN); + openOverlay(OVERLAYS.LOGIN_MODAL); } }; diff --git a/client/components/Header/MobileMenu.tsx b/client/components/Header/MobileMenu.tsx index c4e3fb2a..6ae6aaba 100644 --- a/client/components/Header/MobileMenu.tsx +++ b/client/components/Header/MobileMenu.tsx @@ -6,8 +6,8 @@ import { IoClose } from "react-icons/io5"; import { usePathname } from "next/navigation"; import FontAppliedElement from "@components/shared/FontAppliedElement"; import classnames from "classnames"; -import { useModals } from "@hooks"; -import { MODALS } from "@components/shared/Modals/Modals"; +import { useOverlay } from "@hooks"; +import { OVERLAYS } from "@components/shared/Overlays/Overlays"; interface Props { isOpen: boolean; @@ -16,16 +16,16 @@ interface Props { const MobileMenu = ({ onClose }: Props) => { const pathname = usePathname(); - const { openModal } = useModals(); + const { openOverlay } = useOverlay(); const handleClickLoginButton = () => { onClose(); - openModal(MODALS.LOGIN); + openOverlay(OVERLAYS.LOGIN_MODAL); }; const handleClickSignUpButton = () => { onClose(); - openModal(MODALS.SIGNUP); + openOverlay(OVERLAYS.SIGNUP_MODAL); }; return ( diff --git a/client/components/Header/MobileMenuToggleButton.tsx b/client/components/Header/MobileMenuToggleButton.tsx index b0f7c793..4583a69c 100644 --- a/client/components/Header/MobileMenuToggleButton.tsx +++ b/client/components/Header/MobileMenuToggleButton.tsx @@ -1,14 +1,14 @@ import React from "react"; import { HiMenu } from "react-icons/hi"; import styles from "./styles.module.scss"; -import { useModals } from "@hooks"; -import { MODALS } from "@components/shared/Modals/Modals"; +import { useOverlay } from "@hooks"; +import { OVERLAYS } from "@components/shared/Overlays/Overlays"; const MobileMenuToggleButton = () => { - const { openModal } = useModals(); + const { openOverlay } = useOverlay(); const handleClickMobileMenuOpenButton = () => { - openModal(MODALS.MOBILE_MENU_MDAPL); + openOverlay(OVERLAYS.MOBILE_MENU); }; return ( diff --git a/client/components/Providers.tsx b/client/components/Providers.tsx index e19d0106..9c3bcf40 100644 --- a/client/components/Providers.tsx +++ b/client/components/Providers.tsx @@ -3,7 +3,7 @@ import React, { PropsWithChildren, useState } from "react"; import { QueryClientProvider, QueryClient } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; -import { ModalProvider } from "@contexts/modalContex"; +import { OverlayProvider } from "@contexts/overlayContex"; import { ThemeProvider } from "@contexts/themeContext"; function Providers({ children }: PropsWithChildren) { @@ -12,7 +12,7 @@ function Providers({ children }: PropsWithChildren) { return ( - {children} + {children} diff --git a/client/components/post/TableOfContents/TOCButton.tsx b/client/components/post/TableOfContents/TOCButton.tsx index b159e8e8..89b33f5c 100644 --- a/client/components/post/TableOfContents/TOCButton.tsx +++ b/client/components/post/TableOfContents/TOCButton.tsx @@ -6,10 +6,10 @@ import HideByScrollDown from "@components/shared/HideByScrollDown"; const MARGIN_RIGHT_FOR_HIDE = "-50px"; const TOCButton = () => { - const [openModal, setOpenModal] = useState(false); + const [openOverlay, setopenOverlay] = useState(false); const handleClickButton = () => { - setOpenModal(true); + setopenOverlay(true); }; return ( @@ -24,7 +24,7 @@ const TOCButton = () => { > TOC - + ); }; diff --git a/client/components/postForm/SeriesSelector/SeriesCreateModalOpenButton.tsx b/client/components/postForm/SeriesSelector/SeriesCreateModalOpenButton.tsx index 6e335f16..c91cffac 100644 --- a/client/components/postForm/SeriesSelector/SeriesCreateModalOpenButton.tsx +++ b/client/components/postForm/SeriesSelector/SeriesCreateModalOpenButton.tsx @@ -1,20 +1,18 @@ -import { useModals } from "@hooks"; +import { useOverlay } from "@hooks"; import React from "react"; import styles from "./styles.module.scss"; -import { MODALS } from "@components/shared/Modals/Modals"; +import { OVERLAYS } from "@components/shared/Overlays/Overlays"; const SeriesCreateModalOpenButton = () => { - const { openModal } = useModals(); + const { openOverlay } = useOverlay(); return ( - <> - - + ); }; diff --git a/client/components/shared/Modals/index.ts b/client/components/shared/Modals/index.ts deleted file mode 100644 index d9463358..00000000 --- a/client/components/shared/Modals/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Modals } from "./Modals"; diff --git a/client/components/shared/Modals/LoginModal/LoginModal.tsx b/client/components/shared/Overlays/LoginModal/LoginModal.tsx similarity index 90% rename from client/components/shared/Modals/LoginModal/LoginModal.tsx rename to client/components/shared/Overlays/LoginModal/LoginModal.tsx index e8391392..b53aab5f 100644 --- a/client/components/shared/Modals/LoginModal/LoginModal.tsx +++ b/client/components/shared/Overlays/LoginModal/LoginModal.tsx @@ -1,12 +1,11 @@ import React, { type FormEventHandler } from "react"; import styles from "./styles.module.scss"; -import useInput from "@hooks/useInput"; import { useLogin } from "@hooks/query"; import { toast } from "react-toastify"; import { MESSAGE } from "@constants"; import { SocialLoginArea } from "@components/shared/SocialLoginArea"; -import useModals from "@hooks/useModals"; -import { MODALS } from "../Modals"; +import { useOverlay, useInput } from "@hooks"; +import { OVERLAYS } from "../Overlays"; import ModalView from "@components/shared/ModalView"; interface Props { @@ -14,7 +13,7 @@ interface Props { } const LoginModal = ({ onClose }: Props) => { - const { openModal } = useModals(); + const { openOverlay } = useOverlay(); const [email, , onChangeEmail] = useInput(""); const [password, , onChangePassword] = useInput(""); @@ -63,7 +62,7 @@ const LoginModal = ({ onClose }: Props) => { className={styles.SignUpButton} onClick={() => { onClose(); - openModal(MODALS.SIGNUP); + openOverlay(OVERLAYS.SIGNUP_MODAL); }} > 회원가입 diff --git a/client/components/shared/Modals/LoginModal/index.ts b/client/components/shared/Overlays/LoginModal/index.ts similarity index 100% rename from client/components/shared/Modals/LoginModal/index.ts rename to client/components/shared/Overlays/LoginModal/index.ts diff --git a/client/components/shared/Modals/LoginModal/styles.module.scss b/client/components/shared/Overlays/LoginModal/styles.module.scss similarity index 100% rename from client/components/shared/Modals/LoginModal/styles.module.scss rename to client/components/shared/Overlays/LoginModal/styles.module.scss diff --git a/client/components/shared/Modals/Modals.tsx b/client/components/shared/Overlays/Overlays.tsx similarity index 64% rename from client/components/shared/Modals/Modals.tsx rename to client/components/shared/Overlays/Overlays.tsx index 081a7256..062e0640 100644 --- a/client/components/shared/Modals/Modals.tsx +++ b/client/components/shared/Overlays/Overlays.tsx @@ -1,7 +1,7 @@ "use client"; -import { useModalStateContext } from "@contexts/modalContex"; -import { useModals } from "@hooks"; +import { useOverlayStateContext } from "@contexts/overlayContex"; +import { useOverlay } from "@hooks"; import React from "react"; import dynamic from "next/dynamic"; @@ -21,21 +21,21 @@ const MobileMenuModal = dynamic(() => import("@components/Header/MobileMenu"), { ssr: false, }); -export const MODALS = { - LOGIN: LoginModal, - SIGNUP: SignUpModal, - SERIES_FORM: SeriesFormModal, - MOBILE_MENU_MDAPL: MobileMenuModal, +export const OVERLAYS = { + LOGIN_MODAL: LoginModal, + SIGNUP_MODAL: SignUpModal, + SERIES_FORM_MODAL: SeriesFormModal, + MOBILE_MENU: MobileMenuModal, }; const Modals = () => { - const openedModals = useModalStateContext(); - const { closeModal } = useModals(); + const openedModals = useOverlayStateContext(); + const { closeOverlay } = useOverlay(); return ( <> {openedModals.map(({ Component, props }, idx) => { const onClose = () => { - closeModal(Component); + closeOverlay(Component); }; return ; diff --git a/client/components/shared/Modals/SeriesFormModal/SeriesFormModal.tsx b/client/components/shared/Overlays/SeriesFormModal/SeriesFormModal.tsx similarity index 100% rename from client/components/shared/Modals/SeriesFormModal/SeriesFormModal.tsx rename to client/components/shared/Overlays/SeriesFormModal/SeriesFormModal.tsx diff --git a/client/components/shared/Modals/SeriesFormModal/index.ts b/client/components/shared/Overlays/SeriesFormModal/index.ts similarity index 100% rename from client/components/shared/Modals/SeriesFormModal/index.ts rename to client/components/shared/Overlays/SeriesFormModal/index.ts diff --git a/client/components/shared/Modals/SeriesFormModal/styles.module.scss b/client/components/shared/Overlays/SeriesFormModal/styles.module.scss similarity index 100% rename from client/components/shared/Modals/SeriesFormModal/styles.module.scss rename to client/components/shared/Overlays/SeriesFormModal/styles.module.scss diff --git a/client/components/shared/Modals/SignUpModal/SignUpModal.tsx b/client/components/shared/Overlays/SignUpModal/SignUpModal.tsx similarity index 100% rename from client/components/shared/Modals/SignUpModal/SignUpModal.tsx rename to client/components/shared/Overlays/SignUpModal/SignUpModal.tsx diff --git a/client/components/shared/Modals/SignUpModal/index.ts b/client/components/shared/Overlays/SignUpModal/index.ts similarity index 100% rename from client/components/shared/Modals/SignUpModal/index.ts rename to client/components/shared/Overlays/SignUpModal/index.ts diff --git a/client/components/shared/Modals/SignUpModal/styles.module.scss b/client/components/shared/Overlays/SignUpModal/styles.module.scss similarity index 100% rename from client/components/shared/Modals/SignUpModal/styles.module.scss rename to client/components/shared/Overlays/SignUpModal/styles.module.scss diff --git a/client/components/shared/Overlays/index.ts b/client/components/shared/Overlays/index.ts new file mode 100644 index 00000000..04a8f97d --- /dev/null +++ b/client/components/shared/Overlays/index.ts @@ -0,0 +1 @@ +export { default } from "./Overlays"; diff --git a/client/contexts/modalContex.tsx b/client/contexts/modalContex.tsx deleted file mode 100644 index c9aa6999..00000000 --- a/client/contexts/modalContex.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { - createContext, - useContext, - type ComponentProps, - type PropsWithChildren, - type FunctionComponent, - useState, - useMemo, -} from "react"; - -interface ModalContext> { - Component: T; - props: ComponentProps; - open: (Component: T, props?: ComponentProps) => void; - close: (Component: T) => void; -} - -type ModalDispatchContextType = Pick, "close" | "open">; - -type ModalStateContextType = Pick, "Component" | "props">[]; - -const ModalDispatchContext = createContext( - null -); - -const ModalStateContext = createContext(null); - -export const ModalProvider = ({ children }: PropsWithChildren) => { - const [openedModals, setOpenedModals] = useState([]); - - const open = >( - Component: ModalContext["Component"], - props?: ModalContext["props"] - ) => { - setOpenedModals((modals) => { - return [...modals, { Component, props }]; - }); - }; - - const close = >( - Component: ModalContext["Component"] - ) => { - setOpenedModals((modals) => { - return modals.filter((modal) => modal.Component !== Component); - }); - }; - - const dispatch = useMemo(() => ({ open, close }), []); - - return ( - - - {children} - - - ); -}; - -export const useModalDispatchContext = () => { - const context = useContext(ModalDispatchContext); - if (!context) - throw new Error("ModalDispatchContext used Before Initialization"); - return context; -}; - -export const useModalStateContext = () => { - const context = useContext(ModalStateContext); - if (!context) throw new Error("ModalStateContext used Before Initialization"); - return context; -}; diff --git a/client/contexts/overlayContex.tsx b/client/contexts/overlayContex.tsx new file mode 100644 index 00000000..e50dab52 --- /dev/null +++ b/client/contexts/overlayContex.tsx @@ -0,0 +1,76 @@ +import { + createContext, + useContext, + type ComponentProps, + type PropsWithChildren, + type FunctionComponent, + useState, + useMemo, +} from "react"; + +interface OverlayContext> { + Component: T; + props: ComponentProps; + open: (Component: T, props?: ComponentProps) => void; + close: (Component: T) => void; +} + +type OverlayDispatchContextType = Pick, "close" | "open">; + +type OverlayStateContextType = Pick< + OverlayContext, + "Component" | "props" +>[]; + +const OverlayDispatchContext = createContext( + null +); + +const OverlayStateContext = createContext(null); + +export const OverlayProvider = ({ children }: PropsWithChildren) => { + const [openedOverlays, setOpenedOverlays] = useState( + [] + ); + + const open = >( + Component: OverlayContext["Component"], + props?: OverlayContext["props"] + ) => { + setOpenedOverlays((Overlays) => { + return [...Overlays, { Component, props }]; + }); + }; + + const close = >( + Component: OverlayContext["Component"] + ) => { + setOpenedOverlays((Overlays) => { + return Overlays.filter((Overlay) => Overlay.Component !== Component); + }); + }; + + const dispatch = useMemo(() => ({ open, close }), []); + + return ( + + + {children} + + + ); +}; + +export const useOverlayDispatchContext = () => { + const context = useContext(OverlayDispatchContext); + if (!context) + throw new Error("OverlayDispatchContext used Before Initialization"); + return context; +}; + +export const useOverlayStateContext = () => { + const context = useContext(OverlayStateContext); + if (!context) + throw new Error("OverlayStateContext used Before Initialization"); + return context; +}; From 75333f7ba322f50a87fe66143a041592eebd3fa4 Mon Sep 17 00:00:00 2001 From: BY-juun Date: Wed, 15 Nov 2023 17:19:23 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20MobileMenu=20=EB=94=94=EB=A0=89?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/Header/styles.module.scss | 55 ------------------- .../Overlays/MobileMenu}/MobileMenu.tsx | 0 .../shared/Overlays/MobileMenu/index.ts | 1 + .../Overlays/MobileMenu/styles.module.scss | 54 ++++++++++++++++++ .../components/shared/Overlays/Overlays.tsx | 2 +- 5 files changed, 56 insertions(+), 56 deletions(-) rename client/components/{Header => shared/Overlays/MobileMenu}/MobileMenu.tsx (100%) create mode 100644 client/components/shared/Overlays/MobileMenu/index.ts create mode 100644 client/components/shared/Overlays/MobileMenu/styles.module.scss diff --git a/client/components/Header/styles.module.scss b/client/components/Header/styles.module.scss index b9f16c82..423dc174 100644 --- a/client/components/Header/styles.module.scss +++ b/client/components/Header/styles.module.scss @@ -154,61 +154,6 @@ } } -.MobileMenu { - overflow: hidden; - position: fixed; - top: 0; - width: 100vw; - height: 100vh; - z-index: 101; - gap: 32px; - background-color: var(--slight-layer2); - transition-duration: 500ms; - opacity: 0.95; - .Navigator { - display: flex; - flex-direction: column; - align-items: center; - gap: 2.5rem; - font-size: 25px; - font-weight: 700; - button { - border: none; - background: none; - font-size: 25px; - font-weight: 700; - color: var(--bg-element2); - } - } - - .current { - text-decoration-color: var(--primary1); - text-underline-offset: 8px; - text-decoration-line: underline; - text-decoration-thickness: 4px; - } - - .closeArea { - width: 100%; - height: 120px; - display: flex; - align-items: center; - justify-content: flex-end; - button { - border: none; - background: none; - width: 50px; - height: 50px; - margin-right: 5%; - svg { - width: 45px; - height: 45px; - fill: var(--bg-element2); - } - } - } -} - .themeSVG { animation-name: rotateAnimation; animation-duration: 0.5s; diff --git a/client/components/Header/MobileMenu.tsx b/client/components/shared/Overlays/MobileMenu/MobileMenu.tsx similarity index 100% rename from client/components/Header/MobileMenu.tsx rename to client/components/shared/Overlays/MobileMenu/MobileMenu.tsx diff --git a/client/components/shared/Overlays/MobileMenu/index.ts b/client/components/shared/Overlays/MobileMenu/index.ts new file mode 100644 index 00000000..0bbcf018 --- /dev/null +++ b/client/components/shared/Overlays/MobileMenu/index.ts @@ -0,0 +1 @@ +export { default } from "./MobileMenu"; diff --git a/client/components/shared/Overlays/MobileMenu/styles.module.scss b/client/components/shared/Overlays/MobileMenu/styles.module.scss new file mode 100644 index 00000000..b6c0c282 --- /dev/null +++ b/client/components/shared/Overlays/MobileMenu/styles.module.scss @@ -0,0 +1,54 @@ +.MobileMenu { + overflow: hidden; + position: fixed; + top: 0; + width: 100vw; + height: 100vh; + z-index: 101; + gap: 32px; + background-color: var(--slight-layer2); + transition-duration: 500ms; + opacity: 0.95; + .Navigator { + display: flex; + flex-direction: column; + align-items: center; + gap: 2.5rem; + font-size: 25px; + font-weight: 700; + button { + border: none; + background: none; + font-size: 25px; + font-weight: 700; + color: var(--bg-element2); + } + } + + .current { + text-decoration-color: var(--primary1); + text-underline-offset: 8px; + text-decoration-line: underline; + text-decoration-thickness: 4px; + } + + .closeArea { + width: 100%; + height: 120px; + display: flex; + align-items: center; + justify-content: flex-end; + button { + border: none; + background: none; + width: 50px; + height: 50px; + margin-right: 5%; + svg { + width: 45px; + height: 45px; + fill: var(--bg-element2); + } + } + } +} diff --git a/client/components/shared/Overlays/Overlays.tsx b/client/components/shared/Overlays/Overlays.tsx index 062e0640..c84f3f90 100644 --- a/client/components/shared/Overlays/Overlays.tsx +++ b/client/components/shared/Overlays/Overlays.tsx @@ -17,7 +17,7 @@ const SeriesFormModal = dynamic(() => import("./SeriesFormModal"), { ssr: false, }); -const MobileMenuModal = dynamic(() => import("@components/Header/MobileMenu"), { +const MobileMenuModal = dynamic(() => import("./MobileMenu"), { ssr: false, }); From bfd7ee9e63e3cd11cbb83280fc29882a9da1f1ed Mon Sep 17 00:00:00 2001 From: BY-juun Date: Wed, 15 Nov 2023 17:32:48 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20mobile=20menu=EA=B0=80=20animation?= =?UTF-8?q?=EA=B3=BC=20=ED=95=A8=EA=BB=98=20=EC=96=B8=EB=A7=88=EC=9A=B4?= =?UTF-8?q?=ED=8A=B8=20=EB=90=98=EB=8F=84=EB=A1=9D=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Header/MobileMenuToggleButton.tsx | 8 +++--- .../shared/Overlays/MobileMenu/MobileMenu.tsx | 26 +++++++++++++------ .../Overlays/MobileMenu/styles.module.scss | 23 ++++++++++++++++ .../components/shared/Overlays/Overlays.tsx | 15 ++++++++++- 4 files changed, 58 insertions(+), 14 deletions(-) diff --git a/client/components/Header/MobileMenuToggleButton.tsx b/client/components/Header/MobileMenuToggleButton.tsx index 4583a69c..feccd61a 100644 --- a/client/components/Header/MobileMenuToggleButton.tsx +++ b/client/components/Header/MobileMenuToggleButton.tsx @@ -7,14 +7,12 @@ import { OVERLAYS } from "@components/shared/Overlays/Overlays"; const MobileMenuToggleButton = () => { const { openOverlay } = useOverlay(); - const handleClickMobileMenuOpenButton = () => { - openOverlay(OVERLAYS.MOBILE_MENU); - }; - return ( diff --git a/client/components/shared/Overlays/MobileMenu/MobileMenu.tsx b/client/components/shared/Overlays/MobileMenu/MobileMenu.tsx index 6ae6aaba..7437cf54 100644 --- a/client/components/shared/Overlays/MobileMenu/MobileMenu.tsx +++ b/client/components/shared/Overlays/MobileMenu/MobileMenu.tsx @@ -1,6 +1,6 @@ import { PAGE } from "@constants"; import Link from "next/link"; -import React from "react"; +import React, { useState } from "react"; import styles from "./styles.module.scss"; import { IoClose } from "react-icons/io5"; import { usePathname } from "next/navigation"; @@ -11,27 +11,37 @@ import { OVERLAYS } from "@components/shared/Overlays/Overlays"; interface Props { isOpen: boolean; - onClose: () => void; + onExit: (time: number) => void; } -const MobileMenu = ({ onClose }: Props) => { +const MobileMenu = ({ onExit }: Props) => { + const [isClose, setIsClose] = useState(false); const pathname = usePathname(); const { openOverlay } = useOverlay(); + const closeWithAnimation = () => { + setIsClose(true); + onExit(500); + }; + const handleClickLoginButton = () => { - onClose(); + closeWithAnimation(); openOverlay(OVERLAYS.LOGIN_MODAL); }; const handleClickSignUpButton = () => { - onClose(); + closeWithAnimation(); openOverlay(OVERLAYS.SIGNUP_MODAL); }; return ( -
+
-
@@ -46,7 +56,7 @@ const MobileMenu = ({ onClose }: Props) => { { closeOverlay(Component); }; - return ; + const onExit = (time: number) => { + setTimeout(() => { + onClose(); + }, time); + }; + + return ( + + ); })} ); From e66e96e05881560acd2cf371e02ca06d7671d8ca Mon Sep 17 00:00:00 2001 From: BY-juun Date: Wed, 15 Nov 2023 17:53:12 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20modal=20=EC=97=B4=EA=B3=A0=20?= =?UTF-8?q?=EB=8B=AB=EC=9D=84=20=EB=95=8C=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/shared/ModalView/ModalView.tsx | 22 ++- .../shared/ModalView/styles.module.scss | 127 +++++++++--------- .../shared/Overlays/LoginModal/LoginModal.tsx | 15 ++- .../shared/Overlays/MobileMenu/MobileMenu.tsx | 7 +- .../components/shared/Overlays/Overlays.tsx | 8 +- .../Overlays/SignUpModal/SignUpModal.tsx | 15 ++- 6 files changed, 112 insertions(+), 82 deletions(-) diff --git a/client/components/shared/ModalView/ModalView.tsx b/client/components/shared/ModalView/ModalView.tsx index 171258f1..75e0d8c3 100644 --- a/client/components/shared/ModalView/ModalView.tsx +++ b/client/components/shared/ModalView/ModalView.tsx @@ -1,16 +1,32 @@ import React, { type PropsWithChildren } from "react"; import styles from "./styles.module.scss"; import CloseIcon from "@components/Icon/close"; +import classNames from "classnames"; interface Props { title: string; + isClose?: boolean; onClose: () => void; } -const ModalView = ({ children, title, onClose }: PropsWithChildren) => { +const ModalView = ({ + children, + title, + onClose, + isClose, +}: PropsWithChildren) => { return (
-
-
+
+

{title}

- - - + ); }; -export default LoginModal; +export default LoginForm; diff --git a/client/components/shared/Overlays/SignUpModal/SignUpModal.tsx b/client/components/shared/Overlays/AuthModal/SignUpForm.tsx similarity index 73% rename from client/components/shared/Overlays/SignUpModal/SignUpModal.tsx rename to client/components/shared/Overlays/AuthModal/SignUpForm.tsx index 664392de..1003e89d 100644 --- a/client/components/shared/Overlays/SignUpModal/SignUpModal.tsx +++ b/client/components/shared/Overlays/AuthModal/SignUpForm.tsx @@ -1,33 +1,23 @@ -import React, { FormEventHandler, useState } from "react"; -import styles from "./styles.module.scss"; +import React, { FormEventHandler } from "react"; import { useInput } from "@hooks"; -import { StateUpdater } from "@Types/utils"; -import { SocialLoginArea } from "@components/shared/SocialLoginArea"; +import styles from "./styles.module.scss"; import { useSignUp } from "@hooks/query"; import { toast } from "react-toastify"; import { MESSAGE } from "@constants"; -import ModalView from "@components/shared/ModalView"; interface Props { onClose: () => void; - onExit: (time: number) => void; } -const SignUpModal = ({ onClose, onExit }: Props) => { - const [isClose, setIsClose] = useState(false); +const SignUpForm = ({ onClose }: Props) => { const [email, , onChangeEmail] = useInput(""); const [password, , onChangePassword] = useInput(""); const [passwordCheck, , onChangePasswordCheck] = useInput(""); const [nickname, , onChangeNickname] = useInput(""); - const closeWithAnimation = () => { - setIsClose(true); - onExit(500); - }; - const { mutate: signUpMutate } = useSignUp({ onSuccess: () => { - closeWithAnimation(); + onClose(); toast.success(MESSAGE.SIGHUP_SUCCESS); }, onError: (error) => { @@ -46,7 +36,7 @@ const SignUpModal = ({ onClose, onExit }: Props) => { }; return ( - + <>
{ />
- - + ); }; -export default SignUpModal; +export default SignUpForm; diff --git a/client/components/shared/Overlays/AuthModal/index.ts b/client/components/shared/Overlays/AuthModal/index.ts new file mode 100644 index 00000000..c2802948 --- /dev/null +++ b/client/components/shared/Overlays/AuthModal/index.ts @@ -0,0 +1 @@ +export { default } from "./AuthModal"; diff --git a/client/components/shared/Overlays/LoginModal/styles.module.scss b/client/components/shared/Overlays/AuthModal/styles.module.scss similarity index 79% rename from client/components/shared/Overlays/LoginModal/styles.module.scss rename to client/components/shared/Overlays/AuthModal/styles.module.scss index cd328633..268aaf6f 100644 --- a/client/components/shared/Overlays/LoginModal/styles.module.scss +++ b/client/components/shared/Overlays/AuthModal/styles.module.scss @@ -31,11 +31,3 @@ color: var(--primary1); } } - -.Overlay { - background-color: rgba(0, 0, 0, 0.6); - width: 100%; - height: 100%; - position: absolute; - cursor: pointer; -} diff --git a/client/components/shared/Overlays/LoginModal/index.ts b/client/components/shared/Overlays/LoginModal/index.ts deleted file mode 100644 index a0181dde..00000000 --- a/client/components/shared/Overlays/LoginModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./LoginModal"; diff --git a/client/components/shared/Overlays/MobileMenu/MobileMenu.tsx b/client/components/shared/Overlays/MobileMenu/MobileMenu.tsx index 4f248926..8af5362f 100644 --- a/client/components/shared/Overlays/MobileMenu/MobileMenu.tsx +++ b/client/components/shared/Overlays/MobileMenu/MobileMenu.tsx @@ -27,12 +27,12 @@ const MobileMenu = ({ onClose, onExit }: Props) => { const handleClickLoginButton = () => { onClose(); - openOverlay(OVERLAYS.LOGIN_MODAL); + openOverlay(OVERLAYS.AUTH_MODAL, { type: "LOGIN" }); }; const handleClickSignUpButton = () => { onClose(); - openOverlay(OVERLAYS.SIGNUP_MODAL); + openOverlay(OVERLAYS.AUTH_MODAL, { type: "SIGN_UP" }); }; return ( diff --git a/client/components/shared/Overlays/Overlays.tsx b/client/components/shared/Overlays/Overlays.tsx index a2e1b47f..557ffae6 100644 --- a/client/components/shared/Overlays/Overlays.tsx +++ b/client/components/shared/Overlays/Overlays.tsx @@ -5,11 +5,7 @@ import { useOverlay } from "@hooks"; import React from "react"; import dynamic from "next/dynamic"; -const LoginModal = dynamic(() => import("./LoginModal"), { - ssr: false, -}); - -const SignUpModal = dynamic(() => import("./SignUpModal"), { +const AuthModal = dynamic(() => import("./AuthModal"), { ssr: false, }); @@ -22,8 +18,7 @@ const MobileMenuModal = dynamic(() => import("./MobileMenu"), { }); export const OVERLAYS = { - LOGIN_MODAL: LoginModal, - SIGNUP_MODAL: SignUpModal, + AUTH_MODAL: AuthModal, SERIES_FORM_MODAL: SeriesFormModal, MOBILE_MENU: MobileMenuModal, }; diff --git a/client/components/shared/Overlays/SignUpModal/index.ts b/client/components/shared/Overlays/SignUpModal/index.ts deleted file mode 100644 index b82fb159..00000000 --- a/client/components/shared/Overlays/SignUpModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./SignUpModal"; diff --git a/client/components/shared/Overlays/SignUpModal/styles.module.scss b/client/components/shared/Overlays/SignUpModal/styles.module.scss deleted file mode 100644 index 49dd4e66..00000000 --- a/client/components/shared/Overlays/SignUpModal/styles.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import "utils/utils.scss"; - -.Form { - display: flex; - flex-direction: column; - @include mobile { - display: flex; - flex-direction: column; - } - input { - @include StyledInput; - margin-bottom: 10px; - } - button { - @include StyledButton; - width: 100%; - } -}