[fix] 사진 모달에서 Safe Area 미적용 및 스크롤 시 헤더 사라짐 버그를 수정할 수 있다

frontend/src/components/common/Modal/Modal.styles.ts

@@ -11,6 +11,7 @@ export const Overlay = styled.div`
   justify-content: center;
   align-items: center;
   transition: background-color 0.2s ease;
+  touch-action: none;
 `;
 
 export const ContentWrapper = styled.div`

frontend/src/pages/ClubDetailPage/components/PhotoModal/PhotoModal.styles.ts

@@ -16,56 +16,63 @@ export const ModalContent = styled.div`
 
   ${media.mobile} {
     width: 100vw;
-    height: 100vh;
+    height: 100dvh;
     border-radius: 0;
   }
 `;
 
 export const CloseButton = styled.button`
-  position: absolute;
-  right: 10px;
-  background: none;
+  justify-self: end;
+  background: transparent;
   border: none;
-  font-size: 2.5rem;
   cursor: pointer;
-  padding: 10px;
-  opacity: 0.7;
-  transition: opacity 0.2s;
-  z-index: 3;
+  padding: 10px 0 10px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  &:hover {
-    opacity: 1;
+  svg {
+    width: 20px;
+    height: 20px;
   }
 `;
 
 export const ModalHeader = styled.div`
   width: 100%;
   height: 60px;
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  column-gap: 20px;
   align-items: center;
-  padding: 0 32px;
+  padding: 0 20px;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10;
   background: ${colors.base.white};
   backdrop-filter: blur(10px);
+
+  ${media.mobile} {
+    height: calc(60px + var(--rn-safe-top, 0px));
+    padding-top: var(--rn-safe-top, 0px);
+  }
 `;
 
 export const ClubName = styled.div`
   font-size: 1.3rem;
   font-weight: 600;
   color: ${colors.base.black};
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 export const ImageCounter = styled.div`
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
   font-size: 0.95rem;
   font-weight: 500;
   color: ${colors.gray[700]};
+  text-align: center;
 `;
 
 export const ModalBody = styled.div`
@@ -89,6 +96,7 @@ export const ImageContainer = styled.div`
 
   ${media.mobile} {
     padding: 0 16px;
+    margin-top: calc(60px + var(--rn-safe-top, 0px));
   }
 `;
 

frontend/src/pages/ClubDetailPage/components/PhotoModal/PhotoModal.tsx

@@ -3,6 +3,7 @@ import type { Swiper as SwiperType } from 'swiper';
 import { Keyboard, Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css/navigation';
+import CloseButtonIcon from '@/assets/images/icons/close_button_icon.svg?react';
 import NextButton from '@/assets/images/icons/next_button_icon.svg';
 import PrevButton from '@/assets/images/icons/prev_button_icon.svg';
 import Modal from '@/components/common/Modal/Modal';
@@ -47,7 +48,7 @@ const PhotoModal = ({ isOpen, onClose, clubName, photos }: PhotoModalProps) => {
             {currentIndex + 1} / {urls.length}
           </Styled.ImageCounter>
           <Styled.CloseButton onClick={onClose} aria-label='닫기'>
-            ×
+            <CloseButtonIcon />
           </Styled.CloseButton>
         </Styled.ModalHeader>
         <Styled.ModalBody>