style: 이미지 dimmed 추가, cover 속성으로 세로기준으로 맞춤 등 css 수정

Next-Room · Dec 29, 2024 · 8937a2a · 8937a2a
1 parent 638d81c
commit 8937a2a
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 61 deletions.
diff --git a/app/admin/(consts)/sidebar.ts b/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",
@@ -78,6 +64,13 @@ export const QuestionIconProps = {
   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 = {

diff --git a/app/components/common/Dialog-new/Image-Dialog-new/DialogBody.tsx b/app/components/common/Dialog-new/Image-Dialog-new/DialogBody.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Image from "next/image";
 
 import { useTimerImageValue } from "@/components/atoms/timerImage.atom";
+import { timerPreviewLineProps } from "@/admin/(consts)/sidebar";
 
 export default function DialogBody() {
   const { timerImage } = useTimerImageValue();
@@ -12,18 +13,14 @@ export default function DialogBody() {
     width: 158,
     height: 340,
   };
-  const previewProps = {
-    src: "/images/svg/timer_preview_entire.svg",
-    alt: "TIMER_LINE_IMAGE",
-    width: 158,
-    height: 340,
-  };
+
   return (
     <div className="theme-info-modal__image-content">
       <span className="preview-text">배경 적용 미리보기</span>
       <div className="timer-preview-image-box">
+        <div className="timer-dimmed-box" />
         <Image className="timer-preview-image" {...uploadImageProps} />
-        <Image className="timer-preview-line" {...previewProps} />
+        <Image className="timer-preview-line" {...timerPreviewLineProps} />
       </div>
       <p className="preview-caption">
         *예시 이미지입니다. 앱에서 세부 설정을 진행해 주세요.

diff --git a/app/components/common/Dialog-new/Preview-Dialog-new/PreviewDialog.tsx b/app/components/common/Dialog-new/Preview-Dialog-new/PreviewDialog.tsx
@@ -5,11 +5,7 @@ import useClickOutside from "@/hooks/useClickOutside";
 import useModal from "@/hooks/useModal";
 import ModalPortal from "@/components/common/Dialog-new/ModalPortal";
 import "@/components/common/Dialog-new/dialog.sass";
-import {
-  smallXProps,
-  previewProps,
-  statusBarProps,
-} from "@/admin/(consts)/sidebar";
+import { smallXProps, timerPreviewLineProps } from "@/admin/(consts)/sidebar";
 import { useSelectedThemeValue } from "@/components/atoms/selectedTheme.atom";
 
 const PreviewDialog = forwardRef<HTMLDivElement>(() => {
@@ -18,9 +14,9 @@ const PreviewDialog = forwardRef<HTMLDivElement>(() => {
 
   const timerPreviewProps = {
     src: selectedTheme.themeImageUrl!,
-    alt: "timer priview image",
-    width: 284,
-    height: 555,
+    alt: "TIMER_PREVIEW_IMAGE",
+    width: 315,
+    height: 682,
   };
 
   const divRef = useRef<HTMLDivElement | null>(null);
@@ -30,23 +26,23 @@ const PreviewDialog = forwardRef<HTMLDivElement>(() => {
   return (
     <ModalPortal>
       <div className={`theme-preview-modal`} ref={divRef}>
-        <div className="ttheme-info-modal__content">
-          <p className="preview-dialog-caption">
-            *예시 이미지입니다. 앱에서 세부 설정을 진행해 주세요.
-          </p>
+        <p className="preview-dialog-caption">
+          *예시 이미지입니다. 앱에서 세부 설정을 진행해 주세요.
+        </p>
+        <div className="preview-dialog-box">
           <div className="preview_image">
-            <Image className="preview" {...previewProps} />
-            <Image className="status_bar" {...statusBarProps} />
+            <div className="timer-dimmed-box" />
+            <Image className="status_bar" {...timerPreviewLineProps} />
             <Image className="mobile_preview" {...timerPreviewProps} />
           </div>
+          <button
+            className="icon_secondary_button40"
+            type="button"
+            onClick={close}
+          >
+            <Image {...smallXProps} />
+          </button>
         </div>
-        <button
-          className="icon_secondary_button40"
-          type="button"
-          onClick={close}
-        >
-          <Image {...smallXProps} />
-        </button>
       </div>
     </ModalPortal>
   );

diff --git a/app/components/common/Dialog-new/dialog.sass b/app/components/common/Dialog-new/dialog.sass
@@ -138,26 +138,23 @@
   left: 50%
   transform: translate(-50%, -50%)
   display: flex
-  gap: 16px
+  flex-direction: column
+  gap: 14px
 
   .preview_image
     position: relative
     width: 315px
     height: 682px
-    .preview
-
-      border-radius: 13px
-      object-fit: contain
-      position: absolute
+    border-radius: 13px
+    overflow: hidden
     .status_bar
       position: absolute
+      width: 100%
+      height: 100%
     .mobile_preview
-      position: absolute
-      bottom: 32px
-      left: 50%
-
-      transform: translateX( -50%)
-
+      object-fit: cover
+      width: 100%
+      height: 100%
 
 .preview-text
   @include caption12M
@@ -183,9 +180,17 @@
   display: flex
   align-items: center
   justify-content: left
-  margin-bottom: 14px
   @include body14M
 
+.preview-dialog-box
+  display: flex
+  gap: 16px
+  .timer-dimmed-box
+    position: absolute
+    width: 100%
+    height: 100%
+    background-color: $color-black60
+
 .timer-preview-image-box
   position: relative
   width: 158px
@@ -195,6 +200,11 @@
   overflow: hidden
   .timer-preview-image
     object-fit: cover
+  .timer-dimmed-box
+    position: absolute
+    width: 100%
+    height: 100%
+    background-color: $color-black60
   .timer-preview-line
     position: absolute
     top: 0

diff --git a/app/components/common/Toast/toast.sass b/app/components/common/Toast/toast.sass
@@ -10,7 +10,7 @@
 
 .toast-message
   width: 388px
-  background-color: $color-black
+  background-color: $color-white
   padding: 24px
   border-radius: 8px
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
@@ -20,11 +20,10 @@
   @include body14R
 
 .toast-title
-  color: $color-white
-
+  color: $color-black
 
 .toast-body
-  color: $color-white70
+  color: $color-black
 
 // 애니메이션 효과
 @keyframes fadeIn

diff --git a/app/mutations/deleteTimerImage.ts b/app/mutations/deleteTimerImage.ts
@@ -28,7 +28,7 @@ export const useDeleteTimerImage = (configOptions?: MutationConfigOptions) => {
       queryClient.invalidateQueries(QUERY_KEY);
       setToast({
         isOpen: true,
-        title: "타이머 배경이 삭제되었습니다.",
+        title: "타이머 배경을 삭제했습니다.",
         text: "",
       });
       // console.log("성공 시 실행")

diff --git a/app/mutations/useTimerImageUpload.ts b/app/mutations/useTimerImageUpload.ts
@@ -100,7 +100,7 @@ const useTimerImageUpload = () => {
       queryClient.invalidateQueries(QUERY_KEY);
       setToast({
         isOpen: true,
-        title: "타이머 배경이 등록되었습니다.",
+        title: "타이머 배경을 등록했습니다.",
         text: "힌트폰에서 세부 조정할 수 있습니다.",
       });
     },

diff --git a/package-lock.json b/package-lock.json