-
-
-
- Identified Articles
-
+ return (
+
+
+ );
}
diff --git a/react-app/src/components/news/NewsCard.jsx b/react-app/src/components/news/NewsCard.jsx
deleted file mode 100644
index c5f1ea8..0000000
--- a/react-app/src/components/news/NewsCard.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-// 개별 뉴스 기사 카드 형태 표시
-// path: components/news/NewsCard.jsx
-
-// src/components/news/NewsCard.jsx
-
-import { Bookmark } from 'lucide-react';
-
-export default function NewsCard({ article, onBookmark, isBookmarked }) {
- const { id, title, imageUrl, category } = article;
-
- return (
-
-
-
-
-
-
-
-
-
- {category}
-
-
-
{title}
-
-
- );
-}
-
diff --git a/react-app/src/components/news/NewsList.jsx b/react-app/src/components/news/NewsList.jsx
deleted file mode 100644
index 36fd485..0000000
--- a/react-app/src/components/news/NewsList.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-// path: src/components/news/NewsList.jsx
-import NewsCard from '@/components/news/NewsCard';
-import { articles } from '@/data/articles';
-
-export default function NewsList({ bookmarkedIds, handleBookmark }) {
- return (
-
- {articles.map((article) => (
-
- ))}
-
- );
-}
diff --git a/react-app/src/data/articles.js b/react-app/src/data/articles.js
index c4d316c..64d9485 100644
--- a/react-app/src/data/articles.js
+++ b/react-app/src/data/articles.js
@@ -1,47 +1,82 @@
-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'
+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"
- }
+ {
+ 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",
+ },
+ {
+ id: 5,
+ 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: 6,
+ 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: 7,
+ 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",
+ },
];
diff --git a/react-app/src/pages/ScrapPage.jsx b/react-app/src/pages/ScrapPage.jsx
index 4d95259..bf279c4 100644
--- a/react-app/src/pages/ScrapPage.jsx
+++ b/react-app/src/pages/ScrapPage.jsx
@@ -1,33 +1,66 @@
-// src/pages/ScrapPage.jsx
+import { useState, useEffect } from "react";
+import BookmarkedArticleList from "../components/bookmark/BookmarkedArticleList";
+import Navbar from "../components/layout/Navbar";
+import { articles } from "../data/articles"; // Mock 데이터를 import
-import NewsCard from '@/components/news/NewsCard';
-import { articles } from '@/data/articles';
+export default function ScrapPage() {
+ const [bookmarkedArticles, setBookmarkedArticles] = useState([]);
+ const [bookmarkedIds, setBookmarkedIds] = useState([]);
-export default function ScrapPage({ bookmarkedIds, handleBookmark }) {
- const bookmarkedArticles = articles.filter(article => bookmarkedIds.includes(article.id));
+ useEffect(() => {
+ // 로컬 스토리지에서 북마크 ID 로드
+ localStorage.setItem(
+ "bookmarkedIds",
+ JSON.stringify([1, 2, 3, 4, 5, 6, 7])
+ ); // 초기 북마크 설정
+ const storedIds = JSON.parse(localStorage.getItem("bookmarkedIds")) || [];
+ setBookmarkedIds(storedIds);
- if (bookmarkedArticles.length === 0) {
- return (
-
-
Scrap Page
-
북마크된 기사가 없습니다.
-
+ // 북마크된 기사 필터링
+ const filteredArticles = articles.filter((article) =>
+ storedIds.includes(article.id)
+ );
+ setBookmarkedArticles(filteredArticles);
+ }, []);
+
+ const handleBookmark = (id) => {
+ // 북마크 제거
+ const updatedIds = bookmarkedIds.filter(
+ (bookmarkedId) => bookmarkedId !== id
);
- }
+ setBookmarkedIds(updatedIds);
+ localStorage.setItem("bookmarkedIds", JSON.stringify(updatedIds));
+
+ // 북마크 리스트 업데이트
+ setBookmarkedArticles((prevArticles) =>
+ prevArticles.filter((article) => article.id !== id)
+ );
+ };
+
+ const handleArticleSelect = (article) => {
+ console.log("Selected article:", article);
+ };
return (
-
-
북마크된 뉴스
-
- {bookmarkedArticles.map((article) => (
-
- ))}
+ <>
+
+
+ {bookmarkedArticles.length === 0 ? (
+ <>
+
Scrap Page
+
No bookmarked articles.
+
+ ) : (
+ <>
+
Bookmarked News
+
+
+ )}
-
+
);
}
+ {/* 배경 그라데이션 */}
+
+ {/* 북마크 버튼 */}
+
+