Skip to content

Commit

Permalink
Merge pull request #44 from Lee-Na-eun/feat/newMoreBtn.js
Browse files Browse the repository at this point in the history
[Client] / #8 / SearchResult.js : 새로 만들기 및 더보기 페이지 이동 버튼 만들기
  • Loading branch information
minjman2659 authored Aug 27, 2021
2 parents d5b048e + d5db368 commit 25ea786
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 70 deletions.
158 changes: 98 additions & 60 deletions client/src/comp/SearchResult.js
Original file line number Diff line number Diff line change
@@ -1,65 +1,103 @@
import React from "react";
import styled from "styled-components";
import empty from "../empty.png"
import empty from "../empty.png";

function SearchResult({data}){
// let result = data.sort((a,b)=>a.thumbsup-b.thumbsup).reverse().slice(0,3)
let result = []
const ResultList = styled.ul`
margin-top:20px;
width:75%;
margin: 0 auto;
display:flex;
flex-direction:column;
li{
display:flex;
height:8vh;
margin-top:2vh;
border:2px solid #000;
border-radius:40px;
text-align:center;
line-height:8vh;
background-color:#ffff8d;
p{
flex:1 1 auto
}
p:nth-child(2){
flex: 3 1 auto
}
}
li:nth-child(1){
margin-top:0px;
}
`
const EmptyResult = styled.div`
text-align:center;
> img{
width:20vh;
height:20vh;
}
`
return(
<>
{result.length===0?
<EmptyResult>
<img src={empty} alt="empty"/>
<p>검색 결과가 없습니다.</p>
</EmptyResult>
:
<ResultList>
{result.map((ele,idx)=>{
return (
<li key={idx}>
<p>{ele.wordName}</p>
<p>{ele.wordMean}</p>
<p>{ele.thumbsup}</p>
</li>
)
})}
</ResultList>
}
</>
)
function SearchResult({ data }) {
let result = data
.sort((a, b) => a.thumbsup - b.thumbsup)
.reverse()
.slice(0, 3);
//let result = [];
const ResultList = styled.ul`
margin-top: 20px;
width: 75%;
margin: 0 auto;
display: flex;
flex-direction: column;
li {
display: flex;
height: 8vh;
margin-top: 2vh;
border: 2px solid #000;
border-radius: 40px;
text-align: center;
line-height: 8vh;
background-color: #ffff8d;
p {
flex: 1 1 auto;
}
p:nth-child(2) {
flex: 3 1 auto;
}
}
li:nth-child(1) {
margin-top: 0px;
}
`;
const EmptyResult = styled.div`
text-align: center;
> img {
width: 20vh;
height: 20vh;
}
`;
const BtnWrap = styled.div`
width: 30%;
margin: 3% auto;
`;
const NewMoreBtn = styled.button`
width: 15vh;
height: 5vh;
border-radius: 5vh;
border: 2px solid black;
background-color: black;
color: white;
margin-left: 10%;
font-size: 0.8rem;
transition: 0.2s;
:hover {
background-color: white;
color: black;
cursor: pointer;
}
`;

return (
<>
{result.length === 0 ? (
<div>
<EmptyResult>
<img src={empty} alt="empty" />
<p>검색 결과가 없습니다.</p>
</EmptyResult>

<BtnWrap>
<NewMoreBtn>새로 만들기</NewMoreBtn>
<NewMoreBtn>더보기</NewMoreBtn>
</BtnWrap>
</div>
) : (
<div>
<ResultList>
{result.map((ele, idx) => {
return (
<li key={idx}>
<p>{ele.wordName}</p>
<p>{ele.wordMean}</p>
<p>{ele.thumbsup}</p>
</li>
);
})}
</ResultList>

<BtnWrap>
<NewMoreBtn>새로 만들기</NewMoreBtn>
<NewMoreBtn>더보기</NewMoreBtn>
</BtnWrap>
</div>
)}
</>
);
}

export default SearchResult;
export default SearchResult;
20 changes: 10 additions & 10 deletions client/src/pages/Search.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import SearchInput from "../comp/SearchInput"
import SearchResult from "../comp/SearchResult"
import SearchInput from "../comp/SearchInput";
import SearchResult from "../comp/SearchResult";
import dummyData from "../dummy/dummyData";

function Search (){
return(
<section>
<SearchInput />
<SearchResult data={dummyData.word}/>
</section>
)
function Search() {
return (
<section>
<SearchInput />
<SearchResult data={dummyData.word} />
</section>
);
}

export default Search;
export default Search;

0 comments on commit 25ea786

Please sign in to comment.