diff --git a/frontend/src/components/PinImageContainer/index.tsx b/frontend/src/components/PinImageContainer/index.tsx index f84b037d..9652ec80 100644 --- a/frontend/src/components/PinImageContainer/index.tsx +++ b/frontend/src/components/PinImageContainer/index.tsx @@ -5,7 +5,7 @@ import Image from '../common/Image'; import RemoveImageButton from '../../assets/remove_image_icon.svg'; import useDelete from '../../apiHooks/useDelete'; import useToast from '../../hooks/useToast'; -import { useModalContext, ModalPortal } from '../../context/ImageModalContext'; +import { useModalContext, ImageModal } from '../../context/ImageModalContext'; import { useState } from 'react'; import Button from '../common/Button'; import Space from '../common/Space'; @@ -68,7 +68,7 @@ const PinImageContainer = ({ images, getPinData }: PinImageContainerProps) => { ), )} {isModalOpen && ( - + @@ -76,7 +76,7 @@ const PinImageContainer = ({ images, getPinData }: PinImageContainerProps) => { 닫기 - + )} diff --git a/frontend/src/context/ImageModalContext.tsx b/frontend/src/context/ImageModalContext.tsx index 379f817e..371ae923 100644 --- a/frontend/src/context/ImageModalContext.tsx +++ b/frontend/src/context/ImageModalContext.tsx @@ -8,12 +8,12 @@ import React, { import ReactDOM from 'react-dom'; import { styled } from 'styled-components'; -interface ModalPortalProps { +interface ImageModalProps { children: ReactChild; closeModalHandler: () => void; } -export const ModalPortal = (props: ModalPortalProps) => { +export const ImageModal = (props: ImageModalProps) => { const $modalRoot = document.getElementById('modal-root') as HTMLElement; const modalRef = useRef(null);