Finaldev

package.json

@@ -6,11 +6,16 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@reduxjs/toolkit": "^2.0.1",
+    "@tanstack/react-query": "^5.17.9",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.5",
+    "global": "^4.4.0",
+    "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
     "react-redux": "^9.0.4",
     "react-router": "^6.21.1",
     "react-router-dom": "^6.21.1",
@@ -40,5 +45,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.17.9"
   }
 }

src/App.js

@@ -1,15 +1,15 @@
-import React from 'react'
-import { Global } from '@emotion/react'
-import { BrowserRouter } from 'react-router-dom'
-import PageRoute from './PageRoute'
-
-const App = () =>{
+import PageRoute from "./PageRoute";
+import { BrowserRouter as Router } from "react-router-dom";
+import React from "react";
+import { Global } from "@emotion/react";
+import { BrowserRouter } from "react-router-dom";
 
+const App = () => {
   return (
     <BrowserRouter>
-      <PageRoute/>
+      <PageRoute />
     </BrowserRouter>
   );
 };
 
-export default App;
+export default App;

src/PageRoute.js

@@ -1,48 +1,60 @@
-import React from 'react'
-import { Routes, Route, useParams} from 'react-router-dom'
-import Dongui from './pages/donate/donategui.js'
-import Mydonation from './pages/donate/mydonation.js'
-import Mypage from './pages/donate/mypage.js'
-import Nickname from './pages/donate/nickname.js'
-import Userlogin from './pages/donate/userlogin.js'
-import Process1 from './pages/donate/process1.js'
-import Process2 from './pages/donate/process2.js'
-import Process3 from './pages/donate/process3.js'
-import Process4 from './pages/donate/process4.js'
-import Process5 from './pages/donate/process5.js'
-import Process6 from './pages/donate/process6.js'
-import Done from './pages/donate/done.js'
+import React from "react";
+import { Routes, Route, useParams } from "react-router-dom";
+import Dongui from "./pages/donate/donategui.js";
+import Mydonation from "./pages/donate/mydonation.js";
+import Mypage from "./pages/donate/mypage.js";
+// import Nickname from "./pages/donate/nickname.js";
+import Process1 from "./pages/donate/process1.js";
+import Process3 from "./pages/donate/process3.js";
+import Process4 from "./pages/donate/process4.js";
+import Process5 from "./pages/donate/process5.js";
+import Process6 from "./pages/donate/process6.js";
+import Done from "./pages/donate/done.js";
+import AgencyLogin from "./pages/reciever/agencylogin.js";
+import AgencySignUp from "./pages/reciever/agencysignup.js";
+import BookList from "./pages/reciever/booklist.js";
+import Finish from "./pages/reciever/finish.js";
+import SearchBooks from "./pages/reciever/searchbooks.js";
+import Choose from "./pages/main/choose.js";
+import Gui from "./pages/main/gui.js";
+import Check from "./pages/main/check.js";
+import Login from "./pages/main/userlogin.js";
+import Usersingup from "./pages/main/usersignup.js";
+import SearchBookList from "./pages/reciever/searchbooklist.js";
+import BookInfo from "./pages/reciever/bookinfo.js";
+import Process2 from "./pages/donate/process2.js";
 
-import Choose from './pages/main/choose.js'
-import Gui from './pages/main/gui.js'
-import Check from './pages/main/check.js'
-import Login from './pages/main/login.js'
-
-
-
-const PageRoute = () =>{
-const { id } = useParams();
-return (
+const PageRoute = () => {
+  return (
     <Routes>
-    <Route path='/' element={<Gui />}></Route>
-    <Route path='/choose' element={<Choose />}></Route>
-    <Route path='/check' element={<Check />}></Route>
-    <Route path='/login' element={<Login />}></Route>
-    <Route path='/donate/gui' element={<Dongui />}></Route>
-    <Route path='/donate/userlogin' element={<Userlogin />}></Route>
-    <Route path='/donate/nickname' element={<Nickname />}></Route>
-    <Route path='/donate/process1' element={<Process1 />}></Route>
-    <Route path='/donate/process2' element={<Process2 />}></Route>
-    <Route path='/donate/process3' element={<Process3 />}></Route>
-    <Route path='/donate/process4' element={<Process4 />}></Route>
-    <Route path='/donate/process5' element={<Process5 />}></Route>
-    <Route path='/donate/process6' element={<Process6 />}></Route>
-    <Route path='/donate/done' element={<Done />}></Route>
-    <Route path='/donate/mypage' element={<Mypage />}></Route>
-    <Route path='/donate/mydonation' element={<Mydonation />}></Route>
+      <Route path="/" element={<Gui />}></Route>
+      <Route path="/choose" element={<Choose />}></Route>
+      <Route path="/check" element={<Check />}></Route>
+      <Route path="/login" element={<Login />}></Route>
+      <Route path="/signup" element={<Usersingup />}></Route>
+      <Route path="/donate/gui" element={<Dongui />}></Route>
+      {/* <Route path="/donate/nickname" element={<Nickname />}></Route> */}
+      <Route path="/donate/process1" element={<Process1 />}></Route>
+      <Route path="/donate/process2" element={<Process2 />}></Route>
+      <Route path="/donate/process3" element={<Process3 />}></Route>
+      <Route path="/donate/process4" element={<Process4 />}></Route>
+      <Route path="/donate/process5" element={<Process5 />}></Route>
+      <Route path="/donate/process6" element={<Process6 />}></Route>
+      <Route path="/donate/done" element={<Done />}></Route>
+      <Route path="/donate/mypage" element={<Mypage />}></Route>
+      <Route path="/donate/mydonation" element={<Mydonation />}></Route>
+      <Route path="/reciever/agencylogin" element={<AgencyLogin />}></Route>
+      <Route path="/reciever/agencysignup" element={<AgencySignUp />}></Route>
+      <Route path="/reciever/booklist" element={<BookList />}></Route>
+      <Route path="/reciever/searchbooks" element={<SearchBooks />}></Route>
+      <Route path="/reciever/bookinfo" element={<BookInfo />}></Route>
+      <Route path="/reciever/finish" element={<Finish />}></Route>
+      <Route
+        path="/reciever/searchbooklist"
+        element={<SearchBookList />}
+      ></Route>
     </Routes>
-)
-}
-
+  );
+};
 
-export default PageRoute;
+export default PageRoute;

src/components/BookStatus.jsx

@@ -0,0 +1,74 @@
+import { Link, useNavigate } from "react-router-dom";
+import { Navigate } from "react-router-dom";
+const BookStatus = ({
+  id,
+  title,
+  curriculum,
+  subject,
+  publisher,
+  outsideImageUrl,
+}) => {
+  const handleClick = () => {
+    navigate("/reciever/bookinfo", {
+      state: {
+        title: title,
+        curriculum: curriculum,
+        subject: subject,
+        publisher: publisher,
+        outsideImageUrl: outsideImageUrl,
+      },
+    });
+  };
+  const navigate = useNavigate();
+  return (
+    <div
+      onClick={handleClick}
+      style={{ textDecoration: "none", color: "black" }}
+    >
+      <div
+        style={{
+          width: 353,
+          height: 120,
+          background: "white",
+          boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.08)",
+          borderRadius: 12,
+          display: "flex",
+          alignItems: "center",
+          padding: "5px",
+        }}
+      >
+        <div
+          style={{
+            marginRight: "10px",
+          }}
+        >
+          <img
+            src={outsideImageUrl}
+            alt="Book"
+            style={{
+              width: "84px",
+              height: "111px",
+              borderRadius: "5%",
+            }}
+          />
+        </div>
+
+        {/* Text container */}
+        <div style={{ textAlign: "left" }}>
+          <div style={{ marginBottom: "5px", fontWeight: "700" }}>
+            책 제목 : {title}
+          </div>
+          <div style={{ marginBottom: "5px", fontWeight: "700" }}>
+            학년 : {curriculum}
+          </div>
+          <div style={{ marginBottom: "5px", fontWeight: "700" }}>
+            과목 : {subject}
+          </div>
+          <div style={{ fontWeight: "700" }}>출판사 : {publisher}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BookStatus;

src/components/InputField.jsx

@@ -0,0 +1,16 @@
+import "../styles/inputfield.css";
+
+const InputField = ({ label, type, placeholder, value, onChange }) => (
+  <div className="inputfield-container">
+    <div className="input-label">{label}</div>
+    <input
+      className="signup-input"
+      type={type}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+    />
+  </div>
+);
+
+export default InputField;

src/components/InputField2.jsx

@@ -0,0 +1,15 @@
+import "../styles/inputfield.css";
+
+const InputField2 = ({ type, placeholder, value, onChange }) => (
+  <div className="textinputfield-container">
+    <input
+      style={{ width: "80%" }}
+      type={type}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+    />
+  </div>
+);
+
+export default InputField2;