From 167698c160846f63493463f53170c181fe7cdff5 Mon Sep 17 00:00:00 2001
From: lgrin-byte <lgrin02@naver.com>
Date: Tue, 7 Jan 2025 03:31:04 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=88=B4=ED=8C=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(components)/ThemeInfo/ThemeImage.tsx     | 80 -------------------
 .../ThemeInfo/ThemeTimerImage.tsx             | 12 ++-
 2 files changed, 10 insertions(+), 82 deletions(-)
 delete mode 100644 app/admin/(components)/ThemeInfo/ThemeImage.tsx

diff --git a/app/admin/(components)/ThemeInfo/ThemeImage.tsx b/app/admin/(components)/ThemeInfo/ThemeImage.tsx
deleted file mode 100644
index 909a121..0000000
--- a/app/admin/(components)/ThemeInfo/ThemeImage.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import Image from "next/image";
-import React, { useRef, useState } from "react";
-
-import Tooltip from "@/admin/(components)/Tooltip/Container";
-import Dialog from "@/components/common/Dialog-new/Image-Dialog-new/Dialog";
-import PreviewDialog from "@/components/common/Dialog-new/Preview-Dialog-new/PreviewDialog";
-import useModal from "@/hooks/useModal";
-
-export default function ThemeImage() {
-  const QuestionProps = {
-    src: "/images/svg/icon_question.svg",
-    alt: "gallery_image",
-    width: 24,
-    height: 24,
-  };
-
-  const previewProps = {
-    src: "/images/svg/icon_preview.svg",
-    alt: "NEXT ROOM",
-    width: 120,
-    height: 120,
-  };
-  const { open } = useModal();
-
-  const imgInputRef = useRef<HTMLInputElement>(null);
-  const handleAddImageBtnClick = () => {
-    // 숨겨진 input 클릭 트리거
-    // imgInputRef.current?.click();
-    open(Dialog);
-  };
-  const handlePreviewImageBtnClick = () => {
-    // 숨겨진 input 클릭 트리거
-    // imgInputRef.current?.click();
-    open(PreviewDialog);
-  };
-  const [isHovered, setIsHovered] = useState(false);
-
-  return (
-    <div className="theme_image__container">
-      <div className="theme-image-title">
-        <span>타이머 배경</span>
-        <div className="theme-image__tooptip">
-          <Image
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
-            className="tooptip-button"
-            {...QuestionProps}
-          />
-          {isHovered && <Tooltip />}
-        </div>
-      </div>
-      <div className="theme-images">
-        <div className="theme-image-box">
-          <Image {...previewProps} />
-          <div className="theme-image-dimmed">
-            <button className="button28" type="button">
-              삭제
-            </button>
-          </div>
-        </div>
-        <input
-          type="file"
-          //   onChange={handleFileInputChange}
-          accept="image/*"
-          style={{ display: "none" }}
-          ref={imgInputRef}
-        />
-        <button
-          className="secondary_button40"
-          onClick={handlePreviewImageBtnClick}
-        >
-          미리보기
-        </button>
-        <button className="button40" onClick={handleAddImageBtnClick}>
-          배경 등록하기
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/app/admin/(components)/ThemeInfo/ThemeTimerImage.tsx b/app/admin/(components)/ThemeInfo/ThemeTimerImage.tsx
index 054cff7..c577428 100644
--- 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">