develop to main

.github/workflows/deploy-main.yml

@@ -28,6 +28,7 @@ jobs:
           echo "REACT_APP_E_BOOK_LIBRARY=$REACT_APP_E_BOOK_LIBRARY" >> .env
           echo "REACT_APP_SUGGESTION=$REACT_APP_SUGGESTION" >> .env
           echo "REACT_APP_GA_ID=$REACT_APP_GA_ID" >> .env
+          echo "REACT_APP_SENTRY=$REACT_APP_SENTRY" >> .env
           echo "PORT=$PORT" >> .env
         env:
           REACT_APP_API: ${{ secrets.REACT_APP_API }}
@@ -53,12 +54,4 @@ jobs:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
         run: |
-          aws s3 sync ./build s3://42library.kr --region ap-northeast-2
-
-      - name: invalidate CDN cache
-        env:
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          AWS_CDN_DISTRIBUTION_ID: ${{ secrets.AWS_CDN_DISTRIBUTION_ID }}
-        run: |
-          aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CDN_DISTRIBUTION_ID }} --paths "/*" --region ap-northeast-2
+          aws s3 sync ./build s3://42library.kr --region ap-northeast-2 --delete

package.json

@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@ladle/react": "^2.13.0",
+    "@react-spring/web": "^9.7.3",
     "@sentry/react": "^7.53.0",
-    "@sentry/tracing": "^7.53.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -51,6 +51,7 @@
     ]
   },
   "devDependencies": {
+    "@sentry/types": "^7.93.0",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "@types/react-router-dom": "^5.3.3",

src/App.jsx → src/App.tsx

@@ -1,7 +1,10 @@
 import { useEffect } from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { useSetRecoilState } from "recoil";
+import { BrowserRouter, Route } from "react-router-dom";
+import { useRecoilValue, useResetRecoilState } from "recoil";
 import { install } from "ga-gtag";
+import { isUserExpiredAtom, userAtom } from "./atom/userAtom";
+import { SentryRoutes } from "./config/sentry";
+
 import BookDetail from "./component/book/BookDetail";
 import Footer from "./component/utils/Footer";
 import NotFound from "./component/utils/NotFound";
@@ -18,31 +21,28 @@ import History from "./component/history/History";
 import ReservedLoan from "./component/reservedloan/ReservedLoan";
 import ReturnBook from "./component/return/ReturnBook";
 import UserManagement from "./component/userManagement/UserManagement";
-import AddBook from "./component/addbook/AddBook";
-import MyPageRoutes from "./component/mypage/MyPageRoutes";
-import userState from "./atom/userState";
-import Mypage from "./component/mypage/Mypage";
-import EditEmailOrPassword from "./component/mypage/EditEmailOrPassword";
-import LimitedRoute from "./LimitedRoute";
-import { isExpiredDate } from "./util/date";
-import BookManagement from "./component/bookManagement/BookManagement";
-import ReviewManagement from "./component/reviewManagement/ReviewManagement";
 import BookStock from "./component/bookStock/BookStock";
 import ELibraryIn42Box from "./component/eLibraryIn42Box/EventPage";
 import SuperTagManagement from "./component/superTag/SuperTagManagement";
 import SubTagManagement from "./component/subTag/SubTagManagement";
 import Portals from "./component/utils/Portals";
+import LimitedRoute from "./LimitedRoute";
+import AddBook from "./component/addbook/AddBook";
+import BookManagement from "./component/bookManagement/BookManagement";
+import EditEmailOrPassword from "./component/mypage/EditEmailOrPassword";
+import MyPageRoutes from "./component/mypage/MyPageRoutes";
+import Mypage from "./component/mypage/Mypage";
+import ReviewManagement from "./component/reviewManagement/ReviewManagement";
 import "./asset/css/reset.css";
 
 function App() {
-  const setUser = useSetRecoilState(userState);
-  useEffect(() => {
-    install(import.meta.env.REACT_APP_GA_ID);
-    const localUser = JSON.parse(window.localStorage.getItem("user"));
+  const isUserExpired = useRecoilValue(isUserExpiredAtom);
+  const resetUser = useResetRecoilState(userAtom);
 
-    if (localUser?.isLogin) {
-      if (!isExpiredDate(localUser?.expire)) setUser(localUser);
-      else window.localStorage.removeItem("user");
+  useEffect(() => install(import.meta.env.REACT_APP_GA_ID), []);
+  useEffect(() => {
+    if (isUserExpired) {
+      resetUser();
     }
   }, []);
 
@@ -51,7 +51,7 @@ function App() {
       <div id="portal" />
       <Portals />
       <Header />
-      <Routes>
+      <SentryRoutes>
         <Route path="/" element={<Main />} />
         <Route path="/41" element={<ELibraryIn42Box />} />
         <Route path="/information" element={<Information />} />
@@ -83,7 +83,7 @@ function App() {
           </Route>
         </Route>
         <Route path="*" element={<NotFound />} />
-      </Routes>
+      </SentryRoutes>
       <Footer />
     </BrowserRouter>
   );

src/LimitedRoute.tsx

@@ -1,20 +1,16 @@
 import { Navigate, Outlet } from "react-router-dom";
 import NotFound from "./component/utils/NotFound";
+import { useRecoilValue } from "recoil";
+import { userAtom } from "./atom/userAtom";
 
 type Props = {
   isLoginOnly?: boolean;
   isAdminOnly?: boolean;
   isLogoutOnly?: boolean;
 };
 
-const LimitedRoute = ({
-  isLoginOnly,
-  isAdminOnly,
-  isLogoutOnly,
-}: Props) => {
-  // 로그인 정보를 확인
-  // recoil 전역상태는 새로고침시 초기화되기 때문에 로컬스토리지 참고
-  const user = JSON.parse(window.localStorage.getItem("user"));
+const LimitedRoute = ({ isLoginOnly, isAdminOnly, isLogoutOnly }: Props) => {
+  const user = useRecoilValue(userAtom);
 
   if (isAdminOnly && !user?.isAdmin) {
     return <NotFound />;

src/api/auth/useGetAuthMe.ts

@@ -1,16 +1,17 @@
 import { useSetRecoilState } from "recoil";
-import { useApi } from "../../hook/useApi";
-import { addHourDateObject } from "../../util/date";
-import userState from "../../atom/userState";
-import getErrorMessage from "../../constant/error";
+import { useApi } from "~/hook/useApi";
+import { addHourDateObject } from "~/util/date";
+import { userAtom } from "~/atom/userAtom";
+import getErrorMessage from "~/constant/error";
+import { UserState } from "~/type";
 
 export const useGetAuthMe = () => {
   const { request } = useApi("get", "auth/me");
-  const setUser = useSetRecoilState(userState);
+  const setUser = useSetRecoilState(userAtom);
 
   const onSuccess = (response: any) => {
     const { data } = response;
-    const newUser = {
+    const newUser: UserState = {
       isLogin: true,
       id: data.id,
       userName: data.intra,
@@ -19,7 +20,6 @@ export const useGetAuthMe = () => {
       expire: addHourDateObject(new Date(), 8).toISOString(),
     };
     setUser(newUser);
-    window.localStorage.setItem("user", JSON.stringify(newUser));
   };
 
   const onError = (error: any) => {

src/api/books/useGetBooksCreate.ts

@@ -1,38 +1,16 @@
-import { useState, useEffect } from "react";
-import { useApi } from "../../hook/useApi";
-import { compareExpect } from "../../util/typeCheck";
-import getErrorMessage from "../../constant/error";
-import { Book } from "../../type";
+import { useState } from "react";
+import { useApi } from "~/hook/useApi";
+import getErrorMessage from "~/constant/error";
+import { type BookInfo } from "~/type";
 
-export const useGetBooksCreate = (defalutBook: Book) => {
-  const [isbnQuery, setIsbnQuery] = useState("");
+export const useGetBooksCreate = (defalutBook: Omit<BookInfo, "id">) => {
   const [bookInfo, setBookInfo] = useState(defalutBook);
   const [errorMessage, setErrorMessage] = useState("");
 
-  const { request } = useApi("get", "books/create", {
-    isbnQuery,
-  });
-
-  const expectedItem = [
-    { key: "title", type: "string", isNullable: false },
-    { key: "author", type: "string", isNullable: false },
-    { key: "publisher", type: "string", isNullable: false },
-    { key: "pubdate", type: "string", isNullable: false },
-    { key: "category", type: "string", isNullable: false },
-    { key: "image", type: "string", isNullable: true },
-  ];
+  const { requestWithUrl } = useApi();
 
   const refineResponse = (response: any) => {
-    const books = compareExpect(
-      "books/create",
-      [response.data.bookInfo],
-      expectedItem,
-    );
-    setBookInfo({
-      ...books[0],
-      isbn: isbnQuery,
-      koreanDemicalClassification: books[0].category,
-    });
+    setBookInfo(response.data.bookInfo);
     setErrorMessage("");
   };
 
@@ -46,11 +24,14 @@ export const useGetBooksCreate = (defalutBook: Book) => {
     setBookInfo(defalutBook);
   };
 
-  useEffect(() => {
-    if (isbnQuery && isbnQuery.length) {
-      request(refineResponse, displayError);
-    }
-  }, [isbnQuery]);
+  const fetchData = (isbnQuery: string) => {
+    if (!isbnQuery) return;
+    requestWithUrl("get", "books/create", {
+      data: { isbnQuery },
+      onSuccess: refineResponse,
+      onError: displayError,
+    });
+  };
 
-  return { bookInfo, errorMessage, fetchData: setIsbnQuery, setBookInfo };
+  return { bookInfo, errorMessage, fetchData, setBookInfo };
 };