-
- 필기한 흔적이 있나요?
-
+ 어느정도 필기하셨나요?
- {checkBoxList.slice(0, 4).map((item) => (
+ {checkBoxList.slice(0, 5).map((item) => (
handleCheckboxChange(item)}
+ checked={checkedItems['어느정도'] === item}
+ onChange={() => handleCheckboxChange(item, '어느정도')}
/>
{item}
))}
-
- 보존 상태는 어떤가요?
-
-
-
-
+ 무엇으로 필기하셨나요?
+
+
+
+
+ {checkBoxList.slice(5, 7).map((item) => (
+
+
+ handleCheckboxChange(item, '무엇으로')}
+ />
+ {item}
+
+
+ ))}
+
+ 책의 상태는 어떤가요?
+
+
+
- {checkBoxList.slice(4).map((item) => (
+ {checkBoxList.slice(7).map((item) => (
handleCheckboxChange(item)}
+ checked={checkedItems['책의 상태'] && checkedItems['책의 상태'].includes(item)}
+ onChange={() => handleCheckboxChange(item, '책의 상태')}
/>
{item}
diff --git a/src/pages/main/check.js b/src/pages/main/check.js
index f659983..e7fa76e 100644
--- a/src/pages/main/check.js
+++ b/src/pages/main/check.js
@@ -252,7 +252,7 @@ return (
기부할 참고서는 훼손의 정도가 심하지 않아야 합니다.
- ex : 찢어짐, 파손됨
+ ex : 찢어짐, 파손됨 !
diff --git a/src/pages/main/choose.js b/src/pages/main/choose.js
index fbd580e..b0559d9 100644
--- a/src/pages/main/choose.js
+++ b/src/pages/main/choose.js
@@ -1,39 +1,38 @@
-import React from 'react'
-import styled from '@emotion/styled'
-import backgroundImage from '../../assets/background/background.png'
-import donate3d from '../../assets/icon/donate3d.png'
-import PostBtn from '../../components/postbtn'
-import PostBtn1 from '../../components/postbtn1'
-import Header from '../../components/Layout/Header'
+import React from "react";
+import styled from "@emotion/styled";
+import backgroundImage from "../../assets/background/background.png";
+import donate3d from "../../assets/icon/donate3d.png";
+import PostBtn from "../../components/postbtn";
+import PostBtn1 from "../../components/postbtn1";
+import Header from "../../components/Layout/Header";
const randomRange = (min, max) => {
-const rand = Math.random();
-return min + Math.floor(rand * (max - min + 1));
+ const rand = Math.random();
+ return min + Math.floor(rand * (max - min + 1));
};
const PostBg = styled.div`
- background: url(${backgroundImage}) no-repeat center center fixed;
- background-size: cover; /* 배경 이미지를 화면에 꽉 채우도록 설정 */
- height: 876px; /* 화면 높이를 860px로 설정 */
- width: 390px;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- position: relative;
- z-index: 0;
-
+ background: url(${backgroundImage}) no-repeat center center fixed;
+ background-size: cover; /* 배경 이미지를 화면에 꽉 채우도록 설정 */
+ height: 876px; /* 화면 높이를 860px로 설정 */
+ width: 390px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ position: relative;
+ z-index: 0;
`;
const generateRandomStyles = () => {
-const randomX = Math.random() * 100;
-const randomOffset = randomRange(-100, 100);
-const randomXEnd = randomX + randomOffset;
-const randomXEndYoyo = randomX + randomOffset / 2;
-const randomYoyoTime = randomRange(30000, 80000) / 100000;
-const randomYoyoY = randomYoyoTime * 100;
-const randomScale = Math.random();
-const fallDuration = randomRange(10, 30);
-return {
+ const randomX = Math.random() * 100;
+ const randomOffset = randomRange(-100, 100);
+ const randomXEnd = randomX + randomOffset;
+ const randomXEndYoyo = randomX + randomOffset / 2;
+ const randomYoyoTime = randomRange(30000, 80000) / 100000;
+ const randomYoyoY = randomYoyoTime * 100;
+ const randomScale = Math.random();
+ const fallDuration = randomRange(10, 30);
+ return {
randomX,
randomXEnd,
randomXEndYoyo,
@@ -41,84 +40,93 @@ return {
randomYoyoY,
randomScale,
fallDuration,
+ };
};
-};
-
const generateSnowflakes = () => {
-const snowflakes = [];
+ const snowflakes = [];
-for (let i = 1; i <= 200; i++) {
+ for (let i = 1; i <= 200; i++) {
const styles = generateRandomStyles();
snowflakes.push({
- id: i,
- styles,
+ id: i,
+ styles,
});
-}
+ }
-return snowflakes;
+ return snowflakes;
};
const Snow = styled.div`
-position: fixed;
-width: 10px;
-height: 10px;
-background: white; // Change the background color to black
-pointer-events: none;
-border-radius: 50%;
-
-${({ id, styles }) => `
+ position: fixed;
+ width: 10px;
+ height: 10px;
+ background: white; // Change the background color to black
+ pointer-events: none;
+ border-radius: 50%;
+
+ ${({ id, styles }) => `
&:nth-child(${id}) {
opacity: ${Math.random()};
- transform: translate(${styles.randomX}vw, -10px) scale(${styles.randomScale});
- animation: fall-${id} ${styles.fallDuration}s -${Math.random() * 30}s linear infinite;
+ transform: translate(${styles.randomX}vw, -10px) scale(${
+ styles.randomScale
+ });
+ animation: fall-${id} ${styles.fallDuration}s -${
+ Math.random() * 30
+ }s linear infinite;
}
@keyframes fall-${id} {
${styles.randomYoyoTime * 100}% {
- transform: translate(${styles.randomXEnd}vw, ${styles.randomYoyoY}vh) scale(${styles.randomScale});
+ transform: translate(${styles.randomXEnd}vw, ${
+ styles.randomYoyoY
+ }vh) scale(${styles.randomScale});
}
to {
- transform: translate(${styles.randomXEndYoyo}vw, 100vh) scale(${styles.randomScale});
+ transform: translate(${styles.randomXEndYoyo}vw, 100vh) scale(${
+ styles.randomScale
+ });
}
}
`}
`;
-
-
const BoxImg = styled.div`
- position:fixed;
- z-index:2;
- position:absolute;
- left:50%;
- transform:translateX(-50%);
- bottom:30%;
-
+ position: fixed;
+ z-index: 2;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 30%;
`;
const Hello = () => {
-const snowflakes = generateSnowflakes();
-
-
-return (
- <>
-
- {snowflakes.map((snowflake) => (
-
- ))}
+ const snowflakes = generateSnowflakes();
+
+ return (
+ <>
+
+ {snowflakes.map((snowflake) => (
+
+ ))}
-
+
-
- 
+ 
-
-
+
+
-
-);
+ );
};
export default Hello;
diff --git a/src/pages/main/userlogin.js b/src/pages/main/userlogin.js
new file mode 100644
index 0000000..f9b3960
--- /dev/null
+++ b/src/pages/main/userlogin.js
@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { Route } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import "../../styles/agencylogin.css";
+import Header from '../../components/Layout/Header'
+
+const AgencyLogin = () => {
+const navigate = useNavigate();
+const [id, setId] = useState("");
+const [password, setPassword] = useState("");
+
+const handleSignIn = async () => {
+ try {
+ const response = await axios.post("/login", {
+ id,
+ password,
+ });
+ navigate("/reciever/booklist");
+ } catch (error) {
+ console.log(error);
+ }
+};
+
+return (
+
+
+
+
+
BookBridge
+
나의 시작이 될 수 있게
+
+
+ setId(e.target.value)}
+ placeholder="id"
+ className="input-field"
+ />
+ setPassword(e.target.value)}
+ placeholder="Password"
+ className="input-field"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
회원가입
+
회원이 되어 기부를 경험해보세요.
+
+
+
+
+
+
BookBridge
+
나의 시작이 될 수 있게
+
+
+ setId(e.target.value)}
+ placeholder="id"
+ className="input-field"
+ />
+ setPassword(e.target.value)}
+ placeholder="Password"
+ className="input-field"
+ />
+ {/*
+
+
+
+
복지관 회원가입
+
인증을 통해 참고서를 지원받으세요
+
+
+
+
+
정보 세부보기
+
+
+
+ {title} / {subject}
+
+
+
+
+
+ | 교과 과정 |
+ {curriculum} |
+
+
+ | 출판사 |
+ {publisher} |
+
+
+ | 필기 도구 |
+ 연필/샤프 |
+
+
+ | 필기 상태 |
+ 깨끗함 |
+
+
+ | 보존 상태 |
+ 겉표지 깨끗함 |
+
+
+
+
+
+
+
+
+
+
+
+
+
목록
+
+
+
+
+
+ {books.map((book) => (
+
+ ))}
+
+
+
신청 완료!
+
+ 사용자에게 메일로 정보가 발송됩니다.
+
+
+
+
+
+
+
+
목록
+ {books.map((book) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SearchBooks;
diff --git a/src/styles/agencylogin.css b/src/styles/agencylogin.css
new file mode 100644
index 0000000..d5489bf
--- /dev/null
+++ b/src/styles/agencylogin.css
@@ -0,0 +1,60 @@
+.login-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ height: 100vh;
+ background-color: #fff;
+}
+
+.header-login {
+ margin-top: 100px;
+ text-align: center;
+ padding-bottom: 40px;
+}
+
+.title {
+ color: #000;
+ text-align: center;
+ font-family: Noto Sans KR;
+ font-size: 48px;
+ font-style: normal;
+ font-weight: 900;
+}
+
+.subtitle {
+ color: #000;
+ font-family: Noto Sans KR;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 700;
+}
+
+.form {
+ width: 100%;
+ max-width: 400px;
+ margin: 20px;
+}
+
+.input-field {
+ width: 95%;
+ height: 50px;
+ padding: 10px;
+ margin-bottom: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+
+.sign-in-button,
+.sign-up-button {
+ width: 100%;
+ height: 60px;
+ padding: 10px;
+ margin-top: 20px;
+ border: none;
+ border-radius: 5px;
+ color: #fff;
+ background-color: #367aff;
+ cursor: pointer;
+ font-size: 20px;
+}
diff --git a/src/styles/agencysignup.css b/src/styles/agencysignup.css
new file mode 100644
index 0000000..50f4c21
--- /dev/null
+++ b/src/styles/agencysignup.css
@@ -0,0 +1,33 @@
+.agencysignup-container {
+ height: 100vh;
+ background-image: url("../assets/background.png");
+ background-size: cover;
+}
+.agencysignup-header {
+ padding: 40px;
+ color: white;
+}
+.agencysignup-header :first-child {
+ color: #fff;
+ font-family: Inter;
+ font-size: 25px;
+ font-style: normal;
+ font-weight: 800;
+ line-height: normal;
+ padding-bottom: 10px;
+}
+
+.signup-submit {
+ color: white;
+ border-radius: 20px;
+ border: none;
+ background: #5297ff;
+ height: 70px;
+ width: 250px;
+ font-weight: bold;
+ font-size: x-large;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 30px;
+}
diff --git a/src/styles/bookinfo.css b/src/styles/bookinfo.css
new file mode 100644
index 0000000..68b36a0
--- /dev/null
+++ b/src/styles/bookinfo.css
@@ -0,0 +1,65 @@
+.bookinfo-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+}
+
+.header-info {
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ color: black;
+ font-size: 25px;
+ font-family: "Noto Sans KR";
+ font-weight: 700;
+ word-wrap: break-word;
+ padding: 20px;
+}
+
+.bookImg {
+ margin: auto;
+ width: 200px;
+ height: 280px;
+}
+
+.bookTitle {
+ width: 100%;
+ height: 100%;
+ text-align: left;
+ color: black;
+ font-size: 24px;
+ font-family: "Noto Sans KR";
+ font-weight: 900;
+ padding: 15px;
+ border-bottom: solid 1px;
+}
+
+.bookTable {
+ width: 400px;
+ font-size: 20px;
+}
+
+.bookTable td {
+ text-align: left;
+ font-weight: 800;
+ padding: 10px;
+}
+
+.bookTable td:nth-of-type(2) {
+ font-weight: 400;
+}
+
+.applyButton {
+ width: 300px;
+ height: 56px;
+ background: #5297ff;
+ border-radius: 20px;
+ border: none;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ font-weight: 700;
+ font-size: 24px;
+ margin-top: 30px;
+}
diff --git a/src/styles/booklist.css b/src/styles/booklist.css
new file mode 100644
index 0000000..8da6be2
--- /dev/null
+++ b/src/styles/booklist.css
@@ -0,0 +1,29 @@
+.header-list {
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ color: black;
+ font-size: 30px;
+ font-family: "Noto Sans KR";
+ font-weight: 700;
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+.select {
+ display: flex;
+ justify-content: center;
+}
+.select-curriculum,
+.select-subject {
+ padding: 5px;
+ font-weight: 900;
+ font-size: large;
+}
+
+.select-subject {
+ margin-left: 40px;
+}
+
+.booklist {
+ padding-top: 20px;
+}
diff --git a/src/styles/finish.css b/src/styles/finish.css
new file mode 100644
index 0000000..8bc1e2e
--- /dev/null
+++ b/src/styles/finish.css
@@ -0,0 +1,52 @@
+.finish-container {
+ background-image: url("../assets/background.png");
+ width: 100%;
+ height: 100vh;
+ background-size: cover;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ color: white;
+}
+
+.header-finish {
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ color: white;
+ font-size: 30px;
+ font-family: "Noto Sans KR";
+ font-weight: 900;
+ word-wrap: break-word;
+ margin-top: 100px;
+}
+
+.finish-subHeader {
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ color: white;
+ font-size: 20px;
+ font-family: "Noto Sans KR";
+ font-weight: 500;
+ word-wrap: break-word;
+}
+
+.toListBtn {
+ color: black;
+ font-size: 16px;
+ font-family: "Noto Sans KR";
+ font-weight: 700;
+ width: 200px;
+ height: 50px;
+ border-radius: 5%;
+ border: none;
+ word-wrap: break-word;
+}
+
+.giftboxImg {
+ width: 400px;
+ height: auto;
+}
diff --git a/src/styles/inputfield.css b/src/styles/inputfield.css
new file mode 100644
index 0000000..1c53c37
--- /dev/null
+++ b/src/styles/inputfield.css
@@ -0,0 +1,32 @@
+.inputfield-container {
+ margin-left: 20px;
+ margin-top: 30px;
+}
+
+.textinputfield-container {
+ margin-left: 20px;
+ margin-top: 30px;
+}
+
+
+.input-label {
+ color: white;
+ font-family: Inter;
+ font-size: 15px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ margin: 10px;
+}
+
+.signup-input {
+ width: 90%;
+ height: 30px;
+ border-radius: 20px;
+ border: none;
+ padding-left: 20px;
+}
+
+.signup-input::placeholder {
+ color: transparent;
+}