Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2021-1-capstone-design1
/
GCL_Project1
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
이승윤
2021-05-08 14:00:14 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
e7ae3dfb146f9e3e3081e807c26158ffa85e2455
e7ae3dfb
1 parent
ad91b600
feat: search box 클릭시 submit 기능 추가
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
28 additions
and
3 deletions
frontend/src/components/common/Input.js
frontend/src/components/common/Input.js
View file @
e7ae3df
import
React
,
{
useState
}
from
'react'
;
import
styled
from
'styled-components'
;
import
{
useHistory
}
from
'react-router-dom'
;
import
SearchBox
from
'./SearchBox'
;
import
{
inputColorMap
}
from
'../../lib/styles/palette'
;
const
InputBlock
=
styled
.
div
`
...
...
@@ -17,17 +18,33 @@ const InputBlock = styled.div`
color:
${
props
=>
inputColorMap
[
props
.
color
].
placeholder
}
;
text-transform: uppercase;
}
float: left;
}
float:
${
props
=>
props
.
float
||
''
}
;
`
;
const
SearchIconWrap
=
styled
.
div
``
;
const
Input
=
({
color
,
size
,
float
,
width
})
=>
{
const
Input
=
({
color
,
size
,
float
,
width
,
placeholder
=
'내용을 입력해 주세요.'
,
value
,
})
=>
{
const
[
query
,
setQuery
]
=
useState
(
''
);
const
history
=
useHistory
();
return
(
<
InputBlock
color
=
{
color
}
size
=
{
size
}
float
=
{
float
}
width
=
{
width
}
>
<
InputBlock
color
=
{
color
}
size
=
{
size
}
float
=
{
float
}
width
=
{
width
}
placeholder
=
{
placeholder
}
value
=
{
value
}
>
<
input
placeholder
=
"내용을 입력해 주세요."
placeholder
=
{
placeholder
}
type
=
"text"
value
=
{
query
}
onChange
=
{
e
=>
setQuery
(
e
.
target
.
value
)}
...
...
@@ -42,6 +59,14 @@ const Input = ({ color, size, float, width }) => {
}
}}
/
>
<
SearchIconWrap
onClick
=
{()
=>
{
const
params
=
new
URLSearchParams
({
query
});
history
.
push
(
`?
${
params
.
toString
()}
`
);
}}
>
<
SearchBox
color
=
"blue"
size
=
"50px"
/>
<
/SearchIconWrap
>
<
/InputBlock
>
);
};
...
...
Please
register
or
login
to post a comment