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

모든 페이지 리팩토링

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 → 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 → 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 → 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";

src/store/user.store.ts → src/@user/assets/data/defaultUser.data.ts

@@ -1,7 +1,4 @@
-import { IUser } from "@/interfaces";
-import { atom } from "recoil";
-
-export const emptyUser: IUser = {
+const defaultUserData = {
   isLogin: false,
   id: 0,
   nickname: "",
@@ -17,7 +14,4 @@ export const emptyUser: IUser = {
   studentNumber: 0,
 };
 
-export const userStore = atom<IUser>({
-  key: "userStore",
-  default: emptyUser,
-});
+export default defaultUserData;

src/@user/assets/data/index.ts

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

src/@user/constants/index.ts

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

src/@user/context/index.ts

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

src/@user/context/user.context.ts

@@ -0,0 +1,7 @@
+import { atom } from "jotai";
+import { User } from "../types";
+import { defaultUserData } from "../assets/data";
+
+const userContext = atom<User>(defaultUserData);
+
+export default userContext;

src/@user/hooks/index.ts

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

src/hooks/useUser.tsx → src/@user/hooks/useUser.tsx

@@ -1,31 +1,30 @@
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { useRecoilState } from "recoil";
-import httpClient, { HttpClient } from "@/apis/httpClient/httpClient";
+import httpClient from "@/apis/httpClient/httpClient";
 import KEY from "@/constants/key.constant";
-import { IUser } from "@/interfaces";
-import { emptyUser, userStore } from "@/store/user.store";
-import useModal from "@/hooks/useModal";
 import Storage from "@/storage";
-import { ERROR } from "@/constants";
 import { authorization, refresh } from "@/apis/token";
 import { isAxiosError } from "axios";
-import LoginModal from "@/components/common/Modal/LoginModal";
 import { TOKEN } from "@/storage/constants";
-import ROLE from "@/constants/role.constant";
-import { useDidMountEffect } from "./useDidMountEffect";
+import { ERROR } from "@/apis/constants";
+import LoginModal from "@/@modal/layouts/LoginModal";
+import { useDidMountEffect } from "@/hooks";
+import { useAtom } from "jotai";
+import { useModal } from "@/@modal/hooks";
+import { User } from "../types";
+import { userContext } from "../context";
+import { ROLE } from "../constants";
 
 const useUser = () => {
-  const [user, setUser] = useRecoilState(userStore);
+  const [user, setUser] = useAtom(userContext);
   const { openModal } = useModal();
 
   const {
     data: userInfo,
-    remove,
     error,
     isSuccess,
     refetch,
-  } = useQuery<IUser>(
+  } = useQuery<User>(
     [KEY.USER],
     async () => {
       const { data } = await httpClient.user.get(authorization());
@@ -34,30 +33,29 @@ const useUser = () => {
     { enabled: !!Storage.getItem(TOKEN.ACCESS) },
   );
 
-  const logout = () => {
-    HttpClient.removeAccessToken();
-    setUser(emptyUser);
-    remove();
+  const isSameUser = (id: number) => {
+    return userInfo?.id === id;
   };
 
-  React.useEffect(() => {
-    if (!Storage.getItem(TOKEN.ACCESS)) {
-      openModal({ component: <LoginModal /> });
-    }
-  }, [openModal]);
-
   React.useEffect(() => {
     if (isAxiosError(error) && error.response) {
       const { code } = error.response.data;
-
-      if (code === ERROR.CODE.TOKEN_403_2) refresh().then(() => refetch());
+      if (code === ERROR.CODE.TOKEN_403_2) {
+        refresh().then(() => refetch());
+      }
     }
   }, [error, refetch]);
 
   React.useEffect(() => {
     if (userInfo) setUser(userInfo);
   }, [setUser, userInfo]);
 
+  React.useEffect(() => {
+    if (!Storage.getItem(TOKEN.ACCESS)) {
+      openModal({ component: <LoginModal /> });
+    }
+  }, [openModal]);
+
   useDidMountEffect(() => {
     if (isSuccess && !userInfo) {
       return openModal({
@@ -70,7 +68,8 @@ const useUser = () => {
     user,
     isLogined: !!userInfo,
     isAdmin: userInfo?.authority === ROLE.ADMIN,
-    logout,
+    role: userInfo?.role === "STUDENT" ? "학생" : "선생님",
+    isSameUser,
   };
 };
 

src/interfaces/user.interface.ts → src/@user/types/User.ts

@@ -1,4 +1,4 @@
-export default interface IUser {
+export default interface UserType {
   isLogin: boolean;
   id: number;
   nickname: string;

src/@user/types/index.ts

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

src/apis/constants/index.ts

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

src/apis/httpClient/httpClient.ts

@@ -1,8 +1,8 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
 import { requestInterceptors, responseInterceptors } from "@/apis/interceptor";
-import ERROR from "@/constants/error.constant";
 import { TOKEN } from "@/storage/constants/";
-import Storage from "../../storage";
+import Storage from "@/storage";
+import { ERROR } from "../constants";
 import { refresh } from "../token";
 
 export interface HttpClientConfig {

src/app/applications/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import ApplicationsPage from "@/templates/applications/layouts";
-import React from "react";
 
 const Applications = () => {
   return <ApplicationsPage />;

src/app/layout.tsx

@@ -1,9 +1,9 @@
-import Provider from "@/provider/provider.helper";
+import Provider from "@/provider/MainProvider";
 import React from "react";
 
 export const metadata = {
   title: "BSM",
-  description: "부산소마고 학생 정보 관리 서비스입니다.",
+  description: "부산소마고 스마트 학생 생활 플랫폼입니다.",
 };
 
 export default function RootLayout({

src/app/meal/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import MealPage from "@/templates/meal/layouts";
-import React from "react";
 
 const Meal = () => {
   return <MealPage />;

src/app/not-found.tsx

@@ -3,7 +3,7 @@
 import { PageNotFound } from "@/assets/images";
 import { Button } from "@/components/atoms";
 import ROUTER from "@/constants/router.constant";
-import { color, flex } from "@/styles";
+import { theme, flex } from "@/styles";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import React from "react";
@@ -15,7 +15,7 @@ const NotFound = () => {
     <Container>
       <StyledImage width={999} height={999} src={PageNotFound} alt="404" />
       <Button
-        color={color.primary_blue}
+        color={theme.primary_blue}
         onClick={() => router.push(ROUTER.HOME)}
       >
         홈으로 돌아가기