Merge branch 'feat/theme-image-preview' into feat/refactor-router

# Conflicts:
#	app/admin/Admin.tsx

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

@@ -1,6 +1,7 @@
 import Image from "next/image";
-import React, { useRef } from "react";
+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";
@@ -32,12 +33,21 @@ export default function ThemeImage() {
     // imgInputRef.current?.click();
     open(PreviewDialog, { type: "put" });
   };
+  const [isHovered, setIsHovered] = useState(false);
 
   return (
     <div className="theme_image__container">
       <div className="theme-image-title">
         <span>타이머 배경</span>
-        <Image {...QuestionProps} />
+        <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">

app/admin/(components)/Tooltip/Container.tsx

@@ -0,0 +1,24 @@
+import Image from "next/image";
+import React from "react";
+
+import "../../(style)/tooltip.modules.sass";
+import { arrowProps, timerTooltipProps } from "@/admin/(consts)/sidebar";
+
+export default function Container() {
+  return (
+    <div className="tooltip-container">
+      <Image className="arrow" {...arrowProps} />
+      <div className="content-container">
+        <span className="content-container__title">타이머 배경이란?</span>
+        <p className="content-container__content">
+          힌트폰 타이머에 테마별로 원하는 배경을 넣어 우리 매장만의 힌트폰을
+          제공할 수 있습니다. 타이머 배경을 설정하지 않으면 기본 이미지로
+          나타납니다.
+        </p>
+        <div className="content-container__image">
+          <Image {...timerTooltipProps} />
+        </div>
+      </div>
+    </div>
+  );
+}

app/admin/(consts)/sidebar.ts

@@ -52,21 +52,42 @@ export const previewProps = {
 
 export const statusBarProps = {
   src: "/images/svg/status_bar.svg",
-  alt: "x icon",
+  alt: "status_bar",
   width: 315,
   height: 40,
 };
 
 export const timerPreviewProps = {
   src: "/images/svg/timer_preview.svg",
-  alt: "x icon",
+  alt: "timer_preview",
   width: 284,
   height: 555,
 };
 
 export const settingProps = {
   src: "/images/svg/icon_setting.svg",
-  alt: "x icon",
+  alt: "icon_setting",
   width: 24,
   height: 24,
 };
+
+export const timerTooltipProps = {
+  src: "/images/png/tooltip.png",
+  alt: "tooltip",
+  width: 108,
+  height: 224,
+};
+
+export const arrowProps = {
+  src: "/images/svg/arrow.svg",
+  alt: "arrow",
+  width: 20,
+  height: 14,
+};
+
+export const notiImageProps = {
+  src: "/images/png/noti_image.png",
+  alt: "noti_image",
+  width: 160,
+  height: 295,
+};

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

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

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

@@ -0,0 +1,41 @@
+@import '../../style/variables'
+@import '../../style/mixins'
+
+.arrow
+  position: absolute
+  top: -12px
+  left: 139px
+
+.tooltip-container
+  position: fixed
+  top: 200px
+  left: 260px
+  z-index: 999
+
+.content-container
+  display: hidden
+  background-color: white
+  width: 298px
+  height: 421px
+  border-radius: 12px
+  padding: 24px
+
+  &__title 
+    @include title16SB
+    color: $color-black
+
+  &__content
+    @include body14R
+    color: $color-sub2
+    margin: 8px 0 16px
+
+  &__image
+    width: 250px
+    height: 250px
+    background-color: #0000001F
+    border-radius: 12px
+    padding: 12px 0 14px
+    display: flex
+    flex-direction: column
+    align-items: center
+

app/admin/Admin.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 
 import useCheckSignIn from "@/hooks/useCheckSignIn";

app/admin/AdminView.tsx

@@ -1,9 +1,12 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import "./(style)/admin.modules.sass";
 import Sidebar from "@/admin/(components)/Sidebar";
 import ContentArea from "@/admin/(components)/ContentArea";
 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/localStorage";
 
 interface Theme {
   id: number;
@@ -23,6 +26,14 @@ interface Props {
 
 function AdminView(props: Props) {
   const { isOpen } = props;
+  const { open } = useModal();
+  const isHideDialog = getLocalStorage("hideDialog");
+
+  useEffect(() => {
+    if (!isHideDialog) {
+      open(NotiDialog, { type: "put" });
+    }
+  }, []);
   return (
     <div className="main">
       <Sidebar {...props} />

app/components/common/Dialog-new/Hint-Dialog-new/Dialog.tsx

@@ -90,8 +90,4 @@ const Dialog = forwardRef<HTMLFormElement, DialogProps>((props) => {
   );
 });
 
-Dialog.defaultProps = {
-  type: "",
-};
-
 export default Dialog;

app/components/common/Dialog-new/Image-Dialog-new/Dialog.tsx

@@ -112,8 +112,4 @@ const Dialog = forwardRef<HTMLFormElement, DialogProps>((props) => {
   );
 });
 
-Dialog.defaultProps = {
-  type: "",
-};
-
 export default Dialog;

app/components/common/Dialog-new/Noti-Dialog-new/Dialog.tsx

@@ -0,0 +1,66 @@
+import React, { forwardRef, useRef } from "react";
+
+import useClickOutside from "@/hooks/useClickOutside";
+import useModal from "@/hooks/useModal";
+import ModalPortal from "@/components/common/Dialog-new/ModalPortal";
+import { setLocalStorage } from "@/utils/localStorage";
+
+import DialogBody from "./DialogBody";
+
+import "@/components/common/Dialog-new/dialog.sass";
+
+interface DialogProps {
+  type?: string | "";
+}
+
+const Dialog = forwardRef<HTMLFormElement, DialogProps>((props) => {
+  const { close } = useModal();
+  const checkboxRef = useRef<HTMLInputElement>(null);
+  const { type = "" } = props;
+  const formRef = useRef<HTMLFormElement | null>(null);
+  const handleViewDetailBtn = () => {
+    close();
+  };
+  const handleCloseBtn = () => {
+    if (checkboxRef.current?.checked) {
+      setLocalStorage("hideDialog", "true");
+    }
+    close();
+  };
+
+  useClickOutside(formRef, close);
+
+  return (
+    <ModalPortal>
+      <form
+        className={`theme-info-modal ${type}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="theme-info-modal__header noti">
+          <h2>새로운 기능을 소개합니다✨</h2>
+        </div>
+        <DialogBody />
+        <div className="theme-info-modal__footer">
+          <div className="dont-show-again">
+            <input type="checkbox" name="" id="hideDialog" ref={checkboxRef} />
+            <label htmlFor="hideDialog">다시 보지 않기</label>
+          </div>
+          <div className="action-buttons">
+            <button
+              className="secondary_button40"
+              type="button"
+              onClick={handleViewDetailBtn}
+            >
+              자세히 보기
+            </button>
+            <button className="button40" type="button" onClick={handleCloseBtn}>
+              확인
+            </button>
+          </div>
+        </div>
+      </form>
+    </ModalPortal>
+  );
+});
+
+export default Dialog;

app/components/common/Dialog-new/Noti-Dialog-new/DialogBody.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Image from "next/image";
+
+import { notiImageProps } from "@/admin/(consts)/sidebar";
+
+export default function DialogBody() {
+  const previewProps = {
+    src: "/images/svg/preview.svg",
+    alt: "NEXT ROOM",
+    width: 158,
+    height: 340,
+  };
+
+  return (
+    <div className="theme-info-modal__noti-content">
+      <Image {...notiImageProps} />
+      <div className="theme-info-modal__feature-description">
+        <span className="theme-info-modal__feature-description__title">
+          타이머 배경
+        </span>
+        <p className="theme-info-modal__feature-description__summary">
+          타이머에 원하는 배경을 넣어보세요
+        </p>
+        <p className="theme-info-modal__feature-description__detail">
+          기본 배경 대신 방탈출 테마 포스터를 등록하여 타이머 배경을 커스텀 할
+          수 있습니다.
+          <br />각 테마의 독특한 분위기를 더욱 살리고, 플레이어들에게 몰입감을
+          제공해보세요.
+        </p>
+      </div>
+    </div>
+  );
+}

app/components/common/Dialog-new/Preview-Dialog-new/PreviewDialog.tsx

@@ -105,8 +105,4 @@ const PreviewDialog = forwardRef<HTMLFormElement, DialogProps>((props) => {
   );
 });
 
-PreviewDialog.defaultProps = {
-  type: "",
-};
-
 export default PreviewDialog;

app/components/common/Dialog-new/Theme-Dialog/Dialog.tsx

@@ -134,8 +134,4 @@ const Dialog = forwardRef<HTMLFormElement, DialogProps>((props) => {
   );
 });
 
-Dialog.defaultProps = {
-  type: "",
-};
-
 export default Dialog;