<aside> 🗒️ 팀원들끼리 자유롭게 메모하는 공간입니다.
프로젝트와 관련된 내용이라면, 뭐든 좋습니다 !
</aside>
MySQL
DB 날리고 재생성
create database motimates02 default character set utf8mb4 collate utf8mb4_general_ci;
drop database motimates02;
이후 swiper 코드
import React, { useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Autoplay, Pagination } from 'swiper/modules';
import 'swiper/css';
import '../../styles/scss/components/swipertest.scss';
export default function SwiperTest({ groupArray, madeNumGroup }: any) {
return (
<div className="swiper-button-container">
<div className="swiper-button-prev">
<img src="/asset/icons/left.svg" alt="swiper-button-left" />
</div>
<Swiper
slidesPerView={2}
centeredSlides={true}
spaceBetween={10}
pagination={{
clickable: true,
}}
navigation={{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}}
// grabCursor={true}
// effect={'coverflow'}
// hashNavigation={{
// watchState: true,
// }}
autoplay={{ delay: 2000, disableOnInteraction: false }}
modules={[Pagination, Navigation, Autoplay]}
loop={true}
className="mySwiper"
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 6,
},
768: {
slidesPerView: 2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 15,
},
}}
>
{groupArray?.map((groupInfo: any) => {
return (
<>
<SwiperSlide
data-hash="slide1"
style={{
backgroundColor: 'inherit',
border: 'none',
}}
>
<Link
to={`/group/home/${groupInfo.gSeq}`}
className="link-none"
>
<div className="swiper-group-wrapper">
<div className="card text-center">
<div className="title">
{/* icon */}
<i
className="fa fa-paper-plane"
aria-hidden="true"
></i>
<h2> {groupInfo.gName}</h2>
</div>
<div className="price">
<h4>
{/* <sup>$</sup> */}
{/* [추후] 디데이 형식으로 수정 */}
{groupInfo.gDday}
{/* [추후] 관심분야 */}
</h4>
</div>
<div className="option">
<ul>
<li>
<i
className="fa fa-check"
aria-hidden="true"
></i>
참석인원 수
{/* {madeNumGroup.count}/ */}
{groupInfo.gMaxMem}
</li>
</ul>
</div>
<button>보러 가기</button>
</div>
</div>
</Link>
</SwiperSlide>
</>
);
})}
{/* <SwiperSlide data-hash="slide2">
<div>
<div className="card text-center">
<div>hi</div>
</div>
</div>
</SwiperSlide> */}
</Swiper>
<div className="swiper-button-next">
<img src="/asset/icons/right.svg" alt="swiper-button-right" />
</div>
</div>
);
}
.swiper {
width: 100%;
height: 20rem;
padding: 1rem 2rem;
}
.swiper-slide {
text-align: center;
font-size: 18px;
// background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-button-next,
.swiper-button-prev {
width: 30px; /* 화살표 너비 설정 */
height: 30px; /* 화살표 높이 설정 */
background-size: 100%;
background-position: center;
position: relative;
border-radius: 50%; /* 원 모양으로 화살표 스타일링 (선택 사항) */
display: block;
cursor: pointer;
margin: 10px;
z-index: 0;
}
.swiper-button-container {
display: flex;
align-items: center;
}
// .card-wrapper {
// display: flex;
// gap: 5rem;
// }
.card {
position: relative;
z-index: 40;
min-width: 140px;
// max-width: 300px;
// height: auto;
background: linear-gradient(-45deg, #fe0847, #feae3f);
border-radius: 15px;
margin: 0 auto;
padding: 20px 10px;
-webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
box-shadow: 4px 8px 10px rgba(0, 0, 0, 0.3);
-webkit-transition: 0.4s;
transition: 0.4s;
// 모임명
.title h2 {
position: relative;
margin: 20px 0 0;
padding: 0;
color: #fff;
font-size: 1.6rem;
z-index: 2;
}
button {
position: relative;
z-index: 2;
background: #fff;
color: black;
width: 130px;
height: 30px;
line-height: 40px;
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 20px auto 0;
font-size: 16px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
font-weight: bold;
border: none;
}
// button:hover {
// text-decoration: none;
// }
}
.card:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.title .fa {
color: #fff;
font-size: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
line-height: 60px;
-webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
box-shadow: 6px 8px 8px rgba(0, 0, 0, 0.2);
}
// D-day
.price h4 {
margin: 0;
padding: 20px 0;
color: #fff;
font-size: 1rem;
}
.card::before {
// content: '';
// position: absolute;
// bottom: 0;
// left: 0;
width: 100%;
height: 40%;
background: rgba(255, 255, 255, 0.1);
// z-index: 1;
-webkit-transform: skewY(-5deg) scale(1.5);
transform: skewY(-5deg) scale(1.5);
}
//) [참고] 반응 없음..
// .col-sm-4:nth-child(1) .card,
// .col-sm-4:nth-child(1) .card .title .fa {
// background: linear-gradient(-45deg, #f403d1, #64b5f6);
// }
// .col-sm-4:nth-child(2) .card,
// .col-sm-4:nth-child(2) .card .title .fa {
// background: linear-gradient(-45deg, #ffec61, #f321d7);
// }
// .col-sm-4:nth-child(3) .card,
// .col-sm-4:nth-child(3) .card .title .fa {
// background: linear-gradient(-45deg, #24ff72, #9a4eff);
// }
// .option ul {
// margin: 0;
// padding: 0;
// }
.option ul li {
margin: 0 0 10px;
padding: 0;
list-style: none;
color: #fff;
font-size: 16px;
}