Merge pull request #151 from DDD-Community/feature/6th-qa

[FEATURE] 6차 QA
DDD-Community · Jan 6, 2025 · 2c74c3c · 2c74c3c
2 parents 4280055 + 82e2032
commit 2c74c3c
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 60 deletions.
diff --git 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 isDecorating={isDecorating} />
+            <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
@@ -22,7 +22,7 @@ const OpenStickerModalBtn = ({ children }: OpenModalBtnProps) => {
   }
 
   return (
-    <div className="absolute right-0 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/DeleteBtn.tsx b/src/app/board/[boardId]/decorate/_components/Sticker/DeleteBtn.tsx
@@ -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" />

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

diff --git 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])