fix: Hydration 불일치 수정

Next-Room · Jan 6, 2025 · 5e32212 · 5e32212
1 parent 8937a2a
commit 5e32212
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 16 deletions.
diff --git a/app/admin/(components)/Sidebar.tsx b/app/admin/(components)/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import classNames from "classnames";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -11,6 +11,7 @@ import {
   subscribeLinkURL,
 } from "@/admin/(consts)/sidebar";
 import {
+  getLoginInfo,
   getSelectedThemeId,
   getStatus,
   removeThemeId,
@@ -27,8 +28,6 @@ interface Theme {
 }
 
 interface Props {
-  adminCode: string;
-  shopName: string;
   categories: Theme[];
   selectedTheme: Theme;
   handleClickSelected: (theme: Theme) => void;
@@ -45,12 +44,16 @@ export default function Sidebar(props: Props) {
   const searchParams = useSearchParams();
   const selectedThemeId = getSelectedThemeId();
   const params = new URLSearchParams(searchParams.toString()).toString();
-  const {
-    adminCode = "",
-    shopName = "",
-    categories,
-    handleClickSelected,
-  } = props;
+  const { categories, handleClickSelected } = props;
+  const [loginInfo, setLoginInfo] = useState({
+    adminCode: "",
+    shopName: "",
+  });
+
+  useEffect(() => {
+    const { adminCode, shopName } = getLoginInfo(); // getLoginInfo로 값 가져오기
+    setLoginInfo({ adminCode, shopName }); // 상태 업데이트
+  }, []);
 
   // const handleLogout = () => {
   //   removeAccessToken();
@@ -100,7 +103,7 @@ export default function Sidebar(props: Props) {
         <div className="sidebar__shop-info">
           <Image {...logoProps} className="sidebar__shop-logo" />
           <span className="sidebar__shop-name">
-            {shopName?.replaceAll(`"`, "")}
+            {loginInfo.shopName?.replaceAll(`"`, "")}
           </span>
         </div>
         <div className="sidebar__theme-title">우리 지점 테마</div>
@@ -164,7 +167,7 @@ export default function Sidebar(props: Props) {
       <div className="sidebar__bottom">
         <p className="sidebar__admin-code-title">관리자 코드</p>
         <p className="sidebar__admin-code-value">
-          {adminCode?.replaceAll(`"`, "")}
+          {loginInfo.adminCode?.replaceAll(`"`, "")}
         </p>
       </div>
     </div>

diff --git a/app/admin/Admin.tsx b/app/admin/Admin.tsx
@@ -24,7 +24,6 @@ function Admin() {
   const isLoggedIn = useCheckSignIn();
 
   const [selectedTheme, setSelectedTheme] = useSelectedTheme();
-  const { adminCode, shopName } = getLoginInfo();
 
   const [toast, setToast] = useToastInfo();
   const router = useRouter();
@@ -54,8 +53,6 @@ function Admin() {
   }, [toast, setToast]);
 
   const SidebarViewProps = {
-    adminCode,
-    shopName,
     categories,
     selectedTheme,
     handleClickSelected,

diff --git a/app/admin/AdminView.tsx b/app/admin/AdminView.tsx
@@ -16,8 +16,6 @@ interface Theme {
 }
 
 interface Props {
-  adminCode: string;
-  shopName: string;
   categories: Theme[];
   selectedTheme: Theme;
   isOpen: boolean;