Skip to content

Commit 477785c

Browse files
dnr14dnr14
authored
Merge pull request dalping#18 from dalping/feature/search
[feat] 검색 페이지 개발
2 parents 1927194 + 9de0fa5 commit 477785c

File tree

9 files changed

+502
-2
lines changed

9 files changed

+502
-2
lines changed

‎src/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import PostPage from './Components/views/PostPage/PostPage';
66
import UpdatePostPage from './Components/views/UpdatePostPage/UpdatePostPage';
77
import InsertPostPage from './Components/views/InsertPostPage/InsertPostPage';
88
import NotFound from './Components/Error/NotFound';
9+
import SearchPage from './Components/views/SearchPage/SearchPage';
910

1011
const App = () => {
1112
return (
@@ -17,6 +18,7 @@ const App = () => {
1718
<Route path="/update/:id" component={UpdatePostPage} />
1819
<Route path="/posttest" component={PostPage} />
1920
<Route path="/insert" component={InsertPostPage} />
21+
<Route path="/search" component={SearchPage} />
2022
<Route exact path="/" component={MainPage} />
2123
<Route path="*" component={NotFound} />
2224
</Switch>

‎src/Components/views/MainPage/Menu/style.jsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,11 @@ export const MenuBarWrraper = styled.div`
136136
font-size: 0.75rem;
137137
}
138138
}
139+
140+
.checked {
141+
color: rgb(248, 249, 250);
142+
background: rgb(18, 184, 134);
143+
}
139144
`;
140145

141146
export const UlWrapper = styled.ul`

‎src/Components/views/SearchPage/Search/Item.jsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { memo } from 'react';
2+
import { Link } from 'react-router-dom';
3+
import * as Styled from './style';
4+
import { htmlRemove } from '@/utils/editorUtil';
5+
import { makeYYMMDD } from '@/utils/dateUtil';
6+
7+
const Item = ({ id, body, title, createdAt, commentsTotalResults }) => {
8+
return (
9+
<Styled.ItemBox key={id}>
10+
<Link to={`/post/${id}`}>
11+
<h2>{title}</h2>
12+
</Link>
13+
<p>{htmlRemove(body)}</p>
14+
<div className="subinfo">
15+
<span>{makeYYMMDD(createdAt)}</span>
16+
<div className="separator">·</div>
17+
{commentsTotalResults}개의 댓글
18+
</div>
19+
</Styled.ItemBox>
20+
);
21+
};
22+
23+
export default memo(Item);

‎src/Components/views/SearchPage/Search/Search.jsx

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React from 'react';
2+
import * as Styled from './style';
3+
import Item from './Item';
4+
import { SelectBox, UlWrapper } from '../../MainPage/Menu/style';
5+
import MenuBar from '../../MainPage/Menu/MenuBar';
6+
7+
const Search = ({
8+
list,
9+
selectBoxContent,
10+
isSelectOpen,
11+
keyWord,
12+
setIsSelectOpen,
13+
handleSearchChange,
14+
handleKeyWordChange,
15+
handleMenubarClick,
16+
children,
17+
}) => {
18+
const { posts, state } = list || {};
19+
20+
const lis = [
21+
{
22+
id: 'title',
23+
content: '제목',
24+
className: keyWord === 'title' ? 'checked' : '',
25+
},
26+
{
27+
id: 'body',
28+
content: '내용',
29+
className: keyWord === 'body' ? 'checked' : '',
30+
},
31+
{
32+
id: 'tags',
33+
content: '태그',
34+
className: keyWord === 'tags' ? 'checked' : '',
35+
},
36+
];
37+
38+
return (
39+
<Styled.Container>
40+
<Styled.InputBox>
41+
<Styled.StyledSvg width="17" height="17" viewBox="0 0 17 17">
42+
<path
43+
fillRule="evenodd"
44+
d="M13.66 7.36a6.3 6.3 0 1 1-12.598 0 6.3 6.3 0 0 1 12.598 0zm-1.73 5.772a7.36 7.36 0 1 1 1.201-1.201l3.636 3.635c.31.31.31.815 0 1.126l-.075.075a.796.796 0 0 1-1.126 0l-3.636-3.635z"
45+
clipRule="evenodd"
46+
/>
47+
</Styled.StyledSvg>
48+
<input
49+
type="text"
50+
placeholder="검색어를 입력해주세요."
51+
onChange={handleSearchChange()}
52+
maxLength={50}
53+
/>
54+
55+
<SelectBox id="select" onClick={handleMenubarClick}>
56+
{selectBoxContent}
57+
<svg
58+
stroke="currentColor"
59+
fill="currentColor"
60+
strokeWidth="0"
61+
viewBox="0 0 24 24"
62+
height="1em"
63+
width="1em"
64+
xmlns="http://www.w3.org/2000/svg"
65+
>
66+
<path d="M7 10l5 5 5-5z" />
67+
</svg>
68+
</SelectBox>
69+
{isSelectOpen && (
70+
<MenuBar isOpen={isSelectOpen} setIsOpen={setIsSelectOpen}>
71+
<UlWrapper onClick={handleKeyWordChange}>
72+
{lis.map((li, idx) => (
73+
<li key={idx} id={li.id} className={li.className}>
74+
{li.content}
75+
</li>
76+
))}
77+
</UlWrapper>
78+
</MenuBar>
79+
)}
80+
</Styled.InputBox>
81+
{posts && (
82+
<div>
83+
{posts.length === 0 ? (
84+
<Styled.CountBox>검색 결과가 없습니다.</Styled.CountBox>
85+
) : (
86+
<>
87+
<Styled.CountBox>
88+
총 <b>{state.totalResults}개</b>의 포스트를 찾았습니다.
89+
</Styled.CountBox>
90+
<Styled.ListBox>
91+
{posts.map(post => (
92+
<Item key={post.id} {...post} />
93+
))}
94+
{children}
95+
</Styled.ListBox>
96+
</>
97+
)}
98+
</div>
99+
)}
100+
</Styled.Container>
101+
);
102+
};
103+
104+
export default Search;

‎src/Components/views/SearchPage/Search/style.jsx

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import styled from 'styled-components';
2+
3+
export const StyledSvg = styled.svg`
4+
width: 1.5rem;
5+
height: 1.5rem;
6+
margin-right: 1.25rem;
7+
transition: all 0.125s ease-in 0s;
8+
fill: rgb(33, 37, 41);
9+
flex-shrink: 0;
10+
11+
${({ theme }) => theme.main.media.tab1} {
12+
width: 1rem;
13+
height: 1rem;
14+
margin-right: 0.75rem;
15+
}
16+
`;
17+
18+
export const Container = styled.div`
19+
margin-top: 3.5rem;
20+
width: 768px;
21+
margin-left: auto;
22+
margin-right: auto;
23+
box-sizing: border-box;
24+
25+
${({ theme }) => theme.main.media.pc1} {
26+
padding-left: 1rem;
27+
padding-right: 1rem;
28+
}
29+
${({ theme }) => theme.main.media.tab1} {
30+
margin-top: 0.5rem;
31+
width: 100%;
32+
}
33+
`;
34+
35+
export const InputBox = styled.div`
36+
margin-bottom: 1.5rem;
37+
position: relative;
38+
display: flex;
39+
border: 1px solid rgb(33, 37, 41);
40+
-webkit-box-align: center;
41+
align-items: center;
42+
transition: all 0.125s ease-in 0s;
43+
cursor: text;
44+
height: 4rem;
45+
padding: 0px 1.5rem;
46+
47+
input {
48+
height: 100%;
49+
background-color: transparent;
50+
font-size: 1.5rem;
51+
line-height: 2rem;
52+
height: 2rem;
53+
transition: all 0.125s ease-in 0s;
54+
flex: 1 1 0%;
55+
display: block;
56+
line-height: 1rem;
57+
padding: 0px;
58+
border: none;
59+
outline: 0px;
60+
color: rgb(73, 80, 87);
61+
min-width: 0px;
62+
63+
&::placeholder {
64+
color: rgb(173, 181, 189);
65+
}
66+
}
67+
68+
${({ theme }) => theme.main.media.tab1} {
69+
height: 2.25rem;
70+
padding-left: 1rem;
71+
padding-right: 1rem;
72+
73+
input {
74+
flex: 1 1 0%;
75+
font-size: 1.125rem;
76+
line-height: 1.5;
77+
}
78+
svg {
79+
width: 1rem;
80+
height: 1rem;
81+
margin-right: 0.75rem;
82+
}
83+
}
84+
`;
85+
86+
export const CountBox = styled.p`
87+
margin-bottom: 4rem;
88+
font-size: 1.125rem;
89+
line-height: 1.5;
90+
color: rgb(73, 80, 87);
91+
b {
92+
color: rgb(33, 37, 41);
93+
}
94+
95+
${({ theme }) => theme.main.media.tab1} {
96+
font-size: 1rem;
97+
margin-bottom: 1rem;
98+
}
99+
`;
100+
101+
export const ListBox = styled.div``;
102+
export const ItemBox = styled.div`
103+
padding-top: 4rem;
104+
padding-bottom: 4rem;
105+
line-height: 1.5;
106+
&:first-child {
107+
padding-top: 0px;
108+
}
109+
110+
& + & {
111+
border-top: 1px solid rgb(233, 236, 239);
112+
}
113+
114+
h2 {
115+
font-size: 1.5rem;
116+
margin: 0px;
117+
color: rgb(33, 37, 41);
118+
word-break: keep-all;
119+
}
120+
121+
p {
122+
margin-bottom: 2rem;
123+
margin-top: 0.5rem;
124+
font-size: 1rem;
125+
color: rgb(73, 80, 87);
126+
word-break: keep-all;
127+
overflow-wrap: break-word;
128+
}
129+
130+
.subinfo {
131+
display: flex;
132+
-webkit-box-align: center;
133+
align-items: center;
134+
margin-top: 1rem;
135+
color: rgb(134, 142, 150);
136+
font-size: 0.875rem;
137+
}
138+
.separator {
139+
margin-left: 0.5rem;
140+
margin-right: 0.5rem;
141+
}
142+
143+
${({ theme }) => theme.main.media.tab1} {
144+
padding-top: 2rem;
145+
padding-bottom: 2rem;
146+
h2 {
147+
font-size: 1rem;
148+
}
149+
p {
150+
font-size: 0.875rem;
151+
margin-bottom: 1.5rem;
152+
}
153+
154+
.subinfo {
155+
font-size: 0.75rem;
156+
}
157+
}
158+
`;
159+
160+
export const SelectBox = styled.select`
161+
width: 100px;
162+
height: 100%;
163+
`;

0 commit comments

Comments
 (0)