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 ( - {noteList.map((note) => ( - - - - ))} + {noteList.length > 0 && ( + + {noteList.map((note) => ( + + + + ))} + + )} + {isEditable && ( )} - {postedStickerList.map( - (data) => - fullHeight !== null && ( - false} - nodeRef={nodeRef} - key={data.postedStickerId} - defaultPosition={{ - x: data.positionX, - y: fullHeight - data.positionY, - }} - > - - - ), + {postedStickerList.length > 0 && ( + + {postedStickerList.map( + (data) => + fullHeight !== null && ( + false} + nodeRef={nodeRef} + key={data.postedStickerId} + defaultPosition={{ + x: data.positionX, + y: fullHeight - data.positionY, + }} + > + + + ), + )} + )} );