From 07a7b961034f03c3d2c20801289a0324be3f7d69 Mon Sep 17 00:00:00 2001
From: eunbenn <ds5bean23@gmail.com>
Date: Thu, 18 Jan 2024 19:25:51 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=84=B0=EC=A7=90=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Detail/components/ZigZagView/index.tsx | 51 +++++++++++++---------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/Detail/components/ZigZagView/index.tsx b/src/Detail/components/ZigZagView/index.tsx
index 6a28b887..c49aa3f9 100644
--- 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>
   );