feat : 페이지 라우팅

react-app/src/App.jsx

@@ -1,30 +1,56 @@
 // src/App.jsx
-import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
-import HomePage from './pages/HomePage'
-import AboutPage from './pages/AboutPage'
 
-function App() {
+import { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Navbar from '@/components/layout/Navbar';
+import HomePage from '@/pages/HomePage';
+import AboutPage from '@/pages/AboutPage';
+import ScrapPage from '@/pages/ScrapPage';
+
+export default function App() {
+  const [bookmarkedIds, setBookmarkedIds] = useState([]);
+
+  // 로컬 스토리지에서 북마크된 기사 ID 불러오기
+  useEffect(() => {
+    const storedBookmarks = localStorage.getItem('bookmarkedIds');
+    if (storedBookmarks) {
+      setBookmarkedIds(JSON.parse(storedBookmarks));
+    }
+  }, []);
+
+  // 북마크 상태 변경 시 로컬 스토리지에 저장
+  useEffect(() => {
+    localStorage.setItem('bookmarkedIds', JSON.stringify(bookmarkedIds));
+  }, [bookmarkedIds]);
+
+  const handleBookmark = (id) => {
+    setBookmarkedIds(prevIds => 
+      prevIds.includes(id) ? prevIds.filter(bookmarkId => bookmarkId !== id) : [...prevIds, id]
+    );
+  };
+
   return (
     <Router>
-      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
-        {/* 네비게이션 메뉴 */}
-        <nav className="mb-8">
-          <Link to="/" className="mx-4 text-blue-500 hover:underline">
-            Home
-          </Link>
-          <Link to="/about" className="mx-4 text-blue-500 hover:underline">
-            About
-          </Link>
-        </nav>
-
-        {/* 라우트 설정 */}
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/about" element={<AboutPage />} />
-        </Routes>
+      <div className="min-h-screen bg-[#F8F9FA]">
+        <Navbar />
+        <main>
+          <Routes>
+            <Route 
+              path="/" 
+              element={<HomePage bookmarkedIds={bookmarkedIds} handleBookmark={handleBookmark} />} 
+            />
+            <Route 
+              path="/about" 
+              element={<AboutPage />} 
+            />
+            <Route 
+              path="/scrap" 
+              element={<ScrapPage bookmarkedIds={bookmarkedIds} handleBookmark={handleBookmark} />} 
+            />
+            {/* 추가적인 라우트를 여기에 정의할 수 있습니다. */}
+          </Routes>
+        </main>
       </div>
     </Router>
-  )
+  );
 }
-
-export default App

react-app/src/index.css

@@ -1,4 +1,4 @@
-/* index.css */
+/* index.css
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -70,4 +70,57 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
+} */
+
+/* path: index.css */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
 }

react-app/src/pages/AboutPage.jsx

@@ -1,12 +1,11 @@
 // src/pages/AboutPage.jsx
 export default function AboutPage() {
     return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-green-100">
-        <h1 className="text-4xl font-bold">About Us</h1>
-        <p className="mt-4 text-gray-700">
-            This is the About page created with Tailwind CSS.
+      <div className="container mx-auto px-4 py-8">
+        <h2 className="text-2xl font-semibold mb-4">About Us</h2>
+        <p className="text-gray-700">
+          Welcome to Newsy! We provide the latest news articles across various categories.
         </p>
-    </div>
-    )
-}
-
+      </div>
+    );
+  }

react-app/src/pages/HomePage.jsx

@@ -1,44 +1,12 @@
 // src/pages/HomePage.jsx
-import reactLogo from '../assets/react.svg'
-import viteLogo from '/vite.svg'
-import { useState } from 'react'
 
-export default function HomePage() {
-    const [count, setCount] = useState(0)
+import NewsList from '@/components/news/NewsList';
 
-    return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-        <header className="flex space-x-4">
-            <a href="https://vite.dev" target="_blank" rel="noopener noreferrer">
-            <img src={viteLogo} className="w-24 h-24" alt="Vite logo" />
-            </a>
-            <a href="https://react.dev" target="_blank" rel="noopener noreferrer">
-            <img src={reactLogo} className="w-24 h-24" alt="React logo" />
-            </a>
-        </header>
-
-        <main className="text-center mt-8">
-        <h1 className="text-4xl font-bold">Welcome to Vite + React + Tailwind</h1>
-        <p className="mt-4 text-gray-600">
-            This is a simple page created with Tailwind CSS in React.
-        </p>
-
-        <div className="mt-8 p-6 bg-white rounded shadow-lg">
-            <button
-            onClick={() => setCount(count + 1)}
-            className="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600"
-            >
-            Count is {count}
-            </button>
-            <p className="mt-4 text-gray-700">
-            Click the button to increase the count.
-            </p>
-        </div>
-        </main>
-
-        <footer className="mt-12 text-gray-500 text-sm">
-            <p>Click on the logos above to learn more about Vite and React.</p>
-        </footer>
-        </div>
-    )
+export default function HomePage({ bookmarkedIds, handleBookmark }) {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h2 className="text-2xl font-semibold mb-6">Latest News</h2>
+      <NewsList bookmarkedIds={bookmarkedIds} handleBookmark={handleBookmark} />
+    </div>
+  );
 }

react-app/src/pages/ScrapPage.jsx

@@ -1 +1,33 @@
-// 스크랩한 기사 페이지를 구성
+// src/pages/ScrapPage.jsx
+
+import NewsCard from '@/components/news/NewsCard';
+import { articles } from '@/data/articles';
+
+export default function ScrapPage({ bookmarkedIds, handleBookmark }) {
+  const bookmarkedArticles = articles.filter(article => bookmarkedIds.includes(article.id));
+
+  if (bookmarkedArticles.length === 0) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <h2 className="text-2xl font-semibold mb-4">Scrap Page</h2>
+        <p className="text-gray-700">북마크된 기사가 없습니다.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h2 className="text-2xl font-semibold mb-6">북마크된 뉴스</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {bookmarkedArticles.map((article) => (
+          <NewsCard
+            key={article.id}
+            article={article}
+            onBookmark={handleBookmark}
+            isBookmarked={true}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}