[Feat] 프로젝트 carousel

package.json

@@ -28,7 +28,7 @@
     "next": "13.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "swiper": "^9.3.2"
+    "react-fast-marquee": "^1.6.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.4",

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,26 @@
+import { css } from '@emotion/react';
+import Marquee from 'react-fast-marquee';
+
+import { ProjectCarouselItem } from '~/components/ProjectCarousel/ProjectCarouselItem';
+import { SectionTitle } from '~/components/SectionTitle';
+import { PROJECT_LIST } from '~/constant/project';
+
+export function ProjectCarousel() {
+  return (
+    <div css={layoutCss}>
+      <SectionTitle label="Project" title="프로젝트" />
+      <Marquee>
+        {PROJECT_LIST.map(project => (
+          <ProjectCarouselItem key={project.title} {...project} />
+        ))}
+      </Marquee>
+    </div>
+  );
+}
+
+const layoutCss = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+`;

src/components/ProjectCarousel/ProjectCarouselItem.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image';
+import { css } from '@emotion/react';
+
+import { Project } from '~/constant/project';
+
+interface ProjectCarouselItemProps extends Project {}
+
+export function ProjectCarouselItem({ title, subTitle }: ProjectCarouselItemProps) {
+  return (
+    <div css={imageCss}>
+      <Image alt={title} src={`/images/project/${subTitle}/${title}.png`} fill quality={100} />
+    </div>
+  );
+}
+
+const imageCss = css`
+  position: relative;
+  width: 312px;
+  height: 208px;
+  object-fit: cover;
+  object-position: center;
+  margin-left: 20px;
+`;

src/components/ProjectCarousel/index.tsx

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

src/components/Review/Review.tsx

@@ -1,27 +1,19 @@
 import { css } from '@emotion/react';
+import Marquee from 'react-fast-marquee';
 
 import { ReviewItem } from '~/components/Review/ReviewItem';
 import { SectionTitle } from '~/components/SectionTitle';
-import { Swiper } from '~/components/Swiper';
 import { REVIEWS } from '~/constant/review';
 
 export function Review() {
   return (
     <section css={layoutCss}>
       <SectionTitle label="Review" title="지난 기수 후기" />
-      <Swiper.Wrapper
-        spaceBetween={20}
-        slidesPerView="auto"
-        loop={true}
-        autoplay={{
-          delay: 0,
-        }}
-        speed={8000}
-      >
+      <Marquee>
         {REVIEWS.map(({ ...info }) => (
           <ReviewItem key={info.name} {...info} />
         ))}
-      </Swiper.Wrapper>
+      </Marquee>
     </section>
   );
 }

src/components/Review/ReviewItem.tsx

@@ -2,13 +2,12 @@ import Link from 'next/link';
 import { css, Theme } from '@emotion/react';
 
 import { ArrowIcon } from '~/components/Icons';
-import { Swiper } from '~/components/Swiper';
 import { ReviewItemType } from '~/constant/review';
 
 interface ReviewItemProps extends ReviewItemType {}
 export function ReviewItem({ name, group, part, summary, links }: ReviewItemProps) {
   return (
-    <Swiper.Item css={layoutCss}>
+    <div css={layoutCss}>
       <div css={titleLayoutCss}>
         <h3 css={titleH3Css}>{name}</h3>
         <div css={titleSpanCss}>
@@ -27,7 +26,7 @@ export function ReviewItem({ name, group, part, summary, links }: ReviewItemProp
           </Link>
         ))}
       </div>
-    </Swiper.Item>
+    </div>
   );
 }
 
@@ -38,6 +37,7 @@ const layoutCss = (theme: Theme) => css`
   flex-direction: column;
   justify-content: space-between;
   max-width: 476px;
+  margin-left: 20px;
   height: 330px;
 `;
 
@@ -86,5 +86,3 @@ const linkCss = (theme: Theme) => css`
   display: flex;
   align-items: center;
 `;
-
-ReviewItem.displayName = 'SwiperSlide';

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} />

yarn.lock

@@ -9285,6 +9285,11 @@ react-element-to-jsx-string@^15.0.0:
     is-plain-object "5.0.0"
     react-is "18.1.0"
 
+react-fast-marquee@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.6.1.tgz#38ee8a8725a98eac3e8a16da914b04b6f7d0e5cc"
+  integrity sha512-SFY+FQectFXsuCrcJuIxrh34YzJ+TKH0Lp6BqZaalVhjdmu6Sx11rKKGQiC6vvC/q9ySXYVn9sozoOvPXFSMoQ==
+
 react-inspector@^6.0.0:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-6.0.2.tgz#aa3028803550cb6dbd7344816d5c80bf39d07e9d"
@@ -10027,11 +10032,6 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-ssr-window@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
-  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
-
 stackframe@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
@@ -10279,13 +10279,6 @@ swc-loader@^0.2.3:
   resolved "https://registry.yarnpkg.com/swc-loader/-/swc-loader-0.2.3.tgz#6792f1c2e4c9ae9bf9b933b3e010210e270c186d"
   integrity sha512-D1p6XXURfSPleZZA/Lipb3A8pZ17fP4NObZvFCDjK/OKljroqDpPmsBdTraWhVBqUNpcWBQY1imWdoPScRlQ7A==
 
-swiper@^9.3.2:
-  version "9.4.1"
-  resolved "https://registry.yarnpkg.com/swiper/-/swiper-9.4.1.tgz#2f48bcd6ab4b4fcf4ae93eaee53980531d42fd42"
-  integrity sha512-1nT2T8EzUpZ0FagEqaN/YAhRj33F2x/lN6cyB0/xoYJDMf8KwTFT3hMOeoB8Tg4o3+P/CKqskP+WX0Df046fqA==
-  dependencies:
-    ssr-window "^4.0.2"
-
 synchronous-promise@^2.0.15:
   version "2.0.17"
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.17.tgz#38901319632f946c982152586f2caf8ddc25c032"