10회차 과제 - 권예원

ass10/.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+$ echo "apikey.js" >> .gitignore
+$ cat .gitignore
+apikey.js

ass10/src/App.css

@@ -0,0 +1,28 @@
+.App {
+  font-family: sans-serif;
+  text-align: center;
+}
+
+input {
+  margin: 10px;
+  padding: 5px;
+}
+
+button {
+  padding: 5px 10px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  margin: 10px 0;
+}
+
+img {
+  max-width: 100px;
+}
+
+

ass10/src/App.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import './App.css';
+import BookSearch from './components/BookSearch';
+
+function App() {
+  return (
+    <div className="App">
+      <h1>책 찾기</h1>
+      <BookSearch />
+    </div>
+  );
+}
+
+export default App;
+
+

ass10/src/components/BookList.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const BookList = ({ books }) => {
+  if (!books.length) {
+    return <div>No books found</div>;
+  }
+
+  return (
+    <ul>
+      {books.map((book) => (
+        <li key={book.isbn}>
+          <h2>{book.title}</h2>
+          <p>{book.authors.join(', ')}</p>
+          <img src={book.thumbnail} alt={book.title} />
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default BookList;

ass10/src/components/BookSearch.js

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import BookList from './BookList';
+import API_KEY from "./apikey";
+
+
+
+
+const BookSearch = () => {
+  const [books, setBooks] = useState([]);
+  const [query, setQuery] = useState('');
+
+  const fetchBooks = async () => {
+    try {
+      const response = await axios.get('https://dapi.kakao.com/v3/search/book?target=title', {
+        params: { query },
+        headers:{Authorization: API_KEY},
+    });
+      setBooks(response.data.documents);
+    } catch (error) {
+      console.error('Error fetching books:', error);
+    }
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <button onClick={fetchBooks}>Search</button>
+      <BookList books={books} />
+    </div>
+  );
+};
+
+export default BookSearch;

ass10/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+const root = ReactDOM.createRoot(rootElement);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);