2021-1-capstone-design1 / GCL_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이승윤
2464bb4c 2 parents 8c811693 0dd003da

Merge branch 'style/icon' into 'develop' 

Style/icon



See merge request !10
Expand all
Inline Side-by-side
Showing 8 changed files with 113 additions and 54 deletions
......@@ -3,20 +3,22 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@mantine/core": "^1.0.6",
"@mantine/hooks": "^1.0.6",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-jss": "^10.6.0",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"redux": "^4.0.5",
"styled-components": "^5.2.3",
"web-vitals": "^1.0.1",
"@mantine/core": "^1.0.6",
"@mantine/hooks": "^1.0.6"
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
......
import React, { useState } from 'react';
import { NavLink, useHistory } from 'react-router-dom';
import { FaSearch } from 'react-icons/fa';
import styled from 'styled-components';
import InputBlock from './common/Input';
import DropDownButton from './common/DropdownButton';
......@@ -123,6 +124,8 @@ const Header = () => {
<DropDownContainer>
<DropDownWrap>
<DropDownButton
menuPosition={{ top: 40 }}
size={100}
color="blue"
float="left"
fontsize="20px"
......@@ -146,20 +149,24 @@ const Header = () => {
<SortOptionContainer>
<DropDownButton
color="white"
width="85px"
width="100px"
fontsize="15px"
height="36px"
title="정렬(기본)"
menuPosition={{ top: 29 }}
size="100"
options={[
{ id: 0, name: '정렬(기본)' },
{ id: 1, name: '날짜빠른순' },
{ id: 2, name: '크기높은순' },
{ id: 3, name: '크기낮은순' },
]}
/>
/>{' '}
</SortOptionContainer>
<SearchOptionContainer onClick={openModal}>
<Button color="gray">고급 검색</Button>
<Button color="gray" size="md" icon={<FaSearch />}>
고급 검색
</Button>
</SearchOptionContainer>
<Modal showModal={showModal} setShowModal={setShowModal} />
</OptionContainer>
......
import React, { useRef } from 'react';
import { Card } from '@mantine/core';
import React, { useRef, useState } from 'react';
import { Card, TextInput } from '@mantine/core';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import Button from './common/Button';
import Input from './common/Input';
const Background = styled.div``;
......@@ -34,13 +34,13 @@ const CloseWrap = styled.div`
const StandardWrap = styled.div`
position: absolute;
width: 50px;
width: 250px;
top: 15px;
left: 30%;
`;
const AdvancedWrap = styled.div`
width: 50px;
width: 250px;
position: absolute;
top: 75px;
left: 30%;
......@@ -57,6 +57,11 @@ const TextWrap = styled.div`
`;
const Modal = ({ showModal, setShowModal }) => {
const [query, setQuery] = useState('');
const [keywordQuery, setKeywordQuery] = useState('');
const [writerQuery, setWriterQuery] = useState('');
const [dateQuery, setDateQuery] = useState('');
const history = useHistory();
const modalRef = useRef();
const closeModal = e => {
if (modalRef.current === e.target) {
......@@ -75,47 +80,62 @@ const Modal = ({ showModal, setShowModal }) => {
기본검색
</TextWrap>
<StandardWrap>
<Input
float="left"
color="blue"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
<TextInput
inputStyle={{
marginBottom: 18,
fontSize: 15,
}}
placeholder="내용을 입력해 주세요."
type="text"
value={decodeURIComponent(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?${decodeURIComponent(params.toString())}`
);
}
}}
/>
</StandardWrap>
<TextWrap top="24%" right="10%" bottom="31%">
고급검색
</TextWrap>
<AdvancedWrap>
<Input
float="left"
color="blue"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
placeholder="단어/ 문장검색"
<TextInput
inputStyle={{
marginBottom: 18,
fontSize: 15,
}}
placeholder="단어/문장 검색"
type="text"
value={decodeURIComponent(keywordQuery)}
onChange={e => setKeywordQuery(e.target.value)}
/>
<br /> <br />
<Input
float="left"
color="blue"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
placeholder="최초 작성자"
<TextInput
inputStyle={{
marginBottom: 18,
fontSize: 15,
}}
placeholder="작성자"
type="text"
value={decodeURIComponent(writerQuery)}
onChange={e => setWriterQuery(e.target.value)}
/>
<br /> <br />
<Input
float="left"
color="blue"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
placeholder="최종 수정자"
<TextInput
inputStyle={{
marginBottom: 18,
fontSize: 15,
}}
placeholder="생성 날짜"
type="text"
value={decodeURIComponent(dateQuery)}
onChange={e => setDateQuery(e.target.value)}
/>
</AdvancedWrap>
</ModalContent>
......
......@@ -10,10 +10,18 @@ const ButtonBlock = styled.div`
cursor: pointer;
`;
const Buttons = ({ children, color, float, width, fontsize }) => {
const Buttons = ({
children,
size = 'lg',
color,
float,
width,
fontsize,
icon = '',
}) => {
return (
<ButtonBlock float={float} width={width} fontsize={fontsize}>
<Button fullWidth size="lg" color={color || 'blue'}>
<Button size={size} color={color || 'blue'} rightIcon={icon}>
{children}
</Button>
</ButtonBlock>
......
import React, { useState, useEffect } from 'react';
import { TiArrowSortedDown } from 'react-icons/ti';
import { Menu, MenuItem } from '@mantine/core';
import styled from 'styled-components';
import { dropdownHeaderColorMap } from '../../lib/styles/palette';
......@@ -10,6 +11,9 @@ const DropDownBlock = styled.div`
const DropDownHeader = styled(Menu)``;
const DropDownWrap = styled.button`
display: flex;
justify-content: space-around;
align-items: center;
color: ${props => dropdownHeaderColorMap[props.color].color};
background-color: ${props => dropdownHeaderColorMap[props.color].background};
cursor: pointer;
......@@ -18,7 +22,6 @@ const DropDownWrap = styled.button`
dropdownHeaderColorMap[props.color].hoverBackground};
}
margin-bottom: 0.8em;
padding: 0.4em;
width: ${props => props.width || '100px'};
height: ${props => props.height || '30px'};
padding-right: 7%;
......@@ -34,6 +37,8 @@ const DropDown = ({
width,
height,
title = '전체',
menuPosition,
size,
}) => {
const [menuTitle, setTitle] = useState('');
useEffect(() => {
......@@ -42,6 +47,8 @@ const DropDown = ({
return (
<DropDownBlock float={float} color={color} title={title}>
<DropDownHeader
menuPosition={menuPosition}
size={size}
control={
<DropDownWrap
options={options}
......@@ -51,6 +58,7 @@ const DropDown = ({
height={height}
>
{menuTitle}
<TiArrowSortedDown />
</DropDownWrap>
}
>
......
......@@ -17,7 +17,6 @@ const InputWrap = styled.div`
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};
......@@ -63,7 +62,7 @@ const MyInput = ({
variant="unstyled"
placeholder={placeholder}
type="text"
value={query}
value={decodeURIComponent(query)}
onChange={e => setQuery(e.target.value)}
onKeyPress={e => {
if (e.key === 'Enter') {
......@@ -72,15 +71,19 @@ const MyInput = ({
return;
}
const params = new URLSearchParams({ query });
history.push(`search?${params.toString()}`);
history.push(`search?${decodeURIComponent(params.toString())}`);
}
}}
/>
</InputWrap>
<SearchIconWrap
onClick={() => {
if (query === '') {
alert('검색어를 입력 해 주세요.');
return;
}
const params = new URLSearchParams({ query });
history.push(`search?${params.toString()}`);
history.push(`search?${decodeURIComponent(params.toString())}`);
}}
>
<SearchBox color="blue" size="50px" display={display} />
......
import React from 'react';
import styled from 'styled-components';
import { AiOutlineSearch } from 'react-icons/ai';
import { searchBoxColorMap } from '../../lib/styles/palette';
const ButtonBlock = styled.button`
const ButtonBlock = styled.div`
text-align: center;
display: table-cell;
vertical-align: middle;
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' 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 {
......@@ -18,9 +21,17 @@ const ButtonBlock = styled.button`
cursor: pointer;
`;
const SFaSearch = styled(AiOutlineSearch)`
width: 35px;
height: 35px;
margin-right: 5px;
margin-top: 2px;
`;
const SearchBox = ({ color, float, size = '1px', display = 'none' }) => {
return (
<ButtonBlock color={color} float={float} size={size} display={display} />
<ButtonBlock color={color} float={float} size={size} display={display}>
<SFaSearch />
</ButtonBlock>
);
};
......
This diff is collapsed. Click to expand it.