Fix : 코드 컨벤션 반영 및 모달 크기 고정

prgrms-fe-devcourse · Oct 1, 2024 · df3cc24 · df3cc24
1 parent 2e9208b
commit df3cc24
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 27 deletions.
diff --git 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(
     <S.MapModal>
-      <S.ModalContainer style={containerStyle}>
+      <S.ModalContainer>
         <S.ModalHeader>
           <H16>공연장 정보</H16>
           <S.ModalCloseBtn onClick={onClose}>X</S.ModalCloseBtn>

diff --git 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};
   }
 `;