diff --git a/src/components/MapModal/index.tsx b/src/components/MapModal/index.tsx index a8e33d7..31ea23f 100644 --- a/src/components/MapModal/index.tsx +++ b/src/components/MapModal/index.tsx @@ -17,26 +17,7 @@ interface MapModalProps { onClose: () => void; } -export const MapModal = ({ - place, - phone, - address, - url, - visible, - width = 800, - height = 600, - latitude, - longitude, - onClose, -}: MapModalProps) => { - const containerStyle = useMemo( - () => ({ - width, - height, - }), - [width, height], - ); - +export const MapModal = ({ place, phone, address, url, visible, latitude, longitude, onClose }: MapModalProps) => { const el = useMemo(() => document.createElement('div'), []); useEffect(() => { @@ -50,7 +31,7 @@ export const MapModal = ({ return ReactDOM.createPortal( - + 공연장 정보 X diff --git a/src/components/MapModal/styles.ts b/src/components/MapModal/styles.ts index a32ff34..654a843 100644 --- a/src/components/MapModal/styles.ts +++ b/src/components/MapModal/styles.ts @@ -12,19 +12,20 @@ export const MapModal = styled.div` `; export const ModalContainer = styled.div` + width: 40%; + height: 50%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px; - background-color: var(${theme.colors.black}); + background-color: ${props => props.theme.colors.white}; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5); - box-sizing: border-box; border-radius: 10px; display: flex; flex-direction: column; - min-width: 800px; - min-height: 600px; + min-width: 500px; + min-height: 500px; `; export const ModalHeader = styled.div` @@ -35,7 +36,7 @@ export const ModalHeader = styled.div` &::after { content: ''; - border: 1px solid ${theme.colors.gray}; + border: 1px solid ${props => props.theme.colors.gray}; position: absolute; bottom: -10px; left: 0; @@ -49,7 +50,7 @@ export const ModalCloseBtn = styled.button` background-color: transparent; font-size: 20px; &:hover { - color: ${theme.colors.gray}; + color: ${props => props.theme.colors.gray}; } `;