타이머 배경

app/admin/(components)/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import classNames from "classnames";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -11,6 +11,7 @@ import {
   subscribeLinkURL,
 } from "@/admin/(consts)/sidebar";
 import {
+  getLoginInfo,
   getSelectedThemeId,
   getStatus,
   removeThemeId,
@@ -27,8 +28,6 @@ interface Theme {
 }
 
 interface Props {
-  adminCode: string;
-  shopName: string;
   categories: Theme[];
   selectedTheme: Theme;
   handleClickSelected: (theme: Theme) => void;
@@ -45,12 +44,16 @@ export default function Sidebar(props: Props) {
   const searchParams = useSearchParams();
   const selectedThemeId = getSelectedThemeId();
   const params = new URLSearchParams(searchParams.toString()).toString();
-  const {
-    adminCode = "",
-    shopName = "",
-    categories,
-    handleClickSelected,
-  } = props;
+  const { categories, handleClickSelected } = props;
+  const [loginInfo, setLoginInfo] = useState({
+    adminCode: "",
+    shopName: "",
+  });
+
+  useEffect(() => {
+    const { adminCode, shopName } = getLoginInfo(); // getLoginInfo로 값 가져오기
+    setLoginInfo({ adminCode, shopName }); // 상태 업데이트
+  }, []);
 
   // const handleLogout = () => {
   //   removeAccessToken();
@@ -62,7 +65,7 @@ export default function Sidebar(props: Props) {
         `/admin?themeId=${encodeURIComponent(selectedThemeId)}
       `
       );
-  }, [selectedThemeId]);
+  }, [selectedThemeId, params]);
 
   const navigateToNewTheme = () => {
     resetSelectedTheme();
@@ -100,7 +103,7 @@ export default function Sidebar(props: Props) {
         <div className="sidebar__shop-info">
           <Image {...logoProps} className="sidebar__shop-logo" />
           <span className="sidebar__shop-name">
-            {shopName?.replaceAll(`"`, "")}
+            {loginInfo.shopName?.replaceAll(`"`, "")}
           </span>
         </div>
         <div className="sidebar__theme-title">우리 지점 테마</div>
@@ -164,7 +167,7 @@ export default function Sidebar(props: Props) {
       <div className="sidebar__bottom">
         <p className="sidebar__admin-code-title">관리자 코드</p>
         <p className="sidebar__admin-code-value">
-          {adminCode?.replaceAll(`"`, "")}
+          {loginInfo.adminCode?.replaceAll(`"`, "")}
         </p>
       </div>
     </div>

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

@@ -11,7 +11,7 @@ import ThemeDrawer from "../ThemeDrawer/Container";
 
 import ThemeInfoTitle from "./ThemeInfoTitle";
 import ThemeInfoHint from "./ThemeInfoHint";
-import ThemeImage from "./ThemeImage";
+import ThemeImage from "./ThemeTimerImage";
 
 export default function ThemeInfo() {
   const { open } = useModal();

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

@@ -0,0 +1,106 @@
+import Image from "next/image";
+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";
+import useModal from "@/hooks/useModal";
+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();
+
+  const isTimerImage = selectedTheme.useTimerUrl;
+  const setTimerImage = useTimerImageWrite();
+
+  const TimerImageProps = {
+    src: isTimerImage ? selectedTheme.themeImageUrl! : defaultTimerImage,
+    alt: "NEXT ROOM",
+    width: 120,
+    height: 120,
+  };
+  const { open } = useModal();
+
+  const addImageInputRef = useRef<HTMLInputElement>(null);
+  const fileReset = () => {
+    if (addImageInputRef.current) {
+      addImageInputRef.current.value = "";
+    }
+  };
+
+  const handleFileInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files) {
+      return;
+    }
+    const file: File = e.target.files[0];
+    setTimerImage({ timerImage: file });
+
+    if (file) {
+      open(Dialog);
+    }
+    fileReset();
+  };
+  const handleAddTimerImageBtnClick = () => {
+    addImageInputRef.current?.click();
+  };
+  const handlePreviewBtnClick = () => {
+    open(PreviewDialog);
+  };
+
+  const handleDelTimerImageBtnClick = () => {
+    open(DeleteDialog);
+  };
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div className="theme_image__container">
+      <div className="theme-image-title">
+        <span>타이머 배경</span>
+        <Image
+          {...QuestionIconProps}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          className="tooptip-button"
+        />
+        {isHovered && <Tooltip />}
+      </div>
+      <div className="theme-images">
+        <div className="theme-image-box">
+          <Image {...TimerImageProps} />
+          {isTimerImage && (
+            <div
+              className="theme-image-dimmed"
+              onClick={handleDelTimerImageBtnClick}
+            >
+              <button className="button28" type="button">
+                삭제
+              </button>
+            </div>
+          )}
+        </div>
+        <input
+          type="file"
+          onChange={handleFileInputChange}
+          accept="image/*"
+          style={{ display: "none" }}
+          ref={addImageInputRef}
+        />
+        {isTimerImage ? (
+          <button
+            className="secondary_button40"
+            onClick={handlePreviewBtnClick}
+          >
+            미리보기
+          </button>
+        ) : (
+          <button className="button40" onClick={handleAddTimerImageBtnClick}>
+            배경 등록하기
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

app/admin/(consts)/sidebar.ts

@@ -43,20 +43,6 @@ export const smallXProps = {
   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",
@@ -71,6 +57,22 @@ export const settingProps = {
   height: 24,
 };
 
+export const QuestionIconProps = {
+  src: "/images/svg/icon_question.svg",
+  alt: "gallery_image",
+  width: 24,
+  height: 24,
+};
+
+export const timerPreviewLineProps = {
+  src: "/images/svg/timer_preview_entire.svg",
+  alt: "TIMER_LINE_IMAGE",
+  width: 158,
+  height: 340,
+};
+
+export const defaultTimerImage = "/images/svg/icon_preview.svg";
+export const defaultTimerImagePreview = "/images/svg/timer_preview.svg";
 export const timerTooltipProps = {
   src: "/images/png/tooltip.png",
   alt: "tooltip",

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

@@ -149,7 +149,6 @@
   width: 100vw
   height: 100vh
   background-color: $color-black60
-  z-index: 100
 .modal-1
   position: fixed
   left: 0

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

@@ -13,7 +13,8 @@
     @include title24SB
     color: $color-white
     position: relative
-
+    div
+      cursor: default
 
 .drawer-open
   width: calc(100% - 520px)
@@ -40,6 +41,7 @@
   position: absolute
   right: 0
   top: 30px
+  cursor: pointer
 
 .theme-infomation-text
   @include body14M
@@ -324,6 +326,7 @@
   span
     @include title16SB
     margin-right: 2px
+    cursor: default
   img
     vertical-align: bottom
 

app/admin/Admin.tsx

@@ -21,15 +21,19 @@ type Theme = {
 
 function Admin() {
   const { data: categories = [], isLoading } = useGetThemeList();
-
   const isLoggedIn = useCheckSignIn();
 
   const [selectedTheme, setSelectedTheme] = useSelectedTheme();
-  const { adminCode, shopName } = getLoginInfo();
 
   const [toast, setToast] = useToastInfo();
   const router = useRouter();
 
+  useEffect(() => {
+    if (!isLoading && categories.length > 0 && selectedTheme.id === 0) {
+      setSelectedTheme(categories[categories.length - 1]);
+    }
+  }, [isLoading]);
+
   const handleClickSelected = (theme: Theme) => {
     setSelectedTheme(theme);
     setSelectedThemeId(theme.id);
@@ -49,18 +53,13 @@ function Admin() {
   }, [toast, setToast]);
 
   const SidebarViewProps = {
-    adminCode,
-    shopName,
     categories,
     selectedTheme,
     handleClickSelected,
     isOpen: toast.isOpen,
+    isLoading,
   };
 
-  if (!isLoggedIn || isLoading) {
-    return <Loader />;
-  }
-
   return <AdminView {...SidebarViewProps} />;
 }