react-compo-study

src/App.js

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

src/components/StaffProfile/StaffProfile.jsx

@@ -1,8 +1,22 @@
-import React from "react";
-import "./StaffProfile.css";
+// src/components/StaffProfile/StaffProfile.jsx
+const StaffProfile = ({ name, part }) => {
+  const cardStyle = {
+    border: "1px solid #f5e6dc",
+    borderRadius: "10px",
+    padding: "20px",
+    margin: "10px",
+    width: "180px",
+    textAlign: "center",
+    backgroundColor: "#fdf7f1",
+    boxShadow: "2px 2px 8px rgba(0,0,0,0.05)",
+  };
 
-const StaffProfile = () => {
-  return <div></div>;
+  return (
+    <div style={cardStyle}>
+      <h3>이름: {name}</h3>
+      <p>파트: {part}</p>
+    </div>
+  );
 };
 
 export default StaffProfile;

src/components/UserProfile/UserProfile.jsx

@@ -1,7 +1,24 @@
-import React from "react";
-import "./UserProfile.css";
-import lionImage from "./lion.jpeg";
+// src/components/UserProfile/UserProfile.jsx
 
-const UserProfile = () => {};
+const UserProfile = ({ name, age, major }) => {
+  const cardStyle = {
+    border: "2px solid #4CAF50",
+    borderRadius: "10px",
+    padding: "15px",
+    margin: "10px",
+    width: "200px",
+    textAlign: "center",
+    backgroundColor: "#f9f9f9",
+    boxShadow: "2px 2px 10px rgba(0, 0, 0, 0.1)",
+  };
+
+  return (
+    <div style={cardStyle}>
+      <h2>{name}</h2>
+      <p>나이: {age}세</p>
+      <p>전공: {major}</p>
+    </div>
+  );
+};
 
 export default UserProfile;

src/page/StaffPage.jsx

@@ -1,14 +1,28 @@
-import React from "react";
+import StaffProfile from "../components/StaffProfile/StaffProfile";
 
 const StaffPage = () => {
   const staffs = [
-    { name: "JaeHyeok", part: "FE 파트장" },
-    { name: "Hyori", part: "FE_부회장" },
+    { name: "JaeHyeok", part: "FE_파트장" },
+    { name: "Hyori", part: "FE_부파트장" },
     { name: "Subin", part: "FE_기획" },
     { name: "Yerin", part: "FE_홍보" },
   ];
 
-  return <div></div>;
+  const containerStyle = {
+    display: "flex",
+    justifyContent: "center",
+    flexWrap: "wrap",
+    gap: "10px",
+    marginTop: "40px",
+  };
+
+  return (
+    <div style={containerStyle}>
+      {staffs.map((staff, index) => (
+        <StaffProfile key={index} name={staff.name} part={staff.part} />
+      ))}
+    </div>
+  );
 };
 
 export default StaffPage;