Merge pull request #66 from Mogazoa-team20/fix/gnb-login

Gnb 로그인 상태에 따른 ui 리팩토링
Mogazoa-team20 · Jun 14, 2024 · 50bc795 · 50bc795
2 parents dfd19ba + ad3545e
commit 50bc795
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
+import { getServerSession } from "next-auth/next";
 import { Gnb } from "@/components/Gnb";
+import authOptions from "@/lib/auth";
 import AuthProvider from "@/lib/AuthProvider";
 import Providers from "@/lib/Providers";
 import "@/styles/_reset.scss";
@@ -17,11 +19,12 @@ const pretendard = localFont({
   display: "swap",
 });
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const session = await getServerSession(authOptions);
   return (
     <html
       lang='ko'
@@ -31,8 +34,9 @@ export default function RootLayout({
         <div id='modal' />
         <AuthProvider>
           <Providers>
-            <Gnb />
+            <Gnb initialSession={session} />
             <main className={styles.main}>{children}</main>
+            {/* {session && <FloatingButton />} */}
           </Providers>
         </AuthProvider>
       </body>

diff --git a/src/components/Gnb/Gnb.tsx b/src/components/Gnb/Gnb.tsx
@@ -2,19 +2,31 @@
 
 import Image from "next/image";
 import Link from "next/link";
+import { Session } from "next-auth";
 import { useSession } from "next-auth/react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import cn from "@/utils/classNames";
 import { LOGO_IMAGE, MENU_TOGGLE_ICON, CLOSE_ICON } from "@/utils/constant";
 import styles from "./Gnb.module.scss";
 import { SearchInput } from "./SearchInput";
 
-export default function Gnb() {
+type GnbProps = {
+  initialSession: Session | null;
+};
+
+export default function Gnb({ initialSession }: GnbProps) {
+  const { data: session, status } = useSession();
+  const [currentSession, setCurrentSession] = useState(initialSession);
+
+  useEffect(() => {
+    if (status !== "loading" && initialSession !== session) {
+      setCurrentSession(session);
+    }
+  }, [session, initialSession, status]);
+
   const [isInputOpen, setInputOpen] = useState(false);
   const [isMenuOpen, setMenuOpen] = useState(false);
 
-  const { status } = useSession();
-
   const handleSearchClick = () => {
     setInputOpen(!isInputOpen);
   };
@@ -62,7 +74,7 @@ export default function Gnb() {
             onClick={handleMenuClick}
           />
           <div className={cn(styles.userAction, isMenuOpen && styles.open)}>
-            {status === "authenticated" ? (
+            {currentSession ? (
               <>
                 <Link href='/compare'>비교하기</Link>
                 <Link href='/mypage'>내 프로필</Link>