fix: 터짐 해결

Team-Lecue · Jan 18, 2024 · 07a7b96 · 07a7b96
1 parent 48b0c20
commit 07a7b96
Showing 1 changed file with 30 additions and 21 deletions.
diff --git a/src/Detail/components/ZigZagView/index.tsx b/src/Detail/components/ZigZagView/index.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useRef } from 'react';
+import { forwardRef, Fragment, useRef } from 'react';
 import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
 
 import { NoteType, postedStickerType } from '../../type/lecueBookType';
@@ -31,11 +31,16 @@ const ZigZagView = forwardRef(function ZigZagView(
 
   return (
     <S.ZigZagViewWrapper ref={ref}>
-      {noteList.map((note) => (
-        <S.LecueNoteContainer key={note.noteId}>
-          <SmallLecueNote {...note} noteList={noteList} />
-        </S.LecueNoteContainer>
-      ))}
+      {noteList.length > 0 && (
+        <Fragment>
+          {noteList.map((note) => (
+            <S.LecueNoteContainer key={note.noteId}>
+              <SmallLecueNote {...note} noteList={noteList} />
+            </S.LecueNoteContainer>
+          ))}
+        </Fragment>
+      )}
+
       {isEditable && (
         <Draggable
           defaultPosition={{
@@ -53,21 +58,25 @@ const ZigZagView = forwardRef(function ZigZagView(
           />
         </Draggable>
       )}
-      {postedStickerList.map(
-        (data) =>
-          fullHeight !== null && (
-            <Draggable
-              onStart={() => false}
-              nodeRef={nodeRef}
-              key={data.postedStickerId}
-              defaultPosition={{
-                x: data.positionX,
-                y: fullHeight - data.positionY,
-              }}
-            >
-              <S.Sticker ref={nodeRef} stickerImage={data.stickerImage} />
-            </Draggable>
-          ),
+      {postedStickerList.length > 0 && (
+        <Fragment>
+          {postedStickerList.map(
+            (data) =>
+              fullHeight !== null && (
+                <Draggable
+                  onStart={() => false}
+                  nodeRef={nodeRef}
+                  key={data.postedStickerId}
+                  defaultPosition={{
+                    x: data.positionX,
+                    y: fullHeight - data.positionY,
+                  }}
+                >
+                  <S.Sticker ref={nodeRef} stickerImage={data.stickerImage} />
+                </Draggable>
+              ),
+          )}
+        </Fragment>
       )}
     </S.ZigZagViewWrapper>
   );