감사합니다 이제 401은 사라졌는데…
아무 반응이 일어나지가 않습니다. ㅠ
import React from "react";
import styled from 'styled-components';
const NewsItem = props => {
return (
<ItemContainer>
<ItemData>
<Title>{props.title}</Title>
<ItemContents>{props.contents}</ItemContents>
<ItemUrl href={props.url}>링크 바로가기</ItemUrl>
<ItemDatetime>{props.datetime}</ItemDatetime>
</ItemData>
</ItemContainer>
);
};
export default NewsItem;
const ItemContainer = styled.div`
list-style-type: none;
border: 1px solid #dddddd;
padding: 3rem;
`;
const ItemData = styled.div`
display: flex;
flex-direction: column;
`;
const Title = styled.div`
font-size: 1rem;
`;
const ItemContents = styled.div`
`;
const ItemUrl = styled.div`
`;
const ItemDatetime = styled.div`
`;
import React, { useEffect, useState } from "react";
import { newsSearch } from "../components/News/Newsapi";
import NewsItem from "../components/News/NewsItem";
import styled from 'styled-components';
const NewsPage = props => {
const [news, setNews] = useState([]);
const [text, setText] = useState("");
const [query, setQuery] = useState("");
useEffect(() => {
if (query.length > 0) {
newsSearchHttpHandler(query, true);
}
}, [query]);
// 엔터를 눌렀을 때 호출 되는 함수
const onEnter = e => {
if (e.keyCode === 13) {
setQuery(text);
}
};
// text 검색어가 바뀔 때 호출되는 함수.
const onTextUpdate = e => {
setText(e.target.value);
};
const newsSearchHttpHandler = async (query, reset) => {
const params = {
query, // 검색을 원하는 질의어
sort: "accuracy", // 결과 문서 정렬 방식, accuracy(정확도순) 또는 recency(최신순), 기본 값 accuracy
page: 1, // 결과 페이지 번호, 1~50 사이의 값, 기본 값 1
size: 10 // 한 페이지에 보여질 문서 수, 1~50 사이의 값, 기본 값 10
};
const { data } = await newsSearch(params);
if (reset) {
setNews(data.documents);
} else {
setNews(news.concat(data.documents));
}
};
return (
<NewsContainer>
<NewsAContainer>
<NewsInput
type="search"
placeholder="검색어를 입력 하세요..."
name="query"
onKeyDown={onEnter} // enter
onChange={onTextUpdate} // change
value={text}/>
</NewsAContainer>
<NewsBContainer>
{news.map((news, index) => (
<NewsItem
key={index}
title={news.title}
url={news.url}
datetime={news.datetime}
/>
))}
</NewsBContainer>
</NewsContainer>
);
};
export default NewsPage;
const NewsContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
const NewsAContainer= styled.div`
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 5rem;
`;
const NewsBContainer = styled.div`
display: grid;
padding: 4rem;
width: 80rem;
margin: auto;
grid-gap: 1rem;
grid-template-columns: repeat(1, 1fr);
`;
const NewsInput = styled.input`
margin-top: 4rem;
font-size: 3rem;
border: 0;
border-bottom: 1px solid #dddddd;
width: 40rem;
padding: 3px;
display: block;
transition: border 0.3s;
`;
무엇이 문제 일까요…?
