From 5e32212fd0b6c1f26a54995c6694ca5090af66d1 Mon Sep 17 00:00:00 2001
From: lgrin-byte <lgrin02@naver.com>
Date: Tue, 7 Jan 2025 03:22:43 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20Hydration=20=EB=B6=88=EC=9D=BC=EC=B9=98?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/admin/(components)/Sidebar.tsx | 25 ++++++++++++++-----------
 app/admin/Admin.tsx                |  3 ---
 app/admin/AdminView.tsx            |  2 --
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/app/admin/(components)/Sidebar.tsx b/app/admin/(components)/Sidebar.tsx
index ee97e4b..37a82d6 100644
--- 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
index 12a5619..fd93752 100644
--- 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
index 1e956b1..521ca17 100644
--- 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;