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
1 import React, { useRef } from 'react'; 1 import React, { useRef } from 'react';
2 +import { Card } from '@mantine/core';
2 import styled from 'styled-components'; 3 import styled from 'styled-components';
3 import Button from './common/Button'; 4 import Button from './common/Button';
4 import Input from './common/Input'; 5 import Input from './common/Input';
5 6
6 -const Background = styled.div` 7 +const Background = styled.div``;
7 - position: fixed; 8 +
8 - display: flex;
9 - justify-content: center;
10 - align-items: center;
11 -`;
12 const ModalWrapper = styled.div` 9 const ModalWrapper = styled.div`
13 width: 400px; 10 width: 400px;
14 - height: 350px; 11 + height: 300px;
15 - box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
16 - background: #fff;
17 - color: #000;
18 - display: grid;
19 - grid-template-columns: 1fr 1fr;
20 - position: relative;
21 - z-index: 10;
22 - border-radius: 10px;
23 `; 12 `;
24 13
25 const ModalContent = styled.div` 14 const ModalContent = styled.div`
...@@ -79,67 +68,69 @@ const Modal = ({ showModal, setShowModal }) => { ...@@ -79,67 +68,69 @@ const Modal = ({ showModal, setShowModal }) => {
79 <> 68 <>
80 {showModal ? ( 69 {showModal ? (
81 <Background onClick={closeModal}> 70 <Background onClick={closeModal}>
82 - <ModalWrapper> 71 + <Card shadow="lg">
83 - <ModalContent> 72 + <ModalWrapper>
84 - <TextWrap top="15px" right="20px" bottom="19px" height="40px"> 73 + <ModalContent>
85 - 기본검색 74 + <TextWrap top="6%" right="10%" bottom="4%" height="40px">
86 - </TextWrap> 75 + 기본검색
87 - <StandardWrap> 76 + </TextWrap>
88 - <Input 77 + <StandardWrap>
89 - float="left" 78 + <Input
90 - color="blue" 79 + float="left"
91 - width="350px" 80 + color="blue"
92 - height="40px" 81 + width="350px"
93 - paddingsize="3px" 82 + height="40px"
94 - fontsize="15px" 83 + paddingsize="3px"
95 - /> 84 + fontsize="15px"
96 - </StandardWrap> 85 + />
97 - <TextWrap top="75px" right="20px" bottom="137px"> 86 + </StandardWrap>
98 - 고급검색 87 + <TextWrap top="24%" right="10%" bottom="31%">
99 - </TextWrap> 88 + 고급검색
100 - <AdvancedWrap> 89 + </TextWrap>
101 - <Input 90 + <AdvancedWrap>
102 - float="left" 91 + <Input
103 - color="blue" 92 + float="left"
104 - width="350px" 93 + color="blue"
105 - height="40px" 94 + width="350px"
106 - paddingsize="3px" 95 + height="40px"
107 - fontsize="15px" 96 + paddingsize="3px"
108 - placeholder="단어/ 문장검색" 97 + fontsize="15px"
109 - /> 98 + placeholder="단어/ 문장검색"
110 - <br /> <br /> 99 + />
111 - <Input 100 + <br /> <br />
112 - float="left" 101 + <Input
113 - color="blue" 102 + float="left"
114 - width="350px" 103 + color="blue"
115 - height="40px" 104 + width="350px"
116 - paddingsize="3px" 105 + height="40px"
117 - fontsize="15px" 106 + paddingsize="3px"
118 - placeholder="최초 작성자" 107 + fontsize="15px"
119 - /> 108 + placeholder="최초 작성자"
120 - <br /> <br /> 109 + />
121 - <Input 110 + <br /> <br />
122 - float="left" 111 + <Input
123 - color="blue" 112 + float="left"
124 - width="350px" 113 + color="blue"
125 - height="40px" 114 + width="350px"
126 - paddingsize="3px" 115 + height="40px"
127 - fontsize="15px" 116 + paddingsize="3px"
128 - placeholder="최종 수정자" 117 + fontsize="15px"
129 - /> 118 + placeholder="최종 수정자"
130 - </AdvancedWrap> 119 + />
131 - </ModalContent> 120 + </AdvancedWrap>
132 - <CloseWrap onClick={() => setShowModal(prev => !prev)}> 121 + </ModalContent>
133 - <Button width="100px" color="blue"> 122 + <CloseWrap onClick={() => setShowModal(prev => !prev)}>
134 - 닫기 123 + <Button width="100px" color="blue">
135 - </Button> 124 + 닫기
136 - </CloseWrap> 125 + </Button>
137 - <SearchWrap> 126 + </CloseWrap>
138 - <Button width="100px" color="gray"> 127 + <SearchWrap>
139 - 검색 128 + <Button width="100px" color="gray">
140 - </Button> 129 + 검색
141 - </SearchWrap> 130 + </Button>
142 - </ModalWrapper> 131 + </SearchWrap>
132 + </ModalWrapper>
133 + </Card>
143 </Background> 134 </Background>
144 ) : null} 135 ) : null}
145 </> 136 </>
......
1 import React from 'react'; 1 import React from 'react';
2 import styled from 'styled-components'; 2 import styled from 'styled-components';
3 -import { buttonColorMap } from '../../lib/styles/palette'; 3 +import { Button } from '@mantine/core';
4 4
5 -const ButtonBlock = styled.button` 5 +const ButtonBlock = styled.div`
6 width: ${props => props.width || '80px'}; 6 width: ${props => props.width || '80px'};
7 - height: ${props => props.height || '40px'};
8 font-size: ${props => props.fontsize || '15px'}; 7 font-size: ${props => props.fontsize || '15px'};
9 - background-color: ${props => buttonColorMap[props.color].background};
10 - &:hover {
11 - background-color: ${props => buttonColorMap[props.color].hoverBackground};
12 - }
13 - color: ${props => buttonColorMap[props.color].color};
14 float: ${props => props.float || ''}; 8 float: ${props => props.float || ''};
15 border-radius: 0.3em; 9 border-radius: 0.3em;
16 cursor: pointer; 10 cursor: pointer;
17 - border: 1px ${props => buttonColorMap[props.color].background};
18 `; 11 `;
19 12
20 -const Button = ({ children, color, float, width, height, fontsize }) => { 13 +const Buttons = ({ children, color, float, width, fontsize }) => {
21 return ( 14 return (
22 - <ButtonBlock 15 + <ButtonBlock float={float} width={width} fontsize={fontsize}>
23 - color={color || 'blue'} 16 + <Button fullWidth size="lg" color={color || 'blue'}>
24 - float={float} 17 + {children}
25 - width={width} 18 + </Button>
26 - height={height}
27 - fontsize={fontsize}
28 - >
29 - {children}
30 </ButtonBlock> 19 </ButtonBlock>
31 ); 20 );
32 }; 21 };
33 22
34 -export default Button; 23 +export default Buttons;
......
...@@ -21,7 +21,7 @@ const DropDownWrap = styled.button` ...@@ -21,7 +21,7 @@ const DropDownWrap = styled.button`
21 padding: 0.4em; 21 padding: 0.4em;
22 width: ${props => props.width || '100px'}; 22 width: ${props => props.width || '100px'};
23 height: ${props => props.height || '30px'}; 23 height: ${props => props.height || '30px'};
24 - padding-right: 30px; 24 + padding-right: 7%;
25 font-size: ${props => props.fontsize || '20px'}; 25 font-size: ${props => props.fontsize || '20px'};
26 border: 1px ${props => dropdownHeaderColorMap[props.color].background}; 26 border: 1px ${props => dropdownHeaderColorMap[props.color].background};
27 `; 27 `;
......