fix: 크루 랭킹 페이지 모달 ui 깨지는 버그 2차 수정

Java-and-Script · Nov 28, 2023 · 301c7a1 · 301c7a1
1 parent 78f3982
commit 301c7a1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -57,7 +57,7 @@ const Modal = ({ children, isOpen, header = false, close }: ModalProps) => {
         },
       }}
     >
-      {isOpen && header !== false && (
+      {header !== false && (
         <ModalHeader header={header === true ? 20 : header}>
           {/* TODO: svg fill 바꿔주기 */}
           <img
@@ -69,7 +69,7 @@ const Modal = ({ children, isOpen, header = false, close }: ModalProps) => {
           />
         </ModalHeader>
       )}
-      {isOpen && children}
+      {children}
     </BottomSheet>
   );
 };

diff --git a/src/pages/CrewsRankingPage/CrewsRankingPage.tsx b/src/pages/CrewsRankingPage/CrewsRankingPage.tsx
@@ -70,10 +70,9 @@ export const CrewsRankingPage = () => {
           />
         ))}
       </PageContent>
-
-      <Modal header={40} isOpen={isOpen} close={() => setIsOpen(false)}>
-        <Modal.Content>
-          {selectedCrewRank && (
+      {selectedCrewRank && (
+        <Modal header={40} isOpen={isOpen} close={() => setIsOpen(false)}>
+          <Modal.Content>
             <RankingModalContent
               profileImageUrl={selectedCrewRank.profileImageUrl}
               name={selectedCrewRank.name}
@@ -90,9 +89,9 @@ export const CrewsRankingPage = () => {
               maxMemberCount={selectedCrewRank.maxMemberCount}
               onDetailButtonClick={handleDetailButtonClick}
             />
-          )}
-        </Modal.Content>
-      </Modal>
+          </Modal.Content>
+        </Modal>
+      )}
     </PageWrapper>
   );
 };