fix: 이미지 표시 문제 해결

Hansung-WebFramework · Nov 21, 2024 · 0400745 · 0400745
1 parent 46a9dc2
commit 0400745
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/react-app/src/App.jsx b/react-app/src/App.jsx
@@ -1,12 +1,14 @@
 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>
   );

diff --git a/react-app/src/data/articles.js b/react-app/src/data/articles.js
@@ -1,8 +1,13 @@
+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: "../assets/images/IdentifiedArticlesPage1.png",
+        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",
@@ -12,7 +17,7 @@ export const articles = [
     {
         id: 2,
         title: "What are Israel's Iron Dome, David's Sling and Arrow missile defences?",
-        image: "../assets/images/IdentifiedArticlesPage2.png",
+        image: IdentifiedArticlesPage2,
         content: "Details about Israel's missile defense systems...",
         trustScore: 78,
         author: "John Doe",
@@ -22,7 +27,7 @@ export const articles = [
     {
         id: 3,
         title: "New environmental policies announced by UN",
-        image: "../assets/images/IdentifiedArticlesPage3.png",
+        image: IdentifiedArticlesPage3,
         content: "The United Nations has announced new environmental policies...",
         trustScore: 85,
         author: "Jane Smith",
@@ -32,7 +37,7 @@ export const articles = [
     {
         id: 4,
         title: "Global markets react to tech innovations",
-        image: "../assets/images/IdentifiedArticlesPage4.png",
+        image: IdentifiedArticlesPage4,
         content: "Global financial markets are showing significant movement in response to recent technological breakthroughs...",
         trustScore: 67,
         author: "Alex Johnson",

diff --git a/react-app/src/index.css b/react-app/src/index.css
@@ -1,9 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Amethysta&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Amethysta&display=swap');
-
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -15,5 +15,5 @@ body {
   min-width: 320px;
   min-height: 100vh;
   background-color: #f0f4f8;
-  font-family: 'Amethysta', serif;
+  /* font-family: 'Amethysta', serif; */
 }