antBUtton 생성

topButton 이미지 변경
엑셀 버튼 조정
tab 컨트론 생성
detailGrid, layout 생성
modal motion 적용

src/components/common/modal/Modal.js

@@ -1,6 +1,34 @@
 import styled from 'styled-components';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Modal as AntModal } from 'antd';
 
-const ModalBg = styled.div`
+// 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 ModalBg = styled(motion.div)`
 	position: fixed;
 	background: ${props => props.$bgcolor || 'rgba(0, 0, 0, 0.5)'};
 	width: 100%;
@@ -12,30 +40,70 @@ const ModalBg = styled.div`
 	z-index: 20;
 `;
 
-const ModalWrapper = styled.div`
+const ModalContainer = 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 ModalWrapper = styled(motion.div)`
+    background: #fff;
+    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 }) => {
+	const isVisible = $view !== 'hidden';
+
 	return (
 		<>
-			<ModalBg $view={$view} $bgcolor={$bgcolor}>
-				<ModalWrapper $padding={$padding} min={min}>
-					{children}
-				</ModalWrapper>
-			</ModalBg>
+			<AnimatePresence>
+				{isVisible && (
+					<ModalBg
+						$bgcolor={$bgcolor}
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.3 }}
+					>
+						<ModalContainer>
+							<ModalWrapper
+								$padding={$padding}
+								min={min}
+								initial={{ scale: 0.9, opacity: 0 }}
+								animate={{ scale: 1, opacity: 1 }}
+								exit={{ scale: 0.9, opacity: 0 }}
+								transition={{
+									type: "spring",
+									stiffness: 300,
+									damping: 30
+								}}
+							>
+								{children}
+							</ModalWrapper>
+						</ModalContainer>
+					</ModalBg>
+				)}
+			</AnimatePresence>
 		</>
 	);
 };
 
+// const Modal = ({ children, $padding, min, $view, $bgcolor }) => {
+// 	return (
+// 		<>
+// 			<ModalBg $view={$view} $bgcolor={$bgcolor}>
+// 				<ModalWrapper $padding={$padding} min={min}>
+// 					{children}
+// 				</ModalWrapper>
+// 			</ModalBg>
+// 		</>
+// 	);
+// };
+
 export default Modal;