Skip to content

Commit

Permalink
Merge pull request #64 from gunganghaljido/feature/조혜진
Browse files Browse the repository at this point in the history
Feat: 인기 시설 슬라이더 좌우 버튼 추가
  • Loading branch information
MEGUMMY1 authored Dec 12, 2024
2 parents ce43aea + c9434f7 commit 2cfea4f
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 4 deletions.
3 changes: 3 additions & 0 deletions public/icon/l/icon-left2.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions src/components/Lesson/Popular/Popular.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
padding: 20px 20px 32px;
display: flex;
flex-direction: column;
position: relative;
gap: 11px;

.titleContainer {
Expand Down Expand Up @@ -71,6 +72,28 @@
}
}

.navButtonLeft {
position: absolute;
border: none;
outline: none;
background: none;
cursor: pointer;
z-index: 10;
top: 40%;
left: 0;
}

.navButtonRight {
position: absolute;
border: none;
outline: none;
background: none;
cursor: pointer;
z-index: 10;
top: 40%;
right: 0;
}

.midContainer {
height: 10px;
background-color: $gray10;
Expand Down
23 changes: 20 additions & 3 deletions src/components/Lesson/Popular/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ import SportsImageComponent from '@/components/Asset/SportsImage';
import { SPORTSIMAGES } from '@/constants/asset';
import { formatCurrency } from '@/utils/formatCurrency';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import useOutsideClick from '@/hooks/useOutsideClick';
import { toggleState } from '@/states/toggleState';
import PopularSchedule from '@/components/Schedule/PopularSchedule';
Expand Down Expand Up @@ -235,22 +237,32 @@ export default function Popular() {
{`인기 시설 TOP ${topFacilities.length}`}
</div>
<div className={styles.bestContainer}>
<div className={styles.navigationButtons}>
<button className={`${styles.navButtonLeft} custom-prev`}>
<IconComponent name="left2" size="l" />
</button>
</div>
<Swiper
spaceBetween={12}
loop={true}
pagination={{ clickable: true }}
navigation={{
nextEl: '.custom-next',
prevEl: '.custom-prev',
}}
modules={[Navigation]}
breakpoints={{
0: {
slidesPerView: 2,
},
390: {
430: {
slidesPerView: 2.2,
},
430: {
600: {
slidesPerView: 3,
},
1024: {
slidesPerView: 3.5,
slidesPerView: 3.2,
},
}}
>
Expand Down Expand Up @@ -287,6 +299,11 @@ export default function Popular() {
</SwiperSlide>
))}
</Swiper>
<div className={styles.navigationButtons}>
<button className={`${styles.navButtonRight} custom-next`}>
<IconComponent name="right" size="l" />
</button>
</div>
</div>
</div>
<div className={styles.midContainer} />
Expand Down
6 changes: 5 additions & 1 deletion src/components/MapHome/MapContainer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -384,7 +384,11 @@ export default function MapContainer() {
</div>
<div
id="map"
style={{ width: '100%', height: '100vh', position: 'relative' }}
style={{
width: '100%',
height: 'calc(100vh - 121px)',
position: 'relative',
}}
></div>
{indicatorMode === 'sports' ? (
<PopularSports
Expand Down
3 changes: 3 additions & 0 deletions src/constants/asset.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ export const ICONS = {
m: '/icon/m/icon-left.svg',
s: '/icon/s/icon-left.svg',
},
left2: {
l: '/icon/l/icon-left2.svg',
},
menu: {
l: '/icon/l/icon-menu.svg',
m: '/icon/m/icon-menu.svg',
Expand Down

0 comments on commit 2cfea4f

Please sign in to comment.