FE 박준희 과제 제출합니다.

src/App.js

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

src/components/StaffProfile/StaffProfile.jsx

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

src/components/UserProfile/UserProfile.jsx

@@ -1,7 +1,21 @@
-import React from "react";
 import "./UserProfile.css";
 import lionImage from "./lion.jpeg";
 
-const UserProfile = () => {};
+
+const UserProfile = ({ name, age, major }) => {
+  return (
+    <div className="profile-card">
+      <img src={lionImage} className="profile-img"/>
+      <div className="profile-top">
+      <div className="profile-info">
+
+        <p>이름: {name}</p>
+        <p>나이: {age}</p>
+        <p>학과: {major}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default UserProfile;

src/page/HomePage.jsx

@@ -1,11 +1,9 @@
-import UserProfile from "../components/UserProfile/UserProfile";
+import UserProfile from "../components/UserProfile/UserProfile.jsx";
 
 const HomePage = () => {
   return (
-    <div>
-      <UserProfile />
-    </div>
+      <UserProfile name ="박준희" age="25" major="컴퓨터공학과"/>
   );
 };
 
-export default HomePage;
+export default HomePage;

src/page/StaffPage.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import StaffProfile from "../components/StaffProfile/StaffProfile.jsx";
 
 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;
+export default StaffPage;