From c2f4a5c5e7ad9672e037707bd6dd2a2ab742ffd3 Mon Sep 17 00:00:00 2001
From: leedasom050115 <kiss9892@inha.edu>
Date: Thu, 29 May 2025 17:29:40 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B3=BC=EC=A0=9C=EC=A0=9C=EC=B6=9C=ED=95=A9?=
 =?UTF-8?q?=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorPage.jsx | 16 ++++++++++++++--
 src/components/MainPage.jsx  | 27 ++++++++++++++++++++++++---
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/components/ColorPage.jsx b/src/components/ColorPage.jsx
index bcabeb9..823bade 100644
--- a/src/components/ColorPage.jsx
+++ b/src/components/ColorPage.jsx
@@ -1,11 +1,23 @@
 import { useParams } from 'react-router-dom';
 import '../styles/ColorPage.css';
 
+<Route path="/mainpage/:id" element={<mainpage />} />
 function ColorPage() {
 
   return (
-    <div className="color-page">
-    배경 페이지입니다 
+    <div
+     className="color-page"
+     style={{
+        backgroundColor: id,
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: 'white',
+        fontSize: '2rem',
+     }}
+     >
+    배경 페이지입니다 : {id}
     </div>
   );
 }
diff --git a/src/components/MainPage.jsx b/src/components/MainPage.jsx
index 540d1b2..9630397 100644
--- a/src/components/MainPage.jsx
+++ b/src/components/MainPage.jsx
@@ -1,14 +1,35 @@
 import { useNavigate } from 'react-router-dom';
 import '../styles/MainPage.css';
 
-const Mainpage = () => {
- 
+const colors = ["red", "blue", "pink", "orange", "yellow"];
+
+const MainPage = () => {
+  const navigate = useNavigate();
+
   return (
     <div className="container">
       <h2>React 색상 선택</h2>
       <hr />
+      {colors.map((color) => (
+        <button>
+           key={color}
+           onClick={() => navigate(`/color/${color}`)}
+           styled={{
+            backgroundColor: color,
+            color: color === "yellow" ? "black" : "white",
+            margin: "5px",
+            padding: "10px",
+            border: "none",
+            borderRadius: "5px",
+            cursor: "pointer"
+           }}
+           
+          {color}
+        </button>
+      ))}
+      
     </div>
   );
 };
 
-export default Mainpage;
+export default MainPage;