diff --git a/package-lock.json b/package-lock.json
index 33ece50..c3a1649 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
"react-router-dom": "^6.22.0",
"react-scripts": "5.0.1",
"recoil": "^0.7.7",
+ "swiper": "^11.0.6",
"resolve-url-loader": "^5.0.0",
"web-vitals": "^2.1.4"
},
@@ -16960,6 +16961,24 @@
"boolbase": "~1.0.0"
}
},
+ "node_modules/swiper": {
+ "version": "11.0.6",
+ "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.6.tgz",
+ "integrity": "sha512-W/Me7MQl5rNgdM5x9i3Gll76WsyVpnHn91GhBOyL7RCFUeg62aVnflzlVfIpXzZ/87FtJOfAoDH79ZH2Yq76zA==",
+ "funding": [
+ {
+ "type": "patreon",
+ "url": "https://www.patreon.com/swiperjs"
+ },
+ {
+ "type": "open_collective",
+ "url": "http://opencollective.com/swiper"
+ }
+ ],
+ "engines": {
+ "node": ">= 4.7.0"
+ }
+ },
"node_modules/symbol-tree": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 93b25aa..532f723 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"react-router-dom": "^6.22.0",
"react-scripts": "5.0.1",
"recoil": "^0.7.7",
+ "swiper": "^11.0.6",
"resolve-url-loader": "^5.0.0",
"web-vitals": "^2.1.4"
},
diff --git a/public/test.html b/public/test.html
new file mode 100644
index 0000000..ebd52ec
--- /dev/null
+++ b/public/test.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
diff --git a/src/Main.css b/src/Main.css
new file mode 100644
index 0000000..e2ca971
--- /dev/null
+++ b/src/Main.css
@@ -0,0 +1,10 @@
+.swiper-pagination-bullet {
+ background: transparent !important;
+ border: 2px solid white !important;
+ margin-right: 15px;
+}
+
+.swiper-pagination-bullet-active {
+ background: white !important;
+ border: 2px solid white !important;
+}
diff --git a/src/Main.js b/src/Main.js
index d17a3d3..9637bae 100644
--- a/src/Main.js
+++ b/src/Main.js
@@ -2,6 +2,7 @@ import React from "react";
import Banner from "./banner/Banner";
import Grid from "./grid/Grid";
import Header from "./header/Header";
+import "./Main.css";
export default function Main() {
return (
diff --git a/src/account/LogIn.js b/src/account/LogIn.js
index 50fdaec..0f29629 100644
--- a/src/account/LogIn.js
+++ b/src/account/LogIn.js
@@ -2,7 +2,7 @@
import { Link, useNavigate } from "react-router-dom";
import axios from "axios";
import { useState } from "react";
-import Header from "../header/Header";
+// import Header from "../header/Header";
import LoginInnerRect from "./img/logininnerrect.png";
@@ -12,7 +12,8 @@ import emailicon from "./img/emailicon.png";
import pwicon from "./img/pwicon.png";
import kakaologo from "./img/kakaologo.png";
-import styles from "./Login.module.css";
+import styles from "./LogIn.module.css";
+
// import login from "./img/login.png";
diff --git a/src/account/SignUp.js b/src/account/SignUp.js
index 0e2f585..98c2766 100644
--- a/src/account/SignUp.js
+++ b/src/account/SignUp.js
@@ -36,7 +36,7 @@ const SignUp = () => {
console.log(response);
alert("회원가입성공");
if ((response.status = 200)) {
- return navigate("/mylogin");
+ return navigate("/complete");
}
})
.catch((err) => {
@@ -129,8 +129,9 @@ const SignUp = () => {
: "err_gender"
}
value="female"
+ id="female"
/>
-
+
{
}}
className={!message ? "inputLogin" : "err_gender"}
value="male"
+ id="male"
/>
-
+
@@ -160,9 +162,9 @@ const SignUp = () => {
-
-
-
+ {/* */}
+
+ {/* */}
diff --git a/src/account/SignUp.module.css b/src/account/SignUp.module.css
index 70f6200..59c8014 100644
--- a/src/account/SignUp.module.css
+++ b/src/account/SignUp.module.css
@@ -52,29 +52,29 @@
}
.gender {
- padding: 15px 10px;
+ padding-top: 6px;
}
.gender input[type="radio"] {
display: none;
}
.gender input[type="radio"] + label {
width: 240px;
- height: 40px;
+ height: 30px;
+ border-radius: 10px;
display: inline-block;
cursor: pointer;
- /* line-height: 24px; */
text-align: center;
color: #898989;
+ padding-top: 10px;
}
.gender input[type="radio"]:checked + label {
background-color: #ff8bc5;
- color: #fff;
+ color: white;
}
-/* .radio input {
- width: 20px;
-} */
+.gender label {
+}
.btn button {
width: 326px;
@@ -91,7 +91,7 @@ label {
color: #898989;
}
-p {
+.signup_input p {
margin-top: 0;
margin-bottom: 0;
}
diff --git a/src/banner/Banner.jsx b/src/banner/Banner.jsx
index 8575f12..e41bbe8 100644
--- a/src/banner/Banner.jsx
+++ b/src/banner/Banner.jsx
@@ -1,11 +1,12 @@
import styles from "./Banner.module.css";
+import Slider from "./Slider";
export default function Banner() {
return (
-
-
슬라이드 1
-
+ {/*
*/}
+
+ {/*
*/}
);
}
diff --git a/src/banner/Slider.jsx b/src/banner/Slider.jsx
new file mode 100644
index 0000000..2bd2958
--- /dev/null
+++ b/src/banner/Slider.jsx
@@ -0,0 +1,60 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import SwiperCore from "swiper";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
+
+import "swiper/css";
+import "swiper/scss";
+import "swiper/scss/navigation";
+import "swiper/scss/pagination";
+
+import banner1 from "./img/banner1.png";
+import banner2 from "./img/banner2.png";
+import banner3 from "./img/banner3.png";
+
+import "./Slider.module.css";
+
+SwiperCore.use([Navigation, Pagination, Autoplay]);
+
+export default function Slider() {
+ const swiperStyle = {
+ // position: "relative",
+ width: "100%",
+ height: "550px",
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/banner/Slider.module.css b/src/banner/Slider.module.css
new file mode 100644
index 0000000..3542ed0
--- /dev/null
+++ b/src/banner/Slider.module.css
@@ -0,0 +1,5 @@
+.underbar {
+ width: 100%;
+ height: 37px;
+ background-color: black;
+}
diff --git a/src/banner/img/banner1.png b/src/banner/img/banner1.png
new file mode 100644
index 0000000..ac3c634
Binary files /dev/null and b/src/banner/img/banner1.png differ
diff --git a/src/banner/img/banner2.png b/src/banner/img/banner2.png
new file mode 100644
index 0000000..e2d8e30
Binary files /dev/null and b/src/banner/img/banner2.png differ
diff --git a/src/banner/img/banner3.png b/src/banner/img/banner3.png
new file mode 100644
index 0000000..701c217
Binary files /dev/null and b/src/banner/img/banner3.png differ
diff --git a/src/header/Header.module.css b/src/header/Header.module.css
index dfdeea8..48a233c 100644
--- a/src/header/Header.module.css
+++ b/src/header/Header.module.css
@@ -1,5 +1,8 @@
.header {
padding-top: 29px;
+ padding-left: 16.3%;
+ padding-right: 24.7vh;
+ padding-bottom: 95px;
width: 100%;
display: flex;
margin: auto;
@@ -8,8 +11,8 @@
}
.header .logo img {
- width: 127px;
- height: 42px;
+ width: 157px;
+ height: 36px;
margin-right: 50px;
}
diff --git a/src/header/image/logo.png b/src/header/image/logo.png
index 2297937..7e37fd3 100644
Binary files a/src/header/image/logo.png and b/src/header/image/logo.png differ