타이머 배경

app/admin/(components)/Sidebar.tsx

@@ -1,7 +1,8 @@
-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";
+import { useQueryClient } from "@tanstack/react-query";
 
 import HintDialog from "@/components/common/Dialog-new/Hint-Dialog-new/Dialog";
 import {
@@ -11,13 +12,15 @@ import {
   subscribeLinkURL,
 } from "@/admin/(consts)/sidebar";
 import {
+  getLoginInfo,
   getSelectedThemeId,
   getStatus,
   removeThemeId,
 } from "@/utils/storageUtil";
 import { useSelectedThemeReset } from "@/components/atoms/selectedTheme.atom";
 import { useDrawerState } from "@/components/atoms/drawer.atom";
 import useModal from "@/hooks/useModal";
+import { QUERY_KEY } from "@/queries/getThemeList";
 
 interface Theme {
   id: number;
@@ -27,8 +30,6 @@ interface Theme {
 }
 
 interface Props {
-  adminCode: string;
-  shopName: string;
   categories: Theme[];
   selectedTheme: Theme;
   handleClickSelected: (theme: Theme) => void;
@@ -37,6 +38,7 @@ interface Props {
 export default function Sidebar(props: Props) {
   const router = useRouter();
   const resetSelectedTheme = useSelectedThemeReset();
+  const queryClient = useQueryClient();
 
   const [drawer, setDrawer] = useDrawerState();
   const { open } = useModal();
@@ -45,12 +47,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,14 +68,14 @@ export default function Sidebar(props: Props) {
         `/admin?themeId=${encodeURIComponent(selectedThemeId)}
       `
       );
-  }, [selectedThemeId]);
+  }, [selectedThemeId, params]);
 
   const navigateToNewTheme = () => {
     resetSelectedTheme();
     router.push("/admin");
     setDrawer({ ...drawer, isOpen: false });
   };
-  const handleSelectTheme = (theme: Theme) => {
+  const handleSelectTheme = async (theme: Theme) => {
     if (drawer.isOpen && !drawer.isSameHint) {
       open(HintDialog, {
         type: "put",
@@ -80,6 +86,7 @@ export default function Sidebar(props: Props) {
       });
     } else {
       setDrawer({ ...drawer, isOpen: false });
+      await queryClient.invalidateQueries(QUERY_KEY);
       handleClickSelected(theme);
     }
   };
@@ -100,7 +107,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 +171,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)/ThemeDrawer/helpers/imageHelpers.ts

@@ -1,11 +1,29 @@
 import imageCompression from "browser-image-compression";
 
-export const compressImage = async (file: File) => {
-  const options = {
-    maxSizeMB: 5,
-    maxWidthOrHeight: 1920,
-    useWebWorker: true,
-  };
+export interface FileOptionsType {
+  maxSizeMB: number;
+  maxWidthOrHeight: number;
+  useWebWorker: boolean;
+}
+export const getCompressImage = async (
+  file: File,
+  options: FileOptionsType
+) => {
+  const compressedFile = await compressImage(file, options);
+  try {
+    if (compressedFile.type !== "image/png") {
+      const pngFile = await convertToPng(compressedFile);
+      return pngFile;
+    } else {
+      return compressedFile;
+    }
+  } catch (error) {
+    console.error("Image compression failed", error);
+    return file;
+  }
+};
+
+const compressImage = async (file: File, options: FileOptionsType) => {
   try {
     const compressedFile = await imageCompression(file, options);
     return compressedFile; // compressedFile 반환
@@ -14,7 +32,7 @@ export const compressImage = async (file: File) => {
   }
 };
 
-export const convertToPng = async (file: File): Promise<File> =>
+const convertToPng = async (file: File): Promise<File> =>
   new Promise<File>((resolve, reject) => {
     const img = new Image();
     const reader = new FileReader();

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

@@ -14,7 +14,7 @@ import { useToastWrite } from "@/components/atoms/toast.atom";
 import { getStatus } from "@/utils/storageUtil";
 import { subscribeLinkURL } from "@/admin/(consts)/sidebar";
 
-import { compressImage, convertToPng } from "../helpers/imageHelpers";
+import { getCompressImage } from "../helpers/imageHelpers";
 
 const useImages = ({
   imageType,
@@ -79,19 +79,12 @@ const useImages = ({
     const files: File[] = [];
     const file = e.target.files[0];
     if (file.size > 5 * 1024 * 1024) {
-      try {
-        const compressedFile = await compressImage(file);
-
-        if (compressedFile.type !== "image/png") {
-          const pngFile = await convertToPng(compressedFile);
-          files.push(pngFile);
-        } else {
-          files.push(compressedFile);
-        }
-      } catch (error) {
-        console.error("Image compression failed", error);
-        files.push(file);
-      }
+      const options = {
+        maxSizeMB: 5,
+        maxWidthOrHeight: 1920,
+        useWebWorker: true,
+      };
+      files.push(await getCompressImage(file, options));
     } else {
       files.push(file);
     }

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();