[Feat/#75] Carousel 컴포넌트 구현 (#78)

* feat: Carousel 컴포넌트 만들기

* refactor: 코드리뷰 반영 (div 대신 ul. li 태그 사용)

* refactor: 코드리뷰 반영 (아이콘 크기주는 방법 변경, storeId 받을거 고려하기)

src/assets/svgs/IcCircleArrowRight42.tsx

@@ -0,0 +1,52 @@
+import type { SVGProps } from 'react';
+const SvgIcCircleArrowRight42 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 42 42"
+    {...props}
+  >
+    <g filter="url(#ic__circle_arrow_right_42_svg__a)">
+      <circle cx={21} cy={21} r={17.5} fill="#fff" />
+    </g>
+    <path
+      stroke="#6A6A6A"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m19 27 6-6-6-6"
+    />
+    <defs>
+      <filter
+        id="ic__circle_arrow_right_42_svg__a"
+        width={39}
+        height={39}
+        x={1.5}
+        y={1.5}
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          result="hardAlpha"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation={1} />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0" />
+        <feBlend
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_1437_18623"
+        />
+        <feBlend
+          in="SourceGraphic"
+          in2="effect1_dropShadow_1437_18623"
+          result="shape"
+        />
+      </filter>
+    </defs>
+  </svg>
+);
+export default SvgIcCircleArrowRight42;

src/assets/svgs/index.ts

@@ -1,3 +1,4 @@
+export { default as IcCircleArrowRight42 } from './IcCircleArrowRight42';
 export { default as IcArrowDown20 } from './IcArrowDown20';
 export { default as IcArrowRight24 } from './IcArrowRight24';
 export { default as IcArrowUp20 } from './IcArrowUp20';

src/pages/designList/components/Carousel.css.ts

@@ -0,0 +1,28 @@
+import { style } from '@vanilla-extract/css';
+
+import { flexGenerator } from '@styles/generator.css';
+import { vars } from '@styles/theme.css';
+
+export const container = style([
+  flexGenerator('row', 'flex-start'),
+  {
+    gap: '1.2rem',
+    overflowX: 'scroll',
+  },
+]);
+
+export const imageStyle = style({
+  width: '31rem',
+  height: '31rem',
+  flexShrink: 0,
+});
+
+export const moreButtonStyle = style([
+  flexGenerator('column'),
+  { gap: '0.8rem' },
+]);
+
+export const moreTextStyle = style([
+  vars.fonts.body07_r_14,
+  { color: vars.colors.gray500 },
+]);

src/pages/designList/components/Carousel.tsx

@@ -0,0 +1,50 @@
+import { Image } from '@components';
+
+import { IcCircleArrowRight42 } from '@svgs';
+
+import {
+  container,
+  imageStyle,
+  moreButtonStyle,
+  moreTextStyle,
+} from './Carousel.css';
+
+interface DesignCardDetailType {
+  cakeId: number;
+  cakeImageUrl: string;
+  isLiked: boolean;
+}
+
+interface CarouselProps {
+  designs: DesignCardDetailType[];
+  storeId: number;
+}
+
+const Carousel = ({ designs, storeId }: CarouselProps) => {
+  const handleButtonClick = () => {
+    console.log(storeId);
+  };
+
+  return (
+    <ul className={container}>
+      {designs.map((design) => {
+        return (
+          <li key={design.cakeId} className={imageStyle}>
+            <Image
+              src={design.cakeImageUrl}
+              hasIcon
+              variant="rounded"
+              isActive={design.isLiked}
+            />
+          </li>
+        );
+      })}
+      <li className={moreButtonStyle} onClick={handleButtonClick}>
+        <IcCircleArrowRight42 width={35} height={35} />
+        <span className={moreTextStyle}>더보기</span>
+      </li>
+    </ul>
+  );
+};
+
+export default Carousel;