feat: 스티커 꾸미기 상태일때만 수정되도록

DDD-Community · Jan 6, 2025 · ea4982b · ea4982b
1 parent 7d7565a
commit ea4982b
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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