EFUB · seooyuun · Mar 24, 2025 · Mar 31, 2025 · Mar 31, 2025 · Apr 1, 2025
diff --git a/index.html b/index.html
@@ -1,5 +1,4 @@
 <html>
-<<<<<<< HEAD
     <head>
         <title>서윤의 블로그</title>
         <link rel="stylesheet" href="styles.css">
@@ -17,28 +16,4 @@ <h1>제 블로그에 오신 것을 환영합니다!</h1>
         <script src="MyButton.js"></script>
     </body>
 </html>
-=======
-  <head>
-    <title>서윤의 블로그</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <h1>제 블로그에 오신 것을 환영합니다!</h1>
 
-    <div id="root"></div>
-
-    <!-- 리액트 가져오기 -->
-    <script
-      src="https://unpkg.com/react@17/umd/react.development.js"
-      crossorigin
-    ></script>
-    <script
-      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
-      crossorigin
-    ></script>
-
-    <!-- 리액트 컴포넌트 가져오기 -->
-    <script src="MyButton.js"></script>
-  </body>
-</html>
->>>>>>> member/seooyuun
diff --git a/my-app/package-lock.json b/my-app/package-lock.json
diff --git a/my-app/package.json b/my-app/package.json
@@ -9,7 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/my-app/src/chapter_03/Book.jsx b/my-app/src/chapter_03/Book.jsx
@@ -1,12 +1,12 @@
 import React from "react";
 
 function Book(props) {
-    return (
-        <div>
-            <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
-            <h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`}</h2>
-        </div>
-    );
+  return (
+    <div>
+      <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
+      <h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`}</h2>
+    </div>
+  );
 }
 
-export default Book;
+export default Book;
diff --git a/my-app/src/chapter_03/Library.jsx b/my-app/src/chapter_03/Library.jsx
@@ -2,7 +2,6 @@ import React from "react";
 import Book from "./Book";
 
 function Library(props) {
-<<<<<<< HEAD
     return (
         <div>
             <Book name="처음 만난 파이썬" numOfPage={300} />
@@ -12,16 +11,4 @@ function Library(props) {
     );
 }
 
-export default Library;
-=======
-  return (
-    <div>
-      <Book name="처음 만난 파이썬" numOfPage={300} />
-      <Book name="처음 만난 AWS" numOfPage={400} />
-      <Book name="처음 만난 리액트" numOfPage={500} />
-    </div>
-  );
-}
-
-export default Library;
->>>>>>> member/seooyuun
+export default Library;
diff --git a/my-app/src/chapter_03/efub5-first-react-study.code-workspace b/my-app/src/chapter_03/efub5-first-react-study.code-workspace
@@ -0,0 +1,8 @@
+{
+  "folders": [
+	{
+		"path": "../../.."
+	}
+],
+  "settings": {}
+}
diff --git a/my-app/src/chapter_07/Accommodate.jsx b/my-app/src/chapter_07/Accommodate.jsx
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from "react";
+import useCounter from "./useCounter";
+
+const MAX_CAPACITY = 10;
+
+function Accommodate(props) {
+  const [isFull, setIsFull] = useState(false);
+  const [count, increaseCount, decreaseCount] = useCounter(0);
+
+  useEffect(() => {
+    console.log("============================");
+    console.log("useEffect() is called.");
+    console.log(`isFull: ${isFull}`);
+  });
+
+  useEffect(() => {
+    setIsFull(count >= MAX_CAPACITY);
+    console.log(`Current count value: ${count}`);
+  }, [count]);
+
+  return (
+    <div style={{ padding: 16 }}>
+      <p>{`총 ${count}명 수용했습니다.`}</p>
+
+      <button onClick={increaseCount} disabled={isFull}>
+        입장
+      </button>
+      <button onClick={decreaseCount}>퇴장</button>
+
+      {isFull && <p style={{ color: "red" }}>정원이 가득찼습니다.</p>}
+    </div>
+  );
+}
+
+export default Accommodate;
diff --git a/my-app/src/chapter_07/useCounter.jsx b/my-app/src/chapter_07/useCounter.jsx
@@ -0,0 +1,12 @@
+import React, { use, useState } from "react";
+
+function useCounter(initialValue) {
+  const [count, setCount] = useState(initialValue);
+
+  const increaseCount = () => setCount((count) => count + 1);
+  const decreaseCount = () => setCount((count) => Math.max(count - 1, 0));
+
+  return [count, increaseCount, decreaseCount];
+}
+
+export default useCounter;
diff --git a/my-app/src/chapter_08/ConfirmButton.jsx b/my-app/src/chapter_08/ConfirmButton.jsx
@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+
+function ConfirmButton(props) {
+  const [isConfirmed, setIsConfirmed] = useState(false);
+
+  const handleConfirm = () => {
+    setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed);
+  };
+
+  return (
+    <button onClick={handleConfirm} disabled={isConfirmed}>
+      {isConfirmed ? "확인됨" : "확인하기"}
+    </button>
+  );
+}
+
+export default ConfirmButton;
diff --git a/my-app/src/chapter_09/LandingPage.jsx b/my-app/src/chapter_09/LandingPage.jsx
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import Toolbar from "./Toolbar";
+
+function LandingPage(props) {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  const onClickLogin = () => {
+    setIsLoggedIn(true);
+  };
+
+  const onClickLogout = () => {
+    setIsLoggedIn(false);
+  };
+
+  return (
+    <div>
+      <Toolbar
+        isLoggedIn={isLoggedIn}
+        onClickLogin={onClickLogin}
+        onClickLogout={onClickLogout}
+      />
+      <div style={{ padding: 16 }}>소플과 함께하는 리액트 공부!</div>
+    </div>
+  );
+}
+
+export default LandingPage;
diff --git a/my-app/src/chapter_09/Toolbar.jsx b/my-app/src/chapter_09/Toolbar.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+const styles = {
+  wrapper: {
+    padding: 16,
+    display: "flex",
+    flexDirection: "row",
+    borderBottom: "1px solid grey",
+  },
+  greeting: {
+    marginRight: 8,
+  },
+};
+
+function Toolbar(props) {
+  const { isLoggedIn, onClickLogin, onClickLogout } = props;
+
+  return (
+    <div style={styles.wrapper}>
+      {isLoggedIn && <span style={styles.greeting}>환영합니다!</span>}
+
+      {isLoggedIn ? (
+        <button onClick={onClickLogout}>로그아웃</button>
+      ) : (
+        <button onClick={onClickLogin}>로그인</button>
+      )}
+    </div>
+  );
+}
+
+export default Toolbar;
diff --git a/my-app/src/chapter_10/AttendanceBook.jsx b/my-app/src/chapter_10/AttendanceBook.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+const students = [
+  {
+    id: 1,
+    name: "Inje",
+  },
+  {
+    id: 2,
+    name: "Steve",
+  },
+  {
+    id: 3,
+    name: "Bill",
+  },
+  {
+    id: 4,
+    name: "Jeff",
+  },
+];
+
+function AttendanceBook(props) {
+  return (
+    <ul>
+      {students.map((student) => {
+        return <li key={student.id}>{student.name}</li>;
+      })}
+    </ul>
+  );
+}
+
+export default AttendanceBook;
diff --git a/my-app/src/chapter_11/SignUp.jsx b/my-app/src/chapter_11/SignUp.jsx
@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+
+function SignUp(props) {
+  const [name, setName] = useState("");
+  const [gender, setGender] = useState("남자");
+
+  const handleChangeName = (event) => {
+    setName(event.target.value);
+  };
+
+  const handleChangeGender = (event) => {
+    setGender(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    alert(`이름: ${name}, 성별: ${gender}`);
+    event.preventDefault();
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        이름:
+        <input type="text" value={name} onChange={handleChangeName} />
+      </label>
+      <br />
+      <label>
+        성별:
+        <select value={gender} onChange={handleChangeGender}>
+          <option value="남자">남자</option>
+          <option value="여자">여자</option>
+        </select>
+      </label>
+      <button type="submit">제출</button>
+    </form>
+  );
+}
+
+export default SignUp;
diff --git a/my-app/src/chapter_12/Calculator.jsx b/my-app/src/chapter_12/Calculator.jsx
@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import TemperatureInput from "./TemperatureInput";
+
+function BoilindVerdict(props) {
+  if (props.celsius >= 100) {
+    return <p>물이 끓습니다.</p>;
+  }
+  return <p>물이 끓지 않습니다.</p>;
+}
+
+function toCelsius(fahrenheit) {
+  return ((fahrenheit - 32) * 5) / 9;
+}
+
+function toFahrenheit(celsius) {
+  return (celsius * 9) / 5 + 32;
+}
+
+function tryConvert(temperature, convert) {
+  const input = parseFloat(temperature);
+  if (Number.isNaN(input)) {
+    return "";
+  }
+  const output = convert(input);
+  const rounded = Math.round(output * 1000) / 1000;
+  return rounded.toString();
+}
+
+function Calculator(props) {
+  const [temperature, setTemperature] = useState("");
+  const [scale, setScale] = useState("c");
+
+  const handleCelsiusChange = (temperature) => {
+    setTemperature(temperature);
+    setScale("c");
+  };
+
+  const handleFahrenheitChange = (temperature) => {
+    setTemperature(temperature);
+    setScale("f");
+  };
+
+  const celsius =
+    scale === "f" ? tryConvert(temperature, toCelsius) : temperature;
+  const fahrenheit =
+    scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature;
+
+  return (
+    <div>
+      <TemperatureInput
+        scale="c"
+        temperature={celsius}
+        onTemperatureChange={handleCelsiusChange}
+      />
+      <TemperatureInput
+        scale="f"
+        temperature={fahrenheit}
+        onTemperatureChange={handleFahrenheitChange}
+      />
+      <BoilindVerdict celsius={parseFloat(celsius)} />
+    </div>
+  );
+}
+
+export default Calculator;
diff --git a/my-app/src/chapter_12/TemperatureInput.jsx b/my-app/src/chapter_12/TemperatureInput.jsx
@@ -0,0 +1,19 @@
+const scaleNames = {
+  c: "섭씨",
+  f: "화씨",
+};
+
+function TemperatureInput(props) {
+  const handleChange = (event) => {
+    props.onTemperatureChange(event.target.value);
+  };
+
+  return (
+    <fieldset>
+      <legend>온도를 입력해주세요(단위:{scaleNames[props.scale]});</legend>
+      <input value={props.temperature} onChange={handleChange} />
+    </fieldset>
+  );
+}
+
+export default TemperatureInput;