style: mantine 적용

 import React, { useRef } from 'react';
 import React, { useRef } from 'react';
+import { Card } from '@mantine/core';
 import styled from 'styled-components';
 import styled from 'styled-components';
 import Button from './common/Button';
 import Button from './common/Button';
 import Input from './common/Input';
 import Input from './common/Input';
 
 
-const Background = styled.div`
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
+const Background = styled.div``;
+
 const ModalWrapper = styled.div`
 const ModalWrapper = styled.div`
   width: 400px;
   width: 400px;
-  height: 350px;
-  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
-  background: #fff;
-  color: #000;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  position: relative;
-  z-index: 10;
-  border-radius: 10px;
+  height: 300px;
 `;
 `;
 
 
 const ModalContent = styled.div`
 const ModalContent = styled.div`
@@ -79,9 +68,10 @@ const Modal = ({ showModal, setShowModal }) => {
     <>
     <>
       {showModal ? (
       {showModal ? (
         <Background onClick={closeModal}>
         <Background onClick={closeModal}>
+          <Card shadow="lg">
             <ModalWrapper>
             <ModalWrapper>
               <ModalContent>
               <ModalContent>
-              <TextWrap top="15px" right="20px" bottom="19px" height="40px">
+                <TextWrap top="6%" right="10%" bottom="4%" height="40px">
                   기본검색
                   기본검색
                 </TextWrap>
                 </TextWrap>
                 <StandardWrap>
                 <StandardWrap>
@@ -94,7 +84,7 @@ const Modal = ({ showModal, setShowModal }) => {
                     fontsize="15px"
                     fontsize="15px"
                   />
                   />
                 </StandardWrap>
                 </StandardWrap>
-              <TextWrap top="75px" right="20px" bottom="137px">
+                <TextWrap top="24%" right="10%" bottom="31%">
                   고급검색
                   고급검색
                 </TextWrap>
                 </TextWrap>
                 <AdvancedWrap>
                 <AdvancedWrap>
@@ -140,6 +130,7 @@ const Modal = ({ showModal, setShowModal }) => {
                 </Button>
                 </Button>
               </SearchWrap>
               </SearchWrap>
             </ModalWrapper>
             </ModalWrapper>
+          </Card>
         </Background>
         </Background>
       ) : null}
       ) : null}
     </>
     </>

 import React from 'react';
 import React from 'react';
 import styled from 'styled-components';
 import styled from 'styled-components';
-import { buttonColorMap } from '../../lib/styles/palette';
+import { Button } from '@mantine/core';
 
 
-const ButtonBlock = styled.button`
+const ButtonBlock = styled.div`
   width: ${props => props.width || '80px'};
   width: ${props => props.width || '80px'};
-  height: ${props => props.height || '40px'};
   font-size: ${props => props.fontsize || '15px'};
   font-size: ${props => props.fontsize || '15px'};
-  background-color: ${props => buttonColorMap[props.color].background};
-  &:hover {
-    background-color: ${props => buttonColorMap[props.color].hoverBackground};
-  }
-  color: ${props => buttonColorMap[props.color].color};
   float: ${props => props.float || ''};
   float: ${props => props.float || ''};
   border-radius: 0.3em;
   border-radius: 0.3em;
   cursor: pointer;
   cursor: pointer;
-  border: 1px ${props => buttonColorMap[props.color].background};
 `;
 `;
 
 
-const Button = ({ children, color, float, width, height, fontsize }) => {
+const Buttons = ({ children, color, float, width, fontsize }) => {
   return (
   return (
-    <ButtonBlock
-      color={color || 'blue'}
-      float={float}
-      width={width}
-      height={height}
-      fontsize={fontsize}
-    >
+    <ButtonBlock float={float} width={width} fontsize={fontsize}>
+      <Button fullWidth size="lg" color={color || 'blue'}>
         {children}
         {children}
+      </Button>
     </ButtonBlock>
     </ButtonBlock>
   );
   );
 };
 };
 
 
-export default Button;
+export default Buttons;

@@ -21,7 +21,7 @@ const DropDownWrap = styled.button`
   padding: 0.4em;
   padding: 0.4em;
   width: ${props => props.width || '100px'};
   width: ${props => props.width || '100px'};
   height: ${props => props.height || '30px'};
   height: ${props => props.height || '30px'};
-  padding-right: 30px;
+  padding-right: 7%;
   font-size: ${props => props.fontsize || '20px'};
   font-size: ${props => props.fontsize || '20px'};
   border: 1px ${props => dropdownHeaderColorMap[props.color].background};
   border: 1px ${props => dropdownHeaderColorMap[props.color].background};
 `;
 `;