Merge pull request Next-Room#95 from Next-Room/feat/timer-image-qa

Feat/timer image qa

Author: anyl92

app/admin/(consts)/sidebar.ts

@@ -36,6 +36,9 @@ export const deleteProps = {
 export const subscribeLinkURL =
   "https://sponge-wood-68d.notion.site/ec2a28c470094769bc787acb74760da5";
 
+export const timerImageLinkURL =
+  "https://www.notion.so/186febdc0ad180248728f1cfaf9bee20?pvs=4";
+
 export const smallXProps = {
   src: "/images/svg/icon_X.svg",
   alt: "x icon",

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

@@ -31,8 +31,7 @@
     width: 36px
     height: 36px
     margin-right: 6px
-    border-radius: 10px
-    border: 1px solid $color-white20
+    border: 1px solid transparent
     padding-top: 1px
     padding-left: 1px
     button 
@@ -41,6 +40,8 @@
       display: none
 
   &__shop-info-img-box:hover
+    border-radius: 10px
+    border: 1px solid $color-white20
     button
       display: block
       position: absolute

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

@@ -360,7 +360,7 @@
   position: relative
   img
     border: 1px solid $color-white20
-    object-fit: contain
+    object-fit: cover
     border-radius: 12px
 
 .theme-image-loader-box 

app/components/common/Dialog-new/Image-Dialog-new/Dialog.tsx

@@ -3,12 +3,12 @@ import Image from "next/image";
 
 import { useSelectedTheme } from "@/components/atoms/selectedTheme.atom";
 import useClickOutside from "@/hooks/useClickOutside";
-import { xProps } from "@/admin/(consts)/sidebar";
 import useModal from "@/hooks/useModal";
 import ModalPortal from "@/components/common/Dialog-new/ModalPortal";
 import "@/components/common/Dialog-new/dialog.sass";
 import useTimerImageUpload from "@/mutations/useTimerImageUpload";
 import { useTimerImageValue } from "@/components/atoms/timerImage.atom";
+import { XImageProps } from "@/admin/(components)/ThemeDrawer/consts/themeDrawerProps";
 
 import DialogBody from "./DialogBody";
 
@@ -47,19 +47,23 @@ const Dialog = forwardRef<HTMLFormElement>(() => {
   return (
     <ModalPortal>
       <form
-        className={`theme-info-modal`}
+        className={`timer-image-modal`}
         ref={formRef}
         onSubmit={handleSubmit}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="theme-info-modal__header">
+        <div className="timer-image-modal__header">
           <h2>타이머 배경 올리기</h2>
-          <button className="close-button" type="button" onClick={close}>
-            <Image {...xProps} />
+          <button
+            className="ghost_white_icon_button28"
+            type="button"
+            onClick={close}
+          >
+            <Image {...XImageProps} />
           </button>
         </div>
         <DialogBody />
-        <div className="theme-info-modal__footer">
+        <div className="timer-image-modal__footer">
           <p className="timer-preview-image-footer-text">
             힌트폰에 곧바로 적용됩니다
           </p>

app/components/common/Dialog-new/Image-Dialog-new/DialogBody.tsx

@@ -18,7 +18,7 @@ export default function DialogBody() {
   };
 
   return (
-    <div className="theme-info-modal__image-content">
+    <div className="timer-image-modal__image-content">
       <span className="preview-text">배경 적용 미리보기</span>
       <div className="timer-preview-image-box">
         <div className="timer-dimmed-box" />

app/components/common/Dialog-new/Noti-Dialog-new/Dialog.tsx

@@ -4,6 +4,7 @@ import useClickOutside from "@/hooks/useClickOutside";
 import useModal from "@/hooks/useModal";
 import ModalPortal from "@/components/common/Dialog-new/ModalPortal";
 import { setLocalStorage } from "@/utils/storageUtil";
+import { timerImageLinkURL } from "@/admin/(consts)/sidebar";
 
 import DialogBody from "./DialogBody";
 
@@ -19,7 +20,7 @@ const Dialog = forwardRef<HTMLFormElement, DialogProps>((props) => {
   const { type = "" } = props;
   const formRef = useRef<HTMLFormElement | null>(null);
   const handleViewDetailBtn = () => {
-    close();
+    window.open(timerImageLinkURL, "_blank", "noopener, noreferrer");
   };
   const handleCloseBtn = () => {
     if (checkboxRef.current?.checked) {
@@ -33,14 +34,14 @@ const Dialog = forwardRef<HTMLFormElement, DialogProps>((props) => {
   return (
     <ModalPortal>
       <form
-        className={`theme-info-modal ${type}`}
+        className={`new-feature-modal ${type}`}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="theme-info-modal__header noti">
+        <div className="new-feature-modal__header noti">
           <h2>새로운 기능을 소개합니다✨</h2>
         </div>
         <DialogBody />
-        <div className="theme-info-modal__footer">
+        <div className="new-feature-modal__footer">
           <div className="dont-show-again">
             <input type="checkbox" name="" id="hideDialog" ref={checkboxRef} />
             <label htmlFor="hideDialog">다시 보지 않기</label>

app/components/common/Dialog-new/Noti-Dialog-new/DialogBody.tsx

@@ -12,16 +12,16 @@ export default function DialogBody() {
   };
 
   return (
-    <div className="theme-info-modal__noti-content">
+    <div className="new-feature-modal__noti-content">
       <Image {...notiImageProps} />
-      <div className="theme-info-modal__feature-description">
-        <span className="theme-info-modal__feature-description__title">
+      <div className="new-feature-modal__feature-description">
+        <div className="new-feature-modal__feature-description__title">
           타이머 배경
-        </span>
-        <p className="theme-info-modal__feature-description__summary">
+        </div>
+        <p className="new-feature-modal__feature-description__summary">
           타이머에 원하는 배경을 넣어보세요
         </p>
-        <p className="theme-info-modal__feature-description__detail">
+        <p className="new-feature-modal__feature-description__detail">
           기본 배경 대신 방탈출 테마 포스터를 등록하여 타이머 배경을 커스텀 할
           수 있습니다.
           <br />각 테마의 독특한 분위기를 더욱 살리고, 플레이어들에게 몰입감을

app/components/common/Dialog-new/dialog.sass

@@ -57,59 +57,7 @@
       position: absolute
     .mobile_preview
       position: absolute
-        
-  &__image-content
-    width: 513px
-    height: 434px
-    padding: 20px
-    margin: 20px 0 16px
-    background-color: $color-white5
-    border-radius: 8px
-    position: relative
-    display: flex
-    flex-direction: column
-    align-items: center
-    gap: 16px 
-    cursor: default
 
-  &__noti-content
-    width: 521px
-    height: 333px
-    position: relative
-    padding: 20px
-    margin: 24px 0 28px
-    background-color: $color-white5
-    border-radius: 12px
-    position: relative
-    display: flex
-    flex-direction: column
-    align-items: center
-    gap: 16px 
-
-    img
-      position: absolute
-      bottom: 0
-      left: 50px
-
-  &__feature-description
-    position: absolute
-    width: 261px
-    top: 133px
-    left: 236px
-    &__title
-      @include body14M
-      background-color: $color-white12
-      padding: 2px 12px
-      border-radius: 6px
-    
-    &__summary
-      @include body14M
-      margin: 16px 0
-      
-    &__detail
-      @include body14R
-      color: $color-white70
-      
   &__footer
     margin-top: 16px
     display: flex
@@ -250,3 +198,178 @@
     cursor: pointer
     color: rgba(255, 255, 255, 0.7)
     font-size: 14px
+
+.timer-image-modal
+  position: fixed
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+
+  background-color: $color-sub1
+  border-radius: 16px
+  width: 577px
+  &__header
+    display: flex
+    justify-content: space-between
+    align-items: center
+
+    padding: 24px 24px 12px 32px
+    height: 68px
+    &.noti
+      justify-content: center  // 중앙 정렬  
+    h2
+      @include title20SB
+      cursor: default
+
+  &__image-content
+    width: 513px
+    height: 434px
+    padding: 20px
+    margin: 20px 32px 16px 32px
+    background-color: $color-white5
+    border-radius: 8px
+    position: relative
+    display: flex
+    flex-direction: column
+    align-items: center
+    gap: 16px 
+    cursor: default
+
+  &__noti-content
+    width: 521px
+    height: 333px
+    position: relative
+    padding: 20px
+    margin: 24px 0 28px
+    background-color: $color-white5
+    border-radius: 12px
+    position: relative
+    display: flex
+    flex-direction: column
+    align-items: center
+    gap: 16px 
+
+    img
+      position: absolute
+      bottom: 0
+      left: 50px
+
+  &__feature-description
+    position: absolute
+    width: 261px
+    top: 133px
+    left: 236px
+    &__title
+      @include body14M
+      background-color: $color-white12
+      display: flex
+      align-items: center
+      width: fit-content
+      height: 26px
+      padding: 2px 12px
+      border-radius: 6px
+    
+    &__summary
+      @include title18SB
+      margin: 16px 0
+      
+    &__detail
+      @include body14R
+      color: $color-white70
+      
+  &__footer
+    padding: 16px 32px 24px 32px
+    display: flex
+    justify-content: space-between
+    .delete-button
+      width: 100px
+    .action-buttons
+      margin-left: auto
+      display: flex
+      gap: 10px
+    .timer-preview-image-footer-text
+      display: flex
+      justify-content: center
+      align-items: center
+      @include body14M
+      cursor: default
+
+.new-feature-modal
+  position: fixed
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)
+
+  background-color: $color-sub1
+  border-radius: 16px
+  width: 577px
+  &__header
+    display: flex
+    justify-content: space-between
+    align-items: center
+
+    padding: 24px 24px 12px 32px
+    height: 68px
+    &.noti
+      justify-content: center  // 중앙 정렬  
+    h2
+      @include title20SB
+      cursor: default
+
+  &__noti-content
+    height: 333px
+    position: relative
+    padding: 20px
+    margin: 12px 28px
+    background-color: $color-white5
+    border-radius: 12px
+    position: relative
+    display: flex
+    flex-direction: column
+    align-items: center
+    gap: 16px 
+
+    img
+      position: absolute
+      bottom: 0
+      left: 50px
+
+  &__feature-description
+    position: absolute
+    width: 261px
+    top: 133px
+    left: 236px
+    &__title
+      @include body14M
+      background-color: $color-white12
+      display: flex
+      align-items: center
+      width: fit-content
+      height: 26px
+      padding: 2px 12px
+      border-radius: 6px
+    
+    &__summary
+      @include title18SB
+      margin: 16px 0
+      
+    &__detail
+      @include body14R
+      color: $color-white70
+      
+  &__footer
+    padding: 16px 32px 24px 32px
+    display: flex
+    justify-content: space-between
+    .delete-button
+      width: 100px
+    .action-buttons
+      margin-left: auto
+      display: flex
+      gap: 10px
+    .timer-preview-image-footer-text
+      display: flex
+      justify-content: center
+      align-items: center
+      @include body14M
+      cursor: default