feat: HistorySummary 다음 컨텐츠 visible 처리

src/components/History/Summary/HistorySummary.css.ts

@@ -1,4 +1,4 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { globalStyle, style, styleVariants } from '@vanilla-extract/css';
 import { ODSBreakpointTokenVariables } from '@/const/breakpoints';
 import { ODSTextTokenVariables } from '@/const/fonts';
 import { colorVariants } from '@/styles/common/color.css';
@@ -51,8 +51,35 @@ export const gapStyle = style({
   gap: '0.75rem',
 });
 
-export const mainWrapStyle = style({
-  overflow: 'visible',
+export const swiperSelector = style({});
+
+export const swiperWrapVariants = styleVariants({
+  3: [
+    {
+      width: 'calc(15rem * 3 + 0.75rem * 2)',
+
+      '@media': {
+        [ODSBreakpointTokenVariables['breakpoint-m']]: {
+          width: 'calc(12.5rem * 3 + 0.75rem * 2)',
+        },
+      },
+    },
+  ],
+  4: [
+    {
+      width: 'calc(19.375rem * 4 + 0.75rem * 3)',
+
+      '@media': {
+        [ODSBreakpointTokenVariables['breakpoint-xl']]: {
+          width: 'calc(15rem * 4 + 0.75rem * 3)',
+        },
+      },
+    },
+  ],
+});
+
+globalStyle(`${swiperSelector} > .swiper`, {
+  overflow: 'visible !important',
 });
 
 export const bundleStyle = style([

src/components/History/Summary/HistorySummary.tsx

@@ -19,13 +19,13 @@ import {
   gapStyle,
   iconStyle,
   iconStyleVariants,
-  mainWrapStyle,
   bundleStyle,
   swiperTopStyle,
   swiperTitleStyle,
   listTitleStyle,
   listBundleStyle,
   listWrapStyle,
+  swiperWrapVariants,
 } from './HistorySummary.css';
 
 interface HistoryCardData extends HistoryCardContextProps {
@@ -38,7 +38,6 @@ interface Props {
   isDetailView: boolean;
   insertIndex?: number;
 }
-// TODO : swiper overflow - fit-content 구현하기
 const HistorySummary = ({ title, data, isDetailView, insertIndex }: Props) => {
   const { breakpointS } = useODSBreakPoints();
 
@@ -62,13 +61,11 @@ const HistorySummary = ({ title, data, isDetailView, insertIndex }: Props) => {
 };
 
 const Swiper = ({ title, data, isDetailView }: Props) => {
-  const { breakpointS, breakpointM, breakpointL } = useODSBreakPoints();
+  const { breakpointM, breakpointL } = useODSBreakPoints();
 
   const maxDisplayLength = breakpointL ? 3 : 4;
 
-  const nestedData = breakpointS
-    ? new Array(data)
-    : createNestedArray(data, breakpointL ? 3 : 4);
+  const nestedData = createNestedArray(data, breakpointL ? 3 : 4);
 
   return (
     <OceanSwiper>
@@ -87,7 +84,7 @@ const Swiper = ({ title, data, isDetailView }: Props) => {
         direction="horizontal"
         spacing={breakpointM ? 'spacer-075' : 'spacer-15'}
       />
-      <OceanSwiper.Main className={mainWrapStyle} isSwipeAble={!breakpointS}>
+      <OceanSwiper.Main className={swiperWrapVariants[maxDisplayLength]}>
         {nestedData.map((bundle, idx) => (
           <OceanSwiper.Slide key={idx}>
             <HistorySummary.Bundle data={bundle} />

src/components/OceanSwiper/OceanSwiper.css.ts

@@ -0,0 +1,7 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const swiperSelector = style({});
+
+globalStyle(`${swiperSelector} > .swiper`, {
+  overflow: 'visible !important',
+});

src/components/OceanSwiper/OceanSwiper.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import classNames from 'classnames';
 import React, { PropsWithChildren, useEffect, useRef } from 'react';
 import { A11y } from 'swiper/modules';
 import { Swiper, SwiperRef, SwiperSlide, useSwiper } from 'swiper/react';
@@ -8,12 +9,18 @@ import Tag from '@/composable/Tag/Tag';
 import { customEvents } from '@/const/customEvents';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import { ContextValueOceanSwiper } from './OceanSwiper.context';
+import { swiperSelector } from './OceanSwiper.css';
 
 interface Props {
   className?: string;
+  style?: React.CSSProperties;
 }
 
-const OceanSwiper = ({ children, className }: PropsWithChildren<Props>) => {
+const OceanSwiper = ({
+  children,
+  className,
+  style,
+}: PropsWithChildren<Props>) => {
   return (
     <ContextValueOceanSwiper.Provider
       value={{
@@ -26,16 +33,19 @@ const OceanSwiper = ({ children, className }: PropsWithChildren<Props>) => {
         },
       }}
     >
-      <OceanSwiper.Wrap className={className}>{children}</OceanSwiper.Wrap>
+      <OceanSwiper.Wrap className={className} style={style}>
+        {children}
+      </OceanSwiper.Wrap>
     </ContextValueOceanSwiper.Provider>
   );
 };
 
 interface WrapProps {
   className?: string;
+  style?: React.CSSProperties;
 }
 
-const Wrap = ({ children, className }: PropsWithChildren<WrapProps>) => {
+const Wrap = ({ children, className, style }: PropsWithChildren<WrapProps>) => {
   const { swiperWrapperRef } = getStaticContext(ContextValueOceanSwiper);
   const divRef = useRef<HTMLDivElement>(null);
 
@@ -50,7 +60,7 @@ const Wrap = ({ children, className }: PropsWithChildren<WrapProps>) => {
   }, []);
 
   return (
-    <div className={className} ref={divRef}>
+    <div className={className} ref={divRef} style={style}>
       {children}
     </div>
   );
@@ -77,7 +87,7 @@ const Main = ({
   const swiperRef = useRef<SwiperRef | null>(null);
 
   return (
-    <div className={className}>
+    <div className={classNames(className, swiperSelector)}>
       <Swiper
         {...rest}
         ref={swiperRef}