14.4 ui 만들기

news-viewer/package.json

@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.0.0-rc.6",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

news-viewer/src/App.js

@@ -1,29 +1,35 @@
 import { useState } from 'react';
 import axios from 'axios';
 import newsjson from './news'
+import NewsList from './components/NewsList';
+
 const App = () => {
-	const [data, setData] = useState(null);
-	const onClick = async () => {
-		try{
-			// const response = await axios.get(
-			// 	'https://newsapi.org/v2/top-headlines?country=kr&apiKey=8378a7d0ee24456ba337d378adde3f51',
-			// );
-			// setData(response.data);
-			setData(newsjson)
-		}catch(e){
-			console.log(e);
-		}
-	};
-
-	return(
-		<div>
-			<div>
-				<button onClick={onClick}>불러오기</button>
-			</div>
-			{data && <textarea rows={7} value={JSON.stringify(data, null, 2)} readOnly={true} />}
-
-		</div>
-	);
+	return <NewsList/>;
 };
 
-export default App;
+export default App;
+
+// const App = () => {
+// 	const [data, setData] = useState(null);
+// 	const onClick = async () => {
+// 		try{
+// 			// const response = await axios.get(
+// 			// 	'https://newsapi.org/v2/top-headlines?country=kr&apiKey=8378a7d0ee24456ba337d378adde3f51',
+// 			// );
+// 			// setData(response.data);
+// 			setData(newsjson)
+// 		}catch(e){
+// 			console.log(e);
+// 		}
+// 	};
+
+// 	return(
+// 		<div>
+// 			<div>
+// 				<button onClick={onClick}>불러오기</button>
+// 			</div>
+// 			{data && <textarea rows={7} value={JSON.stringify(data, null, 2)} readOnly={true} />}
+
+// 		</div>
+// 	);
+// };

news-viewer/src/components/NewsItem.js

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+const NewsItemBlock = styled.div`
+	display: flex;
+	.thumbnail{
+		margin-right:1rem;
+		img{
+			display: block;
+			width: 160px;
+			height: 100px;
+			object-fit: cover;
+		}
+	}
+	.contents{
+		h2{
+			margin: 0;
+			a{
+				color:black;
+			}	
+		}
+		p{
+			margin:0;
+			line-height:1.5;
+			margin-top:0.5rem;
+			white-space:normal;
+		}
+	}
+	& + &{
+		margin-top: 3rem;
+	}
+`
+
+const NewsItem = ({ article }) => {
+	const {title, description, url, urlToImage} = article;
+
+	return(
+		<NewsItemBlock>
+			{urlToImage && (
+				<div className = "thumbnail">
+					<a href={url} target="_blank" rel="noopener noreferrer">
+						<img src = {urlToImage} alt="thumbnail"/>
+					</a>
+				</div>
+			)}
+			<div className="contents">
+				<h2>
+					<a href={url} target="_blank" rel="noopener noreferrer">
+						{title}
+					</a>
+				</h2>
+				<p>{description}</p>
+			</div>
+		</NewsItemBlock>
+
+	)
+}
+
+export default NewsItem;

news-viewer/src/components/NewsList.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import NewsItem from './NewsItem'
+
+const NewsListBlock = styled.div`
+	box-sizing: border-box;
+	padding-bottom: 3rem;
+	width: 768px;
+	margin: 0 auto;
+	margin-top: 2rem;
+	@media screen and (max-width: 768px){
+		width: 100%;
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+`
+const sampleActicle ={
+	title: '제목',
+	description: '내용',
+	url: 'https://google.com',
+	urlToImage: 'https://via.placeholder.com/160',
+};
+
+const NewsList = () => {
+	return(
+		<NewsListBlock>
+			<NewsItem article={sampleActicle} />
+			<NewsItem article={sampleActicle} />
+			<NewsItem article={sampleActicle} />
+			<NewsItem article={sampleActicle} />
+			<NewsItem article={sampleActicle} />
+			<NewsItem article={sampleActicle} />
+			<NewsItem article={sampleActicle} />
+			<NewsItem article={sampleActicle} />
+
+		</NewsListBlock>	
+	)
+}
+
+export default NewsList;