feat: 로그아웃 버튼 및 연동, 로고 디자인 css 미적용 수정

Author: anyl92

app/admin/(components)/Sidebar.tsx

@@ -15,6 +15,7 @@ import {
   getLoginInfo,
   getSelectedThemeId,
   getStatus,
+  removeAccessToken,
   removeThemeId,
 } from "@/utils/storageUtil";
 import { useSelectedThemeReset } from "@/components/atoms/selectedTheme.atom";
@@ -58,10 +59,16 @@ export default function Sidebar(props: Props) {
     setLoginInfo({ adminCode, shopName }); // 상태 업데이트
   }, []);
 
-  // const handleLogout = () => {
-  //   removeAccessToken();
-  //   setIsLoggedIn(false);
-  // };
+  const handleLogout = () => {
+    removeAccessToken();
+    resetSelectedTheme();
+    setLoginInfo({
+      adminCode: "",
+      shopName: "",
+    });
+    // router.push("/login");
+    window.location.href = "/login";
+  };
   useEffect(() => {
     if (selectedThemeId && selectedThemeId !== "0")
       router.push(
@@ -105,7 +112,15 @@ export default function Sidebar(props: Props) {
     <div className="sidebar">
       <div className="sidebar__top">
         <div className="sidebar__shop-info">
-          <Image {...logoProps} className="sidebar__shop-logo" />
+          <div className="sidebar__shop-info-img-box">
+            <Image {...logoProps} className="sidebar__shop-logo" />
+            <button
+              className="sidebar__shop-info-logout-btn"
+              onClick={handleLogout}
+            >
+              로그아웃
+            </button>
+          </div>
           <span className="sidebar__shop-name">
             {loginInfo.shopName?.replaceAll(`"`, "")}
           </span>

app/admin/(style)/admin.modules.sass

@@ -24,10 +24,35 @@
     align-items: center
     margin-bottom: 24px
 
+  &__shop-info-img-box
+    position: relative
+    width: 36px
+    height: 36px
+    margin-right: 6px
+    border-radius: 10px
+    border: 1px solid $color-white20
+    padding-top: 1px
+    padding-left: 1px
+    button 
+      visibility: hidden
+    
+  &__shop-info-img-box:hover
+    button
+      visibility: visible
+      position: absolute
+      top: 40px
+      left: 0
+      width: 129px
+      height: 36px
+      color: $color-white
+      @include body14M
+      background-color: $color-sub1
+      border: 1px solid $color-white5
+      border-radius: 8px
+
   &__shop-logo
     width: 32px
     height: 32px
-    margin-right: 6px
     border-radius: 8px
     border: 1px solid $color-white8
 

app/admin/(style)/themeInfo.modules.sass

@@ -323,6 +323,7 @@
   background-color: $color-white5
 .theme-image-title
   display: flex
+  align-items: center
   span
     @include title16SB
     margin-right: 2px