[3일차] 김태훈 과제 제출합니다.

package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.11.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.7.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",

src/App.jsx

@@ -1,5 +1,23 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Home from "./pages/Home";
+import ProfileLayout from "./pages/ProfileLayout";
+import ProfileList from "./components/ProfileList";
+import ProfileForm from "./components/ProfileForm";
+import ProfileModify from "./components/ProfileModify";
+
 function App() {
-  return <>당신은 할 수 있습니다.</>;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route exact path="/profile" element={<ProfileLayout />}>
+          <Route path="list" element={<ProfileList />} />
+          <Route path="form" element={<ProfileForm />} />
+          <Route path="modify/:id" element={<ProfileModify />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
 }
 
 export default App;

src/components/Header.jsx

@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom";
+import "../styles/components.css";
+
+function Header() {
+  return (
+    <>
+      <header>
+        <h1>Profile Card List</h1>
+      </header>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/profile/list">Card List</Link>
+        <Link to="/profile/form">Make Card</Link>
+      </nav>
+    </>
+  );
+}
+
+export default Header;

src/components/ProfileCard.jsx

@@ -0,0 +1,63 @@
+import { useNavigate } from "react-router-dom";
+import "../styles/components.css";
+import axios from "axios";
+
+function ProfileCard({ data, setData }) {
+  const navigate = useNavigate();
+
+  const modifyCard = id => {
+    navigate(`/profile/modify/${id}`);
+  };
+
+  const deleteCard = async id => {
+    await axios.delete(`http://localhost:8080/api/profile/${id}`);
+    setData(prev => prev.filter(body => body.id !== id));
+  };
+
+  return (
+    <>
+      <div className="profileCard">
+        <div className="cardHead">
+          <img src={data.image} alt="이미지" />
+          <h3>{data.name}</h3>
+        </div>
+        <div className="cardBody">
+          <div className="cardInfo">
+            <p>
+              <strong>Team. @{data.team}</strong>
+            </p>
+            <p>
+              <strong>{data.job}</strong>
+            </p>
+            <p>
+              <strong>tel.</strong> {data.phone}
+            </p>
+            <p>
+              <strong>email.</strong> {data.email}
+            </p>
+          </div>
+          <div className="cardActions">
+            <button
+              style={{
+                backgroundColor: "#90a3ff",
+              }}
+              onClick={() => modifyCard(data.id)}
+            >
+              수정
+            </button>
+            <button
+              style={{
+                backgroundColor: "#ff9090",
+              }}
+              onClick={() => deleteCard(data.id)}
+            >
+              삭제
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ProfileCard;

src/components/ProfileForm.jsx

@@ -0,0 +1,136 @@
+import { useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import "../styles/components.css";
+import axios from "axios";
+
+function ProfileForm() {
+  const navigate = useNavigate();
+
+  const [info, setInfo] = useState({
+    name: "",
+    team: "",
+    job: "",
+    phone: "",
+    email: "",
+    image: "",
+  });
+  const inputRefs = useRef({});
+
+  const syncInfo = function (key, value) {
+    setInfo(prev => ({
+      ...prev,
+      [key]: value,
+    }));
+  };
+
+  const message = {
+    name: "이름이 입력되지 않았습니다!",
+    team: "팀이 입력되지 않았습니다!",
+    job: "직책이 입력되지 않았습니다!",
+    phone: "전화번호가 입력되지 않았습니다!",
+    email: "이메일이 입력되지 않았습니다!",
+    image: "사진이 선택되지 않았습니다!",
+  };
+
+  const regist = async e => {
+    e.preventDefault();
+    for (const [key, value] of Object.entries(info)) {
+      if (value === "") {
+        alert(message[key]);
+        inputRefs.current[key]?.focus();
+        return;
+      }
+    }
+    await axios.post("http://localhost:8080/api/profile", info);
+    navigate("/profile/list");
+  };
+
+  return (
+    <>
+      <h1 className="title">프로필 카드 만들기</h1>
+      <form onSubmit={regist}>
+        <h2>정보를 입력해주세요.</h2>
+        <p>
+          <strong className="content">Name</strong>
+          <input
+            onChange={e => {
+              syncInfo("name", e.target.value);
+            }}
+            ref={el => (inputRefs.current["name"] = el)}
+            type="text"
+            placeholder="ex) 김태훈"
+          />
+        </p>
+        <p>
+          <strong className="content">Team</strong>
+          <input
+            onChange={e => {
+              syncInfo("team", e.target.value);
+            }}
+            ref={el => (inputRefs.current["team"] = el)}
+            type="text"
+            placeholder="ex) 떠돌이"
+          />
+        </p>
+        <p>
+          <strong className="content">Job</strong>
+          <input
+            onChange={e => {
+              syncInfo("job", e.target.value);
+            }}
+            ref={el => (inputRefs.current["job"] = el)}
+            type="text"
+            placeholder="ex) Backend Developer"
+          />
+        </p>
+        <p>
+          <strong className="content">Phone</strong>
+          <input
+            onChange={e => {
+              syncInfo("phone", e.target.value);
+            }}
+            ref={el => (inputRefs.current["phone"] = el)}
+            type="text"
+            placeholder="ex) 010-4321-5678"
+          />
+        </p>
+        <p>
+          <strong className="content">Email</strong>
+          <input
+            onChange={e => {
+              syncInfo("email", e.target.value);
+            }}
+            ref={el => (inputRefs.current["email"] = el)}
+            type="text"
+            placeholder="ex) gimtaehooon@gmail.com"
+          />
+        </p>
+        <p>
+          <strong className="content">Image</strong>
+          <input
+            onChange={e => {
+              syncInfo("image", e.target.value);
+            }}
+            type="radio"
+            name="image"
+            value="/src/assets/PARADOX_default.png"
+          />
+          Default
+          <span className="content"></span>
+          <input
+            onChange={e => {
+              syncInfo("image", e.target.value);
+            }}
+            type="radio"
+            name="image"
+            value="/src/assets/PARADOX_reverse.png"
+          />
+          Reverse
+        </p>
+        <button type="submit">등록하기</button>
+      </form>
+    </>
+  );
+}
+
+export default ProfileForm;

src/components/ProfileList.jsx

@@ -0,0 +1,28 @@
+import ProfileCard from "./ProfileCard";
+import "../styles/components.css";
+import axios from "axios";
+import { useState, useEffect } from "react";
+
+function ProfileList() {
+  const [dataList, setDataList] = useState([]);
+
+  useEffect(() => {
+    axios
+      .get("http://localhost:8080/api/profile/list")
+      .then(response => setDataList(response.data))
+      .catch(err => console.error(err));
+  }, []);
+
+  return (
+    <>
+      <h1 className="title">프로필 카드 목록</h1>
+      <div className="cardContainer">
+        {dataList.map(body => (
+          <ProfileCard key={body.id} data={body} setData={setDataList} />
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default ProfileList;