5/28 리액트4 라우터 과제

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": {

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;

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;