From 2af99eace4ccc6372cecbebc917165f3934e1b09 Mon Sep 17 00:00:00 2001
From: BBoyeon <2boyeon2@gmail.com>
Date: Wed, 28 May 2025 19:29:49 +0900
Subject: [PATCH] =?UTF-8?q?5/28=20=EB=A6=AC=EC=95=A1=ED=8A=B84=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9A=B0=ED=84=B0=20=EA=B3=BC=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json            |  2 +-
 package.json                 |  2 +-
 src/components/ColorPage.jsx | 11 ++++++++---
 src/components/MainPage.jsx  | 30 ++++++++++++++++++++++++++----
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bfbf8f3..2827499 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-router-dom": "^7.6.0",
-        "react-scripts": "5.0.1",
+        "react-scripts": "^5.0.1",
         "web-vitals": "^2.1.4"
       }
     },
diff --git a/package.json b/package.json
index 18ee150..4006a50 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/components/ColorPage.jsx b/src/components/ColorPage.jsx
index bcabeb9..77cdc09 100644
--- a/src/components/ColorPage.jsx
+++ b/src/components/ColorPage.jsx
@@ -1,13 +1,18 @@
 import { useParams } from 'react-router-dom';
 import '../styles/ColorPage.css';
 
+
+
 function ColorPage() {
+  const {id} = useParams(); 
 
   return (
-    <div className="color-page">
-    배경 페이지입니다 
+    <div className="color-page"
+    style={{backgroundColor:id}}>
+    {id} 배경 페이지입니다 
     </div>
-  );
+  ); // id를 받아와서 그 id에 맞는 색으로 스타일을 적용
+     // {id} 배경 페이지입니다 << 여기에서 {id}는 그 색의 이름을 뜻함
 }
 
 export default ColorPage;
diff --git a/src/components/MainPage.jsx b/src/components/MainPage.jsx
index 540d1b2..a37a4bb 100644
--- a/src/components/MainPage.jsx
+++ b/src/components/MainPage.jsx
@@ -2,13 +2,35 @@ import { useNavigate } from 'react-router-dom';
 import '../styles/MainPage.css';
 
 const Mainpage = () => {
- 
+  const navigate = useNavigate(); //페이지 이동을 위해 navigate 함수 가져옴
+
+  const colorClicked = (color) => { 
+  navigate(`/color/${color}`);
+  }; // 색을 클릭하면 그 컬러의 페이지로 이동하게 함
+
+  const colors = ["red", "blue", "pink", "orange", "yellow"]; // 색들을 가져옴
+
   return (
     <div className="container">
       <h2>React 색상 선택</h2>
       <hr />
-    </div>
-  );
-};
+
+      {colors.map((color)=>(
+        <div
+         key={color}
+         className="color-box"
+         style={{backgroundColor : color}}
+         onClick={() => colorClicked(color)}
+         >
+          {color}
+         </div>
+      ))} 
+
+      </div>    
+  ); // map을 이용하여 여러 색을 적용할 수 있게 함
+     // 색을 key라고 설정, 스타일을 그 색으로 설정, 배경에 적용
+     // 위에서 설정한 colorClicked 함수를 이용해 색을 누르면 그 컬러의 페이지로 이동할 수 있도록
+     // 가장 밑의 {color}은 박스 안에 그 색의 이름이 뜨도록 함
+}; 
 
 export default Mainpage;