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] =?UTF-8?q?feat:=20=EC=8A=A4=ED=8B=B0=EC=BB=A4=20=EA=BE=B8?=
 =?UTF-8?q?=EB=AF=B8=EA=B8=B0=20=EC=83=81=ED=83=9C=EC=9D=BC=EB=95=8C?=
 =?UTF-8?q?=EB=A7=8C=20=EC=88=98=EC=A0=95=EB=90=98=EB=8F=84=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