[design] 판별된 기사 목록 페이지 퍼블리싱 (#18)

* design: 판별된 기사 목록 페이지 구현

* refactor: App.jsx 파일 구조 간소화 및 가독성 개선

* fix: 이미지 표시 문제 해결

* refactor: Navbar 통일

.github/workflows/ci.yml

@@ -51,7 +51,9 @@ jobs:
             #     git diff-index --quiet HEAD || git commit -m "chore: format code with Prettier"
 
             # 8. ESLint 실행
-
+            #- name: Run ESLint
+            #  working-directory: react-app
+            #  run: npm run lint  # ESLint를 실행하는 스크립트를 `package.json`에 설정
 
             # 9. 빌드 실행
             - name: Build project

react-app/package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "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",

react-app/src/App.jsx

@@ -1,13 +1,14 @@
-// src/App.jsx
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import OnboardingPage from './pages/OnboardingPage';
+import IdentifiedArticlesPage from './pages/IdentifiedArticlesPage';
 
 export default function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<OnboardingPage />} />
+        <Route path="/OnboardingPage" element={<OnboardingPage />} />
+        <Route path="/IdentifiedArticlesPage" element={<IdentifiedArticlesPage />} />
       </Routes>
     </Router>
   );

react-app/src/components/articles/ArticleItem.jsx

@@ -0,0 +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>
+        </div>
+    )
+}
+
+ArticleItem.propTypes = {
+    article: PropTypes.shape({
+        id: PropTypes.number.isRequired,
+        title: PropTypes.string.isRequired,
+        image: PropTypes.string.isRequired,
+    }).isRequired,
+    onClick: PropTypes.func.isRequired,
+}

react-app/src/components/articles/ArticleList.jsx

@@ -0,0 +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>
+    )
+}
+
+ArticleList.propTypes = {
+    articles: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.number.isRequired,
+            title: PropTypes.string.isRequired,
+            image: PropTypes.string.isRequired,
+        })
+    ).isRequired,
+    onArticleSelect: PropTypes.func.isRequired,
+}

react-app/src/components/articles/Pagination.jsx

@@ -0,0 +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>
+    )
+}

react-app/src/components/articles/SelectedArticle.jsx

@@ -0,0 +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>
+            <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,
+}

react-app/src/components/layout/Navbar.jsx

@@ -0,0 +1,41 @@
+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>
+
+                    <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>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    )
+}

react-app/src/data/articles.js

@@ -0,0 +1,47 @@
+import IdentifiedArticlesPage1 from '../assets/images/IdentifiedArticlesPage1.png'
+import IdentifiedArticlesPage2 from '../assets/images/IdentifiedArticlesPage2.png'
+import IdentifiedArticlesPage3 from '../assets/images/IdentifiedArticlesPage3.png'
+import IdentifiedArticlesPage4 from '../assets/images/IdentifiedArticlesPage4.png'
+
+export const articles = [
+    {
+        id: 1,
+        title: "Gisèle Pelicot takes stand in French mass rape trial",
+        image: IdentifiedArticlesPage1,
+        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: IdentifiedArticlesPage2,
+        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: IdentifiedArticlesPage3,
+        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: IdentifiedArticlesPage4,
+        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"
+    }
+];

react-app/src/index.css

@@ -1,13 +1,19 @@
-/* src/index.css */
 @import url('https://fonts.googleapis.com/css2?family=Amethysta&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* 전역 스타일 */
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
 body {
-  font-family: 'Amethysta', serif;
   margin: 0;
-  background-color: #F1F0F0;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: #ebebeb;
+  font-family: 'Amethysta', serif;
 }

react-app/src/pages/IdentifiedArticlesPage.jsx

@@ -0,0 +1,23 @@
+import { useState } from 'react'
+import Navbar from '../components/layout/Navbar'
+import SelectedArticle from '../components/articles/SelectedArticle'
+import ArticleList from '../components/articles/ArticleList'
+import { articles } from '../data/articles'
+
+export default function IdentifiedArticlesPage() {
+    const [selectedArticle, setSelectedArticle] = useState(articles[0])
+
+    return (
+        <div className="min-h-screen bg-[#f0f4f8]">
+            <Navbar />
+            <main className="container mx-auto px-4 py-8">
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <div className="lg:col-span-2">
+                        <SelectedArticle article={selectedArticle} />
+                    </div>
+                    <ArticleList articles={articles} onArticleSelect={setSelectedArticle} />
+                </div>
+            </main>
+        </div>
+    )
+}

react-app/src/pages/OnBoardingPage.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
-import Header from '../components/Header';
+// import Header from '../components/layout/Header';
+import Navbar from '../components/layout/Navbar'
 import AnalysisChart from '../components/AnalysisChart';
 import styles from './OnBoardingPage.module.css';
 import OnBoardingObject from '../assets/images/OnBoardingObject.png';
 
+
 export default function OnBoardingPage() {
   return (
     <div>
       {/* 헤더 */}
-      <Header />
+      <Navbar />
 
       {/* 차트 섹션 */}
       <section className={styles['chart-section']}>