Merge pull request #123 from Team-INSERT/refactor/all

모든 페이지 리팩토링

Author: Ubinquitous

package.json

@@ -17,7 +17,6 @@
     "@types/node": "18.16.19",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "@types/react-infinite-scroll-component": "^5.0.0",
     "@types/react-spinner": "^0.2.0",
     "@types/styled-components": "^5.1.26",
     "@types/tinymce": "^4.6.5",
@@ -38,6 +37,7 @@
     "graphql": "^16.8.0",
     "graphql-request": "^6.1.0",
     "jest": "^29.3.1",
+    "jotai": "^2.5.1",
     "jwt-decode": "^3.1.2",
     "msw": "^1.2.3",
     "next": "13.5.2",
@@ -47,15 +47,12 @@
     "react-circular-progressbar": "^2.1.0",
     "react-d3-radar": "^1.0.0-rc6",
     "react-dom": "18.2.0",
-    "react-infinite-scroll-component": "^6.1.0",
-    "react-responsive-carousel": "^3.2.23",
     "react-scroll-horizontal": "^1.6.6",
     "react-slick": "^0.29.0",
     "react-spinner": "^0.2.7",
     "react-spinner-overlay": "^0.1.33",
     "react-spinners": "^0.13.8",
     "react-toastify": "^9.1.3",
-    "recoil": "^0.7.7",
     "rehype-sanitize": "^6.0.0",
     "slick-carousel": "^1.8.1",
     "styled-components": "^6.0.8",

src/@modal/context/index.ts

@@ -0,0 +1 @@
+export { default as modalContext } from "./modal.context";

src/@modal/context/modal.context.ts

@@ -0,0 +1,9 @@
+import { atom } from "jotai";
+import { ModalState } from "../types";
+
+const modalContext = atom<ModalState>({
+  component: null,
+  visible: false,
+});
+
+export default modalContext;

src/@modal/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useModal } from "./useModal";

src/@modal/hooks/useModal.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { useAtom } from "jotai";
+import { ModalState } from "../types";
+import { modalContext } from "../context";
+
+const useModal = () => {
+  const [modal, setModal] = useAtom(modalContext);
+
+  const openModal = React.useCallback(
+    ({ component }: ModalState) => {
+      setModal({ component, visible: true });
+    },
+    [setModal],
+  );
+
+  const closeModal = React.useCallback(() => {
+    setModal({ component: null, visible: false });
+  }, [setModal]);
+
+  return { openModal, closeModal, visible: !!modal.visible };
+};
+
+export default useModal;

src/components/common/Modal/LoginModal/index.tsx renamed to src/@modal/layouts/LoginModal.tsx

@@ -1,10 +1,9 @@
+import { useRouter } from "next/navigation";
+import styled from "styled-components";
 import { Logo } from "@/assets/icons";
 import { ROUTER } from "@/constants";
 import useWindow from "@/hooks/useWindow";
-import { color, flex, font } from "@/styles";
-import { useRouter } from "next/navigation";
-import React from "react";
-import styled from "styled-components";
+import { theme, flex, font } from "@/styles";
 
 const LoginModal = () => {
   const router = useRouter();
@@ -19,7 +18,9 @@ const LoginModal = () => {
   return (
     <Container>
       <Logo width={60} height={60} />
-      <LoginButton onClick={handleLoginButtonClick} />
+      <LoginButton onClick={handleLoginButtonClick}>
+        BSM 계정으로 로그인
+      </LoginButton>
     </Container>
   );
 };
@@ -28,7 +29,7 @@ const Container = styled.div`
   width: fit-content;
   height: fit-content;
   padding: 40px 30px;
-  background-color: ${color.white};
+  background-color: ${theme.white};
   border-radius: 6px;
   ${flex.COLUMN_CENTER};
   gap: 5vh;
@@ -38,13 +39,9 @@ const LoginButton = styled.button`
   width: fit-content;
   border-radius: 4px;
   padding: 8px 14px;
-  background-color: ${color.primary_blue};
-  color: ${color.white};
+  background-color: ${theme.primary_blue};
+  color: ${theme.white};
   ${font.btn3};
-
-  &:after {
-    content: "BSM 계정으로 로그인";
-  }
 `;
 
 export default LoginModal;

src/components/common/Modal/View.tsx renamed to src/@modal/layouts/ModalView.tsx

@@ -1,7 +1,8 @@
 import styled, { css } from "styled-components";
-import { IModalState } from "@/interfaces";
+import { flex } from "@/styles";
+import { ModalState } from "../types";
 
-interface ModalViewProps extends IModalState {
+interface ModalViewProps extends ModalState {
   onClose?: () => void;
 }
 
@@ -32,8 +33,7 @@ const Background = styled.div<{ hidden: boolean }>`
 `;
 
 const ModalContainer = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${flex.COLUMN_CENTER};
   position: fixed;
   top: 50%;
   left: 50%;

src/@modal/layouts/index.tsx

@@ -0,0 +1,18 @@
+import { useAtomValue } from "jotai";
+import { modalContext } from "../context";
+import { useModal } from "../hooks";
+import ModalView from "./ModalView";
+
+const Modal = () => {
+  const modal = useAtomValue(modalContext);
+  const { closeModal } = useModal();
+
+  const handleModalClose = () => {
+    modal.onClose?.();
+    if (!modal.menualClose) closeModal();
+  };
+
+  return <ModalView {...modal} onClose={handleModalClose} />;
+};
+
+export default Modal;

src/interfaces/modal.interface.ts renamed to src/@modal/types/ModalState.type.ts

@@ -1,6 +1,4 @@
-import React from "react";
-
-export default interface IModalState {
+export default interface ModalState {
   component: React.ReactNode;
   visible?: boolean;
   menualClose?: boolean;

src/@modal/types/index.ts

@@ -0,0 +1 @@
+export type { default as ModalState } from "./ModalState.type";