fix: atomWithStorage 사용하여 새로고침시 atom값 날라가는 오류 수정

apis/client.ts

@@ -22,18 +22,6 @@ const getTokenFromLocalStorage = () => {
   return accessToken;
 };
 
-export const setIsAdminAtLocalStorage = (is_admin: string) => {
-  localStorage.setItem("is_admin", is_admin);
-};
-
-const getIsAdminFromLocalStorage = () => {
-  const isAdmin = localStorage.getItem("is_admin");
-  if (!isAdmin) {
-    return null;
-  }
-  return isAdmin;
-};
-
 const client = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,
   withCredentials: true,

next.config.js

@@ -20,6 +20,8 @@ const nextConfig = {
   env: {
     NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
   },
+
+  transpilePackages: ["jotai-devtools"],
 };
 
 module.exports = nextConfig;

package.json

@@ -24,6 +24,7 @@
     "embla-carousel-react": "^8.1.3",
     "gh-pages": "^6.1.1",
     "jotai": "^2.8.3",
+    "jotai-devtools": "^0.10.0",
     "lottie-web": "^5.12.2",
     "moment": "^2.30.1",
     "next": "12.3.4",

pages/_app.tsx

@@ -7,16 +7,22 @@ import RootLayout from "@/components/Layout";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { AppProps } from "next/app";
+import { DevTools } from "jotai-devtools";
+import "jotai-devtools/styles.css";
+import { Provider } from "jotai";
 
 const queryClient = new QueryClient();
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <QueryClientProvider client={queryClient}>
-      <RootLayout>
-        <Component {...pageProps} />
-      </RootLayout>
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
+    <Provider>
+      <QueryClientProvider client={queryClient}>
+        <RootLayout>
+          <Component {...pageProps} />
+        </RootLayout>
+        <ReactQueryDevtools initialIsOpen={false} />
+        <DevTools />
+      </QueryClientProvider>
+    </Provider>
   );
 }

pages/index.tsx

@@ -8,8 +8,6 @@ import FlexBox from "@/components/Flexbox";
 import { ToastContainer, Zoom, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import CheckIcon from "@/public/svgs/Check.svg";
-import { atom, useAtomValue } from "jotai";
-import { isAdminAtom } from "@/utils/atom";
 
 const Home: NextPage = () => {
   const notify = (msg: string) => {

pages/login.tsx

@@ -5,11 +5,7 @@ import { useRouter } from "next/router";
 import Button from "@/components/Button";
 import LogoLetterIcon from "@/public/svgs/LogoLetter.svg";
 import { useMutation } from "@tanstack/react-query";
-import {
-  ResponseBody,
-  setIsAdminAtLocalStorage,
-  setTokenFromLocalStorage,
-} from "@/apis/client";
+import { ResponseBody, setTokenFromLocalStorage } from "@/apis/client";
 import { SignIn } from "@/apis/auth";
 import { atom, useAtom } from "jotai";
 import { centerNameAtom, isAdminAtom } from "@/utils/atom";
@@ -21,7 +17,7 @@ interface userProps {
 
 const Login: NextPage = () => {
   const router = useRouter();
-  const [isAdmin, setIsAdmin] = useAtom(isAdminAtom);
+  const [, setIsAdmin] = useAtom(isAdminAtom);
   const [, setCenterName] = useAtom(centerNameAtom);
 
   const [userInfo, setUserInfo] = useState<userProps>({
@@ -61,7 +57,6 @@ const Login: NextPage = () => {
       const isAdmin = data.result.isAdmin;
       if (isAdmin) setCenterName(data.result.centerName);
       setIsAdmin(isAdmin);
-      setIsAdminAtLocalStorage(isAdmin);
       setTokenFromLocalStorage(accessToken);
 
       router.push("/");

utils/atom.tsx

@@ -1,7 +1,11 @@
 import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 
-export const isAdminAtom = atom<boolean>(true);
+export const isAdminAtom = atomWithStorage("isAdmin", false);
+isAdminAtom.debugLabel = "isAdminAtom";
 
 export const challengeIdxAtom = atom<number>(-1);
+challengeIdxAtom.debugLabel = "challengeIdxAtom";
 
-export const centerNameAtom = atom<string>("");
+export const centerNameAtom = atomWithStorage("centerName", "");
+centerNameAtom.debugLabel = "centerNameAtom";