From 7d7565aa09e8cc45b3821ea6f60fa3efac287549 Mon Sep 17 00:00:00 2001
From: hwanheejung <hwanheejung117@gmail.com>
Date: Mon, 6 Jan 2025 15:40:17 +0900
Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=ED=8A=9C=ED=86=A0=EB=A6=AC=EC=96=BC=20tooltip?=
 =?UTF-8?q?=EC=9D=B4=20=EC=A7=A4=EB=A0=A4=EC=84=9C=20=EB=B3=B4=EC=9D=B4?=
 =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/DecorateScreenshot.tsx        | 28 ++++++++++---------
 .../_components/OpenStickerModalBtn.tsx       |  2 +-
 src/components/Tutorial/Tutorial.tsx          |  4 +--
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx
index fb3256e..f27dcfa 100644
--- a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx
+++ b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx
@@ -98,22 +98,24 @@ const DecorateScreenshot = () => {
         </div>
       </header>
       {previewUrl && (
-        <div
-          id="preview"
-          className="relative aspect-[9/16] w-auto overflow-hidden shadow-screenshot"
-        >
+        <>
           <OpenStickerModalBtn>
             <SelectSticker />
           </OpenStickerModalBtn>
-          <Sticker />
-          <Image
-            src={previewUrl}
-            alt="screenshot"
-            width={1080}
-            height={1920}
-            className="aspect-[9/16] max-h-full w-auto object-contain"
-          />
-        </div>
+          <div
+            id="preview"
+            className="relative aspect-[9/16] w-auto overflow-hidden shadow-screenshot"
+          >
+            <Sticker />
+            <Image
+              src={previewUrl}
+              alt="screenshot"
+              width={1080}
+              height={1920}
+              className="aspect-[9/16] max-h-full w-auto object-contain"
+            />
+          </div>
+        </>
       )}
       <div className="mb-5 w-full">
         {isDownloaded && (
diff --git a/src/app/board/[boardId]/decorate/_components/OpenStickerModalBtn.tsx b/src/app/board/[boardId]/decorate/_components/OpenStickerModalBtn.tsx
index 1a617a7..c4a6623 100644
--- a/src/app/board/[boardId]/decorate/_components/OpenStickerModalBtn.tsx
+++ b/src/app/board/[boardId]/decorate/_components/OpenStickerModalBtn.tsx
@@ -22,7 +22,7 @@ const OpenStickerModalBtn = ({ children }: OpenModalBtnProps) => {
   }
 
   return (
-    <div className="absolute right-0 z-10">
+    <div className="absolute right-4 top-14 z-10">
       <DecorateTutorial step={1} tooltip={<Step1Tooltip />} hasNext>
         <StickerIcon onClick={openStickerModal} className="cursor-pointer" />
       </DecorateTutorial>
diff --git a/src/components/Tutorial/Tutorial.tsx b/src/components/Tutorial/Tutorial.tsx
index 8217ec9..4579f8e 100644
--- a/src/components/Tutorial/Tutorial.tsx
+++ b/src/components/Tutorial/Tutorial.tsx
@@ -107,9 +107,7 @@ const Tutorial = ({
 
       updateOverlayStyle()
 
-      return () => {
-        observer.disconnect()
-      }
+      return () => observer.disconnect()
     }
     return undefined
   }, [isOpen])

From ea4982bf1892f031251241b33e2d4d98e9601631 Mon Sep 17 00:00:00 2001
From: hwanheejung <hwanheejung117@gmail.com>
Date: Mon, 6 Jan 2025 16:02:38 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EC=8A=A4=ED=8B=B0=EC=BB=A4=20?=
 =?UTF-8?q?=EA=BE=B8=EB=AF=B8=EA=B8=B0=20=EC=83=81=ED=83=9C=EC=9D=BC?=
 =?UTF-8?q?=EB=95=8C=EB=A7=8C=20=EC=88=98=EC=A0=95=EB=90=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/DecorateScreenshot.tsx        |  2 +-
 .../_components/OpenStickerModalBtn.tsx       |  2 +-
 .../decorate/_components/Sticker/index.tsx    | 95 ++++++++++---------
 3 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx
index f27dcfa..57ad603 100644
--- a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx
+++ b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx
@@ -106,7 +106,7 @@ const DecorateScreenshot = () => {
             id="preview"
             className="relative aspect-[9/16] w-auto overflow-hidden shadow-screenshot"
           >
-            <Sticker />
+            <Sticker isDecorating={isDecorating} />
             <Image
               src={previewUrl}
               alt="screenshot"
diff --git a/src/app/board/[boardId]/decorate/_components/OpenStickerModalBtn.tsx b/src/app/board/[boardId]/decorate/_components/OpenStickerModalBtn.tsx
index c4a6623..314c331 100644
--- a/src/app/board/[boardId]/decorate/_components/OpenStickerModalBtn.tsx
+++ b/src/app/board/[boardId]/decorate/_components/OpenStickerModalBtn.tsx
@@ -22,7 +22,7 @@ const OpenStickerModalBtn = ({ children }: OpenModalBtnProps) => {
   }
 
   return (
-    <div className="absolute right-4 top-14 z-10">
+    <div className="absolute right-7 top-14 z-10">
       <DecorateTutorial step={1} tooltip={<Step1Tooltip />} hasNext>
         <StickerIcon onClick={openStickerModal} className="cursor-pointer" />
       </DecorateTutorial>
diff --git a/src/app/board/[boardId]/decorate/_components/Sticker/index.tsx b/src/app/board/[boardId]/decorate/_components/Sticker/index.tsx
index e3cd88c..e4858c4 100644
--- a/src/app/board/[boardId]/decorate/_components/Sticker/index.tsx
+++ b/src/app/board/[boardId]/decorate/_components/Sticker/index.tsx
@@ -8,7 +8,11 @@ import Selecto from 'react-selecto'
 import { useSticker } from '../../_contexts/StickerContext'
 import DeleteBtn from './DeleteBtn'
 
-const Sticker = () => {
+interface StickerProps {
+  isDecorating: boolean
+}
+
+const Sticker = ({ isDecorating }: StickerProps) => {
   const [targets, setTargets] = useState<Array<SVGElement | HTMLElement>>([])
   const moveableRef = useRef<Moveable>(null)
   const selectoRef = useRef<Selecto>(null)
@@ -36,48 +40,53 @@ const Sticker = () => {
 
   return (
     <div>
-      <Moveable
-        ref={moveableRef}
-        ables={[DeleteBtn]}
-        props={{
-          editable: true,
-          file: targetedStickerId,
-          deleteSticker,
-        }}
-        draggable
-        target={targets}
-        rotatable={{
-          renderDirections: ['se'],
-        }}
-        resolveAblesWithRotatable={{
-          resizable: ['se'],
-        }}
-        resizable={{
-          renderDirections: false,
-        }}
-        rotateAroundControls
-        onRender={(e) => {
-          e.target.style.cssText += e.cssText
-        }}
-      />
-      <Selecto
-        ref={selectoRef}
-        selectableTargets={['.sticker']}
-        hitRate={100}
-        selectByClick
-        selectFromInside={false}
-        ratio={0}
-        onSelectEnd={(e) => {
-          const moveable = moveableRef.current!
-          if (e.isDragStart) {
-            e.inputEvent.preventDefault()
-            moveable
-              .waitToChangeTarget()
-              .then(() => moveable.dragStart(e.inputEvent))
-          }
-          setTargets(e.selected)
-        }}
-      />
+      {isDecorating && (
+        <>
+          <Moveable
+            ref={moveableRef}
+            ables={[DeleteBtn]}
+            props={{
+              editable: true,
+              file: targetedStickerId,
+              deleteSticker,
+            }}
+            draggable
+            target={targets}
+            rotatable={{
+              renderDirections: ['se'],
+            }}
+            resolveAblesWithRotatable={{
+              resizable: ['se'],
+            }}
+            resizable={{
+              renderDirections: false,
+            }}
+            rotateAroundControls
+            onRender={(e) => {
+              e.target.style.cssText += e.cssText
+            }}
+          />
+          <Selecto
+            ref={selectoRef}
+            selectableTargets={['.sticker']}
+            hitRate={100}
+            selectByClick
+            selectFromInside={false}
+            ratio={0}
+            onSelectEnd={(e) => {
+              const moveable = moveableRef.current!
+              if (e.isDragStart) {
+                e.inputEvent.preventDefault()
+                moveable
+                  .waitToChangeTarget()
+                  .then(() => moveable.dragStart(e.inputEvent))
+              }
+              setTargets(e.selected)
+            }}
+          />
+        </>
+      )}
+
       <div className="absolute left-1/2 top-0 z-10">
         {selectedStickers.map(({ id, file }) => (
           <div

From be2b3a7c3a4fe02d556fc8ef72de2282d9f9db1f Mon Sep 17 00:00:00 2001
From: hwanheejung <hwanheejung117@gmail.com>
Date: Mon, 6 Jan 2025 16:28:03 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=8A=A4=ED=8B=B0=EC=BB=A4=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EC=95=88=EB=90=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../board/[boardId]/decorate/_components/Sticker/DeleteBtn.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/board/[boardId]/decorate/_components/Sticker/DeleteBtn.tsx b/src/app/board/[boardId]/decorate/_components/Sticker/DeleteBtn.tsx
index 964a7b4..06104b0 100644
--- a/src/app/board/[boardId]/decorate/_components/Sticker/DeleteBtn.tsx
+++ b/src/app/board/[boardId]/decorate/_components/Sticker/DeleteBtn.tsx
@@ -29,7 +29,7 @@ const DeleteBtn = {
               position: absolute;
               left: -12px;
               top: -12px;  
-              z-index: 100;
+              z-index: 1000;
           }
         `,
     )
@@ -45,6 +45,7 @@ const DeleteBtn = {
           type="button"
           className="h-6 w-6 rounded-full bg-gray-1000"
           onClick={() => deleteSticker(file)}
+          onTouchEnd={() => deleteSticker(file)}
           aria-label="Delete sticker"
         >
           <CloseIcon className="text-gray-0" />

From 82e2032198b7a0ba902b78060213cddbaadd7faa Mon Sep 17 00:00:00 2001
From: hwanheejung <hwanheejung117@gmail.com>
Date: Mon, 6 Jan 2025 17:21:44 +0900
Subject: [PATCH 4/4] fix: revert z-index of DeleteBtn

---
 .../board/[boardId]/decorate/_components/Sticker/DeleteBtn.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/board/[boardId]/decorate/_components/Sticker/DeleteBtn.tsx b/src/app/board/[boardId]/decorate/_components/Sticker/DeleteBtn.tsx
index 06104b0..640a4e9 100644
--- a/src/app/board/[boardId]/decorate/_components/Sticker/DeleteBtn.tsx
+++ b/src/app/board/[boardId]/decorate/_components/Sticker/DeleteBtn.tsx
@@ -29,7 +29,7 @@ const DeleteBtn = {
               position: absolute;
               left: -12px;
               top: -12px;  
-              z-index: 1000;
+              z-index: 100;
           }
         `,
     )