diff --git a/src/component/utils/HandleReview.tsx b/src/component/utils/HandleReview.tsx
index 211305b8..2ac47cc4 100644
--- a/src/component/utils/HandleReview.tsx
+++ b/src/component/utils/HandleReview.tsx
@@ -1,14 +1,14 @@
import { useState } from "react";
-import { dateFormat } from "../../util/date";
+import { dateFormat } from "~/util/date";
import Image from "./Image";
-import UserEdit from "../../asset/img/edit.svg";
-import DeleteButton from "../../asset/img/x_button.svg";
-import "../../asset/css/Review.css";
-import { Review } from "../../type";
-import { useNewDialog } from "../../hook/useNewDialog";
-import userState from "../../atom/userState";
+import UserEdit from "~/asset/img/edit.svg";
+import DeleteButton from "~/asset/img/x_button.svg";
+import "~/asset/css/Review.css";
+import { Review } from "~/type";
+import { useNewDialog } from "~/hook/useNewDialog";
+import { userAtom } from "~/atom/userAtom";
import { useRecoilValue } from "recoil";
-import { usePutReviewsReviewsId } from "../../api/reviews/usePutReviewsReviewsId";
+import { usePutReviewsReviewsId } from "~/api/reviews/usePutReviewsReviewsId";
import { Link } from "react-router-dom";
type Props = {
@@ -19,8 +19,8 @@ type Props = {
const HandleReview = ({ type, review, deleteReview }: Props) => {
const [isEditMode, setEditMode] = useState(false);
- const user = useRecoilValue(userState);
- const hasPermissionToEdit = user && user.userName === review.nickname;
+ const { userName } = useRecoilValue(userAtom);
+ const hasPermissionToEdit = userName === review.nickname;
const startEditMode = () => setEditMode(true);
const finishEditMode = () => setEditMode(false);
diff --git a/src/component/utils/HeaderDefault.tsx b/src/component/utils/HeaderDefault.tsx
index b26950d0..b19ddb31 100644
--- a/src/component/utils/HeaderDefault.tsx
+++ b/src/component/utils/HeaderDefault.tsx
@@ -1,17 +1,17 @@
import { useRecoilValue } from "recoil";
import { Link } from "react-router-dom";
import { basicGnbMenu } from "~/constant/headerMenu";
-import userState from "~/atom/userState";
import Image from "./Image";
import HeaderDefaultLNB from "./HeaderDefaultLNB";
import Logo from "~/asset/img/jiphyeonjeon_logo.svg";
import "~/asset/css/HeaderDefault.css";
import SearchRanking from "./SearchRanking";
+import { isUserAuthedAtom } from "~/atom/userAtom";
const HeaderDefault = () => {
- const user = useRecoilValue(userState);
+ const isAuthed = useRecoilValue(isUserAuthedAtom);
- const gnbMenu = user.isLogin
+ const gnbMenu = isAuthed
? basicGnbMenu.slice(0, basicGnbMenu.length - 1) // basicGnbMenu의 마지막 요소는 "로그인", 이미 로그인 상태면 제외
: basicGnbMenu;
@@ -35,7 +35,7 @@ const HeaderDefault = () => {
{menu.text}
))}
- {user.isLogin &&
}
+ {isAuthed &&
}
diff --git a/src/component/utils/HeaderDefaultLNB.tsx b/src/component/utils/HeaderDefaultLNB.tsx
index bf90ee6b..c1f2caf3 100644
--- a/src/component/utils/HeaderDefaultLNB.tsx
+++ b/src/component/utils/HeaderDefaultLNB.tsx
@@ -2,17 +2,17 @@ import { useEffect, useState } from "react";
import { useRecoilValue } from "recoil";
import { Link, useLocation } from "react-router-dom";
import { adminLnbMenu, loginLnbMenu } from "~/constant/headerMenu";
-import userState from "~/atom/userState";
import Image from "./Image";
import User from "~/asset/img/Uniconlabs.png";
import ToggleUser from "~/asset/img/UniconlabsFill.png";
import ToggleDownArrow from "~/asset/img/caret-down_DaveGandy.png";
import DownArrow from "~/asset/img/drop-down_Freepik.png";
import "~/asset/css/HeaderDefaultLNB.css";
+import { userAtom } from "~/atom/userAtom"
const HeaderDefaultLNB = () => {
const [isLNBOpened, setIsLNBOpened] = useState(false);
- const user = useRecoilValue(userState);
+ const user = useRecoilValue(userAtom);
const location = useLocation();
useEffect(() => {
diff --git a/src/component/utils/HeaderModal.tsx b/src/component/utils/HeaderModal.tsx
index 12c5e95e..534e54d4 100644
--- a/src/component/utils/HeaderModal.tsx
+++ b/src/component/utils/HeaderModal.tsx
@@ -1,22 +1,22 @@
import { useRecoilValue } from "recoil";
import { Link } from "react-router-dom";
-import userState from "../../atom/userState";
+import { userAtom } from "~/atom/userAtom";
import Image from "./Image";
import {
basicGnbMenu,
adminLnbMenu,
loginLnbMenu,
-} from "../../constant/headerMenu";
-import CloseButton from "../../asset/img/x_button_grey.svg";
-import User from "../../asset/img/Freepik_user.png";
-import "../../asset/css/HeaderModal.css";
+} from "~/constant/headerMenu";
+import CloseButton from "~/asset/img/x_button_grey.svg";
+import User from "~/asset/img/Freepik_user.png";
+import "~/asset/css/HeaderModal.css";
type Props = {
setHeaderModal(...args: unknown[]): unknown;
};
const HeaderModal = ({ setHeaderModal }: Props) => {
- const user = useRecoilValue(userState);
+ const user = useRecoilValue(userAtom);
const closeHeaderModal = () => {
setHeaderModal(false);
};
diff --git a/src/component/utils/ManagementSearchBar.tsx b/src/component/utils/ManagementSearchBar.tsx
index 59e9deb9..cef10e33 100644
--- a/src/component/utils/ManagementSearchBar.tsx
+++ b/src/component/utils/ManagementSearchBar.tsx
@@ -6,6 +6,8 @@ import {
useState,
} from "react";
import SearchBar from "~/component/utils/SearchBar";
+import Image from "./Image";
+import BarcodeIcon from "~/asset/img/barcode.svg";
type Props = {
width: "banner" | "center" | "short" | "long";
@@ -57,7 +59,7 @@ const ManagementSearchBar = ({
className="search-bar__button barcode"
onClick={onClickBarcodeButton}
>
- 바코드
+
) : null}
diff --git a/src/component/utils/NotFound.jsx b/src/component/utils/NotFound.jsx
index 195c97c8..085801c8 100644
--- a/src/component/utils/NotFound.jsx
+++ b/src/component/utils/NotFound.jsx
@@ -1,13 +1,54 @@
+import { useSpring, animated } from '@react-spring/web';
import "../../asset/css/NotFound.css";
-
const NotFound = () => {
+ const [springs, api] = useSpring(() => ({
+ from: { opacity: 0, transform: 'translate3d(0px, 0px, 0px)' },
+ config: { duration: 500 } // 애니메이션 지속 시간 설정
+ }));
+
+ const froms = [
+ { x: 0, y: 0 },
+ { x: window.innerWidth, y: 0 },
+ { x: 0, y: window.innerHeight },
+ { x: window.innerWidth, y: window.innerHeight },
+ ];
+
+ const getRandomFromIndex = (from, to) => {
+ const min = Math.ceil(from);
+ const max = Math.floor(to);
+ return Math.floor(Math.random() * (max - min)) + min;
+ }
+
+ const handleClick = (event) => {
+ api.start({
+ to: {
+ opacity: 1, // 불투명도를 1로 설정
+ transform: `translate3d(${event.clientX}px, ${event.clientY}px, 0px)` // 위치 업데이트
+ },
+ // 애니메이션 시작시 불투명도를 0으로 설정 및 위치 설정 froms 배열에서 랜덤으로 from 선택되도록 수정
+ from: {
+ opacity: 0,
+ transform: `translate3d(${froms[getRandomFromIndex(0, froms.length)].x}px, ${froms[getRandomFromIndex(0, froms.length)].y}px, 0px)`
+ },
+ reset: true // 매 클릭마다 애니메이션 리셋
+ });
+ };
+
return (
-
+
);
};
diff --git a/src/component/utils/SearchBar.tsx b/src/component/utils/SearchBar.tsx
index b792fbec..faf7688a 100644
--- a/src/component/utils/SearchBar.tsx
+++ b/src/component/utils/SearchBar.tsx
@@ -11,11 +11,19 @@ export type Props = ComponentProps<"form"> & {
const SearchBar = ({
width = "banner",
className = "",
+ onSubmit,
children,
...rest
}: Props) => {
return (
-
);
diff --git a/src/config/sentry.ts b/src/config/sentry.ts
new file mode 100644
index 00000000..f91c30cc
--- /dev/null
+++ b/src/config/sentry.ts
@@ -0,0 +1,38 @@
+// reference : https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/
+
+import { useEffect } from "react";
+import * as Sentry from "@sentry/react";
+import {
+ Routes,
+ createRoutesFromChildren,
+ matchRoutes,
+ useLocation,
+ useNavigationType,
+} from "react-router-dom";
+
+export const sentryInit = () => {
+ Sentry.init({
+ dsn: import.meta.env.REACT_APP_SENTRY,
+ integrations: [
+ new Sentry.BrowserTracing({
+ routingInstrumentation: Sentry.reactRouterV6Instrumentation(
+ useEffect,
+ useLocation,
+ useNavigationType,
+ createRoutesFromChildren,
+ matchRoutes,
+ ),
+ }),
+ new Sentry.Replay({
+ maskAllText: false,
+ blockAllMedia: false,
+ }),
+ ],
+ tracesSampleRate: 1.0,
+ replaysSessionSampleRate: 0.1,
+ replaysOnErrorSampleRate: 1.0,
+ environment: import.meta.env.REACT_APP_ENV,
+ });
+};
+
+export const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
diff --git a/src/env.d.ts b/src/env.d.ts
index 7154493d..07d9559f 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -12,9 +12,17 @@ interface ImportMetaEnv {
/** 건의사항 시트 URL */
readonly REACT_APP_SUGGESTION: string;
- readonly REACT_APP_SENTRY:string;
+
+ /** 실행 환경 */
+ readonly REACT_APP_ENV: "development" | "production";
+
+ /** 로그 및 통계를 위한 센트리, 구글애널리틱스 */
+ readonly REACT_APP_SENTRY: string;
+ readonly REACT_APP_GA_ID: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
+
+declare module "ga-gtag";
diff --git a/src/hook/usePermission.ts b/src/hook/usePermission.ts
index 04f4b5b2..ac06e35f 100644
--- a/src/hook/usePermission.ts
+++ b/src/hook/usePermission.ts
@@ -1,9 +1,9 @@
import { useRecoilValue } from "recoil";
+import { userAtom } from "~/atom/userAtom"
import { useNewDialog } from "~/hook/useNewDialog";
-import userState from "~/atom/userState";
export const usePermission = () => {
- const user = useRecoilValue(userState);
+ const user = useRecoilValue(userAtom);
const isLoggined = user !== null;
const isAdmin = user?.isAdmin;
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e8..00000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/src/index.tsx b/src/index.tsx
index 7628acc5..a8b03705 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,20 +1,10 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { RecoilRoot } from "recoil";
-import * as Sentry from "@sentry/react";
-import { BrowserTracing } from "@sentry/tracing";
+import { sentryInit } from "./config/sentry";
import App from "./App";
-import "./index.css";
-Sentry.init({
- dsn: import.meta.env.REACT_APP_SENTRY,
- integrations: [new BrowserTracing()],
- tracesSampleRate: 1.0,
- environment:
- import.meta.env.REACT_APP_API === "http://localhost:3000/api"
- ? "development"
- : "production",
-});
+sentryInit();
createRoot(document.getElementById("root")!).render(
diff --git a/src/type/BookInfo.ts b/src/type/BookInfo.ts
index 2c555af2..7ee8b580 100644
--- a/src/type/BookInfo.ts
+++ b/src/type/BookInfo.ts
@@ -10,7 +10,6 @@ export type BookInfo = {
publisher: string;
publishedAt?: string;
image?: string;
- koreanDemicalClassification?: string;
donator?: string;
books?: Book[];
};
diff --git a/src/type/User.ts b/src/type/User.ts
index 36a7e551..5bb42d3c 100644
--- a/src/type/User.ts
+++ b/src/type/User.ts
@@ -19,8 +19,8 @@ export type User = {
export type UserState = {
isLogin: boolean;
id: number;
- userName: string;
- email: string;
+ userName: string | undefined;
+ email: string | undefined;
isAdmin: boolean;
- expire: string; // ISO String
+ expire: string | undefined; // ISO String
};
diff --git a/src/util/axios.ts b/src/util/axios.ts
index 28f3e0c2..d8aa8ff7 100644
--- a/src/util/axios.ts
+++ b/src/util/axios.ts
@@ -1,4 +1,5 @@
import axios from "axios";
+import * as Sentry from "@sentry/react";
const api = axios.create({
baseURL: `${import.meta.env.REACT_APP_API}`,
@@ -14,3 +15,8 @@ const axiosPromise = (method: string, url: string, data?: unknown) => {
};
export default axiosPromise;
+
+api.interceptors.response.use(
+ response => response,
+ error => Sentry.captureException(error),
+);
diff --git a/src/util/localStorageEffect.ts b/src/util/localStorageEffect.ts
new file mode 100644
index 00000000..1fc4dd2d
--- /dev/null
+++ b/src/util/localStorageEffect.ts
@@ -0,0 +1,21 @@
+import { AtomEffect } from "recoil";
+
+/**
+ * recoil atom 상태를 localStorage에 연동합니다.
+ *
+ * {@link https://recoiljs.org/docs/guides/atom-effects/#local-storage-persistence | recoil 공식 문서 }
+ */
+export const localStorageEffect =
+ (key: string): AtomEffect =>
+ ({ setSelf, onSet }) => {
+ const savedValue = localStorage.getItem(key);
+ if (savedValue != null) {
+ setSelf(JSON.parse(savedValue));
+ }
+
+ onSet((newValue, _, isReset) => {
+ isReset
+ ? localStorage.removeItem(key)
+ : localStorage.setItem(key, JSON.stringify(newValue));
+ });
+ };
diff --git a/vite.config.ts b/vite.config.ts
index 101cd41a..deea2e9e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -31,5 +31,7 @@ export default defineConfig(({ mode }) => {
/** @see https://vitejs.dev/config/build-options.html#build-outdir */
build: { outDir: "build" },
+
+ base: "./",
};
});