Showing
1 changed file
with
37 additions
and
19 deletions
... | @@ -32,34 +32,34 @@ const ModalContent = styled.div` | ... | @@ -32,34 +32,34 @@ const ModalContent = styled.div` |
32 | `; | 32 | `; |
33 | 33 | ||
34 | const SearchWrap = styled.div` | 34 | const SearchWrap = styled.div` |
35 | - position: fixed; | 35 | + position: absolute; |
36 | - top: 50%; | 36 | + top: 80%; |
37 | - right: 43%; | 37 | + left: 20%; |
38 | `; | 38 | `; |
39 | 39 | ||
40 | const CloseWrap = styled.div` | 40 | const CloseWrap = styled.div` |
41 | - position: fixed; | 41 | + position: absolute; |
42 | - top: 50%; | 42 | + top: 80%; |
43 | - right: 32%; | 43 | + right: 20%; |
44 | `; | 44 | `; |
45 | 45 | ||
46 | const StandardWrap = styled.div` | 46 | const StandardWrap = styled.div` |
47 | + position: absolute; | ||
47 | width: 50px; | 48 | width: 50px; |
48 | - position: fixed; | 49 | + top: 15px; |
49 | - top: 18%; | 50 | + left: 30%; |
50 | - right: 43%; | ||
51 | `; | 51 | `; |
52 | 52 | ||
53 | const AdvancedWrap = styled.div` | 53 | const AdvancedWrap = styled.div` |
54 | width: 50px; | 54 | width: 50px; |
55 | - position: fixed; | 55 | + position: absolute; |
56 | - top: 27%; | 56 | + top: 75px; |
57 | - right: 43%; | 57 | + left: 30%; |
58 | `; | 58 | `; |
59 | 59 | ||
60 | const TextWrap = styled.div` | 60 | const TextWrap = styled.div` |
61 | - position: fixed; | 61 | + position: absolute; |
62 | - width: 340px; | 62 | + width: 360px; |
63 | top: ${props => props.top}; | 63 | top: ${props => props.top}; |
64 | right: ${props => props.right}; | 64 | right: ${props => props.right}; |
65 | border-bottom: 2px solid #dee2e6; | 65 | border-bottom: 2px solid #dee2e6; |
... | @@ -81,21 +81,39 @@ const Modal = ({ showModal, setShowModal }) => { | ... | @@ -81,21 +81,39 @@ const Modal = ({ showModal, setShowModal }) => { |
81 | <Background onClick={closeModal}> | 81 | <Background onClick={closeModal}> |
82 | <ModalWrapper> | 82 | <ModalWrapper> |
83 | <ModalContent> | 83 | <ModalContent> |
84 | - <TextWrap top="18.5%" right="28.5%" bottom="19px"> | 84 | + <TextWrap top="15px" right="20px" bottom="19px"> |
85 | 기본검색 | 85 | 기본검색 |
86 | </TextWrap> | 86 | </TextWrap> |
87 | <StandardWrap> | 87 | <StandardWrap> |
88 | <Input float="left" color="blue" width="140px" size="10px" /> | 88 | <Input float="left" color="blue" width="140px" size="10px" /> |
89 | </StandardWrap> | 89 | </StandardWrap> |
90 | - <TextWrap top="27%" right="28.5%" bottom="137px"> | 90 | + <TextWrap top="75px" right="20px" bottom="137px"> |
91 | 고급검색 | 91 | 고급검색 |
92 | </TextWrap> | 92 | </TextWrap> |
93 | <AdvancedWrap> | 93 | <AdvancedWrap> |
94 | - <Input float="left" color="blue" width="140px" size="10px" /> | 94 | + <Input |
95 | + float="left" | ||
96 | + color="blue" | ||
97 | + width="140px" | ||
98 | + size="10px" | ||
99 | + placeholder="단어/ 문장검색" | ||
100 | + /> | ||
95 | <br /> <br /> | 101 | <br /> <br /> |
96 | - <Input float="left" color="blue" width="140px" size="10px" /> | 102 | + <Input |
103 | + float="left" | ||
104 | + color="blue" | ||
105 | + width="140px" | ||
106 | + size="10px" | ||
107 | + placeholder="최초 작성자" | ||
108 | + /> | ||
97 | <br /> <br /> | 109 | <br /> <br /> |
98 | - <Input float="left" color="blue" width="140px" size="10px" /> | 110 | + <Input |
111 | + float="left" | ||
112 | + color="blue" | ||
113 | + width="140px" | ||
114 | + size="10px" | ||
115 | + placeholder="최종 수정자" | ||
116 | + /> | ||
99 | </AdvancedWrap> | 117 | </AdvancedWrap> |
100 | </ModalContent> | 118 | </ModalContent> |
101 | <CloseWrap onClick={() => setShowModal(prev => !prev)}> | 119 | <CloseWrap onClick={() => setShowModal(prev => !prev)}> | ... | ... |
-
Please register or login to post a comment