diff --git a/package-lock.json b/package-lock.json
index bfbf8f3..a5f6f10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,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"
       }
@@ -13919,9 +13919,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.0.tgz",
-      "integrity": "sha512-GGufuHIVCJDbnIAXP3P9Sxzq3UUsddG3rrI3ut1q6m0FI6vxVBF3JoPQ38+W/blslLH4a5Yutp8drkEpXoddGQ==",
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz",
+      "integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -13941,12 +13941,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.0.tgz",
-      "integrity": "sha512-DYgm6RDEuKdopSyGOWZGtDfSm7Aofb8CCzgkliTjtu/eDuB0gcsv6qdFhhi8HdtmA+KHkt5MfZ5K2PdzjugYsA==",
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.1.tgz",
+      "integrity": "sha512-vxU7ei//UfPYQ3iZvHuO1D/5fX3/JOqhNTbRR+WjSBWxf9bIvpWK+ftjmdfJHzPOuMQKe2fiEdG+dZX6E8uUpA==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.6.0"
+        "react-router": "7.6.1"
       },
       "engines": {
         "node": ">=20.0.0"
diff --git a/package.json b/package.json
index 18ee150..33f2af8 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/App.jsx b/src/App.jsx
index e82ccf0..36834ec 100644
--- a/src/App.jsx
+++ b/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>
   );
diff --git a/src/components/ColorPage.jsx b/src/components/ColorPage.jsx
index bcabeb9..25c26a7 100644
--- a/src/components/ColorPage.jsx
+++ b/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>
   );
 }
diff --git a/src/components/MainPage.jsx b/src/components/MainPage.jsx
index 540d1b2..4621324 100644
--- a/src/components/MainPage.jsx
+++ b/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;
+
+
+