style: 컴포넌트 스타일에 mantine적용

이승윤
Commit 388ac5f1938d9e5e8cb884e8fea47362ae97997c 388ac5f1 1 parent a8efc10c
Showing 5 changed files with 125 additions and 81 deletions
frontend/src/components/Header.js
frontend/src/components/SearchOptionModal.js
frontend/src/components/common/DropdownButton.js
frontend/src/components/common/Input.js
frontend/src/pages/HomePage.js
--- a/frontend/src/components/Header.js
View file @388ac5f
+++ b/frontend/src/components/Header.js
View file @388ac5f
@@ -132,7 +132,7 @@ const Header = () => {
               />
             </DropDownWrap>
           </DropDownContainer>
-          <InputBlock color="blue" size="14px" width="400px" display="">
+          <InputBlock color="blue" fontsize="20px" width="850px" display="">
             <input />
           </InputBlock>
         </SearchContainer>
@@ -156,15 +156,14 @@ const Header = () => {
               width="85px"
               fontsize="16px"
               height="38px"
+              title="정렬"
               options={[
-                { value: 0, name: '정렬' },
+                { id: 0, name: '정렬' },
-                { value: 1, name: '날짜빠른순' },
+                { id: 1, name: '날짜빠른순' },
-                { value: 2, name: '크기높은순' },
+                { id: 2, name: '크기높은순' },
-                { value: 3, name: '크기낮은순' },
+                { id: 3, name: '크기낮은순' },
               ]}
-            >
+            />
-              정렬
-            </DropDownButton>
           </SortOptionContainer>
         </OptionContainer>
         <UserContainer>
--- a/frontend/src/components/SearchOptionModal.js
View file @388ac5f
+++ b/frontend/src/components/SearchOptionModal.js
View file @388ac5f
@@ -81,11 +81,18 @@ const Modal = ({ showModal, setShowModal }) => {
         <Background onClick={closeModal}>
           <ModalWrapper>
             <ModalContent>
-              <TextWrap top="15px" right="20px" bottom="19px">
+              <TextWrap top="15px" right="20px" bottom="19px" height="40px">
                 기본검색
               </TextWrap>
               <StandardWrap>
-                <Input float="left" color="blue" width="140px" size="10px" />
+                <Input
+                  float="left"
+                  color="blue"
+                  width="350px"
+                  height="40px"
+                  paddingsize="3px"
+                  fontsize="15px"
+                />
               </StandardWrap>
               <TextWrap top="75px" right="20px" bottom="137px">
                 고급검색
@@ -94,24 +101,30 @@ const Modal = ({ showModal, setShowModal }) => {
                 <Input
                   float="left"
                   color="blue"
-                  width="140px"
+                  width="350px"
-                  size="10px"
+                  height="40px"
+                  paddingsize="3px"
+                  fontsize="15px"
                   placeholder="단어/ 문장검색"
                 />
                 <br /> <br />
                 <Input
                   float="left"
                   color="blue"
-                  width="140px"
+                  width="350px"
-                  size="10px"
+                  height="40px"
+                  paddingsize="3px"
+                  fontsize="15px"
                   placeholder="최초 작성자"
                 />
                 <br /> <br />
                 <Input
                   float="left"
                   color="blue"
-                  width="140px"
+                  width="350px"
-                  size="10px"
+                  height="40px"
+                  paddingsize="3px"
+                  fontsize="15px"
                   placeholder="최종 수정자"
                 />
               </AdvancedWrap>
--- a/frontend/src/components/common/DropdownButton.js
View file @388ac5f
+++ b/frontend/src/components/common/DropdownButton.js
View file @388ac5f
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { Menu, MenuItem } from '@mantine/core';
 import styled from 'styled-components';
 import { dropdownHeaderColorMap } from '../../lib/styles/palette';
@@ -6,30 +7,23 @@ const DropDownBlock = styled.div`
   margin: 0 auto;
   float: ${props => props.float || ''};
 `;
-const DropDownHeader = styled.select`
+const DropDownHeader = styled(Menu)``;
-  margin-bottom: 0.8em;
+
-  padding: 0.4em;
+const DropDownWrap = styled.button`
-  width: ${props => props.width || '100px'};
-  height: ${props => props.height || '30px'};
-  padding-right: 30px;
-  font-size: ${props => props.fontsize || '20px'};
-  cursor: pointer;
   color: ${props => dropdownHeaderColorMap[props.color].color};
   background-color: ${props => dropdownHeaderColorMap[props.color].background};
+  cursor: pointer;
   &:hover {
     background-color: ${props =>
       dropdownHeaderColorMap[props.color].hoverBackground};
   }
+  margin-bottom: 0.8em;
+  padding: 0.4em;
+  width: ${props => props.width || '100px'};
+  height: ${props => props.height || '30px'};
+  padding-right: 30px;
+  font-size: ${props => props.fontsize || '20px'};
   border: 1px ${props => dropdownHeaderColorMap[props.color].background};
-
-  option {
-    color: blue;
-    background-color: blue;
-    display: flex;
-    white-space: pre;
-    min-height: 20px;
-    padding: 0px 2px 1px;
-  }
 `;
 const DropDown = ({
@@ -39,18 +33,36 @@ const DropDown = ({
   fontsize,
   width,
   height,
+  title = '전체',
 }) => {
+  const [menuTitle, setTitle] = useState('');
+  useEffect(() => {
+    setTitle(title);
+  }, []);
   return (
-    <DropDownBlock float={float} color={color}>
+    <DropDownBlock float={float} color={color} title={title}>
       <DropDownHeader
-        options={options}
+        control={
-        color={color}
+          <DropDownWrap
-        fontsize={fontsize}
+            options={options}
-        width={width}
+            color={color}
-        height={height}
+            fontsize={fontsize}
+            width={width}
+            height={height}
+          >
+            {menuTitle}
+          </DropDownWrap>
+        }
       >
         {options.map(friend => (
-          <option value={friend.id}>{friend.name}</option>
+          <MenuItem
+            value={friend.id}
+            onClick={() => {
+              setTitle(friend.name);
+            }}
+          >
+            {friend.name}
+          </MenuItem>
         ))}
       </DropDownHeader>
     </DropDownBlock>
--- a/frontend/src/components/common/Input.js
View file @388ac5f
+++ b/frontend/src/components/common/Input.js
View file @388ac5f
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { TextInput } from '@mantine/core';
 import styled from 'styled-components';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import SearchBox from './SearchBox';
 import { inputColorMap } from '../../lib/styles/palette';
 const InputBlock = styled.div`
-  input {
+  width: ${props => props.width};
-    padding: ${props => props.size};
+  float: ${props => props.float || 'left'};
-    padding-right: ${props => props.width};
+  height: ${props => props.height};
-    color: ${props => inputColorMap[props.color].color};
+`;
-    box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1);
-    border: 3px solid ${props => inputColorMap[props.color].borderColor};
-
-    font-size: ${props => props.size};
-    &::placeholder {
+const InputWrap = styled.div`
-      color: ${props => inputColorMap[props.color].placeholder};
+  padding-top: ${props => props.paddingsize};
-      text-transform: uppercase;
+  padding-left: 10px;
-    }
+  width: 70%;
-    float: left;
+  height: 100%;
-  }
+  color: ${props => inputColorMap[props.color].color};
-  float: ${props => props.float || ''};
+  box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1);
+  outline: none;
+  font-size: ${props => props.size};
+  border: 3px solid ${props => inputColorMap[props.color].borderColor};
+  float: left;
+`;
+const SearchIconWrap = styled.div`
+  float: left;
 `;
-const SearchIconWrap = styled.div``;
-const Input = ({
+const MyInput = ({
   color,
-  size,
+  paddingsize = '10px',
   float,
   width,
+  height = '50px',
   placeholder = '내용을 입력해 주세요.',
   display,
+  fontsize = '20px',
 }) => {
   const [query, setQuery] = useState('');
   const history = useHistory();
+  const search = useLocation();
+  const name = search.search.substring(7);
+  useEffect(() => {
+    setQuery(name);
+  }, []);
+
   return (
     <InputBlock
       color={color}
-      size={size}
+      size={paddingsize}
       float={float}
       width={width}
       placeholder={placeholder}
       display={display}
+      height={height}
     >
-      <input
+      <InputWrap color={color} paddingsize={paddingsize} float={float}>
-        placeholder={placeholder}
+        <TextInput
-        type="text"
+          inputStyle={{
-        value={query}
+            fontSize: fontsize,
-        onChange={e => setQuery(e.target.value)}
+          }}
-        onKeyPress={e => {
+          variant="unstyled"
-          if (e.key === 'Enter') {
+          placeholder={placeholder}
-            if (query === '') {
+          type="text"
-              alert('검색어를 입력 해 주세요.');
+          value={query}
-              return;
+          onChange={e => setQuery(e.target.value)}
+          onKeyPress={e => {
+            if (e.key === 'Enter') {
+              if (query === '') {
+                alert('검색어를 입력 해 주세요.');
+                return;
+              }
+              const params = new URLSearchParams({ query });
+              history.push(`search?${params.toString()}`);
             }
-            const params = new URLSearchParams({ query });
+          }}
-            history.push(`search?${params.toString()}`);
+        />
-          }
+      </InputWrap>
-        }}
-      />
       <SearchIconWrap
         onClick={() => {
           const params = new URLSearchParams({ query });
@@ -71,4 +89,4 @@ const Input = ({
   );
 };
-export default Input;
+export default MyInput;
--- a/frontend/src/pages/HomePage.js
View file @388ac5f
+++ b/frontend/src/pages/HomePage.js
View file @388ac5f
@@ -13,9 +13,10 @@ const Main = styled.div`
 `;
 const SearchBlock = styled.div`
-  display: flex;
+  display: inline-block;
+  width: 100%;
+  margin-left: 23%;
 `;
-
 const LoginButtonBlock = styled.div`
   position: fixed;
   top: 20px;
@@ -35,8 +36,9 @@ const HomePage = () => {
             { id: 2, name: '개인' },
             { id: 3, name: '부서' },
           ]}
+          float="left"
         />
-        <Input color="blue" size="14px" width="400px" display />
+        <Input color="blue" paddingsize="10px" width="700px" display />
       </SearchBlock>
       {/* Todo : 로그인 했을 경우 로그인 버튼 숨기기 */}