Merge pull request #39 from KUSITMS-29th-TEAM-D/feature/#20/recommend

[FEAT] 경험추천 홈 구현

src/components/ExperienceRecommendPage/AdevertieseCard.tsx

@@ -0,0 +1,51 @@
+import { Link } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+import Card2 from '@/assets/advertise/advertise2.png';
+import Card3 from '@/assets/advertise/advertise3.png';
+import Video1 from '@/assets/banner.mp4';
+import { AdvertiseCarousel } from '@/components/ExperienceRecommendPage/AdvertiseCarousel';
+
+const AdvertiseCard = () => {
+  return (
+    <AdvertiseCarousel>
+      <StyledLink to="/">
+        <CardMedia>
+          <video src={Video1} autoPlay muted loop playsInline />
+        </CardMedia>
+      </StyledLink>
+      <StyledLink to="/">
+        <CardMedia>
+          <img src={Card2} alt="Card 2" />
+        </CardMedia>
+      </StyledLink>
+      <StyledLink to="/">
+        <CardMedia>
+          <img src={Card3} alt="Card 3" />
+        </CardMedia>
+      </StyledLink>
+    </AdvertiseCarousel>
+  );
+};
+export default AdvertiseCard;
+
+const CardMedia = styled.div`
+  width: 1224px;
+  height: 531px;
+  position: relative;
+  border-radius: 24px;
+  overflow: hidden;
+
+  img,
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const StyledLink = styled(Link)`
+  display: block;
+  text-decoration: none;
+  color: inherit;
+`;

src/components/ExperienceRecommendPage/AdvertiseCarousel.tsx

@@ -0,0 +1,86 @@
+import Slider from 'react-slick';
+import styled from 'styled-components';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+import { CarouselButton2 } from '@/components/common/Button/CarouselButton2';
+
+const settings = {
+  infinite: true,
+  speed: 500,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  nextArrow: <CarouselButton2 direction="next" />,
+  prevArrow: <CarouselButton2 direction="prev" />,
+  variableWidth: true,
+  autoplay: true,
+  autoplaySpeed: 5000,
+  dots: true,
+};
+
+interface CarouselProps {
+  gap?: string;
+  children: React.ReactNode;
+}
+
+export const AdvertiseCarousel = ({ gap = '10px', children }: CarouselProps) => {
+  return (
+    <SliderWrapper $gap={gap}>
+      <Slider {...settings}>{children}</Slider>
+    </SliderWrapper>
+  );
+};
+
+const SliderWrapper = styled.div<{ $gap: string }>`
+  .slick-list {
+    padding: 5px;
+
+    .slick-track {
+      display: flex;
+      gap: ${({ $gap }) => $gap};
+    }
+    .slick-track:before,
+    .slick-track:after {
+      content: none;
+    }
+  }
+
+  .slick-dots {
+    bottom: 24px;
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+    gap: ${({ $gap }) => $gap};
+    li {
+      margin: 0;
+      width: 25px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      button {
+        &:before {
+          font-size: 0;
+          display: block;
+          width: 16px;
+          height: 16px;
+          background-color: ${({ theme }) => theme.color.gray500};
+          border-radius: 50%;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+    .slick-active {
+      button:before {
+        width: 32px;
+        height: 16px;
+        background-color: ${({ theme }) => theme.color.white};
+        border-radius: 8px;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+`;

src/components/ExperienceRecommendPage/AmountBox.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+
+import styled from 'styled-components';
+
+import { AmountModal } from '@/components/ExperienceRecommendPage/AmountModal';
+
+interface AmountBoxProps {
+  onApply: (min: number, max: number) => void;
+}
+
+export const AmountBox = ({ onApply }: AmountBoxProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [minAmount, setMinAmount] = useState(0);
+  const [maxAmount, setMaxAmount] = useState(20000);
+
+  const handleApply = (min: number, max: number) => {
+    setMinAmount(min);
+    setMaxAmount(max);
+    setIsModalOpen(false);
+    onApply(min, max);
+  };
+
+  return (
+    <>
+      <Container>
+        <Content>
+          <Label>금액</Label>
+          <AmountRange>
+            <Amount>{minAmount}</Amount>
+            <Amount isMain>~</Amount>
+            <Amount>{maxAmount}</Amount>
+            <Currency>원</Currency>
+          </AmountRange>
+        </Content>
+        <ApplyButton onClick={() => setIsModalOpen(true)}>
+          <ApplyText>적용</ApplyText>
+        </ApplyButton>
+      </Container>
+      {isModalOpen && (
+        <AmountModal
+          onApply={handleApply}
+          onClose={() => setIsModalOpen(false)}
+          isOpen={isModalOpen}
+        />
+      )}
+    </>
+  );
+};
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 8px 12px;
+  background: ${({ theme }) => theme.color.white};
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.13);
+  border-radius: 8px;
+  gap: 16px;
+  width: 312px;
+`;
+
+const Content = styled.div`
+  flex: 1 1 0;
+  height: 28px;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  //gap: 4px;
+`;
+
+const Label = styled.div`
+  text-align: center;
+  color: ${({ theme }) => theme.color.gray700};
+  ${({ theme }) => theme.font.desktop.body2r};
+`;
+
+const AmountRange = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  justify-content: flex-end;
+`;
+
+const Amount = styled.div<{ isMain?: boolean }>`
+  color: ${({ theme }) => theme.color.gray300};
+  ${({ theme }) => theme.font.desktop.body1m};
+
+  ${({ isMain }) =>
+    isMain &&
+    `
+    color: #333333;
+  `}
+`;
+
+const Currency = styled.div`
+  color: ${({ theme }) => theme.color.gray700};
+  ${({ theme }) => theme.font.desktop.body2r};
+`;
+
+const ApplyButton = styled.div`
+  width: 55px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  background: ${({ theme }) => theme.color.gray800};
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  display: flex;
+`;
+
+const ApplyText = styled.div`
+  color: ${({ theme }) => theme.color.white};
+  ${({ theme }) => theme.font.desktop.label2};
+`;