2021-1-capstone-design1 / GCL_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이승윤
8c811693 2 parents a66230e0 8e3943fe

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

Style/mantine styled



See merge request !9
Inline Side-by-side
Showing 18 changed files with 388 additions and 315 deletions
......@@ -14,7 +14,9 @@
"react-scripts": "4.0.3",
"redux": "^4.0.5",
"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": {
"start": "react-scripts start",
......
......@@ -31,14 +31,15 @@ const MenuContainer = styled.div`
`;
const LogoContainer = styled.div`
margin-top: 20px;
margin-top: 10px;
float: left;
padding: 20px;
img {
width: 100px;
width: 130px;
vertical-align: bottom;
}
cursor: pointer;
`;
const SearchContainer = styled.div`
......@@ -83,8 +84,8 @@ const SortOptionContainer = styled.div`
const OptionContainer = styled.div`
position: absolute;
top: 129px;
left: 650px;
top: 132px;
left: 750px;
`;
const UserContainer = styled.div`
......@@ -115,7 +116,9 @@ const Header = () => {
<>
<MainContainer>
<HeaderTop />
<LogoContainer onClick={onMainClick}>로고</LogoContainer>
<LogoContainer onClick={onMainClick}>
<img src="eDrive_logo_v2.png" alt="" />
</LogoContainer>
<SearchContainer>
<DropDownContainer>
<DropDownWrap>
......@@ -124,15 +127,11 @@ const Header = () => {
float="left"
fontsize="20px"
height="50px"
options={[
{ id: 1, name: '전체' },
{ id: 2, name: '개인' },
{ id: 3, name: '부서' },
]}
options={[{ id: 1, name: '전체' }]}
/>
</DropDownWrap>
</DropDownContainer>
<InputBlock color="blue" size="14px" width="400px" display="">
<InputBlock color="blue" fontsize="20px" width="850px" display="">
<input />
</InputBlock>
</SearchContainer>
......@@ -141,34 +140,31 @@ const Header = () => {
<SLink activeClassName="active" to="/search">
전체
</SLink>
<SLink to="/search_categori1">개인</SLink>
<SLink to="/search_categori2">부서</SLink>
</ul>
</MenuContainer>
<OptionContainer>
<SearchOptionContainer onClick={openModal}>
<Button color="white">고급 검색</Button>
</SearchOptionContainer>
<Modal showModal={showModal} setShowModal={setShowModal} />
<SortOptionContainer>
<DropDownButton
color="white"
width="85px"
fontsize="16px"
height="38px"
fontsize="15px"
height="36px"
title="정렬(기본)"
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>
<SearchOptionContainer onClick={openModal}>
<Button color="gray">고급 검색</Button>
</SearchOptionContainer>
<Modal showModal={showModal} setShowModal={setShowModal} />
</OptionContainer>
<UserContainer>
<Button color="white" width="100px" height="50px" fontsize="20px">
<Button color="blue" width="100px" height="50px" fontsize="20px">
사용자 님
</Button>
</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 { 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,54 +68,69 @@ const Modal = ({ showModal, setShowModal }) => {
<>
{showModal ? (
<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>
) : 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;
......
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`
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};
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: 7%;
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}
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 => (
<option value={friend.id}>{friend.name}</option>
<MenuItem
value={friend.id}
onClick={() => {
setTitle(friend.name);
}}
>
{friend.name}
</MenuItem>
))}
</DropDownHeader>
</DropDownBlock>
......
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 {
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,
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
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
onClick={() => {
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`
width: ${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};
background-color: ${props => searchBoxColorMap[props.color].background};
&: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: {
background: palette.blue6,
color: 'white',
hoverBackground: palette.blue5,
hoverBackground: palette.blue7,
},
gray: {
background: palette.gray2,
background: palette.gray7,
color: 'black',
hoverBackground: palette.gray5,
hoverBackground: palette.gray8,
},
white: {
background: 'white',
......
......@@ -7,45 +7,69 @@ import Input from '../components/common/Input';
const Main = styled.div`
display: flex;
height: 100vh;
align-items: 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;
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`
position: fixed;
top: 20px;
right: 20px;
`;
const SLink = styled(Link)`
text-decoration: none !important;
`;
const HomePage = () => {
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 Login from '../components/Login';
import Login from '../components/login/LoginForm';
const LoginPage = () => {
return (
......
import React from 'react';
import Header from '../components/Header';
import Main from '../components/document/index';
const LoginPage = () => {
const SearchPage = () => {
return (
<>
<Header />
<Main />
</>
);
};
export default LoginPage;
export default SearchPage;
......