feat: 테마 배경 이미지 첨부

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

@@ -1,9 +1,11 @@
 import { FormEvent } from "react";
-
 import "../../(style)/createTheme.modules.sass";
+import { useRouter } from "next/navigation";
+
 import { usePostTheme } from "@/mutations/postTheme";
 import { useCreateThemeValue } from "@/components/atoms/createTheme.atom";
 import { useSelectedThemeWrite } from "@/components/atoms/selectedTheme.atom";
+import { setSelectedThemeId } from "@/utils/storageUtil";
 
 import CreateThemeTitle from "./CreateThemeTitle";
 import CreateThemeBody from "./CreateThemeBody";
@@ -13,7 +15,7 @@ export default function CreateTheme() {
   const createTheme = useCreateThemeValue();
   const setSelectedTheme = useSelectedThemeWrite();
   const { mutateAsync: postTheme } = usePostTheme();
-
+  const router = useRouter();
   const handleKeyDownSubmit = async (e: FormEvent) => {
     e.preventDefault();
     const isDisabled =
@@ -24,10 +26,16 @@ export default function CreateTheme() {
     if (isDisabled) {
       return;
     }
-    const response = await postTheme(createTheme);
-    const { id } = response.data.data;
-    if (id) {
-      setSelectedTheme(createTheme);
+    try {
+      const response = await postTheme(createTheme);
+      const { id } = response.data.data;
+      router.push(`/admin?themeId=${encodeURIComponent(id)}`);
+      if (id) {
+        setSelectedTheme(createTheme);
+        setSelectedThemeId(id);
+      }
+    } catch (err) {
+      console.error("Login failed:", err);
     }
   };
 

app/admin/(components)/Sidebar.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Image from "next/image";
 import classNames from "classnames";
 import { useRouter, useSearchParams } from "next/navigation";
 
-import HintDialog from "@/components/common/Hint-Dialog-new/Dialog";
+import HintDialog from "@/components/common/Dialog-new/Hint-Dialog-new/Dialog";
 import {
   logoProps,
   plusDisableProps,
@@ -13,11 +13,9 @@ import {
 import {
   getSelectedThemeId,
   getStatus,
-  removeAccessToken,
   removeThemeId,
 } from "@/utils/storageUtil";
 import { useSelectedThemeReset } from "@/components/atoms/selectedTheme.atom";
-import { useIsLoggedInWrite } from "@/components/atoms/account.atom";
 import { useDrawerState } from "@/components/atoms/drawer.atom";
 import useModal from "@/hooks/useModal";
 
@@ -39,7 +37,7 @@ interface Props {
 export default function Sidebar(props: Props) {
   const router = useRouter();
   const resetSelectedTheme = useSelectedThemeReset();
-  // const setIsLoggedIn = useIsLoggedInWrite();
+
   const [drawer, setDrawer] = useDrawerState();
   const { open } = useModal();
 
@@ -58,6 +56,13 @@ export default function Sidebar(props: Props) {
   //   removeAccessToken();
   //   setIsLoggedIn(false);
   // };
+  useEffect(() => {
+    if (selectedThemeId && selectedThemeId !== "0")
+      router.push(
+        `/admin?themeId=${encodeURIComponent(selectedThemeId)}
+      `
+      );
+  }, [selectedThemeId]);
 
   const navigateToNewTheme = () => {
     resetSelectedTheme();
@@ -111,7 +116,7 @@ export default function Sidebar(props: Props) {
               <button
                 type="button"
                 className={classNames("sidebar__theme-button", {
-                  selected: selectedThemeId === theme.id?.toString() && params,
+                  selected: selectedThemeId === theme.id.toString(),
                 })}
                 onClick={() => handleSelectTheme(theme)}
               >

app/admin/(components)/ThemeDrawer/hooks/useEditHint.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, FormEvent, useRef } from "react";
 
-import HintDialog from "@/components/common/Hint-Dialog-new/Dialog";
+import HintDialog from "@/components/common/Dialog-new/Hint-Dialog-new/Dialog";
 import {
   InitialSelectedHint,
   SelectedHintType,

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

@@ -4,14 +4,14 @@ import classNames from "classnames";
 import "../../(style)/themeInfo.modules.sass";
 
 import useModal from "@/hooks/useModal";
-import Dialog from "@/components/common/Dialog-new/Dialog";
+import Dialog from "@/components/common/Dialog-new/Theme-Dialog/Dialog";
 import { useDrawerState } from "@/components/atoms/drawer.atom";
 
 import ThemeDrawer from "../ThemeDrawer/Container";
 
 import ThemeInfoTitle from "./ThemeInfoTitle";
-import ThemeInfoBody from "./ThemeInfoBody";
 import ThemeInfoHint from "./ThemeInfoHint";
+import ThemeImage from "./ThemeImage";
 
 export default function ThemeInfo() {
   const { open } = useModal();
@@ -46,7 +46,7 @@ export default function ThemeInfo() {
       })}
     >
       <ThemeInfoTitle handleOpenModal={handleOpenModal} />
-      <ThemeInfoBody handleOpenModal={handleOpenModal} />
+      <ThemeImage />
       <ThemeInfoHint handleHintCreate={handleHintCreate} />
       {drawer.isOpen && (
         <ThemeDrawer

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

@@ -0,0 +1,80 @@
+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, { type: "put" });
+  };
+  const handlePreviewImageBtnClick = () => {
+    // 숨겨진 input 클릭 트리거
+    // 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>
+        <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>
+  );
+}

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

@@ -3,7 +3,7 @@ import classNames from "classnames";
 
 import { useGetHintList } from "@/queries/getHintList";
 import { useSelectedThemeValue } from "@/components/atoms/selectedTheme.atom";
-import HintDialog from "@/components/common/Hint-Dialog-new/Dialog";
+import HintDialog from "@/components/common/Dialog-new/Hint-Dialog-new/Dialog";
 import {
   SelectedHintType,
   useSelectedHint,

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

@@ -1,18 +1,32 @@
+import Image from "next/image";
 import React from "react";
 
+import { settingProps } from "@/admin/(consts)/sidebar";
 import { useSelectedThemeValue } from "@/components/atoms/selectedTheme.atom";
-
 interface Props {
   handleOpenModal: () => void;
 }
-export default function ThemeInfoTitle({ handleOpenModal }: Props) {
+export default function ThemeInfoTitleNew({ handleOpenModal }: Props) {
   const selectedTheme = useSelectedThemeValue();
+
   return (
     <div className="theme-infomation__title">
-      <div className="theme-infomation-fit" onClick={handleOpenModal}>
-        <div className="title">{selectedTheme.title}</div>
-        <div className="image" />
+      <div className="title">{selectedTheme.title}</div>
+      <div className="theme-infomation-text-box">
+        <span className="theme-infomation-text">탈출 제한 시간</span>
+        <span className="theme-infomation-content-text">
+          {selectedTheme.timeLimit}분
+        </span>
+        <div className="dot" />
+        <span className="theme-infomation-text">사용 가능한 힌트</span>
+        <span className="theme-infomation-content-text">
+          {selectedTheme.hintLimit}개
+        </span>
       </div>
+      <button onClick={handleOpenModal} className="setting-button">
+        <Image {...settingProps} />
+      </button>
+      <div className="decoration-line" />
     </div>
   );
 }

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

@@ -35,3 +35,59 @@ export const deleteProps = {
 
 export const subscribeLinkURL =
   "https://sponge-wood-68d.notion.site/ec2a28c470094769bc787acb74760da5";
+
+export const smallXProps = {
+  src: "/images/svg/icon_X.svg",
+  alt: "x icon",
+  width: 16,
+  height: 16,
+};
+
+export const previewProps = {
+  src: "/images/svg/image.png",
+  alt: "x icon",
+  width: 315,
+  height: 682,
+};
+
+export const statusBarProps = {
+  src: "/images/svg/status_bar.svg",
+  alt: "status_bar",
+  width: 315,
+  height: 40,
+};
+
+export const timerPreviewProps = {
+  src: "/images/svg/timer_preview.svg",
+  alt: "timer_preview",
+  width: 284,
+  height: 555,
+};
+
+export const settingProps = {
+  src: "/images/svg/icon_setting.svg",
+  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,
+};