feat: 툴팁 추가

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

Hide file tree

Showing 5 changed files with 18 additions and 85 deletions.
diff --git a/app/admin/(components)/ThemeInfo/ThemeImage.tsx b/app/admin/(components)/ThemeInfo/ThemeImage.tsx
diff --git a/app/admin/(components)/ThemeInfo/ThemeTimerImage.tsx b/app/admin/(components)/ThemeInfo/ThemeTimerImage.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import React, { ChangeEvent, useRef } from "react";
+import React, { ChangeEvent, useRef, useState } from "react";
 
 import Dialog from "@/components/common/Dialog-new/Image-Dialog-new/Dialog";
 import PreviewDialog from "@/components/common/Dialog-new/Preview-Dialog-new/PreviewDialog";
@@ -8,6 +8,7 @@ import { useTimerImageWrite } from "@/components/atoms/timerImage.atom";
 import { useSelectedThemeValue } from "@/components/atoms/selectedTheme.atom";
 import { defaultTimerImage, QuestionIconProps } from "@/admin/(consts)/sidebar";
 import DeleteDialog from "@/components/common/Dialog-new/Timer-Image-Delete-Dialog/DeleteDialog";
+import Tooltip from "@/admin/(components)/Tooltip/Container";
 
 export default function ThemeTimerImage() {
   const selectedTheme = useSelectedThemeValue();
@@ -52,12 +53,19 @@ export default function ThemeTimerImage() {
   const handleDelTimerImageBtnClick = () => {
     open(DeleteDialog);
   };
+  const [isHovered, setIsHovered] = useState(false);
 
   return (
     <div className="theme_image__container">
       <div className="theme-image-title">
         <span>타이머 배경</span>
-        <Image {...QuestionIconProps} />
+        <Image
+          {...QuestionIconProps}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          className="tooptip-button"
+        />
+        {isHovered && <Tooltip />}
       </div>
       <div className="theme-images">
         <div className="theme-image-box">

diff --git a/app/admin/Admin.tsx b/app/admin/Admin.tsx
@@ -57,6 +57,7 @@ function Admin() {
     selectedTheme,
     handleClickSelected,
     isOpen: toast.isOpen,
+    isLoading,
   };
 
   return <AdminView {...SidebarViewProps} />;

diff --git a/app/admin/AdminView.tsx b/app/admin/AdminView.tsx
@@ -7,6 +7,7 @@ import Toast from "@/components/common/Toast/Toast";
 import NotiDialog from "@/components/common/Dialog-new/Noti-Dialog-new/Dialog";
 import useModal from "@/hooks/useModal";
 import { getLocalStorage } from "@/utils/storageUtil";
+import Loader from "@/components/Loader/Loader";
 
 interface Theme {
   id: number;
@@ -19,19 +20,22 @@ interface Props {
   categories: Theme[];
   selectedTheme: Theme;
   isOpen: boolean;
+  isLoading: boolean;
   handleClickSelected: (theme: Theme) => void;
 }
 
 function AdminView(props: Props) {
-  const { isOpen } = props;
-  const { open } = useModal();
+  const { isOpen, isLoading } = props;
+  const { open, closeAll } = useModal();
   const isHideDialog = getLocalStorage("hideDialog");
 
   useEffect(() => {
+    closeAll();
     if (!isHideDialog) {
       open(NotiDialog, { type: "put" });
     }
   }, []);
+  if (isLoading) return <Loader />;
   return (
     <div className="main">
       <Sidebar {...props} />

diff --git a/app/queries/getThemeList.ts b/app/queries/getThemeList.ts
@@ -71,6 +71,6 @@ export const useGetThemeList = (configOptions?: QueryConfigOptions) => {
     ...info,
     isInitialLoading: info.isLoading,
     isRefetching: info.isFetching && !info.isLoading,
-    isLoading: info.isLoading || info.isFetching,
+    isLoading: info.isLoading,
   };
 };