-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: App.jsx 파일 구조 간소화 및 가독성 개선
- Loading branch information
Showing
8 changed files
with
181 additions
and
143 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,28 @@ | ||
import PropTypes from 'prop-types' | ||
|
||
export default function ArticleItem({ article, onClick }) { | ||
return ( | ||
<div | ||
className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer hover:shadow-lg transition-shadow" | ||
onClick={() => onClick(article)} | ||
> | ||
<img | ||
src={article.image} | ||
alt={article.title} | ||
className="w-full h-32 object-cover" // 높이를 조정 | ||
/> | ||
<div className="p-3"> {/* 패딩을 조정 */} | ||
<h3 className="font-medium text-sm text-gray-900">{article.title}</h3> {/* 글자 크기를 조정 */} | ||
<div | ||
className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer hover:shadow-lg transition-shadow" | ||
onClick={() => onClick(article)} | ||
> | ||
<img | ||
src={article.image} | ||
alt={article.title} | ||
className="w-full h-32 object-cover" // 높이를 조정 | ||
/> | ||
<div className="p-3"> {/* 패딩을 조정 */} | ||
<h3 className="font-medium text-sm text-gray-900">{article.title}</h3> {/* 글자 크기를 조정 */} | ||
</div> | ||
</div> | ||
</div> | ||
) | ||
} | ||
} | ||
|
||
ArticleItem.propTypes = { | ||
article: PropTypes.shape({ | ||
id: PropTypes.number.isRequired, | ||
title: PropTypes.string.isRequired, | ||
image: PropTypes.string.isRequired, | ||
}).isRequired, | ||
onClick: PropTypes.func.isRequired, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,31 @@ | ||
import PropTypes from 'prop-types' | ||
import ArticleItem from './ArticleItem' | ||
import Pagination from './Pagination' | ||
|
||
export default function ArticleList({ articles, onArticleSelect }) { | ||
return ( | ||
<div className="space-y-6"> | ||
<div className="grid grid-cols-2 gap-4"> | ||
{articles.map((article) => ( | ||
<ArticleItem | ||
key={article.id} | ||
article={article} | ||
onClick={onArticleSelect} | ||
/> | ||
))} | ||
</div> | ||
<Pagination /> | ||
</div> | ||
) | ||
return ( | ||
<div className="space-y-6"> | ||
<div className="grid grid-cols-2 gap-4"> | ||
{articles.map((article) => ( | ||
<ArticleItem | ||
key={article.id} | ||
article={article} | ||
onClick={onArticleSelect} | ||
/> | ||
))} | ||
</div> | ||
<Pagination /> | ||
</div> | ||
) | ||
} | ||
|
||
ArticleList.propTypes = { | ||
articles: PropTypes.arrayOf( | ||
PropTypes.shape({ | ||
id: PropTypes.number.isRequired, | ||
title: PropTypes.string.isRequired, | ||
image: PropTypes.string.isRequired, | ||
}) | ||
).isRequired, | ||
onArticleSelect: PropTypes.func.isRequired, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,17 @@ | ||
import { ChevronLeft, ChevronRight } from 'lucide-react' | ||
|
||
export default function Pagination() { | ||
return ( | ||
<div className="flex items-center justify-center gap-2 mt-8"> | ||
<button className="p-2 rounded-full bg-gray-100 hover:bg-gray-200"> | ||
<ChevronLeft className="h-5 w-5" /> | ||
</button> | ||
<button className="w-10 h-10 rounded-full bg-blue-600 text-white">1</button> | ||
<button className="w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200">2</button> | ||
<button className="w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200">3</button> | ||
<button className="p-2 rounded-full bg-gray-100 hover:bg-gray-200"> | ||
<ChevronRight className="h-5 w-5" /> | ||
</button> | ||
</div> | ||
) | ||
return ( | ||
<div className="flex items-center justify-center gap-2 mt-8"> | ||
<button className="p-2 rounded-full bg-gray-100 hover:bg-gray-200"> | ||
<ChevronLeft className="h-5 w-5" /> | ||
</button> | ||
<button className="w-10 h-10 rounded-full bg-blue-600 text-white">1</button> | ||
<button className="w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200">2</button> | ||
<button className="w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200">3</button> | ||
<button className="p-2 rounded-full bg-gray-100 hover:bg-gray-200"> | ||
<ChevronRight className="h-5 w-5" /> | ||
</button> | ||
</div> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,53 @@ | ||
import PropTypes from 'prop-types' | ||
|
||
export default function SelectedArticle({ article }) { | ||
if (!article) return null | ||
|
||
return ( | ||
<div className="bg-white rounded-lg shadow-lg p-6"> | ||
<div className="relative"> | ||
<span className="absolute top-4 left-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium"> | ||
본석 페이지 | ||
</span> | ||
<img | ||
src={article.image} | ||
alt={article.title} | ||
className="w-full h-[400px] object-cover rounded-lg" | ||
/> | ||
<div className="absolute top-4 right-4 bg-pink-500 rounded-full w-20 h-20 flex items-center justify-center"> | ||
<span className="text-white text-2xl font-bold">{article.trustScore}%</span> | ||
</div> | ||
<div className="bg-white rounded-lg shadow-lg p-6"> | ||
<div className="relative"> | ||
<span className="absolute top-4 left-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium"> | ||
본석 페이지 | ||
</span> | ||
<img | ||
src={article.image} | ||
alt={article.title} | ||
className="w-full h-[400px] object-cover rounded-lg" | ||
/> | ||
<div className="absolute top-4 right-4 bg-pink-500 rounded-full w-20 h-20 flex items-center justify-center"> | ||
<span className="text-white text-2xl font-bold">{article.trustScore}%</span> | ||
</div> | ||
</div> | ||
<div className="mt-6"> | ||
<div className="flex items-center gap-4 text-sm text-gray-600 mb-2"> | ||
<span>{article.author}</span> | ||
<span>{article.date}</span> | ||
<span>{article.source}</span> | ||
</div> | ||
<h1 className="text-2xl font-bold mb-4">{article.title}</h1> | ||
<p className="text-gray-700">{article.content}</p> | ||
<div className="flex gap-4 mt-6"> | ||
<button className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200"> | ||
Share | ||
</button> | ||
<button className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200"> | ||
Save | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="mt-6"> | ||
<div className="flex items-center gap-4 text-sm text-gray-600 mb-2"> | ||
<span>{article.author}</span> | ||
<span>{article.date}</span> | ||
<span>{article.source}</span> | ||
</div> | ||
<h1 className="text-2xl font-bold mb-4">{article.title}</h1> | ||
<p className="text-gray-700">{article.content}</p> | ||
<div className="flex gap-4 mt-6"> | ||
<button className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200"> | ||
Share | ||
</button> | ||
<button className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200"> | ||
Save | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
) | ||
} | ||
} | ||
|
||
SelectedArticle.propTypes = { | ||
article: PropTypes.shape({ | ||
id: PropTypes.number.isRequired, | ||
title: PropTypes.string.isRequired, | ||
image: PropTypes.string.isRequired, | ||
content: PropTypes.string.isRequired, | ||
trustScore: PropTypes.number.isRequired, | ||
author: PropTypes.string.isRequired, | ||
date: PropTypes.string.isRequired, | ||
source: PropTypes.string.isRequired, | ||
}).isRequired, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,42 +1,42 @@ | ||
export const articles = [ | ||
{ | ||
id: 1, | ||
title: "Gisèle Pelicot takes stand in French mass rape trial", | ||
image: "/news1.png", | ||
content: "Gisèle Pelicot, the French woman whose former husband is on trial for drugging and raping her when they were married, and inviting dozens of other men to rape her, took the stand in court on Wednesday.", | ||
trustScore: 52, | ||
author: "Laura Gozzi", | ||
date: "2 days ago", | ||
source: "BBC News" | ||
id: 1, | ||
title: "Gisèle Pelicot takes stand in French mass rape trial", | ||
image: "/news1.png", | ||
content: "Gisèle Pelicot, the French woman whose former husband is on trial for drugging and raping her when they were married, and inviting dozens of other men to rape her, took the stand in court on Wednesday.", | ||
trustScore: 52, | ||
author: "Laura Gozzi", | ||
date: "2 days ago", | ||
source: "BBC News" | ||
}, | ||
{ | ||
id: 2, | ||
title: "What are Israel's Iron Dome, David's Sling and Arrow missile defences?", | ||
image: "/news2.png", | ||
content: "Details about Israel's missile defense systems...", | ||
trustScore: 78, | ||
author: "John Doe", | ||
date: "1 day ago", | ||
source: "Defense News" | ||
id: 2, | ||
title: "What are Israel's Iron Dome, David's Sling and Arrow missile defences?", | ||
image: "/news2.png", | ||
content: "Details about Israel's missile defense systems...", | ||
trustScore: 78, | ||
author: "John Doe", | ||
date: "1 day ago", | ||
source: "Defense News" | ||
}, | ||
{ | ||
id: 3, | ||
title: "New environmental policies announced by UN", | ||
image: "/news3.png", | ||
content: "The United Nations has announced new environmental policies...", | ||
trustScore: 85, | ||
author: "Jane Smith", | ||
date: "3 days ago", | ||
source: "UN News" | ||
id: 3, | ||
title: "New environmental policies announced by UN", | ||
image: "/news3.png", | ||
content: "The United Nations has announced new environmental policies...", | ||
trustScore: 85, | ||
author: "Jane Smith", | ||
date: "3 days ago", | ||
source: "UN News" | ||
}, | ||
{ | ||
id: 4, | ||
title: "Global markets react to tech innovations", | ||
image: "/news4.png", | ||
content: "Global financial markets are showing significant movement in response to recent technological breakthroughs...", | ||
trustScore: 67, | ||
author: "Alex Johnson", | ||
date: "12 hours ago", | ||
source: "Financial Times" | ||
id: 4, | ||
title: "Global markets react to tech innovations", | ||
image: "/news4.png", | ||
content: "Global financial markets are showing significant movement in response to recent technological breakthroughs...", | ||
trustScore: 67, | ||
author: "Alex Johnson", | ||
date: "12 hours ago", | ||
source: "Financial Times" | ||
} | ||
]; | ||
]; |