Merge branch 'develop/fe' into feature/#39-mainpage_card_list

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;
+    }
+  }
+`;

frontend/src/components/@common/Footer/Footer.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import * as Styled from './Footer.styles';
+
+const Footer = () => {
+  return (
+    <>
+      <Styled.Divider />
+      <Styled.FooterContainer>
+        <Styled.FooterContent>
+          <Styled.PolicyText>개인정보 처리방침</Styled.PolicyText>
+          <Styled.CopyRightText>
+            Copyright © moodong. All Rights Reserved
+          </Styled.CopyRightText>
+          <Styled.EmailText>
+            e-mail: <a href='mailto:[email protected]'>[email protected]</a>
+          </Styled.EmailText>
+        </Styled.FooterContent>
+      </Styled.FooterContainer>
+    </>
+  );
+};
+
+export default Footer;

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 (
     <Styled.PageContainer>
+      <Banner banners={BannerImageList} />
       <CategoryButtonList onCategorySelect={handleCategorySelect} />
       <Styled.FilterWrapper>
         <StatusRadioButton onChange={handleFilterChange} />

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<BannerProps>`
+  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;
+`;

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<HTMLDivElement>(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 (
+    <Styled.BannerContainer>
+      <Styled.BannerWrapper>
+        <Styled.ButtonContainer>
+          <Styled.SlideButton onClick={moveToPrevSlide}>
+            <img src={SlideButton[0]} />
+          </Styled.SlideButton>
+          <Styled.SlideButton onClick={moveToNextSlide}>
+            <img src={SlideButton[1]} />
+          </Styled.SlideButton>
+        </Styled.ButtonContainer>
+        <Styled.SlideWrapper ref={slideRef}>
+          {banners.map((banner, index) => (
+            <Styled.BannerItem key={index}>
+              <img
+                src={banner.backgroundImage}
+                alt={`banner-${index}`}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                }}
+              />
+            </Styled.BannerItem>
+          ))}
+        </Styled.SlideWrapper>
+      </Styled.BannerWrapper>
+    </Styled.BannerContainer>
+  );
+};
+
+export default Banner;

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];