[채부경] react props

src/App.js

@@ -1,10 +1,14 @@
 import "./App.css";
 import HomePage from "./page/HomePage";
 import StaffPage from "./page/StaffPage";
+import UserProfile from "./components/UserProfile/UserProfile";
 /* 여기에 Page들을 import 한 후 하나 씩 확인!! */
 
 const App = () => {
-  return <div></div>;
+  return <div>
+    {/*<HomePage/>*/}
+    <StaffPage/>
+  </div>;
 };
 
 export default App;

src/components/StaffProfile/StaffProfile.jsx

@@ -1,8 +1,11 @@
 import React from "react";
 import "./StaffProfile.css";
 
-const StaffProfile = () => {
-  return <div></div>;
+const StaffProfile = ({name, part}) => {
+  return <div className="staff-card">
+    <h3>이름: {name}</h3>
+    <p>파트: {part}</p>
+  </div>;
 };
 
 export default StaffProfile;

src/components/UserProfile/UserProfile.jsx

@@ -2,6 +2,19 @@ import React from "react";
 import "./UserProfile.css";
 import lionImage from "./lion.jpeg";
 
-const UserProfile = () => {};
+const UserProfile = ({name,age,major}) => {
 
+return (
+    <div className="profile-card">
+        <div className="profile-top">
+            <img src = {lionImage} alt="사자 사진"  className="profile-img"/>
+        </div>
+            <div className="profile-info">
+                <h3>{name}</h3>
+                <p>나이: {age}세</p>
+                <p>전공: {major}</p>
+            </div>
+    </div>
+);
+};
 export default UserProfile;

src/page/HomePage.jsx

@@ -3,7 +3,7 @@ import UserProfile from "../components/UserProfile/UserProfile";
 const HomePage = () => {
   return (
     <div>
-      <UserProfile />
+      <UserProfile name="채부경" age={23} major="전기전자공학부"/>
     </div>
   );
 };

src/page/StaffPage.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import StaffProfile from "../components/StaffProfile/StaffProfile";
 
 const StaffPage = () => {
   const staffs = [
@@ -8,7 +9,13 @@ const StaffPage = () => {
     { name: "Yerin", part: "FE_홍보" },
   ];
 
-  return <div></div>;
+  return <div className="staff-card-list">
+    {staffs.map((staff,index) => (
+      <StaffProfile
+        key={index} name={staff.name} part={staff.part} />
+    ))}
+
+  </div>;
 };
 
 export default StaffPage;