From a9063693d7a1a4d52d20d7e31c74cd322ebbe8a2 Mon Sep 17 00:00:00 2001
From: tyoung <taeyoung917@gmail.com>
Date: Sun, 5 Mar 2023 23:30:24 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat:=C2=A0recoil=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=20#30=20#13=20=20#8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/GlobalNavigationBar.tsx |  7 ++++---
 package.json                       |  2 ++
 pages/_app.tsx                     | 15 +++++++++------
 pages/mypage/index.tsx             |  9 ++++++---
 shared/atom.ts                     |  9 +++++++++
 5 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 shared/atom.ts

diff --git a/components/GlobalNavigationBar.tsx b/components/GlobalNavigationBar.tsx
index 0302464..e2feaa9 100644
--- a/components/GlobalNavigationBar.tsx
+++ b/components/GlobalNavigationBar.tsx
@@ -4,16 +4,17 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useRouter } from 'next/router';
 import Search from './Search';
-import { auth } from '@/shared/firebase';
 import useCheckLogin from '../Hooks/useCheckLogin';
+import { userState } from '@/shared/atom';
+import { useRecoilValue } from 'recoil';
 
 function GlobalNavigationBar() {
   const router = useRouter();
   const { pathname } = router;
   const { isLogin, logOut } = useCheckLogin();
   const [isOpenMenu, setIsOpenMenu] = useState(false);
-  const userProfilImg =
-    auth.currentUser?.photoURL ?? '/images/Padeeffillortu.png';
+  const userInfo = useRecoilValue(userState);
+  const userProfilImg = userInfo?.photoURL ?? '/images/Padeeffillortu.png';
 
   return (
     <GNBLayout theme={pathname === '/main' ? 'dark' : 'light'}>
diff --git a/package.json b/package.json
index 2391b46..b381edf 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,8 @@
     "react-query": "^3.39.3",
     "react-quill": "^2.0.0",
     "react-share": "^4.4.1",
+    "recoil": "^0.7.7",
+    "recoil-persist": "^4.2.0",
     "sharp": "^0.31.3",
     "styled-components": "^5.3.6",
     "styled-reset": "^4.4.5",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1d95e94..acfb56a 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -8,6 +8,7 @@ import GlobalNavigationBar from '../components/GlobalNavigationBar';
 import styled from 'styled-components';
 import Footer from '@/components/Footer';
 import { ReactQueryDevtools } from 'react-query/devtools';
+import { RecoilRoot } from 'recoil';
 
 declare global {
   interface Window {
@@ -28,17 +29,19 @@ export default function App({ Component, pageProps }: AppProps) {
 
   return (
     <>
-      <GlobalNavigationBar />
       <Script
         defer
         src="https://developers.kakao.com/sdk/js/kakao.js"
         onLoad={kakaoInit}
       ></Script>
-      <QueryClientProvider client={client}>
-        <Component {...pageProps} />
-        <ReactQueryDevtools initialIsOpen={false} />
-      </QueryClientProvider>
-      <Footer />
+      <RecoilRoot>
+        <GlobalNavigationBar />
+        <QueryClientProvider client={client}>
+          <Component {...pageProps} />
+          <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
+        <Footer />
+      </RecoilRoot>
     </>
   );
 }
diff --git a/pages/mypage/index.tsx b/pages/mypage/index.tsx
index 19d7dc8..3e78f77 100644
--- a/pages/mypage/index.tsx
+++ b/pages/mypage/index.tsx
@@ -19,8 +19,10 @@ import {
   query,
   where,
 } from 'firebase/firestore';
-import { getAuth } from 'firebase/auth';
+
 import { AiOutlineSetting } from 'react-icons/ai';
+import { userState } from '@/shared/atom';
+import { useRecoilValue } from 'recoil';
 
 type Props = {};
 
@@ -35,9 +37,10 @@ export default function MyPage({}: Props) {
   const postCount = myPost.length;
   const scrapCount = myScrap.length;
   const followCount = myFollow.length;
-
+  const userInfo = useRecoilValue(userState);
   const [profileData, setProfileData] = useState({});
-  const uid = auth.currentUser?.uid;
+  const uid = userInfo?.uid;
+
   useEffect(() => {
     if (!uid) {
       return;
diff --git a/shared/atom.ts b/shared/atom.ts
new file mode 100644
index 0000000..382a4c3
--- /dev/null
+++ b/shared/atom.ts
@@ -0,0 +1,9 @@
+import { atom } from 'recoil';
+import { recoilPersist } from 'recoil-persist';
+const { persistAtom } = recoilPersist();
+
+export const userState = atom({
+  key: 'userState',
+  default: null,
+  effects_UNSTABLE: [persistAtom],
+});