과제 제출

package.json

@@ -9,7 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.6.0",
+    "react-router-dom": "^7.6.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.jsx

@@ -2,12 +2,14 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import MainPage from './components/MainPage';
 import ColorPage from './components/ColorPage';
 
+
 function App() {
   return (
     <Router>
       <Routes>
         <Route path="/" element={<MainPage />} />
         <Route path="/color/:id" element={<ColorPage />} />
+
       </Routes>
     </Router>
   );

src/components/ColorPage.jsx

@@ -1,11 +1,18 @@
 import { useParams } from 'react-router-dom';
+import { useEffect } from 'react';
 import '../styles/ColorPage.css';
 
 function ColorPage() {
+  const { id } = useParams(); // URL에서 id 가져오기
+
+  useEffect(() => {
+    document.body.style.backgroundColor = id;
+
+  }, [id]);
 
   return (
-    <div className="color-page">
-    배경 페이지입니다 
+    <div id="color-page" className="color-page">
+     컬러 페이지 입니다 .
     </div>
   );
 }

src/components/MainPage.jsx

@@ -1,14 +1,40 @@
 import { useNavigate } from 'react-router-dom';
 import '../styles/MainPage.css';
+import { useEffect } from 'react';
+
+
+const colors = ['red', 'blue', 'pink', 'orange', 'yellow'];
 
 const Mainpage = () => {
-
+  const navigate = useNavigate();
+  useEffect(() => {
+    document.body.style.backgroundColor = 'white';
+  }, []);
+
   return (
     <div className="container">
       <h2>React 색상 선택</h2>
-      <hr />
+
+      {colors.map((color) => (
+        <div
+          key={color}
+          className="color-box"
+          style={{ backgroundColor: color }}
+          onClick={() => navigate(`/color/${color}`)}
+        >
+          {color}
+        </div>
+      ))}
+
+      <hr /> 
     </div>
   );
+
+
+
 };
 
 export default Mainpage;
+
+
+