Merge pull request #50 from SOPT-all/feat/#48/cartSection2

[feat/#48] 장바구니 section2 퍼블리싱

src/assets/svgs/IcCartGray.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcCartGray = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={48}
+    height={48}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#333"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2.25}
+      d="M14.738 26.118h16.989l2.077-10.589h-20.77a1.02 1.02 0 0 0-.794.383 1.06 1.06 0 0 0-.223.867l1.703 8.47c.04.245.164.468.351.627.187.16.423.245.667.242M33.804 15.53l.872-3.389c.048-.239.176-.454.361-.608.186-.155.418-.239.657-.239h3.302M31.727 26.118l-.872 4.447c-.048.239-.176.454-.361.608a1.03 1.03 0 0 1-.657.239H17.189M18.227 38.824c.573 0 1.038-.474 1.038-1.06 0-.584-.465-1.058-1.038-1.058-.574 0-1.038.474-1.038 1.059 0 .584.464 1.059 1.038 1.059M28.612 38.824c.573 0 1.038-.474 1.038-1.06 0-.584-.465-1.058-1.038-1.058-.574 0-1.039.474-1.039 1.059 0 .584.465 1.059 1.039 1.059"
+    />
+  </svg>
+);
+export default SvgIcCartGray;

src/assets/svgs/IcCartWhite.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcCartWhite = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={48}
+    height={48}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2.25}
+      d="M14.738 26.118h16.989l2.077-10.589h-20.77a1.02 1.02 0 0 0-.794.383 1.06 1.06 0 0 0-.223.867l1.703 8.47c.04.245.164.468.351.627.187.16.423.245.667.242M33.804 15.53l.872-3.389c.048-.239.176-.454.361-.608.186-.155.418-.239.657-.239h3.302M31.727 26.118l-.872 4.447c-.048.239-.176.454-.361.608a1.03 1.03 0 0 1-.657.239H17.189M18.227 38.824c.573 0 1.038-.474 1.038-1.06 0-.584-.465-1.058-1.038-1.058-.574 0-1.038.474-1.038 1.059 0 .584.464 1.059 1.038 1.059M28.612 38.824c.573 0 1.038-.474 1.038-1.06 0-.584-.465-1.058-1.038-1.058-.574 0-1.039.474-1.039 1.059 0 .584.465 1.059 1.039 1.059"
+    />
+  </svg>
+);
+export default SvgIcCartWhite;

src/assets/svgs/IcHeartGray.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcHeartGray = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={48}
+    height={48}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#333"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2.025}
+      d="M24.009 34.99 12.83 24.867c-6.076-6.075 2.855-17.74 11.178-8.303 8.322-9.436 17.212 2.268 11.178 8.303z"
+    />
+  </svg>
+);
+export default SvgIcHeartGray;

src/assets/svgs/IcHeartWhite.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcHeartWhite = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={48}
+    height={48}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2.025}
+      d="M24.009 34.99 12.83 24.867c-6.076-6.075 2.855-17.74 11.178-8.303 8.322-9.436 17.212 2.268 11.178 8.303z"
+    />
+  </svg>
+);
+export default SvgIcHeartWhite;

src/assets/svgs/IcLeftarrowGray50.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcLeftarrowGray50 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="gray"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m12 4-6 6 6 6"
+    />
+  </svg>
+);
+export default SvgIcLeftarrowGray50;

src/assets/svgs/IcRightarrowGray50.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgIcRightarrowGray50 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="gray"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m8 4 6 6-6 6"
+    />
+  </svg>
+);
+export default SvgIcRightarrowGray50;

src/assets/svgs/index.ts

@@ -1,20 +1,26 @@
+export { default as XGroup2 } from './XGroup2';
 export { default as AladinLogo } from './AladinLogo';
 export { default as BtnFFloating } from './BtnFFloating';
 export { default as BtnFloating } from './BtnFloating';
 export { default as Hihi } from './Hihi';
 export { default as HomeSection2Indicator } from './HomeSection2Indicator';
 export { default as IcAdd } from './IcAdd';
 export { default as IcArrowSaleBefore } from './IcArrowSaleBefore';
+export { default as IcCartGray } from './IcCartGray';
+export { default as IcCartWhite } from './IcCartWhite';
 export { default as IcCheckbox } from './IcCheckbox';
 export { default as IcChevronSmallRight } from './IcChevronSmallRight';
+export { default as IcHeartGray } from './IcHeartGray';
+export { default as IcHeartWhite } from './IcHeartWhite';
+export { default as IcLeftarrowGray50 } from './IcLeftarrowGray50';
 export { default as IcLocation } from './IcLocation';
 export { default as IcMenuSmallGray } from './IcMenuSmallGray';
 export { default as IcMypageGray } from './IcMypageGray';
 export { default as IcPick } from './IcPick';
 export { default as IcRemove } from './IcRemove';
+export { default as IcRightarrowGray50 } from './IcRightarrowGray50';
 export { default as IcRightarrowMediumTextgray40 } from './IcRightarrowMediumTextgray40';
 export { default as IcRightarrowSmall } from './IcRightarrowSmall';
-export { default as IcRightV } from './IcRightV';
 export { default as IcSearch } from './IcSearch';
 export { default as IcShoppingcartGray } from './IcShoppingcartGray';
 export { default as Img11 } from './Img11';
@@ -35,7 +41,11 @@ export { default as Img72 } from './Img72';
 export { default as Img73 } from './Img73';
 export { default as Img74 } from './Img74';
 export { default as Img75 } from './Img75';
+export { default as ImgCartbook1 } from './ImgCartbook1';
+export { default as ImgCartbook2 } from './ImgCartbook2';
+export { default as ImgCartbook3 } from './ImgCartbook3';
+export { default as ImgCartbook4 } from './ImgCartbook4';
+export { default as ImgCartbook5 } from './ImgCartbook5';
 export { default as Playno } from './Playno';
 export { default as Playyes } from './Playyes';
 export { default as SerachUnder } from './SerachUnder';
-export { default as XGroup2 } from './XGroup2';

src/components/Cart/RecItemSection/RecItemSection.styled.ts

@@ -0,0 +1,81 @@
+import styled from '@emotion/styled';
+
+export const RecItemSectionWrapper = styled.section`
+  display: flex;
+  width: 100vw;
+  padding: 4rem 0;
+
+  background-color: ${({ theme }) => theme.colors.purple10};
+  gap: 2rem;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const RecItemContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  ${({ theme }) => theme.fonts.head_b_24};
+`;
+
+export const RecItemBox = styled.div`
+  display: flex;
+  gap: 2rem;
+`;
+
+export const RecItemCard = styled.div`
+  p {
+    ${({ theme }) => theme.fonts.body5_r_13};
+    color: ${({ theme }) => theme.colors.text_gray40};
+    text-align: center;
+    white-space: pre-line;
+  }
+
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+`;
+
+export const RecItem = styled.div`
+  position: relative;
+
+  .img-cartbook {
+    transition: filter 0.3s ease;
+    filter: brightness(1);
+  }
+
+  div {
+    display: none;
+    position: absolute;
+    bottom: 1.4rem;
+    left: 50%;
+    z-index: 10;
+    transform: translateX(-50%);
+    gap: 2.5rem;
+  }
+
+  &:hover .img-cartbook {
+    filter: brightness(0.5);
+  }
+
+  &:hover div {
+    display: flex;
+  }
+`;
+
+export const HoverBtn = styled.button`
+  display: flex;
+  z-index: 10;
+  width: 4.8rem;
+  height: 4.8rem;
+
+  background-color: ${({ theme }) => theme.colors.white};
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.purple50};
+  }
+`;

src/components/Cart/RecItemSection/RecItemSection.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import {
+  IcCartGray,
+  IcCartWhite,
+  IcHeartGray,
+  IcHeartWhite,
+} from '@assets/svgs';
+import * as S from './RecItemSection.styled';
+import { REC_BOOKS } from '@constants/RecBooksConstants';
+import { Book } from '@constants/RecBooksConstants';
+import ArrowBtn from '@components/common/ArrowBtn/ArrowBtn';
+
+const RecItemSection = () => {
+  const [isHeartHovered, setHeartHovered] = useState<number | null>(null);
+  const [isCartHovered, setCartHovered] = useState<number | null>(null);
+
+  return (
+    <S.RecItemSectionWrapper>
+      <ArrowBtn direction="left" />
+      <S.RecItemContainer>
+        <h1>지금 장바구니에 담은 상품과 함께 구매한 상품입니다.</h1>
+        <S.RecItemBox>
+          {REC_BOOKS.map((book: Book) => (
+            <S.RecItemCard key={book.id}>
+              <S.RecItem>
+                <book.image className="img-cartbook" />
+                <div>
+                  <S.HoverBtn
+                    onMouseEnter={() => setHeartHovered(book.id)}
+                    onMouseLeave={() => setHeartHovered(null)}
+                  >
+                    {isHeartHovered === book.id ? (
+                      <IcHeartWhite />
+                    ) : (
+                      <IcHeartGray />
+                    )}
+                  </S.HoverBtn>
+                  <S.HoverBtn
+                    onMouseEnter={() => setCartHovered(book.id)}
+                    onMouseLeave={() => setCartHovered(null)}
+                  >
+                    {isCartHovered === book.id ? (
+                      <IcCartWhite />
+                    ) : (
+                      <IcCartGray />
+                    )}
+                  </S.HoverBtn>
+                </div>
+              </S.RecItem>
+              <p>{book.title}</p>
+            </S.RecItemCard>
+          ))}
+        </S.RecItemBox>
+      </S.RecItemContainer>
+      <ArrowBtn direction="right" />
+    </S.RecItemSectionWrapper>
+  );
+};
+
+export default RecItemSection;

src/components/common/ArrowBtn/ArrowBtn.styled.ts

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+export const ArrowBtn = styled.button`
+  width: 4.2rem;
+  height: 4.2rem;
+  background-color: ${({ theme }) => theme.colors.bg_gray10};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+
+  :hover {
+    background-color: ${({ theme }) => theme.colors.stroke_gray20};
+  }
+`;

src/components/common/ArrowBtn/ArrowBtn.tsx

@@ -0,0 +1,16 @@
+import { IcLeftarrowGray50, IcRightarrowGray50 } from '@assets/svgs';
+import * as S from './ArrowBtn.styled';
+
+interface ArrowBtnProps {
+  direction: 'left' | 'right';
+}
+
+const ArrowBtn = ({ direction }: ArrowBtnProps) => {
+  return (
+    <S.ArrowBtn>
+      {direction === 'left' ? <IcLeftarrowGray50 /> : <IcRightarrowGray50 />}
+    </S.ArrowBtn>
+  );
+};
+
+export default ArrowBtn;