From 1c260de2d1d7c79fea87141ed0137ddd704951ef Mon Sep 17 00:00:00 2001
From: steven-yn <ssungyeon94@gmail.com>
Date: Thu, 7 Mar 2024 00:45:44 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20HistorySummary=20=EB=8B=A4=EC=9D=8C=20?=
 =?UTF-8?q?=EC=BB=A8=ED=85=90=EC=B8=A0=20visible=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../History/Summary/HistorySummary.css.ts     | 33 +++++++++++++++++--
 .../History/Summary/HistorySummary.tsx        | 11 +++----
 .../HistorySwiper/HistorySwiperOpened.tsx     | 16 ---------
 src/components/OceanSwiper/OceanSwiper.css.ts |  7 ++++
 src/components/OceanSwiper/OceanSwiper.tsx    | 20 ++++++++---
 5 files changed, 56 insertions(+), 31 deletions(-)
 delete mode 100644 src/components/HistorySwiper/HistorySwiperOpened.tsx
 create mode 100644 src/components/OceanSwiper/OceanSwiper.css.ts

diff --git a/src/components/History/Summary/HistorySummary.css.ts b/src/components/History/Summary/HistorySummary.css.ts
index 48b0729..1df611f 100644
--- a/src/components/History/Summary/HistorySummary.css.ts
+++ b/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([
diff --git a/src/components/History/Summary/HistorySummary.tsx b/src/components/History/Summary/HistorySummary.tsx
index c994c0c..4550906 100644
--- a/src/components/History/Summary/HistorySummary.tsx
+++ b/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} />
diff --git a/src/components/HistorySwiper/HistorySwiperOpened.tsx b/src/components/HistorySwiper/HistorySwiperOpened.tsx
deleted file mode 100644
index ecbb189..0000000
--- a/src/components/HistorySwiper/HistorySwiperOpened.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// const HistorySwiperSummary = () => {
-//   return (
-//     <OceanSwiper>
-//       <OceanSwiper.Top className={topStyle}>
-//         {/* <HistorySlideButton direction="PREV" /> */}
-//         {/* <HistoryTab /> */}
-//         {/* <HistorySlideButton direction="NEXT" /> */}
-//       </OceanSwiper.Top>
-//       <OceanSwiper.Main hiddenNavigation>
-//         {/* <OceanSwiper.Slide></OceanSwiper.Slide> */}
-//         {/* <OceanSwiper.Slide></OceanSwiper.Slide> */}
-//         {/* <OceanSwiper.Slide></OceanSwiper.Slide> */}
-//       </OceanSwiper.Main>
-//     </OceanSwiper>
-//   );
-// };
diff --git a/src/components/OceanSwiper/OceanSwiper.css.ts b/src/components/OceanSwiper/OceanSwiper.css.ts
new file mode 100644
index 0000000..a9011e1
--- /dev/null
+++ b/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',
+});
diff --git a/src/components/OceanSwiper/OceanSwiper.tsx b/src/components/OceanSwiper/OceanSwiper.tsx
index 6db5817..e6e7aaa 100644
--- a/src/components/OceanSwiper/OceanSwiper.tsx
+++ b/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}