[SP2] Carousel 컴포넌트를 만들고 Project Page에서 최근 출시된 프로젝트 목록에 적용

src/components/Layout/Layout.tsx

@@ -1,11 +1,15 @@
 import styled from '@emotion/styled';
-import { CSSProperties, PropsWithChildren } from 'react';
+import { SerializedStyles } from '@emotion/react';
+import { PropsWithChildren } from 'react';
 
-export function Layout({ children, moreStyle }: PropsWithChildren<{ moreStyle?: CSSProperties }>) {
-  return <Main style={moreStyle}>{children}</Main>;
+export function Layout({
+  children,
+  moreStyle,
+}: PropsWithChildren<{ moreStyle?: SerializedStyles }>) {
+  return <Main css={moreStyle}>{children}</Main>;
 }
 
-const Main = styled.div<{ moreStyle?: CSSProperties }>`
+const Main = styled.div`
   width: 100%;
 
   @media (max-width: 1279px) {

src/components/common/Carousel/index.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { CarouselArrowType, CarouselOverflowType } from '@src/lib/types/universal';
+import { S } from './style';
+
+interface CarouselProps {
+  itemWidth: number;
+  stride?: number;
+  leftArrowType?: CarouselArrowType;
+  rightArrowType?: CarouselArrowType;
+  overflowType?: CarouselOverflowType;
+  children: JSX.Element[];
+}
+
+const SWIPE_THRESHOLD = 50;
+
+export default function Carousel({
+  itemWidth,
+  stride = 1,
+  leftArrowType = CarouselArrowType.External,
+  rightArrowType = CarouselArrowType.External,
+  overflowType = CarouselOverflowType.Blur,
+  children,
+}: CarouselProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [startX, setStartX] = useState(0);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setCurrentIndex(0);
+  }, [stride, itemWidth]);
+
+  const handlePrev = () => {
+    setCurrentIndex(Math.max(0, currentIndex - stride));
+  };
+
+  const handleNext = () => {
+    setCurrentIndex(Math.min(children.length - 1, currentIndex + stride));
+  };
+
+  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    setStartX(e.touches[0].clientX);
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent<HTMLDivElement>) => {
+    const endX = e.changedTouches[0].clientX;
+    const deltaX = startX - endX;
+
+    if (deltaX > SWIPE_THRESHOLD) {
+      handleNext();
+    } else if (deltaX < -SWIPE_THRESHOLD) {
+      handlePrev();
+    }
+  };
+
+  const translateX = -currentIndex * itemWidth;
+
+  return (
+    <S.Wrapper ref={wrapperRef}>
+      {overflowType === CarouselOverflowType.Blur && (
+        <>
+          <S.LeftBlur />
+          <S.RightBlur />
+        </>
+      )}
+      {currentIndex !== 0 && <S.LeftArrow type={leftArrowType} onClick={handlePrev} />}
+      <S.CarouselViewport>
+        <S.CarouselWrapper
+          translateX={translateX}
+          itemWidth={itemWidth}
+          itemCount={children.length}
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
+        >
+          {children}
+        </S.CarouselWrapper>
+      </S.CarouselViewport>
+      {currentIndex !== children.length - stride && (
+        <S.RightArrow type={rightArrowType} onClick={handleNext} />
+      )}
+      <S.DotWrapper>
+        {Array.from({ length: Math.ceil(children.length / stride) }).map((dot, index) => (
+          <S.Dot
+            key={index}
+            onClick={() => setCurrentIndex(index * stride)}
+            selected={index === Math.floor(currentIndex / stride)}
+          />
+        ))}
+      </S.DotWrapper>
+    </S.Wrapper>
+  );
+}

src/components/common/Carousel/style.ts

@@ -0,0 +1,114 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import arrowLeft from '@src/assets/icons/arrow_left_28x28.svg';
+import arrowRight from '@src/assets/icons/arrow_right_28x28.svg';
+import { HideScrollbar } from '@src/lib/styles/scrollbar';
+import { CarouselArrowType } from '@src/lib/types/universal';
+
+const Wrapper = styled(HideScrollbar)`
+  width: 100%;
+  position: relative;
+`;
+
+const Arrow = styled.div<{ type: CarouselArrowType }>`
+  ${({ type }) => type === CarouselArrowType.None && 'display: hidden;'}
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  background-color: ${colors.gray600};
+  color: white;
+  z-index: 2;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  background-repeat: no-repeat;
+  background-position: center;
+`;
+
+const LeftArrow = styled(Arrow)<{ type: CarouselArrowType }>`
+  left: -50px;
+  background-image: url(${arrowLeft});
+`;
+
+const RightArrow = styled(Arrow)<{ type: CarouselArrowType }>`
+  right: -50px;
+  background-image: url(${arrowRight});
+`;
+
+const CarouselWrapper = styled.div<{
+  translateX: number;
+  itemWidth: number;
+  itemCount: number;
+}>`
+  width: ${({ itemWidth, itemCount }) => itemWidth * itemCount}px;
+  display: grid;
+  grid-template-columns: ${({ itemWidth, itemCount }) => `repeat(${itemCount}, ${itemWidth}px)`};
+  transition: transform 0.5s ease-in-out;
+  transform: ${({ translateX }) => `translateX(${translateX}px)`};
+`;
+
+const CarouselViewport = styled.div`
+  width: 100%;
+`;
+
+const Blur = styled.div`
+  z-index: 2;
+  position: absolute;
+  height: 100%;
+  width: calc(50vw - 50%);
+  top: 0;
+  background: linear-gradient(
+    to right,
+    transparent 10px,
+    ${colors.background} 50px,
+    ${colors.background}
+  );
+`;
+
+const LeftBlur = styled(Blur)`
+  left: calc(50% - 50vw);
+  transform: rotate(180deg);
+`;
+
+const RightBlur = styled(Blur)`
+  right: calc(50% - 50vw);
+`;
+
+const DotWrapper = styled.div`
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+`;
+
+const Dot = styled.div<{ selected: boolean }>`
+  position: relative;
+  width: 8px;
+  height: 8px;
+  background-color: ${({ selected }) => (selected ? colors.white : colors.gray800)};
+  border-radius: 50%;
+  cursor: pointer;
+
+  ::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+    left: -4px;
+    right: -4px;
+    bottom: -4px;
+    border-radius: 50%;
+  }
+`;
+
+export const S = {
+  Wrapper,
+  LeftArrow,
+  RightArrow,
+  CarouselWrapper,
+  CarouselViewport,
+  LeftBlur,
+  RightBlur,
+  DotWrapper,
+  Dot,
+};

src/components/common/PageLayout/index.tsx

@@ -1,10 +1,10 @@
 import dynamic from 'next/dynamic';
-import { CSSProperties } from 'react';
+import { SerializedStyles } from '@emotion/react';
 import { Header, Layout } from '@src/components';
 
 type PageLayoutOwnProps = {
   showScrollTopButton?: boolean;
-  moreStyle?: CSSProperties;
+  moreStyle?: SerializedStyles;
 };
 
 const DynamicFooter = dynamic(() => import('@src/components/Footer'));

src/components/common/Select/style.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import arrowDown from '@src/assets/icons/arrow_down.svg';
-import { colors } from '@src/lib/styles/colors';
 
 const SelectWrapper = styled.div`
   position: relative;

src/hooks/useDevice.ts

@@ -33,3 +33,23 @@ export function useIsMobile(maxWidth = '765.9px') {
   }, [mobile]);
   return isMobile;
 }
+
+type DeviceType = 'desktop' | 'iOS' | 'Android';
+
+export function useDeviceType() {
+  const [deviceType, setDeviceType] = useState<DeviceType | undefined>('desktop');
+
+  useEffect(() => {
+    const userAgent = navigator.userAgent || navigator.vendor;
+
+    if (/iPad|iPhone|iPod/.test(userAgent)) {
+      setDeviceType('iOS');
+    } else if (/android/i.test(userAgent)) {
+      setDeviceType('Android');
+    } else {
+      setDeviceType('desktop');
+    }
+  }, []);
+
+  return deviceType;
+}

src/lib/styles/global.ts

@@ -1,3 +1,4 @@
+import { colors } from '@sopt-makers/colors';
 import { css } from '@emotion/react';
 import font from './font';
 
@@ -80,7 +81,7 @@ export const global = css`
   }
 
   body {
-    background-color: #0f0f12;
+    background-color: ${colors.background};
     line-height: 1;
   }
 

src/lib/styles/scrollbar.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const HideScrollbar = styled.div`
+  /* Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Firefox */
+  scrollbar-width: none;
+
+  /* IE and Edge */
+  -ms-overflow-style: none;
+`;

src/lib/types/universal.ts

@@ -36,3 +36,15 @@ export type TabType = TabTypeOption<Part>;
 export type ExtraTabType = TabTypeOption<ExtraPart>;
 
 export type LabelKeyType = string | number | symbol;
+
+export enum CarouselArrowType {
+  External = 'external',
+  None = 'none',
+  // Internal = 'internal',
+  // Overlay = 'overlay',
+}
+
+export enum CarouselOverflowType {
+  Blur = 'blur',
+  Visible = 'visible',
+}

src/lib/utils/array.ts

@@ -0,0 +1,13 @@
+export function sortBy<T>(array: T[], key: keyof T): T[] {
+  return [...array].sort((a, b) => {
+    const aValue = a[key];
+    const bValue = b[key];
+    if (typeof aValue === 'number' && typeof bValue === 'number') {
+      return aValue - bValue;
+    }
+    if (typeof aValue === 'string' && typeof bValue === 'string') {
+      return (aValue as string).localeCompare(bValue as string);
+    }
+    return 0;
+  });
+}

src/views/ProjectPage/ProjectPage.tsx

@@ -1,9 +1,11 @@
+import { css } from '@emotion/react';
 import { useState } from 'react';
 import PageLayout from '@src/components/common/PageLayout';
 import Select from '@src/components/common/Select';
 import { activeProjectCategoryList, projectCategoryLabel } from '@src/lib/constants/project';
 import { ProjectCategoryType } from '@src/lib/types/project';
 import { ProjectList } from './components';
+import RecentProjectList from './components/RecentProjectList';
 import useFetch from './hooks/useFetch';
 import { ContentWrapper, Root, SectionTitle } from './styles';
 
@@ -12,9 +14,15 @@ function Projects() {
   const state = useFetch(selectedCategory);
 
   return (
-    <PageLayout showScrollTopButton>
+    <PageLayout
+      showScrollTopButton
+      moreStyle={css`
+        overflow-x: hidden;
+      `}
+    >
       <Root>
         <ContentWrapper>
+          <RecentProjectList />
           <SectionTitle>SOPT에서 진행된 프로젝트 둘러보기</SectionTitle>
           <Select
             options={activeProjectCategoryList}
@@ -24,10 +32,7 @@ function Projects() {
             setSelectedValue={setCategory}
             baseValue={ProjectCategoryType.ALL}
           />
-          <ProjectList
-            state={state}
-            selectedCategory={selectedCategory ?? ProjectCategoryType.ALL}
-          />
+          <ProjectList state={state} selectedCategory={selectedCategory} />
         </ContentWrapper>
       </Root>
     </PageLayout>