feat: 로그아웃 버튼 노출 아이콘 호버 시 빈공간 커서 깜빡임 수정, 타이머 이미지 업로드 시 로딩 아이콘 추가

Author: anyl92

app/admin/(components)/Sidebar.tsx

@@ -114,6 +114,7 @@ export default function Sidebar(props: Props) {
         <div className="sidebar__shop-info">
           <div className="sidebar__shop-info-img-box">
             <Image {...logoProps} className="sidebar__shop-logo" />
+            <div />
             <button
               className="sidebar__shop-info-logout-btn"
               onClick={handleLogout}

app/admin/(components)/ThemeInfo/ThemeTimerImage.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import Lottie from "react-lottie-player";
 
 import Dialog from "@/components/common/Dialog-new/Image-Dialog-new/Dialog";
 import PreviewDialog from "@/components/common/Dialog-new/Preview-Dialog-new/PreviewDialog";
@@ -11,11 +12,13 @@ import DeleteDialog from "@/components/common/Dialog-new/Timer-Image-Delete-Dial
 import Tooltip from "@/admin/(components)/Tooltip/Container";
 
 import { getCompressImage } from "../ThemeDrawer/helpers/imageHelpers";
+import loaderJson from "../../../../public/lottie/loader.json";
 
 export default function ThemeTimerImage() {
   const [selectedTheme, setSelectedTheme] = useSelectedTheme();
   const setTimerImage = useTimerImageWrite();
 
+  const [isTimerImageLoading, setIsTimerImageLoading] = useState(false);
   const [timerImageUrl, setTimerImageUrl] = useState<string>(defaultTimerImage);
   useEffect(() => {
     if (selectedTheme.themeImageUrl) {
@@ -52,12 +55,14 @@ export default function ThemeTimerImage() {
     }
     const file: File = e.target.files[0];
     if (file.size > 500 * 1024) {
+      setIsTimerImageLoading(true);
       const options = {
         maxSizeMB: 0.5,
         maxWidthOrHeight: 1000,
         useWebWorker: true,
       };
       const compressedFile = await getCompressImage(file, options);
+      setIsTimerImageLoading(false);
       setTimerImage({ timerImage: compressedFile });
     } else {
       setTimerImage({ timerImage: file });
@@ -67,6 +72,7 @@ export default function ThemeTimerImage() {
       open(Dialog);
     }
     fileReset();
+    setIsTimerImageLoading(false);
   };
   const handleAddTimerImageBtnClick = () => {
     addImageInputRef.current?.click();
@@ -94,6 +100,16 @@ export default function ThemeTimerImage() {
       </div>
       <div className="theme-images">
         <div className="theme-image-box">
+          <div className="theme-image-loader-box">
+            {isTimerImageLoading && (
+              <Lottie
+                loop
+                animationData={loaderJson}
+                play
+                style={{ width: 120, height: 120 }}
+              />
+            )}
+          </div>
           <Image {...TimerImageProps} />
           {selectedTheme.useTimerUrl && (
             <div

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

@@ -16,6 +16,8 @@
   background-color: $color-main
   padding: 24px 
   border-right: 1px solid $color-white12
+  cursor: default
+
   &__top
     flex-shrink: 0
 
@@ -34,11 +36,13 @@
     padding-top: 1px
     padding-left: 1px
     button 
-      visibility: hidden
+      display: none
+    div
+      display: none
 
   &__shop-info-img-box:hover
     button
-      visibility: visible
+      display: block
       position: absolute
       top: 40px
       left: 0
@@ -49,6 +53,10 @@
       background-color: $color-sub1
       border: 1px solid $color-white5
       border-radius: 8px
+    div
+      display: block
+      width: 100%
+      height: 4px
 
   &__shop-logo
     width: 32px

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

@@ -363,3 +363,5 @@
     object-fit: contain
     border-radius: 12px
 
+.theme-image-loader-box 
+  position: absolute