Skip to content

Commit

Permalink
refactor: App.jsx 파일 구조 간소화 및 가독성 개선
Browse files Browse the repository at this point in the history
  • Loading branch information
rokaf6444 committed Nov 20, 2024
1 parent e69c253 commit ffc4a45
Show file tree
Hide file tree
Showing 8 changed files with 181 additions and 143 deletions.
7 changes: 3 additions & 4 deletions react-app/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions react-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"dependencies": {
"lucide-react": "^0.460.0",
"prop-types": "^15.8.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.28.0"
Expand Down
37 changes: 24 additions & 13 deletions react-app/src/components/articles/ArticleItem.jsx
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,
}
40 changes: 26 additions & 14 deletions react-app/src/components/articles/ArticleList.jsx
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,
}
26 changes: 13 additions & 13 deletions react-app/src/components/articles/Pagination.jsx
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>
)
}
81 changes: 48 additions & 33 deletions react-app/src/components/articles/SelectedArticle.jsx
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,
}
66 changes: 33 additions & 33 deletions react-app/src/components/layout/Navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,40 @@ import { Search, Menu, Bell } from 'lucide-react'
import { Link } from 'react-router-dom'

export default function Navbar() {
return (
<nav className="sticky top-0 z-50 w-full bg-[#0A192F] text-white shadow-lg">
<div className="container mx-auto px-4">
<div className="flex h-16 items-center justify-between">
<div className="flex items-center gap-6">
<Menu className="h-6 w-6" />
<h1 className="text-2xl font-bold">Identified Articles</h1>
</div>
return (
<nav className="sticky top-0 z-50 w-full bg-[#0A192F] text-white shadow-lg">
<div className="container mx-auto px-4">
<div className="flex h-16 items-center justify-between">
<div className="flex items-center gap-6">
<Menu className="h-6 w-6" />
<h1 className="text-2xl font-bold">Identified Articles</h1>
</div>

<div className="flex-1 max-w-2xl mx-6">
<div className="relative">
<input
type="text"
placeholder="Search articles..."
className="w-full px-4 py-2 rounded-full bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<Search className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/50" />
</div>
</div>
<div className="flex-1 max-w-2xl mx-6">
<div className="relative">
<input
type="text"
placeholder="Search articles..."
className="w-full px-4 py-2 rounded-full bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<Search className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/50" />
</div>
</div>

<div className="flex items-center gap-6">
<Link to="/scrap" className="text-white hover:text-blue-300">
Scrap
</Link>
<Link to="/analyze" className="text-white hover:text-blue-300">
Analyze Chart
</Link>
<Bell className="h-6 w-6" />
<div className="relative w-10 h-10 rounded-full overflow-hidden bg-gray-300">
<img src="/placeholder.svg?height=40&width=40" alt="User Avatar" className="w-full h-full object-cover" />
<div className="flex items-center gap-6">
<Link to="/scrap" className="text-white hover:text-blue-300">
Scrap
</Link>
<Link to="/analyze" className="text-white hover:text-blue-300">
Analyze Chart
</Link>
<Bell className="h-6 w-6" />
<div className="relative w-10 h-10 rounded-full overflow-hidden bg-gray-300">
<img src="/placeholder.svg?height=40&width=40" alt="User Avatar" className="w-full h-full object-cover" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
)
</nav>
)
}
66 changes: 33 additions & 33 deletions react-app/src/data/articles.js
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"
}
];
];

0 comments on commit ffc4a45

Please sign in to comment.