Merge branch 'feat/theme-image-preview' into feat/theme-image-preview…

…-logic # Conflicts: # app/admin/(components)/ThemeInfo/ThemeImage.tsx # app/admin/(consts)/sidebar.ts # app/components/common/Dialog-new/dialog.sass
Next-Room · Dec 29, 2024 · 862ea79 · 862ea79
2 parents c8c79c0 + bfca027
commit 862ea79
Show file tree

Hide file tree

Showing 81 changed files with 695 additions and 2,363 deletions.
diff --git a/app/admin-old/page.tsx b/app/admin-old/page.tsx
diff --git a/app/admin/(components)/CreateTheme/Container.tsx b/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);
     }
   };
 

diff --git a/app/admin/(components)/Sidebar.tsx b/app/admin/(components)/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Image from "next/image";
 import classNames from "classnames";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -13,11 +13,9 @@ import {
 import {
   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";
 
@@ -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)}
               >

diff --git a/app/admin/(components)/ThemeDrawer/hooks/useImages.ts b/app/admin/(components)/ThemeDrawer/hooks/useImages.ts
@@ -11,7 +11,7 @@ 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";

diff --git a/app/admin/(components)/ThemeInfo/ThemeImage.tsx b/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);
+  };
+  const handlePreviewImageBtnClick = () => {
+    // 숨겨진 input 클릭 트리거
+    // imgInputRef.current?.click();
+    open(PreviewDialog);
+  };
+  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>
+  );
+}
diff --git a/app/admin/(components)/Tooltip/Container.tsx b/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>
+  );
+}
diff --git a/app/admin/(consts)/sidebar.ts b/app/admin/(consts)/sidebar.ts
@@ -52,14 +52,21 @@ 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: "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,
 };
@@ -73,3 +80,23 @@ export const QuestionIconProps = {
 
 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",
+  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,
+};
diff --git a/app/admin/(style)/admin.modules.sass b/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

diff --git a/app/admin/(style)/themeInfo.modules.sass b/app/admin/(style)/themeInfo.modules.sass
@@ -322,6 +322,7 @@
 
   background-color: $color-white5
 .theme-image-title
+  display: flex
   span
     @include title16SB
     margin-right: 2px

diff --git a/app/admin/(style)/tooltip.modules.sass b/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
+
diff --git a/app/admin/Admin.tsx b/app/admin/Admin.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 
 import useCheckSignIn from "@/hooks/useCheckSignIn";
 import Loader from "@/components/Loader/Loader";
-import { getLoginInfo, setSelectedThemeId } from "@/utils/localStorage";
+import { getLoginInfo, setSelectedThemeId } from "@/utils/storageUtil";
 import { useSelectedTheme } from "@/components/atoms/selectedTheme.atom";
 import { useGetThemeList } from "@/queries/getThemeList";
 import { useToastInfo } from "@/components/atoms/toast.atom";
@@ -20,7 +20,7 @@ type Theme = {
 };
 
 function Admin() {
-  const { data: categories = [] } = useGetThemeList();
+  const { data: categories = [], isLoading } = useGetThemeList();
 
   const isLoggedIn = useCheckSignIn();
 
@@ -30,12 +30,6 @@ function Admin() {
   const [toast, setToast] = useToastInfo();
   const router = useRouter();
 
-  useEffect(() => {
-    if (categories.length > 0 && selectedTheme.id === 0) {
-      setSelectedTheme(categories[categories.length - 1]);
-    }
-  }, [categories, selectedTheme, setSelectedTheme]);
-
   const handleClickSelected = (theme: Theme) => {
     setSelectedTheme(theme);
     setSelectedThemeId(theme.id);
@@ -63,7 +57,7 @@ function Admin() {
     isOpen: toast.isOpen,
   };
 
-  if (!isLoggedIn) {
+  if (!isLoggedIn || isLoading) {
     return <Loader />;
   }
 

diff --git a/app/admin/AdminView.tsx b/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/storageUtil";
 
 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} />