feat: HistorySwiperSummary 추가

src/components/Card/History/HistoryCard.css.ts

@@ -9,24 +9,34 @@ import {
   userColorThemeVars,
 } from '@/styles/theme/index.css';
 
+export const historyCardWrapWidthStyle = style({
+  width: '19.375rem',
+  '@media': {
+    [ODSBreakpointTokenVariables['breakpoint-xl']]: {
+      width: '15rem',
+    },
+    [ODSBreakpointTokenVariables['breakpoint-m']]: {
+      width: '12.5rem',
+    },
+    [ODSBreakpointTokenVariables['breakpoint-s']]: {
+      width: '100%',
+    },
+  },
+});
+
 export const wrapStyle = style([
+  historyCardWrapWidthStyle,
   {
     gap: '0.5rem',
-    width: '19.375rem',
     padding: '1.5rem 2.15625rem',
     borderRadius: '0.75rem',
 
     '@media': {
       [ODSBreakpointTokenVariables['breakpoint-xl']]: {
-        width: '15rem',
         padding: '0.875rem 1.5rem',
       },
-      [ODSBreakpointTokenVariables['breakpoint-m']]: {
-        width: '12.5rem',
-      },
       [ODSBreakpointTokenVariables['breakpoint-s']]: {
         gap: '0.25rem',
-        width: '100%',
         padding: '0.75rem',
         borderRadius: '0.5rem',
       },

src/components/Card/History/HistoryCard.tsx

@@ -16,7 +16,7 @@ import {
 
 export interface HistoryCardProps extends HistoryCardContextProps {
   className?: string;
-  visible_status: VisibleStatusToken;
+  visible_status?: VisibleStatusToken;
 }
 
 const HistoryCard = ({

src/components/History/History.tsx

@@ -1,12 +1,8 @@
 import React from 'react';
-import HistorySwiper from '../HistorySwiper/HistorySwiper';
+import HistorySwiperSummary from '../HistorySwiper/Summary/HistorySwiperSummary';
 
 const History = () => {
-  return (
-    <section>
-      <HistorySwiper />
-    </section>
-  );
+  return <section>{/* <HistorySwiperSummary /> */}</section>;
 };
 
 export default History;

src/components/HistorySwiper/HistorySwiperOpened.tsx

@@ -0,0 +1,16 @@
+// 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>
+//   );
+// };

src/components/HistorySwiper/Summary/HistorySwiperSummary.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+import { flexColumn } from '@/styles/common/flex.css';
+
+export const wrapStyle = style([]);
+
+export const topStyle = style([
+  flexColumn,
+  {
+    gap: '0.75rem',
+  },
+]);
+
+export const gapStyle = style({
+  gap: '0.75rem',
+});
+
+export const slideStyle = style([
+  gapStyle,
+  {
+    display: 'flex',
+  },
+]);

src/components/HistorySwiper/Summary/HistorySwiperSummary.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import 'swiper/css';
+
+import React from 'react';
+import HistoryCard from '@/components/Card/History/HistoryCard';
+import { HistoryCardContextProps } from '@/components/Card/History/HistoryCard.context';
+import { historyCardWrapWidthStyle } from '@/components/Card/History/HistoryCard.css';
+import Pagination from '@/composable/Pagination/Pagination';
+import Spacer from '@/composable/Spacer/Spacer';
+import OceanSwiper from '../../OceanSwiper/OceanSwiper';
+import { gapStyle, slideStyle, topStyle } from './HistorySwiperSummary.css';
+
+interface HistoryCardData extends HistoryCardContextProps {
+  id: string;
+}
+
+interface Props {
+  title: string;
+  data: HistoryCardData[];
+}
+
+const HistorySwiperSummary = ({ title, data }: Props) => {
+  return (
+    <OceanSwiper>
+      <OceanSwiper.Top className={topStyle}>
+        <h2>{title}</h2>
+        <Pagination
+          length={data.length}
+          selectedIdx={-1}
+          wrapperGapClass={gapStyle}
+          contentsWidthClass={historyCardWrapWidthStyle}
+        />
+      </OceanSwiper.Top>
+      {/* TODO 반응형 */}
+      <Spacer direction="horizontal" spacing="spacer-15" />
+      <OceanSwiper.Main>
+        <OceanSwiper.Slide>
+          <div className={slideStyle}>
+            {data.map((history) => (
+              <HistoryCard
+                key={history.id}
+                companyName={history.companyName}
+                period={history.period}
+              >
+                <HistoryCard.Company />
+                <HistoryCard.Period />
+              </HistoryCard>
+            ))}
+          </div>
+        </OceanSwiper.Slide>
+      </OceanSwiper.Main>
+    </OceanSwiper>
+  );
+};
+
+export default HistorySwiperSummary;

src/components/OceanSwiper/OceanSwiper.tsx

@@ -9,7 +9,11 @@ import { customEvents } from '@/const/customEvents';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import { ContextValueOceanSwiper } from './OceanSwiper.context';
 
-const OceanSwiper = ({ children }: PropsWithChildren) => {
+interface Props {
+  className?: string;
+}
+
+const OceanSwiper = ({ children, className }: PropsWithChildren<Props>) => {
   return (
     <ContextValueOceanSwiper.Provider
       value={{
@@ -22,12 +26,16 @@ const OceanSwiper = ({ children }: PropsWithChildren) => {
         },
       }}
     >
-      <OceanSwiper.Wrap>{children}</OceanSwiper.Wrap>
+      <OceanSwiper.Wrap className={className}>{children}</OceanSwiper.Wrap>
     </ContextValueOceanSwiper.Provider>
   );
 };
 
-const Wrap = ({ children }: PropsWithChildren) => {
+interface WrapProps {
+  className?: string;
+}
+
+const Wrap = ({ children, className }: PropsWithChildren<WrapProps>) => {
   const { swiperWrapperRef } = getStaticContext(ContextValueOceanSwiper);
   const divRef = useRef<HTMLDivElement>(null);
 
@@ -41,11 +49,14 @@ const Wrap = ({ children }: PropsWithChildren) => {
       );
   }, []);
 
-  return <div ref={divRef}>{children}</div>;
+  return (
+    <div className={className} ref={divRef}>
+      {children}
+    </div>
+  );
 };
 
 interface MainProps extends SwiperOptions {
-  className?: string;
   hiddenNavigation?: boolean;
   prevButton?: React.ReactNode;
   nextButton?: React.ReactNode;

src/composable/Pagination/Pagination.css.ts

@@ -7,22 +7,17 @@ import { flexCenter } from '@/styles/common/flex.css';
 const wrapCommonStyle = style({
   position: 'relative',
   display: 'flex',
-  justifyContent: 'space-around',
   alignItems: 'center',
 });
 
 export const wrapStyle = style([
   wrapCommonStyle,
   {
-    width: '80rem',
-
+    width: '100%',
+    height: '0.25rem',
     '@media': {
       [ODSBreakpointTokenVariables['breakpoint-l']]: {
-        width: '62.25rem',
-      },
-
-      [ODSBreakpointTokenVariables['breakpoint-m']]: {
-        width: '52.4375rem',
+        height: '0.125rem',
       },
     },
   },
@@ -33,69 +28,37 @@ export const wrapStyleVariants = styleVariants({
     wrapCommonStyle,
     {
       width: '80rem',
+      height: '0.25rem',
     },
   ],
   LARGE: [
     wrapCommonStyle,
     {
       width: '62.25rem',
+      height: '0.125rem',
     },
   ],
   MEDIUM: [
     wrapCommonStyle,
     {
       width: '52.4375rem',
+      height: '0.125rem',
     },
   ],
 });
 
-const barCommonStyle = style([
+export const barStyle = style([
   backgroundColorVariants['sky-cyan-300'],
   {
     position: 'absolute',
     width: '100%',
     borderRadius: '0.4375rem',
     opacity: 0.7,
+    height: '100%',
   },
 ]);
 
-export const barStyle = style([
-  barCommonStyle,
-  {
-    height: '0.25rem',
-
-    '@media': {
-      [ODSBreakpointTokenVariables['breakpoint-l']]: {
-        height: '0.125rem',
-      },
-
-      [ODSBreakpointTokenVariables['breakpoint-m']]: {
-        width: '52.4375rem',
-      },
-    },
-  },
-]);
-
-export const barStyleVariants = styleVariants({
-  XLARGE: [
-    barCommonStyle,
-    {
-      height: '0.25rem',
-    },
-  ],
-  LARGE: [
-    barCommonStyle,
-    {
-      height: '0.125rem',
-    },
-  ],
-  MEDIUM: [
-    barCommonStyle,
-    {
-      height: '0.125rem',
-    },
-  ],
-});
+export const pointWrapStyle = style([flexCenter]);
 
 const buttonAnchorCommonStyle = style([
   flexCenter,