From 5ec92c45826293a384844aaafa33fa2b5b5e30cd Mon Sep 17 00:00:00 2001 From: wys0530 <166965895+wys0530@users.noreply.github.com> Date: Tue, 1 Apr 2025 11:27:23 +0900 Subject: [PATCH 01/13] =?UTF-8?q?feat:=20ComfirmButton=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- my-app/src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/my-app/src/index.js b/my-app/src/index.js index fadc85d90..3c2fd359e 100644 --- a/my-app/src/index.js +++ b/my-app/src/index.js @@ -9,11 +9,12 @@ import Clock from "./chapter_04/Clock"; import CommentList from "./chapter_05/CommentList"; import NotificationList from "./chapter_06/NotificationList"; import Accommodate from "./chapter_07/Accommodate"; +import ConfirmButton from "./chapter_08/ConfirmButton"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + ); @@ -21,4 +22,3 @@ root.render( // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); -//3주차.. From 7fbe1a986507d7544e46b6296ac5c5a088705435 Mon Sep 17 00:00:00 2001 From: wys0530 <166965895+wys0530@users.noreply.github.com> Date: Tue, 1 Apr 2025 11:27:59 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20index.js=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95(ConfirmButton=20=EC=8B=A4=EC=8A=B5)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- my-app/src/chapter_08/ConfirmButton.jsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 my-app/src/chapter_08/ConfirmButton.jsx diff --git a/my-app/src/chapter_08/ConfirmButton.jsx b/my-app/src/chapter_08/ConfirmButton.jsx new file mode 100644 index 000000000..9c9887bc2 --- /dev/null +++ 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 ( + + ); +} + +export default ConfirmButton; From b91537dd7ea3b627794f6fe65b6a9c89ea7c1ca7 Mon Sep 17 00:00:00 2001 From: wys0530 <166965895+wys0530@users.noreply.github.com> Date: Sat, 5 Apr 2025 23:29:32 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat:=209=EA=B0=95=20=EC=8B=A4=EC=8A=B5?= =?UTF-8?q?=20LandingPage,=20Toolbar=20=ED=8C=8C=EC=9D=BC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- my-app/src/chapter_09/LandingPage.jsx | 27 +++++++++++++++++++++++ my-app/src/chapter_09/Toolbar.jsx | 31 +++++++++++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 my-app/src/chapter_09/LandingPage.jsx create mode 100644 my-app/src/chapter_09/Toolbar.jsx diff --git a/my-app/src/chapter_09/LandingPage.jsx b/my-app/src/chapter_09/LandingPage.jsx new file mode 100644 index 000000000..5187ed093 --- /dev/null +++ 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 ( +
+ +
이펍❤️과 함께하는 리액트 공부!
+
+ ); +} + +export default LandingPage; diff --git a/my-app/src/chapter_09/Toolbar.jsx b/my-app/src/chapter_09/Toolbar.jsx new file mode 100644 index 000000000..f902ffbac --- /dev/null +++ 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 ( +
+ {isLoggedIn && 환영합니다!} + + {isLoggedIn ? ( + + ) : ( + + )} +
+ ); +} + +export default Toolbar; From ea96e245197da5581a0109269d9838dd782d5704 Mon Sep 17 00:00:00 2001 From: wys0530 <166965895+wys0530@users.noreply.github.com> Date: Sat, 5 Apr 2025 23:30:04 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat:=20index.js=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95(9=EA=B0=95,=20Toolbar=20=EC=8B=A4=EC=8A=B5)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- my-app/src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/my-app/src/index.js b/my-app/src/index.js index 3c2fd359e..e1fd0f9e8 100644 --- a/my-app/src/index.js +++ b/my-app/src/index.js @@ -10,11 +10,12 @@ import CommentList from "./chapter_05/CommentList"; import NotificationList from "./chapter_06/NotificationList"; import Accommodate from "./chapter_07/Accommodate"; import ConfirmButton from "./chapter_08/ConfirmButton"; +import LandingPage from "./chapter_09/LandingPage"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + ); From ba4322658fb51c2bcaee5a4b8e49b3dda2b4b37c Mon Sep 17 00:00:00 2001 From: wys0530 <166965895+wys0530@users.noreply.github.com> Date: Sat, 5 Apr 2025 23:38:39 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat:=20AttendanceBook.jsx=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80(10=EA=B0=95=20=EC=8B=A4=EC=8A=B5?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- my-app/src/chapter_10/AttendanceBook.jsx | 63 ++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 my-app/src/chapter_10/AttendanceBook.jsx diff --git a/my-app/src/chapter_10/AttendanceBook.jsx b/my-app/src/chapter_10/AttendanceBook.jsx new file mode 100644 index 000000000..c04682585 --- /dev/null +++ b/my-app/src/chapter_10/AttendanceBook.jsx @@ -0,0 +1,63 @@ +import React from "react"; + +const students = [ + { + id: 1, + name: "Inje", + }, + { + id: 2, + name: "Steve", + }, + { + id: 3, + name: "Bill", + }, + { + id: 4, + name: "Jeff", + }, +]; + +//student라는 배열로부터 학생 정보가 담긴 객체를 받아 +// 학생들의 이름을 목록 형태로 출력하는 컴포넌트 +//배열을 렌더링 하기 위해 map 함수를 사용함 +//key가 꼭! 필요함!! +/* +function AttendanceBook(props) { + return ( + + ); +} + +*/ + +//포맷팅 된 문자열을 key로 사용할 수 있음 +function AttendanceBook(props) { + return ( + + ); +} + +//index 사용하여 만들 수 있음 +/* +function AttendanceBook(props) { + return ( + + ); +} + */ + +export default AttendanceBook; From de27b7002ec7ae6e9f3045295e3059380dc5946f Mon Sep 17 00:00:00 2001 From: wys0530 <166965895+wys0530@users.noreply.github.com> Date: Sat, 5 Apr 2025 23:39:05 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20index.js=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95(10=EA=B0=95,=20AttendanceBook=20=EC=8B=A4?= =?UTF-8?q?=EC=8A=B5)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- my-app/src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/my-app/src/index.js b/my-app/src/index.js index e1fd0f9e8..da567c2d1 100644 --- a/my-app/src/index.js +++ b/my-app/src/index.js @@ -11,11 +11,12 @@ import NotificationList from "./chapter_06/NotificationList"; import Accommodate from "./chapter_07/Accommodate"; import ConfirmButton from "./chapter_08/ConfirmButton"; import LandingPage from "./chapter_09/LandingPage"; +import AttendanceBook from "./chapter_10/AttendanceBook"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + ); From 4efb6896ba3f4dcc08082de6f509f42468d412e4 Mon Sep 17 00:00:00 2001 From: wys0530 <166965895+wys0530@users.noreply.github.com> Date: Sat, 12 Apr 2025 02:03:19 +0900 Subject: [PATCH 07/13] =?UTF-8?q?style:=204=EC=A3=BC=EC=B0=A8=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- my-app/src/chapter_09/Toolbar.jsx | 4 ++++ my-app/src/chapter_10/AttendanceBook.jsx | 22 +++++++++++----------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/my-app/src/chapter_09/Toolbar.jsx b/my-app/src/chapter_09/Toolbar.jsx index f902ffbac..7809465fd 100644 --- a/my-app/src/chapter_09/Toolbar.jsx +++ b/my-app/src/chapter_09/Toolbar.jsx @@ -12,6 +12,10 @@ const styles = { }, }; + +//사용자의 로그인 여부를 나타내는 isLoggedin값을 프롭스로 받아, +// 조건부 렌더링을 사용하여 환영 메시지를 표시하거나 감추고, 로그인 로그아웃 버튼을 보여주는 역할을 함 + function Toolbar(props) { const { isLoggedIn, onClickLogin, onClickLogout } = props; diff --git a/my-app/src/chapter_10/AttendanceBook.jsx b/my-app/src/chapter_10/AttendanceBook.jsx index c04682585..39cc3358f 100644 --- a/my-app/src/chapter_10/AttendanceBook.jsx +++ b/my-app/src/chapter_10/AttendanceBook.jsx @@ -23,7 +23,6 @@ const students = [ // 학생들의 이름을 목록 형태로 출력하는 컴포넌트 //배열을 렌더링 하기 위해 map 함수를 사용함 //key가 꼭! 필요함!! -/* function AttendanceBook(props) { return (