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