Merge pull request dalping#18 from dalping/feature/search

[feat] 검색 페이지 개발

src/App.js

@@ -6,6 +6,7 @@ import PostPage from './Components/views/PostPage/PostPage';
 import UpdatePostPage from './Components/views/UpdatePostPage/UpdatePostPage';
 import InsertPostPage from './Components/views/InsertPostPage/InsertPostPage';
 import NotFound from './Components/Error/NotFound';
+import SearchPage from './Components/views/SearchPage/SearchPage';
 
 const App = () => {
   return (
@@ -17,6 +18,7 @@ const App = () => {
           <Route path="/update/:id" component={UpdatePostPage} />
           <Route path="/posttest" component={PostPage} />
           <Route path="/insert" component={InsertPostPage} />
+          <Route path="/search" component={SearchPage} />
           <Route exact path="/" component={MainPage} />
           <Route path="*" component={NotFound} />
         </Switch>

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

@@ -136,6 +136,11 @@ export const MenuBarWrraper = styled.div`
       font-size: 0.75rem;
     }
   }
+
+  .checked {
+    color: rgb(248, 249, 250);
+    background: rgb(18, 184, 134);
+  }
 `;
 
 export const UlWrapper = styled.ul`

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

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import { Link } from 'react-router-dom';
+import * as Styled from './style';
+import { htmlRemove } from '@/utils/editorUtil';
+import { makeYYMMDD } from '@/utils/dateUtil';
+
+const Item = ({ id, body, title, createdAt, commentsTotalResults }) => {
+  return (
+    <Styled.ItemBox key={id}>
+      <Link to={`/post/${id}`}>
+        <h2>{title}</h2>
+      </Link>
+      <p>{htmlRemove(body)}</p>
+      <div className="subinfo">
+        <span>{makeYYMMDD(createdAt)}</span>
+        <div className="separator">·</div>
+        {commentsTotalResults}개의 댓글
+      </div>
+    </Styled.ItemBox>
+  );
+};
+
+export default memo(Item);

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

@@ -0,0 +1,104 @@
+import React from 'react';
+import * as Styled from './style';
+import Item from './Item';
+import { SelectBox, UlWrapper } from '../../MainPage/Menu/style';
+import MenuBar from '../../MainPage/Menu/MenuBar';
+
+const Search = ({
+  list,
+  selectBoxContent,
+  isSelectOpen,
+  keyWord,
+  setIsSelectOpen,
+  handleSearchChange,
+  handleKeyWordChange,
+  handleMenubarClick,
+  children,
+}) => {
+  const { posts, state } = list || {};
+
+  const lis = [
+    {
+      id: 'title',
+      content: '제목',
+      className: keyWord === 'title' ? 'checked' : '',
+    },
+    {
+      id: 'body',
+      content: '내용',
+      className: keyWord === 'body' ? 'checked' : '',
+    },
+    {
+      id: 'tags',
+      content: '태그',
+      className: keyWord === 'tags' ? 'checked' : '',
+    },
+  ];
+
+  return (
+    <Styled.Container>
+      <Styled.InputBox>
+        <Styled.StyledSvg width="17" height="17" viewBox="0 0 17 17">
+          <path
+            fillRule="evenodd"
+            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"
+            clipRule="evenodd"
+          />
+        </Styled.StyledSvg>
+        <input
+          type="text"
+          placeholder="검색어를 입력해주세요."
+          onChange={handleSearchChange()}
+          maxLength={50}
+        />
+
+        <SelectBox id="select" onClick={handleMenubarClick}>
+          {selectBoxContent}
+          <svg
+            stroke="currentColor"
+            fill="currentColor"
+            strokeWidth="0"
+            viewBox="0 0 24 24"
+            height="1em"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M7 10l5 5 5-5z" />
+          </svg>
+        </SelectBox>
+        {isSelectOpen && (
+          <MenuBar isOpen={isSelectOpen} setIsOpen={setIsSelectOpen}>
+            <UlWrapper onClick={handleKeyWordChange}>
+              {lis.map((li, idx) => (
+                <li key={idx} id={li.id} className={li.className}>
+                  {li.content}
+                </li>
+              ))}
+            </UlWrapper>
+          </MenuBar>
+        )}
+      </Styled.InputBox>
+      {posts && (
+        <div>
+          {posts.length === 0 ? (
+            <Styled.CountBox>검색 결과가 없습니다.</Styled.CountBox>
+          ) : (
+            <>
+              <Styled.CountBox>
+                총 <b>{state.totalResults}개</b>의 포스트를 찾았습니다.
+              </Styled.CountBox>
+              <Styled.ListBox>
+                {posts.map(post => (
+                  <Item key={post.id} {...post} />
+                ))}
+                {children}
+              </Styled.ListBox>
+            </>
+          )}
+        </div>
+      )}
+    </Styled.Container>
+  );
+};
+
+export default Search;

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

@@ -0,0 +1,163 @@
+import styled from 'styled-components';
+
+export const StyledSvg = styled.svg`
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 1.25rem;
+  transition: all 0.125s ease-in 0s;
+  fill: rgb(33, 37, 41);
+  flex-shrink: 0;
+
+  ${({ theme }) => theme.main.media.tab1} {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.75rem;
+  }
+`;
+
+export const Container = styled.div`
+  margin-top: 3.5rem;
+  width: 768px;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+
+  ${({ theme }) => theme.main.media.pc1} {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  ${({ theme }) => theme.main.media.tab1} {
+    margin-top: 0.5rem;
+    width: 100%;
+  }
+`;
+
+export const InputBox = styled.div`
+  margin-bottom: 1.5rem;
+  position: relative;
+  display: flex;
+  border: 1px solid rgb(33, 37, 41);
+  -webkit-box-align: center;
+  align-items: center;
+  transition: all 0.125s ease-in 0s;
+  cursor: text;
+  height: 4rem;
+  padding: 0px 1.5rem;
+
+  input {
+    height: 100%;
+    background-color: transparent;
+    font-size: 1.5rem;
+    line-height: 2rem;
+    height: 2rem;
+    transition: all 0.125s ease-in 0s;
+    flex: 1 1 0%;
+    display: block;
+    line-height: 1rem;
+    padding: 0px;
+    border: none;
+    outline: 0px;
+    color: rgb(73, 80, 87);
+    min-width: 0px;
+
+    &::placeholder {
+      color: rgb(173, 181, 189);
+    }
+  }
+
+  ${({ theme }) => theme.main.media.tab1} {
+    height: 2.25rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+    input {
+      flex: 1 1 0%;
+      font-size: 1.125rem;
+      line-height: 1.5;
+    }
+    svg {
+      width: 1rem;
+      height: 1rem;
+      margin-right: 0.75rem;
+    }
+  }
+`;
+
+export const CountBox = styled.p`
+  margin-bottom: 4rem;
+  font-size: 1.125rem;
+  line-height: 1.5;
+  color: rgb(73, 80, 87);
+  b {
+    color: rgb(33, 37, 41);
+  }
+
+  ${({ theme }) => theme.main.media.tab1} {
+    font-size: 1rem;
+    margin-bottom: 1rem;
+  }
+`;
+
+export const ListBox = styled.div``;
+export const ItemBox = styled.div`
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+  line-height: 1.5;
+  &:first-child {
+    padding-top: 0px;
+  }
+
+  & + & {
+    border-top: 1px solid rgb(233, 236, 239);
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    margin: 0px;
+    color: rgb(33, 37, 41);
+    word-break: keep-all;
+  }
+
+  p {
+    margin-bottom: 2rem;
+    margin-top: 0.5rem;
+    font-size: 1rem;
+    color: rgb(73, 80, 87);
+    word-break: keep-all;
+    overflow-wrap: break-word;
+  }
+
+  .subinfo {
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    margin-top: 1rem;
+    color: rgb(134, 142, 150);
+    font-size: 0.875rem;
+  }
+  .separator {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  ${({ theme }) => theme.main.media.tab1} {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    h2 {
+      font-size: 1rem;
+    }
+    p {
+      font-size: 0.875rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .subinfo {
+      font-size: 0.75rem;
+    }
+  }
+`;
+
+export const SelectBox = styled.select`
+  width: 100px;
+  height: 100%;
+`;