Merge pull request #250 from Team-Lecue/refactor/Detail

[ Merge ] 데브 머지 데브 머야~
Team-Lecue · Feb 22, 2024 · c7d62bc · c7d62bc
2 parents 722d8d4 + a086f3b
commit c7d62bc
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 18 deletions.
diff --git a/src/Detail/components/LecueNoteModal/LecueNoteModal.style.ts b/src/Detail/components/LecueNoteModal/LecueNoteModal.style.ts
@@ -32,7 +32,7 @@ export const LecueNoteModalWrapper = styled.div<{
       return `background: url(${noteBackground})`;
     }
   }};
-  background-size: cover;
+  background-size: 31.1rem 35.8rem;
   color: ${({ noteTextColor }) => {
     return noteTextColor;
   }};

diff --git a/src/Detail/components/LecueNoteModal/index.tsx b/src/Detail/components/LecueNoteModal/index.tsx
@@ -13,10 +13,7 @@ interface LecueNoteModalProps {
 }
 
 function LecueNoteModal({ selectedNote, closeModal }: LecueNoteModalProps) {
-  const handleCloseButtonClick = (
-    event: React.MouseEvent<HTMLButtonElement>,
-  ) => {
-    event.stopPropagation();
+  const handleCloseButtonClick = () => {
     closeModal();
   };
   return createPortal(

diff --git a/src/Detail/components/SmallLecueNote/index.tsx b/src/Detail/components/SmallLecueNote/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import { NoteType } from '../../type/lecueBookType';
 import LecueNoteModal from '../LecueNoteModal';
@@ -38,24 +38,26 @@ function SmallLecueNote({
   };
 
   return (
-    <S.SmallLecueNoteWrapper
-      renderType={renderType}
-      noteTextColor={noteTextColor}
-      noteBackground={noteBackground}
-      onClick={handleClickSmallLecueNote}
-    >
-      <S.SmallLecueNoteNickName>{noteNickname}</S.SmallLecueNoteNickName>
-      <S.SmallLecueNoteContentWrapper>
-        <S.SmallLecueNoteContent>{content}</S.SmallLecueNoteContent>
-      </S.SmallLecueNoteContentWrapper>
-      <S.SmallLecueNoteDate>{noteDate}</S.SmallLecueNoteDate>
+    <React.Fragment>
       {modalShow && (
         <LecueNoteModal
           selectedNote={getClickedNote()[0]}
           closeModal={() => setModalShow(false)}
         />
       )}
-    </S.SmallLecueNoteWrapper>
+      <S.SmallLecueNoteWrapper
+        renderType={renderType}
+        noteTextColor={noteTextColor}
+        noteBackground={noteBackground}
+        onClick={handleClickSmallLecueNote}
+      >
+        <S.SmallLecueNoteNickName>{noteNickname}</S.SmallLecueNoteNickName>
+        <S.SmallLecueNoteContentWrapper>
+          <S.SmallLecueNoteContent>{content}</S.SmallLecueNoteContent>
+        </S.SmallLecueNoteContentWrapper>
+        <S.SmallLecueNoteDate>{noteDate}</S.SmallLecueNoteDate>
+      </S.SmallLecueNoteWrapper>
+    </React.Fragment>
   );
 }