From 304a611a829cf1e70ffc5ed834ee4fc78b50bb2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B0=95=EC=8B=A0=EC=84=9D?= <mayo9437@gmail.com>
Date: Mon, 19 May 2025 22:22:22 +0900
Subject: [PATCH] react-compo-study

---
 src/App.js                                   | 13 +++++-----
 src/components/StaffProfile/StaffProfile.jsx | 22 +++++++++++++----
 src/components/UserProfile/UserProfile.jsx   | 25 ++++++++++++++++----
 src/page/StaffPage.jsx                       | 22 +++++++++++++----
 4 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/src/App.js b/src/App.js
index c0acf5b..e9faa36 100644
--- a/src/App.js
+++ b/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;
diff --git a/src/components/StaffProfile/StaffProfile.jsx b/src/components/StaffProfile/StaffProfile.jsx
index 88825d9..508d05c 100644
--- a/src/components/StaffProfile/StaffProfile.jsx
+++ b/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;
diff --git a/src/components/UserProfile/UserProfile.jsx b/src/components/UserProfile/UserProfile.jsx
index e5ef1e1..5de55f9 100644
--- a/src/components/UserProfile/UserProfile.jsx
+++ b/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;
diff --git a/src/page/StaffPage.jsx b/src/page/StaffPage.jsx
index 54e68bc..4db14ef 100644
--- a/src/page/StaffPage.jsx
+++ b/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;