[원승혁] 나만의 책장 만들기 (초급)

.eslintrc.cjs

@@ -13,6 +13,7 @@ module.exports = {
   plugins: ["react-refresh"],
   rules: {
     "react/jsx-no-target-blank": "off",
+    "unused-vars": off,
     "react-refresh/only-export-components": [
       "warn",
       { allowConstantExport: true },

src/App.css

@@ -1,7 +1,7 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 20rem;
   text-align: center;
 }
 
@@ -40,3 +40,13 @@
 .read-the-docs {
   color: #888;
 }
+
+.title {
+  font-size: 30px;
+  margin: 100px;
+}
+
+.button {
+  padding: "0.2rem 0.4rem";
+  margin-left: 4;
+}

src/App.jsx

@@ -1,9 +1,101 @@
-import './App.css'
+import { useEffect, useState } from "react";
+import books from "./mock/book.js";
+import "./App.css";
+
+function Title({ title }) {
+  return (
+    <>
+      <div className="title">{title}</div>
+    </>
+  );
+}
+
+function Button({ bookTitle, setCurrentBook }) {
+  return (
+    <>
+      <button onClick={() => setCurrentBook(bookTitle)}>읽기</button>
+    </>
+  );
+}
+
+function Book({ bookTitle, bookAuthor, setCurrentBook }) {
+  return (
+    <>
+      <div>
+        {bookTitle} - {bookAuthor}
+        <Button bookTitle={bookTitle} setCurrentBook={setCurrentBook} />
+      </div>
+    </>
+  );
+}
+
+function Container({ title, books = [], setCurrentBook, children, search }) {
+  if (search) {
+    //console.log("검색어있음")
+    books = books.filter((book) =>
+      book.title.toLowerCase().includes(search.toLowerCase())
+    );
+  } else {
+    //console.log("검색어 없음")
+  }
+  return (
+    <>
+      <div>
+        <Title title={title} />
+        {children}
+      </div>
+      {Object.keys(books).length > 0 ? (
+        books.map((item, index) => (
+          <Book
+            key={index}
+            bookTitle={item.title}
+            bookAuthor={item.author}
+            setCurrentBook={setCurrentBook}
+          />
+        ))
+      ) : (
+        <>
+          <div>승혁</div>
+          <div>sh@gmail.com</div>
+        </>
+      )}
+    </>
+  );
+}
 
 function App() {
+  const [currentBook, setCurrentBook] = useState(
+    localStorage.getItem("storageBook")
+  );
+
+  useEffect(() => {
+    if (currentBook) {
+      localStorage.setItem("storageBook", currentBook);
+    }
+  }, [currentBook]);
+
+  const [search, setSearch] = useState("");
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      setSearch(e.target.value);
+    }
+  };
+  //console.log(search);
+
   return (
-    <></>
-  )
+    <>
+      <Container
+        title="나만의 책장"
+        books={books}
+        setCurrentBook={setCurrentBook}
+        search={search}
+      >
+        <div>현재 읽고있는 책 : {currentBook}</div>
+        <input onKeyDown={handleKeyDown} />
+      </Container>
+      <Container title="만든이"></Container>
+    </>
+  );
 }
 
-export default App
+export default App;