Merge pull request #102 from Team-Lecue/feature/StickerAttach

[ merge ] TO develop
Team-Lecue · Jan 14, 2024 · e7b93de · e7b93de
2 parents c03cbc0 + c2688b8
commit e7b93de
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts b/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts
@@ -2,8 +2,11 @@ import styled from '@emotion/styled';
 
 export const LecueNoteListContainerWrapper = styled.div<{
   backgroundColor: number;
+  isEditable: boolean;
 }>`
-  padding: 0 1.65rem;
+  width: 100vw;
+  padding: 0 1.6rem;
+  padding-bottom: ${({ isEditable }) => isEditable && '12rem'};
 
   background-color: ${({ theme, backgroundColor }) => {
     switch (backgroundColor) {

diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx
@@ -94,7 +94,10 @@ function LecueNoteListContainer({
   };
 
   return (
-    <S.LecueNoteListContainerWrapper backgroundColor={backgroundColor}>
+    <S.LecueNoteListContainerWrapper
+      isEditable={isEditable}
+      backgroundColor={backgroundColor}
+    >
       <LecueNoteListHeader
         noteNum={noteNum}
         backgroundColor={backgroundColor}

diff --git a/src/Detail/components/ZigZagView/index.tsx b/src/Detail/components/ZigZagView/index.tsx
@@ -29,7 +29,19 @@ function ZigZagView({
           <SmallLecueNote {...note} noteList={noteList} />
         </S.LecueNoteContainer>
       ))}
-      {isEditable ? (
+      <S.StickerContainer>
+        {postedStickerList.map((data) => (
+          <Draggable
+            nodeRef={nodeRef}
+            key={data.postedStickerId}
+            positionOffset={{ x: data.positionX, y: data.positionY }}
+            onStart={() => false}
+          >
+            <S.Sticker ref={nodeRef} stickerImage={data.stickerImage} />
+          </Draggable>
+        ))}
+      </S.StickerContainer>
+      {isEditable && (
         <S.StickerContainer>
           <Draggable
             defaultPosition={{
@@ -43,19 +55,6 @@ function ZigZagView({
             <S.Sticker ref={nodeRef} stickerImage={stickerState.stickerImage} />
           </Draggable>
         </S.StickerContainer>
-      ) : (
-        <S.StickerContainer>
-          {postedStickerList.map((data) => (
-            <Draggable
-              nodeRef={nodeRef}
-              key={data.postedStickerId}
-              positionOffset={{ x: data.positionX, y: data.positionY }}
-              onStart={() => false}
-            >
-              <S.Sticker ref={nodeRef} stickerImage={data.stickerImage} />
-            </Draggable>
-          ))}
-        </S.StickerContainer>
       )}
     </S.ZigZagViewWrapper>
   );