2021-1-capstone-design1 / GCL_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이승윤
388ac5f1 1 parent a8efc10c

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

Inline Side-by-side
Showing 5 changed files with 125 additions and 81 deletions
......@@ -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: '정렬' },
{ value: 1, name: '날짜빠른순' },
{ value: 2, name: '크기높은순' },
{ value: 3, name: '크기낮은순' },
{ id: 0, name: '정렬' },
{ id: 1, name: '날짜빠른순' },
{ id: 2, name: '크기높은순' },
{ id: 3, name: '크기낮은순' },
]}
>
정렬
</DropDownButton>
/>
</SortOptionContainer>
</OptionContainer>
<UserContainer>
......
......@@ -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"
size="10px"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
placeholder="단어/ 문장검색"
/>
<br /> <br />
<Input
float="left"
color="blue"
width="140px"
size="10px"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
placeholder="최초 작성자"
/>
<br /> <br />
<Input
float="left"
color="blue"
width="140px"
size="10px"
width="350px"
height="40px"
paddingsize="3px"
fontsize="15px"
placeholder="최종 수정자"
/>
</AdvancedWrap>
......
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: 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}
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;
......
......@@ -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 : 로그인 했을 경우 로그인 버튼 숨기기 */}
......