✨ Feat: recoil 추가 로그인 #30 #13 #8

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'}>

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",

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>
     </>
   );
 }

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;

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],
+});