Merge pull request #5 from lgrin-byte/develop

Develop to Main

Author: lgrin-byte

app/admin-old/page.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)/CreateTheme/Container.tsx

@@ -1,25 +1,27 @@
-import React 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/Hint-Dialog-new/Dialog";
+import HintDialog from "@/components/common/Dialog-new/Hint-Dialog-new/Dialog";
 import {
   logoProps,
   plusDisableProps,
   plusProps,
   subscribeLinkURL,
 } from "@/admin/(consts)/sidebar";
 import {
+  getLoginInfo,
   getSelectedThemeId,
   getStatus,
   removeAccessToken,
   removeThemeId,
-} from "@/utils/localStorage";
+} 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";
+import { QUERY_KEY } from "@/queries/getThemeList";
 
 interface Theme {
   id: number;
@@ -29,8 +31,6 @@ interface Theme {
 }
 
 interface Props {
-  adminCode: string;
-  shopName: string;
   categories: Theme[];
   selectedTheme: Theme;
   handleClickSelected: (theme: Theme) => void;
@@ -39,32 +39,50 @@ interface Props {
 export default function Sidebar(props: Props) {
   const router = useRouter();
   const resetSelectedTheme = useSelectedThemeReset();
-  // const setIsLoggedIn = useIsLoggedInWrite();
+  const queryClient = useQueryClient();
+
   const [drawer, setDrawer] = useDrawerState();
   const { open } = useModal();
 
   const status = getStatus();
   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();
-  //   setIsLoggedIn(false);
-  // };
+  const handleLogout = () => {
+    removeAccessToken();
+    resetSelectedTheme();
+    setLoginInfo({
+      adminCode: "",
+      shopName: "",
+    });
+    // router.push("/login");
+    window.location.href = "/login";
+  };
+  useEffect(() => {
+    if (selectedThemeId && selectedThemeId !== "0")
+      router.push(
+        `/admin?themeId=${encodeURIComponent(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",
@@ -75,6 +93,7 @@ export default function Sidebar(props: Props) {
       });
     } else {
       setDrawer({ ...drawer, isOpen: false });
+      await queryClient.invalidateQueries(QUERY_KEY);
       handleClickSelected(theme);
     }
   };
@@ -93,9 +112,18 @@ export default function Sidebar(props: Props) {
     <div className="sidebar">
       <div className="sidebar__top">
         <div className="sidebar__shop-info">
-          <Image {...logoProps} className="sidebar__shop-logo" />
+          <div className="sidebar__shop-info-img-box">
+            <Image {...logoProps} className="sidebar__shop-logo" />
+            <div />
+            <button
+              className="sidebar__shop-info-logout-btn"
+              onClick={handleLogout}
+            >
+              로그아웃
+            </button>
+          </div>
           <span className="sidebar__shop-name">
-            {shopName?.replaceAll(`"`, "")}
+            {loginInfo.shopName?.replaceAll(`"`, "")}
           </span>
         </div>
         <div className="sidebar__theme-title">우리 지점 테마</div>
@@ -111,7 +139,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)}
               >
@@ -159,7 +187,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)/Sidebar.tsx

@@ -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/helpers/imageHelpers.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)/ThemeDrawer/hooks/useEditHint.ts

@@ -11,10 +11,10 @@ import {
 import { useCreateHint } from "@/components/atoms/createHint.atom";
 import { useSelectedHint } from "@/components/atoms/selectedHint.atom";
 import { useToastWrite } from "@/components/atoms/toast.atom";
-import { getStatus } from "@/utils/localStorage";
+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)/ThemeDrawer/hooks/useImages.ts

@@ -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 "./ThemeTimerImage";
 
 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/Container.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,