2021-1-capstone-design1 / GCL_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이승윤
f2a8390c 1 parent a4771eea

style: mantine 적용

Inline Side-by-side
Showing 3 changed files with 76 additions and 96 deletions
import React, { useRef } from 'react';
import { Card } from '@mantine/core';
import styled from 'styled-components';
import Button from './common/Button';
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`
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`
......@@ -79,67 +68,69 @@ const Modal = ({ showModal, setShowModal }) => {
<>
{showModal ? (
<Background onClick={closeModal}>
<ModalWrapper>
<ModalContent>
<TextWrap top="15px" right="20px" bottom="19px" height="40px">
기본검색
</TextWrap>
<StandardWrap>
<Input
float="left"
color="blue"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
/>
</StandardWrap>
<TextWrap top="75px" right="20px" bottom="137px">
고급검색
</TextWrap>
<AdvancedWrap>
<Input
float="left"
color="blue"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
placeholder="단어/ 문장검색"
/>
<br /> <br />
<Input
float="left"
color="blue"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
placeholder="최초 작성자"
/>
<br /> <br />
<Input
float="left"
color="blue"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
placeholder="최종 수정자"
/>
</AdvancedWrap>
</ModalContent>
<CloseWrap onClick={() => setShowModal(prev => !prev)}>
<Button width="100px" color="blue">
닫기
</Button>
</CloseWrap>
<SearchWrap>
<Button width="100px" color="gray">
검색
</Button>
</SearchWrap>
</ModalWrapper>
<Card shadow="lg">
<ModalWrapper>
<ModalContent>
<TextWrap top="6%" right="10%" bottom="4%" height="40px">
기본검색
</TextWrap>
<StandardWrap>
<Input
float="left"
color="blue"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
/>
</StandardWrap>
<TextWrap top="24%" right="10%" bottom="31%">
고급검색
</TextWrap>
<AdvancedWrap>
<Input
float="left"
color="blue"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
placeholder="단어/ 문장검색"
/>
<br /> <br />
<Input
float="left"
color="blue"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
placeholder="최초 작성자"
/>
<br /> <br />
<Input
float="left"
color="blue"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
placeholder="최종 수정자"
/>
</AdvancedWrap>
</ModalContent>
<CloseWrap onClick={() => setShowModal(prev => !prev)}>
<Button width="100px" color="blue">
닫기
</Button>
</CloseWrap>
<SearchWrap>
<Button width="100px" color="gray">
검색
</Button>
</SearchWrap>
</ModalWrapper>
</Card>
</Background>
) : null}
</>
......
import React from 'react';
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'};
height: ${props => props.height || '40px'};
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 || ''};
border-radius: 0.3em;
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 (
<ButtonBlock
color={color || 'blue'}
float={float}
width={width}
height={height}
fontsize={fontsize}
>
{children}
<ButtonBlock float={float} width={width} fontsize={fontsize}>
<Button fullWidth size="lg" color={color || 'blue'}>
{children}
</Button>
</ButtonBlock>
);
};
export default Button;
export default Buttons;
......
......@@ -21,7 +21,7 @@ const DropDownWrap = styled.button`
padding: 0.4em;
width: ${props => props.width || '100px'};
height: ${props => props.height || '30px'};
padding-right: 30px;
padding-right: 7%;
font-size: ${props => props.fontsize || '20px'};
border: 1px ${props => dropdownHeaderColorMap[props.color].background};
`;
......