diff --git a/frontend/src/assets/images/banner_desktop1.png b/frontend/src/assets/images/banner_desktop1.png new file mode 100644 index 0000000..a854005 Binary files /dev/null and b/frontend/src/assets/images/banner_desktop1.png differ diff --git a/frontend/src/assets/images/banner_desktop2.png b/frontend/src/assets/images/banner_desktop2.png new file mode 100644 index 0000000..7962117 Binary files /dev/null and b/frontend/src/assets/images/banner_desktop2.png differ diff --git a/frontend/src/assets/images/nextButton.png b/frontend/src/assets/images/nextButton.png new file mode 100644 index 0000000..0f8cad2 Binary files /dev/null and b/frontend/src/assets/images/nextButton.png differ diff --git a/frontend/src/assets/images/prevButton.png b/frontend/src/assets/images/prevButton.png new file mode 100644 index 0000000..0480325 Binary files /dev/null and b/frontend/src/assets/images/prevButton.png differ diff --git a/frontend/src/components/@common/Footer/Footer.styles.ts b/frontend/src/components/@common/Footer/Footer.styles.ts new file mode 100644 index 0000000..18f47a4 --- /dev/null +++ b/frontend/src/components/@common/Footer/Footer.styles.ts @@ -0,0 +1,43 @@ +import styled from 'styled-components'; + +export const FooterContainer = styled.footer` + text-align: left; + font-size: 0.75rem; + padding: 0 140px; + + @media (max-width: 499px) { + padding: 0 20px; + } +`; + +export const Divider = styled.hr` + border: none; + border-top: 1px solid #c5c5c5; +`; + +export const FooterContent = styled.div` + display: flex; + flex-direction: column; + padding: 20px 0 30px 0; + line-height: 1.25rem; + color: #818181; + + @media (max-width: 499px) { + font-size: 0.625rem; + } +`; + +export const PolicyText = styled.p``; + +export const CopyRightText = styled.p``; + +export const EmailText = styled.p` + a { + color: #aaa; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +`; diff --git a/frontend/src/components/@common/Footer/Footer.tsx b/frontend/src/components/@common/Footer/Footer.tsx new file mode 100644 index 0000000..34272a6 --- /dev/null +++ b/frontend/src/components/@common/Footer/Footer.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import * as Styled from './Footer.styles'; + +const Footer = () => { + return ( + <> + + + + 개인정보 처리방침 + + Copyright © moodong. All Rights Reserved + + + e-mail: example@example.com + + + + + ); +}; + +export default Footer; diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx index bc0c757..103b4f7 100644 --- a/frontend/src/pages/MainPage/MainPage.tsx +++ b/frontend/src/pages/MainPage/MainPage.tsx @@ -4,6 +4,8 @@ import ClubCard from '@/pages/MainPage/components/ClubCard/ClubCard'; import StatusRadioButton from '@/pages/MainPage/components/StatusRadioButton/StatusRadioButton'; import { mockClubs } from '@/apis/mockClubs'; import * as Styled from './MainPage.styles'; +import Banner from '@/pages/MainPage/components/Banner/Banner'; +import { BannerImageList } from '@/utils/banners'; const MainPage = () => { const [isFilterActive, setIsFilterActive] = useState(false); @@ -38,6 +40,7 @@ const MainPage = () => { return ( + diff --git a/frontend/src/pages/MainPage/components/Banner/Banner.styles.ts b/frontend/src/pages/MainPage/components/Banner/Banner.styles.ts new file mode 100644 index 0000000..e9b1484 --- /dev/null +++ b/frontend/src/pages/MainPage/components/Banner/Banner.styles.ts @@ -0,0 +1,62 @@ +import styled from 'styled-components'; + +export interface BannerProps { + backgroundImage?: string; +} + +export const BannerContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin-top: 80px; + position: relative; +`; + +export const BannerWrapper = styled.div` + position: relative; + width: 1180px; + height: 316px; + border-radius: 26px; + overflow: hidden; + background-color: transparent; + ${({ backgroundImage }) => + backgroundImage && + ` + background-image : url(${backgroundImage}); + background-size: cover; + background-position: center; + `} +`; + +export const SlideWrapper = styled.div` + display: flex; + width: 100%; + height: 100%; + transition: all 0.5s ease-in-out; +`; + +export const BannerItem = styled.div` + flex: none; + width: 1180px; + height: 316px; +`; + +export const ButtonContainer = styled.div` + position: absolute; + width: 100%; + top: 50%; + display: flex; + align-items: center; + justify-content: space-between; + transform: translateY(-50%); + z-index: 10; +`; + +export const SlideButton = styled.button` + background-color: transparent; + color: black; + border: none; + padding: 10px 20px; + border-radius: 10px; + cursor: pointer; +`; diff --git a/frontend/src/pages/MainPage/components/Banner/Banner.tsx b/frontend/src/pages/MainPage/components/Banner/Banner.tsx new file mode 100644 index 0000000..5c2454c --- /dev/null +++ b/frontend/src/pages/MainPage/components/Banner/Banner.tsx @@ -0,0 +1,60 @@ +import React, { useRef, useState, useEffect } from 'react'; +import * as Styled from './Banner.styles'; +import { BannerProps } from './Banner.styles'; +import { SlideButton } from '@/utils/banners'; + +interface BannerComponentProps { + banners: BannerProps[]; +} + +const Banner = ({ banners }: BannerComponentProps) => { + const slideRef = useRef(null); + const [currentSlide, setCurrentSlide] = useState(0); + const IMG_WIDTH = 1180; + + useEffect(() => { + if (slideRef.current) { + slideRef.current.style.transform = `translateX(-${currentSlide * IMG_WIDTH}px)`; + } + }, [currentSlide]); + + const moveToNextSlide = () => { + setCurrentSlide((prev) => (prev + 1) % banners.length); + }; + + const moveToPrevSlide = () => { + setCurrentSlide((prev) => (prev - 1 + banners.length) % banners.length); + }; + + return ( + + + + + + + + + + + + {banners.map((banner, index) => ( + + {`banner-${index}`} + + ))} + + + + ); +}; + +export default Banner; diff --git a/frontend/src/utils/banners.ts b/frontend/src/utils/banners.ts new file mode 100644 index 0000000..4011985 --- /dev/null +++ b/frontend/src/utils/banners.ts @@ -0,0 +1,15 @@ +import FirstSlideImage from '../assets/images/banner_desktop1.png'; +import SecondSlideImage from '../assets/images/banner_desktop2.png'; +import PrevButton from '../assets/images/prevButton.png'; +import NextButton from '../assets/images/nextButton.png'; + +export const BannerImageList = [ + { + backgroundImage: FirstSlideImage, + }, + { + backgroundImage: SecondSlideImage, + }, +]; + +export const SlideButton = [PrevButton, NextButton];