Merge pull request #65 from LikeLionHGU/yeji-style/#60

Yeji style/#60
LikeLionHGU · Feb 20, 2024 · eaf03e7 · eaf03e7
2 parents 6f1125c + 7d22990
commit eaf03e7
Show file tree

Hide file tree

Showing 16 changed files with 136 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <input type="radio" name="testy" value="aaa" id="aaa" />
+    <label for="aaa">AAA</label>
+  </body>
+</html>
diff --git a/src/Main.css 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
@@ -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
@@ -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
@@ -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"
                   />
-                  <label for="gender">여성</label>
+                  <label for="female">여성</label>
                   <input
                     type="radio"
                     name="gender"
@@ -140,8 +141,9 @@ const SignUp = () => {
                     }}
                     className={!message ? "inputLogin" : "err_gender"}
                     value="male"
+                    id="male"
                   />
-                  <label for="gender">남성</label>
+                  <label for="male">남성</label>
                 </div>
               </div>
             </div>
@@ -160,9 +162,9 @@ const SignUp = () => {
           </div>
 
           <div className={styles.btn}>
-            <Link to="/complete">
-              <button onClick={registeraxios}>회원정보 등록</button>
-            </Link>
+            {/* <Link to="/complete"> */}
+            <button onClick={registeraxios}>회원정보 등록</button>
+            {/* </Link> */}
           </div>
         </div>
       </div>

diff --git 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
@@ -1,11 +1,12 @@
 import styles from "./Banner.module.css";
+import Slider from "./Slider";
 
 export default function Banner() {
   return (
     <div className={styles.banner}>
-      <div className={styles.rect}>
-        <h1>슬라이드 1</h1>
-      </div>
+      {/* <div className={styles.rect}> */}
+      <Slider></Slider>
+      {/* </div> */}
     </div>
   );
 }
diff --git a/src/banner/Slider.jsx 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 (
+    <Swiper
+      style={{ margin: "auto", whiteSpace: "pre-wrap" }}
+      breakpoints={{
+        0: {
+          slidesPerView: 1,
+        },
+        900: {
+          slidesPerView: 1,
+        },
+      }}
+      // freeMode={true} // 자유로운가
+      loop={true} // 무한 루프
+      speed={1000} // 슬라이드 이동 속도
+      // loopedSlides={1}
+      lazyLoading={true}
+      loopAdditionalSlides={true}
+      autoplay={{ delay: 1000, disableOnInteraction: false }} // 자동 이동
+      slideToClickedSlide={true} // 슬라이드 클릭 시 이동
+      className="swiper"
+      pagination={{ clickable: true }}
+    >
+      <SwiperSlide>
+        <div className="underbar">
+          <img src={banner1} />
+        </div>
+      </SwiperSlide>
+      <SwiperSlide>
+        <img src={banner2} />
+      </SwiperSlide>
+      <SwiperSlide>
+        <img src={banner3} />
+      </SwiperSlide>
+    </Swiper>
+  );
+}
diff --git a/src/banner/Slider.module.css 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
diff --git a/src/banner/img/banner2.png b/src/banner/img/banner2.png
diff --git a/src/banner/img/banner3.png b/src/banner/img/banner3.png
diff --git 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