Merge branch 'style/mantine-styled' into 'develop'

Style/mantine styled



See merge request !9

@@ -14,7 +14,9 @@
     "react-scripts": "4.0.3",
     "react-scripts": "4.0.3",
     "redux": "^4.0.5",
     "redux": "^4.0.5",
     "styled-components": "^5.2.3",
     "styled-components": "^5.2.3",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "@mantine/core": "^1.0.6",
+    "@mantine/hooks": "^1.0.6"
   },
   },
   "scripts": {
   "scripts": {
     "start": "react-scripts start",
     "start": "react-scripts start",

@@ -31,14 +31,15 @@ const MenuContainer = styled.div`
 `;
 `;
 
 
 const LogoContainer = styled.div`
 const LogoContainer = styled.div`
-  margin-top: 20px;
+  margin-top: 10px;
   float: left;
   float: left;
   padding: 20px;
   padding: 20px;
   img {
   img {
-    width: 100px;
+    width: 130px;
 
 
     vertical-align: bottom;
     vertical-align: bottom;
   }
   }
+  cursor: pointer;
 `;
 `;
 
 
 const SearchContainer = styled.div`
 const SearchContainer = styled.div`
@@ -83,8 +84,8 @@ const SortOptionContainer = styled.div`
 
 
 const OptionContainer = styled.div`
 const OptionContainer = styled.div`
   position: absolute;
   position: absolute;
-  top: 129px;
-  left: 650px;
+  top: 132px;
+  left: 750px;
 `;
 `;
 
 
 const UserContainer = styled.div`
 const UserContainer = styled.div`
@@ -115,7 +116,9 @@ const Header = () => {
     <>
     <>
       <MainContainer>
       <MainContainer>
         <HeaderTop />
         <HeaderTop />
-        <LogoContainer onClick={onMainClick}>로고</LogoContainer>
+        <LogoContainer onClick={onMainClick}>
+          <img src="eDrive_logo_v2.png" alt="" />
+        </LogoContainer>
         <SearchContainer>
         <SearchContainer>
           <DropDownContainer>
           <DropDownContainer>
             <DropDownWrap>
             <DropDownWrap>
@@ -124,15 +127,11 @@ const Header = () => {
                 float="left"
                 float="left"
                 fontsize="20px"
                 fontsize="20px"
                 height="50px"
                 height="50px"
-                options={[
-                  { id: 1, name: '전체' },
-                  { id: 2, name: '개인' },
-                  { id: 3, name: '부서' },
-                ]}
+                options={[{ id: 1, name: '전체' }]}
               />
               />
             </DropDownWrap>
             </DropDownWrap>
           </DropDownContainer>
           </DropDownContainer>
-          <InputBlock color="blue" size="14px" width="400px" display="">
+          <InputBlock color="blue" fontsize="20px" width="850px" display="">
             <input />
             <input />
           </InputBlock>
           </InputBlock>
         </SearchContainer>
         </SearchContainer>
@@ -141,34 +140,31 @@ const Header = () => {
             <SLink activeClassName="active" to="/search">
             <SLink activeClassName="active" to="/search">
               전체
               전체
             </SLink>
             </SLink>
-            <SLink to="/search_categori1">개인</SLink>
-            <SLink to="/search_categori2">부서</SLink>
           </ul>
           </ul>
         </MenuContainer>
         </MenuContainer>
         <OptionContainer>
         <OptionContainer>
-          <SearchOptionContainer onClick={openModal}>
-            <Button color="white">고급 검색</Button>
-          </SearchOptionContainer>
-          <Modal showModal={showModal} setShowModal={setShowModal} />
           <SortOptionContainer>
           <SortOptionContainer>
             <DropDownButton
             <DropDownButton
               color="white"
               color="white"
               width="85px"
               width="85px"
-              fontsize="16px"
-              height="38px"
+              fontsize="15px"
+              height="36px"
+              title="정렬(기본)"
               options={[
               options={[
-                { value: 0, name: '정렬' },
-                { value: 1, name: '날짜빠른순' },
-                { value: 2, name: '크기높은순' },
-                { value: 3, name: '크기낮은순' },
+                { id: 0, name: '정렬(기본)' },
+                { id: 1, name: '날짜빠른순' },
+                { id: 2, name: '크기높은순' },
+                { id: 3, name: '크기낮은순' },
               ]}
               ]}
-            >
-              정렬
-            </DropDownButton>
+            />
           </SortOptionContainer>
           </SortOptionContainer>
+          <SearchOptionContainer onClick={openModal}>
+            <Button color="gray">고급 검색</Button>
+          </SearchOptionContainer>
+          <Modal showModal={showModal} setShowModal={setShowModal} />
         </OptionContainer>
         </OptionContainer>
         <UserContainer>
         <UserContainer>
-          <Button color="white" width="100px" height="50px" fontsize="20px">
+          <Button color="blue" width="100px" height="50px" fontsize="20px">
             사용자 님
             사용자 님
           </Button>
           </Button>
         </UserContainer>
         </UserContainer>

-import React from 'react';
-import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import palette from '../lib/styles/palette';
-import Button from './common/Button';
-
-const FormBlock = styled.form`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 25rem;
-  padding: 2.5rem;
-  box-sizing: border-box;
-  border: 1px solid #dadce0;
-  -webkit-border-radius: 8px;
-  border-radius: 8px;
-  text-align: center;
-`;
-
-const InputBox = styled.div`
-  position: relative;
-  input {
-    width: 93%;
-    padding: 0.625rem 10px;
-    font-size: 1rem;
-    letter-spacing: 0.062rem;
-    margin-bottom: 1.875rem;
-    border: 1px solid #ccc;
-    background: transparent;
-    border-radius: 4px;
-  }
-  .label {
-    position: absolute;
-    top: 0;
-    left: 10px;
-    padding: 0.625rem 0;
-    font-size: 1rem;
-    color: grey;
-    pointer-events: none;
-    transition: 0.5s;
-  }
-
-  input:focus ~ .label,
-  input:valid ~ .label,
-  input:not([value='']) ~ .label {
-    top: -1.125rem;
-    left: 10px;
-    color: ${palette.blue6};
-    font-size: 0.75rem;
-    background-color: #fff;
-    height: 10px;
-    padding-left: 5px;
-    padding-right: 5px;
-  }
-
-  input:focus {
-    outline: none;
-    border: 2px solid ${palette.blue6};
-  }
-  input[type='submit'] {
-    border: none;
-    outline: none;
-    color: #fff;
-    background-color: ${palette.blue6};
-    padding: 0.625rem 1.25rem;
-    cursor: pointer;
-    border-radius: 0.312rem;
-    font-size: 1rem;
-    float: right;
-  }
-
-  input[type='submit']:hover {
-    background-color: ${palette.blue6};
-    box-shadow: 0 1px 1px 0 rgba(66, 133, 244, 0.45),
-      0 1px 3px 1px rgba(66, 133, 244, 0.3);
-  }
-`;
-
-const ButtonBlock = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 1rem;
-
-  a {
-    color: ${palette.blue6};
-    text-decoration: none;
-  }
-`;
-
-const Login = () => {
-  return (
-    <FormBlock>
-      <div>Logo</div>
-      <h1>로그인</h1>
-      <InputBox>
-        <input type="email" id="email" name="email" value="" />
-        <div className="label">Email</div>
-      </InputBox>
-      <InputBox>
-        <input type="text" name="text" value="" />
-        <div className="label">Password</div>
-      </InputBox>
-      <ButtonBlock>
-        <Link to="/">홈으로</Link>
-        <Button color="blue">로그인</Button>
-      </ButtonBlock>
-    </FormBlock>
-  );
-};
-
-export default Login;

 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,54 +68,69 @@ const Modal = ({ showModal, setShowModal }) => {
     <>
     <>
       {showModal ? (
       {showModal ? (
         <Background onClick={closeModal}>
         <Background onClick={closeModal}>
-          <ModalWrapper>
-            <ModalContent>
-              <TextWrap top="15px" right="20px" bottom="19px">
-                기본검색
-              </TextWrap>
-              <StandardWrap>
-                <Input float="left" color="blue" width="140px" size="10px" />
-              </StandardWrap>
-              <TextWrap top="75px" right="20px" bottom="137px">
-                고급검색
-              </TextWrap>
-              <AdvancedWrap>
-                <Input
-                  float="left"
-                  color="blue"
-                  width="140px"
-                  size="10px"
-                  placeholder="단어/ 문장검색"
-                />
-                <br /> <br />
-                <Input
-                  float="left"
-                  color="blue"
-                  width="140px"
-                  size="10px"
-                  placeholder="최초 작성자"
-                />
-                <br /> <br />
-                <Input
-                  float="left"
-                  color="blue"
-                  width="140px"
-                  size="10px"
-                  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>
         </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}
-    >
-      {children}
+    <ButtonBlock float={float} width={width} fontsize={fontsize}>
+      <Button fullWidth size="lg" color={color || 'blue'}>
+        {children}
+      </Button>
     </ButtonBlock>
     </ButtonBlock>
   );
   );
 };
 };
 
 
-export default Button;
+export default Buttons;

-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { Menu, MenuItem } from '@mantine/core';
 import styled from 'styled-components';
 import styled from 'styled-components';
 import { dropdownHeaderColorMap } from '../../lib/styles/palette';
 import { dropdownHeaderColorMap } from '../../lib/styles/palette';
 
 
@@ -6,30 +7,23 @@ const DropDownBlock = styled.div`
   margin: 0 auto;
   margin: 0 auto;
   float: ${props => props.float || ''};
   float: ${props => props.float || ''};
 `;
 `;
-const DropDownHeader = styled.select`
-  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'};
-  cursor: pointer;
+const DropDownHeader = styled(Menu)``;
+
+const DropDownWrap = styled.button`
   color: ${props => dropdownHeaderColorMap[props.color].color};
   color: ${props => dropdownHeaderColorMap[props.color].color};
   background-color: ${props => dropdownHeaderColorMap[props.color].background};
   background-color: ${props => dropdownHeaderColorMap[props.color].background};
+  cursor: pointer;
   &:hover {
   &:hover {
     background-color: ${props =>
     background-color: ${props =>
       dropdownHeaderColorMap[props.color].hoverBackground};
       dropdownHeaderColorMap[props.color].hoverBackground};
   }
   }
+  margin-bottom: 0.8em;
+  padding: 0.4em;
+  width: ${props => props.width || '100px'};
+  height: ${props => props.height || '30px'};
+  padding-right: 7%;
+  font-size: ${props => props.fontsize || '20px'};
   border: 1px ${props => dropdownHeaderColorMap[props.color].background};
   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 = ({
 const DropDown = ({
@@ -39,18 +33,36 @@ const DropDown = ({
   fontsize,
   fontsize,
   width,
   width,
   height,
   height,
+  title = '전체',
 }) => {
 }) => {
+  const [menuTitle, setTitle] = useState('');
+  useEffect(() => {
+    setTitle(title);
+  }, []);
   return (
   return (
-    <DropDownBlock float={float} color={color}>
+    <DropDownBlock float={float} color={color} title={title}>
       <DropDownHeader
       <DropDownHeader
-        options={options}
-        color={color}
-        fontsize={fontsize}
-        width={width}
-        height={height}
+        control={
+          <DropDownWrap
+            options={options}
+            color={color}
+            fontsize={fontsize}
+            width={width}
+            height={height}
+          >
+            {menuTitle}
+          </DropDownWrap>
+        }
       >
       >
         {options.map(friend => (
         {options.map(friend => (
-          <option value={friend.id}>{friend.name}</option>
+          <MenuItem
+            value={friend.id}
+            onClick={() => {
+              setTitle(friend.name);
+            }}
+          >
+            {friend.name}
+          </MenuItem>
         ))}
         ))}
       </DropDownHeader>
       </DropDownHeader>
     </DropDownBlock>
     </DropDownBlock>

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { TextInput } from '@mantine/core';
 import styled from 'styled-components';
 import styled from 'styled-components';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import SearchBox from './SearchBox';
 import SearchBox from './SearchBox';
 import { inputColorMap } from '../../lib/styles/palette';
 import { inputColorMap } from '../../lib/styles/palette';
 
 
 const InputBlock = styled.div`
 const InputBlock = styled.div`
-  input {
-    padding: ${props => props.size};
-    padding-right: ${props => props.width};
-    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};
+  width: ${props => props.width};
+  float: ${props => props.float || 'left'};
+  height: ${props => props.height};
+`;
 
 
-    &::placeholder {
-      color: ${props => inputColorMap[props.color].placeholder};
-      text-transform: uppercase;
-    }
-    float: left;
-  }
-  float: ${props => props.float || ''};
+const InputWrap = styled.div`
+  padding-top: ${props => props.paddingsize};
+  padding-left: 10px;
+  width: 70%;
+  height: 100%;
+  color: ${props => inputColorMap[props.color].color};
+  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,
   color,
-  size,
+  paddingsize = '10px',
   float,
   float,
   width,
   width,
+  height = '50px',
   placeholder = '내용을 입력해 주세요.',
   placeholder = '내용을 입력해 주세요.',
   display,
   display,
+  fontsize = '20px',
 }) => {
 }) => {
   const [query, setQuery] = useState('');
   const [query, setQuery] = useState('');
   const history = useHistory();
   const history = useHistory();
+  const search = useLocation();
+  const name = search.search.substring(7);
+  useEffect(() => {
+    setQuery(name);
+  }, []);
+
   return (
   return (
     <InputBlock
     <InputBlock
       color={color}
       color={color}
-      size={size}
+      size={paddingsize}
       float={float}
       float={float}
       width={width}
       width={width}
       placeholder={placeholder}
       placeholder={placeholder}
       display={display}
       display={display}
+      height={height}
     >
     >
-      <input
-        placeholder={placeholder}
-        type="text"
-        value={query}
-        onChange={e => setQuery(e.target.value)}
-        onKeyPress={e => {
-          if (e.key === 'Enter') {
-            if (query === '') {
-              alert('검색어를 입력 해 주세요.');
-              return;
+      <InputWrap color={color} paddingsize={paddingsize} float={float}>
+        <TextInput
+          inputStyle={{
+            fontSize: fontsize,
+          }}
+          variant="unstyled"
+          placeholder={placeholder}
+          type="text"
+          value={query}
+          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
       <SearchIconWrap
         onClick={() => {
         onClick={() => {
           const params = new URLSearchParams({ query });
           const params = new URLSearchParams({ query });
@@ -71,4 +89,4 @@ const Input = ({
   );
   );
 };
 };
 
 
-export default Input;
+export default MyInput;

@@ -5,7 +5,7 @@ import { searchBoxColorMap } from '../../lib/styles/palette';
 const ButtonBlock = styled.button`
 const ButtonBlock = styled.button`
   width: ${props => props.size};
   width: ${props => props.size};
   height: ${props => props.size};
   height: ${props => props.size};
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -3 30 30'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -3 30 30'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' fill='white'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
   display: ${props => props.display};
   display: ${props => props.display};
   background-color: ${props => searchBoxColorMap[props.color].background};
   background-color: ${props => searchBoxColorMap[props.color].background};
   &:hover {
   &:hover {

+import React from 'react';
+import { Link } from 'react-router-dom';
+import palette from '../../lib/styles/palette';
+
+const File = ({ filename }) => {
+  return (
+    <Link style={{ color: palette.blue6 }} to="/">
+      {filename}
+    </Link>
+  );
+};
+export default File;

+import { Image, Text } from '@mantine/core';
+import React from 'react';
+
+const Thumbnails = () => {
+  return (
+    <>
+      <Text style={{ marginTop: '1rem' }}>문서 내 이미지</Text>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Image width={200} height={250} radius="md" withPlaceholder />
+        <Image width={200} height={250} radius="md" withPlaceholder />
+        <Image width={200} height={250} radius="md" withPlaceholder />
+        <Image width={200} height={250} radius="md" withPlaceholder />
+      </div>
+    </>
+  );
+};
+export default Thumbnails;

+import React from 'react';
+import { Container, Text } from '@mantine/core';
+import File from './File';
+import Thumbnails from './Thumbnail';
+
+const Document = () => {
+  // 파일이름
+  // 본문 글 미리보기(짧게 ...으로짤림)
+  // 문서 내 이미지
+  return (
+    <Container
+      style={{
+        padding: '2rem 4rem',
+        margin: '2rem 4rem',
+        border: '1px solid black',
+      }}
+    >
+      <File filename="Sample Document.docx" />
+      <Text color="green">경로: /샘플부서/샘플폴더/Sample Document.docx</Text>
+      <Text>
+        {`네드 로렘(Ned Rorem 1923- )은 현존하는 미국의 대표적인 현대 작곡가이다.
+        무엇 가곡 장르를 섭렵한 첫 번째 미국 작곡가로 많은 사람들에
+        의해 미국 가곡 작곡가들의 선두에 있다고 여기질 만큼 뛰어난 가곡을 많이
+        작곡한 현대 미...`}
+      </Text>
+      <Thumbnails />
+    </Container>
+  );
+};
+export default Document;

+import React from 'react';
+import { TextInput, Button, Container, CONTAINER_SIZES } from '@mantine/core';
+import { useForm } from '@mantine/hooks';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import palette from '../../lib/styles/palette';
+
+const LoginFormBlock = styled.div`
+  display: flex;
+  height: 100%;
+  align-items: center;
+`;
+const ButtonBlock = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-top: 2rem;
+`;
+const FormBlock = styled.div``;
+const LoginForm = () => {
+  const { onSubmit, errors, values, setFieldValue } = useForm({
+    initialValues: {
+      email: '',
+      password: '',
+      termOfService: false,
+    },
+    validationRules: {
+      email: value => /^[^\s@]+@[^\s@]+$/.test(value),
+    },
+  });
+  return (
+    <LoginFormBlock>
+      <Container
+        size={CONTAINER_SIZES.xs}
+        padding="xs"
+        style={{
+          display: 'block',
+          width: CONTAINER_SIZES.xs,
+          padding: '5rem',
+          border: `1px ${palette.gray3} solid`,
+          borderRadius: '5px',
+        }}
+      >
+        <h2>Logo</h2>
+        <FormBlock>
+          <TextInput
+            required
+            label="Email"
+            placeholder="example@example.com"
+            error={errors.email && 'Please specify valid email'}
+            value={values.email}
+            onChange={event =>
+              setFieldValue('email', event.currentTarget.value)
+            }
+          />
+          <TextInput
+            required
+            label="Password"
+            placeholder="Your password"
+            value={values.password}
+            type="password"
+            style={{ marginTop: '2rem' }}
+            onChange={event =>
+              setFieldValue('password', event.currentTarget.value)
+            }
+          />
+          <ButtonBlock>
+            <Link to="/">
+              <Button variant="outline">홈으로</Button>
+            </Link>
+            <Button type="button" onClick={onSubmit(v => console.log(v))}>
+              로그인
+            </Button>
+          </ButtonBlock>
+        </FormBlock>
+      </Container>
+    </LoginFormBlock>
+  );
+};
+export default LoginForm;

@@ -38,12 +38,12 @@ export const buttonColorMap = {
   blue: {
   blue: {
     background: palette.blue6,
     background: palette.blue6,
     color: 'white',
     color: 'white',
-    hoverBackground: palette.blue5,
+    hoverBackground: palette.blue7,
   },
   },
   gray: {
   gray: {
-    background: palette.gray2,
+    background: palette.gray7,
     color: 'black',
     color: 'black',
-    hoverBackground: palette.gray5,
+    hoverBackground: palette.gray8,
   },
   },
   white: {
   white: {
     background: 'white',
     background: 'white',

@@ -7,45 +7,69 @@ import Input from '../components/common/Input';
 
 
 const Main = styled.div`
 const Main = styled.div`
   display: flex;
   display: flex;
-  height: 100vh;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
+  padding-left: 7%;
 `;
 `;
 
 
-const SearchBlock = styled.div`
+const Container = styled.div`
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const LogoWrap = styled.div`
   display: flex;
   display: flex;
+  margin-top: 11%;
+  height: 30vh;
+  align-items: center;
+  justify-content: center;
 `;
 `;
 
 
+const SearchBlock = styled.div`
+  display: inline-block;
+  width: 100%;
+  margin-left: 23%;
+`;
 const LoginButtonBlock = styled.div`
 const LoginButtonBlock = styled.div`
   position: fixed;
   position: fixed;
   top: 20px;
   top: 20px;
   right: 20px;
   right: 20px;
 `;
 `;
 
 
+const SLink = styled(Link)`
+  text-decoration: none !important;
+`;
+
 const HomePage = () => {
 const HomePage = () => {
   return (
   return (
-    <Main>
-      <div>logo</div>
-      <SearchBlock>
-        <DropDownButton
-          fontsize="20px"
-          height="50px"
-          options={[
-            { id: 1, name: '전체' },
-            { id: 2, name: '개인' },
-            { id: 3, name: '부서' },
-          ]}
-        />
-        <Input color="blue" size="14px" width="400px" display />
-      </SearchBlock>
-
-      {/* Todo : 로그인 했을 경우 로그인 버튼 숨기기 */}
-      <LoginButtonBlock>
-        <Link to="/login">
-          <Button>로그인</Button>
-        </Link>
-      </LoginButtonBlock>
-    </Main>
+    <Container>
+      <LogoWrap>
+        <img src="eDrive_logo.png" alt="" />
+      </LogoWrap>
+      <Main>
+        <SearchBlock>
+          <DropDownButton
+            fontsize="20px"
+            height="50px"
+            options={[
+              { id: 1, name: '전체' },
+              { id: 2, name: '개인' },
+              { id: 3, name: '부서' },
+            ]}
+            float="left"
+          />
+          <Input color="blue" paddingsize="10px" width="700px" display />
+        </SearchBlock>
+
+        {/* Todo : 로그인 했을 경우 로그인 버튼 숨기기 */}
+        <LoginButtonBlock>
+          <SLink to="/login">
+            <Button>로그인</Button>
+          </SLink>
+        </LoginButtonBlock>
+      </Main>
+    </Container>
   );
   );
 };
 };
 
 

 import React from 'react';
 import React from 'react';
-import Login from '../components/Login';
+import Login from '../components/login/LoginForm';
 
 
 const LoginPage = () => {
 const LoginPage = () => {
   return (
   return (

 import React from 'react';
 import React from 'react';
 import Header from '../components/Header';
 import Header from '../components/Header';
+import Main from '../components/document/index';
 
 
-const LoginPage = () => {
+const SearchPage = () => {
   return (
   return (
     <>
     <>
       <Header />
       <Header />
+      <Main />
     </>
     </>
   );
   );
 };
 };
 
 
-export default LoginPage;
+export default SearchPage;