[SP2] 프로젝트 탭 캐러셀 블러 스타일 수정

src/components/common/Carousel/index.tsx

@@ -4,6 +4,7 @@ import { S } from './style';
 
 interface CarouselProps {
   itemWidth: number;
+  gapWidth: number;
   stride?: number;
   leftArrowType?: CarouselArrowType;
   rightArrowType?: CarouselArrowType;
@@ -15,6 +16,7 @@ const SWIPE_THRESHOLD = 50;
 
 export default function Carousel({
   itemWidth,
+  gapWidth,
   stride = 1,
   leftArrowType = CarouselArrowType.External,
   rightArrowType = CarouselArrowType.External,
@@ -24,17 +26,26 @@ export default function Carousel({
   const [currentIndex, setCurrentIndex] = useState(0);
   const [startX, setStartX] = useState(0);
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const [isSliding, setIsSliding] = useState(false);
+  const lastIndex = currentIndex === children.length - 1;
 
   useEffect(() => {
     setCurrentIndex(0);
   }, [stride, itemWidth]);
 
+  const handleSlideStatus = () => {
+    setIsSliding(true);
+    setTimeout(() => setIsSliding(false), 300);
+  };
+
   const handlePrev = () => {
     setCurrentIndex(Math.max(0, currentIndex - stride));
+    handleSlideStatus();
   };
 
   const handleNext = () => {
     setCurrentIndex(Math.min(children.length - 1, currentIndex + stride));
+    handleSlideStatus();
   };
 
   const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
@@ -52,10 +63,10 @@ export default function Carousel({
     }
   };
 
-  const translateX = -currentIndex * itemWidth;
+  const translateX = -currentIndex * (itemWidth + gapWidth);
 
   return (
-    <S.Wrapper ref={wrapperRef}>
+    <S.Wrapper ref={wrapperRef} isSliding={isSliding} lastIndex={lastIndex}>
       {overflowType === CarouselOverflowType.Blur && (
         <>
           <S.LeftBlur />
@@ -68,6 +79,7 @@ export default function Carousel({
           translateX={translateX}
           itemWidth={itemWidth}
           itemCount={children.length}
+          gapWidth={gapWidth}
           onTouchStart={handleTouchStart}
           onTouchEnd={handleTouchEnd}
         >

src/components/common/Carousel/style.ts

@@ -1,13 +1,50 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
+import { css } from '@emotion/react';
 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)`
+const Wrapper = styled(HideScrollbar)<{ isSliding: boolean; lastIndex: boolean }>`
   width: 100%;
   position: relative;
+
+  ::before,
+  ::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    z-index: 5;
+
+    width: 70px;
+    height: 164px;
+  }
+
+  ::before {
+    left: 0;
+    background: linear-gradient(270deg, transparent 0%, ${colors.gray950} 100%);
+
+    opacity: ${({ isSliding }) => (isSliding ? '1' : '0')};
+    transition: opacity 0.3s ease-out;
+  }
+
+  ::after {
+    right: -1px;
+    background: linear-gradient(270deg, ${colors.gray950} 0%, transparent 100%);
+
+    opacity: 0;
+    ${({ isSliding }) =>
+      isSliding &&
+      css`
+        opacity: 1;
+        transition: opacity 0.3s ease-out;
+      `};
+
+    @media (max-width: 1279px) {
+      opacity: ${({ lastIndex }) => (lastIndex ? 0 : 1)};
+    }
+  }
 `;
 
 const Arrow = styled.div<{ type: CarouselArrowType }>`
@@ -40,12 +77,14 @@ const CarouselWrapper = styled.div<{
   translateX: number;
   itemWidth: number;
   itemCount: number;
+  gapWidth: 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)`};
+  gap: ${({ gapWidth }) => `${gapWidth}px`};
 `;
 
 const CarouselViewport = styled.div`
@@ -58,12 +97,7 @@ const Blur = styled.div`
   height: 100%;
   width: calc(50vw - 50%);
   top: 0;
-  background: linear-gradient(
-    to right,
-    transparent 10px,
-    ${colors.background} 50px,
-    ${colors.background}
-  );
+  background: ${colors.background};
 `;
 
 const LeftBlur = styled(Blur)`

src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx

@@ -14,7 +14,8 @@ export default function RecentProjectListCarousel({ children }: { children: JSX.
   return (
     <Carousel
       stride={isDesktopSize ? 2 : 1}
-      itemWidth={isMobileSize ? 345 : 544}
+      itemWidth={isMobileSize ? 320 : 544}
+      gapWidth={isMobileSize ? 14 : 24}
       leftArrowType={arrowType}
       rightArrowType={arrowType}
       overflowType={overflowType}

src/views/ProjectPage/components/RecentProjectList/Item/style.ts

@@ -6,18 +6,18 @@ import icArrowStickRight from '@src/assets/icons/ic_arrow_stick_right.svg';
 import { textSingularLineEllipsis } from '@src/lib/styles/textEllipsis';
 
 const GridWrapper = styled.div`
-  width: 524px;
+  width: 544px;
   display: grid;
   grid-template-areas: 'img detail' 'img footer';
   grid-template-columns: 116px auto;
   column-gap: 16px;
   background-color: ${colors.gray900};
   border-radius: 12px;
   padding: 24px;
-  margin-right: 20px;
+
   /* 모바일 뷰 */
   @media (max-width: 899px) {
-    width: 325px;
+    width: 320px;
     grid-template-areas:
       'img detail'
       'footer footer';