init

src/components/common/modal/Modal.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+const ModalBg = styled.div`
+	position: fixed;
+	background: ${props => props.$bgcolor || 'rgba(0, 0, 0, 0.5)'};
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	min-width: 1080px;
+	display: ${props => (props.$view === 'hidden' ? 'none' : 'block')};
+	z-index: 20;
+`;
+
+const ModalWrapper = styled.div`
+	position: absolute;
+	background: #fff;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	min-width: ${props => props.min || 'auto'};
+	padding: ${props => props.$padding || '30px'};
+	border-radius: 30px;
+	max-height: 90%;
+	overflow: auto;
+	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+`;
+
+const Modal = ({ children, $padding, min, $view, $bgcolor }) => {
+	return (
+		<>
+			<ModalBg $view={$view} $bgcolor={$bgcolor}>
+				<ModalWrapper $padding={$padding} min={min}>
+					{children}
+				</ModalWrapper>
+			</ModalBg>
+		</>
+	);
+};
+
+export default Modal;