EFUB · seooyuun · Mar 31, 2025 · Mar 31, 2025 · Apr 1, 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,8 @@
     "@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",
+    "styled-components": "^6.1.17",
     "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;