feat: create Project Carousel

src/components/ProjectCarousel/ProjectCarousel.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ProjectCarousel } from './index';
+
+const meta: Meta<typeof ProjectCarousel> = {
+  title: 'components/ProjectCarousel',
+  component: ProjectCarousel,
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProjectCarousel>;
+
+export const Primary: Story = {
+  render: () => <ProjectCarousel />,
+};

src/components/ProjectCarousel/ProjectCarousel.tsx

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+
+import { ProjectCarouselItem } from '~/components/ProjectCarousel/ProjectCarouselItem';
+import { SectionTitle } from '~/components/SectionTitle';
+import { Swiper } from '~/components/Swiper';
+import { PROJECT_LIST } from '~/constant/project';
+
+export function ProjectCarousel() {
+  return (
+    <div css={layoutCss}>
+      <SectionTitle label="Project" title="프로젝트" />
+      <Swiper.Wrapper
+        spaceBetween={24}
+        slidesPerView="auto"
+        loop={true}
+        autoplay={{
+          delay: 0,
+        }}
+        speed={1000}
+      >
+        {PROJECT_LIST.map(project => (
+          <ProjectCarouselItem key={project.title} {...project} />
+        ))}
+      </Swiper.Wrapper>
+    </div>
+  );
+}
+
+const layoutCss = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+`;

src/components/ProjectCarousel/ProjectCarouselItem.tsx

@@ -0,0 +1,29 @@
+import Image from 'next/image';
+import { css } from '@emotion/react';
+
+import { Swiper } from '~/components/Swiper';
+
+interface ProjectCarouselItemProps {
+  title: string;
+  subTitle: string;
+  description: string;
+  links: Array<{ type: string; href: string }>;
+}
+
+export function ProjectCarouselItem({ title, subTitle }: ProjectCarouselItemProps) {
+  return (
+    <Swiper.Item css={imageCss}>
+      <Image alt={title} src={`/images/project/${subTitle}/${title}.png`} fill quality={100} />
+    </Swiper.Item>
+  );
+}
+
+ProjectCarouselItem.displayName = 'SwiperSlide';
+
+const imageCss = css`
+  position: relative;
+  width: 312px;
+  height: 208px;
+  object-fit: cover;
+  object-position: center;
+`;

src/components/ProjectCarousel/index.tsx

@@ -0,0 +1 @@
+export { ProjectCarousel } from './ProjectCarousel';

src/pages/index.tsx

@@ -4,6 +4,7 @@ import { FAQ } from '~/components/FAQ';
 import { RecruitTextSection, SignImageSection } from '~/components/Main';
 import { Journey } from '~/components/Main/Journey';
 import { RecruitEntrance } from '~/components/Main/RecruitEntrance';
+import { ProjectCarousel } from '~/components/ProjectCarousel';
 import { ScheduleSection } from '~/components/ScheduleSection';
 import { SectionTitle } from '~/components/SectionTitle';
 import { SEO } from '~/components/SEO';
@@ -20,6 +21,7 @@ export default function Root() {
         <div css={contentCss}>
           <Journey />
           <RecruitEntrance />
+          <ProjectCarousel />
           <section>
             <SectionTitle label="14th Schedule" title={'14기 일정'} />
             <ScheduleSection {...MEMBER_SCHEDULE} />