fix: Pagination 개별 아이템으로 사용할수 있게 수정

Ocean-Portfolio · Mar 17, 2024 · 7349403 · 7349403
1 parent d6a45cd
commit 7349403
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 35 deletions.
diff --git a/src/components/History/Summary/HistorySummary.css.ts b/src/components/History/Summary/HistorySummary.css.ts
@@ -18,8 +18,8 @@ export const listTitleStyle = style([
   colorVariants['primary-variant'],
 ]);
 
-export const gapStyle = style({
-  gap: '0.75rem',
+export const barWidthStyle = style({
+  width: 'calc(100% + 0.75rem)',
 });
 
 export const swiperWrapStyle = style({

diff --git a/src/components/History/Summary/HistorySummary.tsx b/src/components/History/Summary/HistorySummary.tsx
@@ -20,7 +20,6 @@ import {
 } from './HistorySummary.context';
 import {
   buttonStyle,
-  gapStyle,
   iconStyle,
   iconStyleVariants,
   swiperTitleStyle,
@@ -30,6 +29,7 @@ import {
   swiperMainStyle,
   swiperWrapStyle,
   swiperItemStyle,
+  barWidthStyle,
 } from './HistorySummary.css';
 export interface HistoryCardData extends HistoryCardContextProps {
   id: string;
@@ -116,43 +116,38 @@ const Swipe = () => {
   const { isDetailView, title, data, selectIndex } = getStaticContext(
     StaticContextHistorySummary,
   );
-  const { breakpointM, breakpointL, breakpointXXL } = useODSBreakPoints();
+  const { breakpointM, breakpointXXL } = useODSBreakPoints();
   const { handleClick, summary_id } = getStaticContext(
     StaticContextHistorySummary,
   );
 
-  const threeParts = isDetailView ? breakpointXXL : breakpointL;
-
-  const maxDisplayLength = threeParts ? 3 : 4;
-
   return (
     <OceanSwiper className={swiperWrapStyle}>
       <OceanSwiper.Top>
-        {isDetailView && <Spacer spacing="spacer-025" />}
         {!isDetailView && (
           <h2 className={swiperTitleStyle}>{title.toUpperCase()}</h2>
         )}
-        <Pagination
-          length={
-            data.length > maxDisplayLength ? maxDisplayLength : data.length
-          }
-          selectedIdx={typeof selectIndex === 'number' ? selectIndex : -1}
-          wrapperGapClass={gapStyle}
-          contentsWidthClass={historyCardWrapWidthStyle}
-          onClick={(currentIdx) => {
-            if (handleClick)
-              handleClick(data[currentIdx].id, summary_id, currentIdx);
-          }}
-        />
       </OceanSwiper.Top>
-      <Spacer
-        direction="horizontal"
-        spacing={breakpointM ? 'spacer-075' : 'spacer-15'}
-      />
       <OceanSwiper.Main className={swiperMainStyle} perView={'auto'}>
         {data.map((history, idx) => {
           return (
             <OceanSwiper.Slide key={history.id} className={swiperItemStyle}>
+              {isDetailView && <Spacer spacing="spacer-025" />}
+              <Pagination
+                length={1}
+                isSelected={
+                  typeof selectIndex === 'number' ? selectIndex === idx : false
+                }
+                barWidthClass={barWidthStyle}
+                contentsWidthClass={historyCardWrapWidthStyle}
+                onClick={() => {
+                  if (handleClick) handleClick(data[idx].id, summary_id, idx);
+                }}
+              />
+              <Spacer
+                direction="horizontal"
+                spacing={breakpointM ? 'spacer-075' : 'spacer-15'}
+              />
               <HistoryCard
                 companyName={history.companyName}
                 period={history.period}

diff --git a/src/components/OceanSwiper/OceanSwiper.css.ts b/src/components/OceanSwiper/OceanSwiper.css.ts
@@ -12,5 +12,6 @@ globalStyle(`${swiperVisibleSelector} > .swiper`, {
 
 globalStyle('.swiper-slide', {
   display: 'inline-flex !important',
+  flexDirection: 'column',
   width: 'fit-content !important',
 });
diff --git a/src/composable/Pagination/Pagination.css.ts b/src/composable/Pagination/Pagination.css.ts
@@ -4,11 +4,12 @@ import { globalFadeIn } from '@/styles/animation/fade.css';
 import { backgroundColorVariants } from '@/styles/common/color.css';
 import { flexCenter } from '@/styles/common/flex.css';
 
-const wrapCommonStyle = style({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-});
+const wrapCommonStyle = style([
+  flexCenter,
+  {
+    position: 'relative',
+  },
+]);
 
 export const wrapStyle = style([
   wrapCommonStyle,

diff --git a/src/composable/Pagination/Pagination.tsx b/src/composable/Pagination/Pagination.tsx
@@ -22,8 +22,10 @@ type PaginationSizeTokens = 'XLARGE' | 'LARGE' | 'MEDIUM';
 export interface PaginationProps {
   sizeToken?: PaginationSizeTokens;
   length: number;
-  selectedIdx: number;
+  selectedIdx?: number;
+  isSelected?: boolean;
   wrapperGapClass?: string;
+  barWidthClass?: string;
   contentsWidthClass?: string;
   onClick?: (currentIdx: number) => void;
 }
@@ -32,7 +34,9 @@ const Pagination = ({
   sizeToken,
   length,
   selectedIdx,
+  isSelected,
   wrapperGapClass,
+  barWidthClass,
   contentsWidthClass,
   onClick,
 }: PropsWithChildren<PaginationProps>) => {
@@ -43,13 +47,13 @@ const Pagination = ({
         wrapperGapClass,
       )}
     >
-      <Pagination.Bar />
+      <Pagination.Bar barWidthClass={barWidthClass} />
       {Array.from({ length }).map((_, idx) => (
         <Pagination.Point
           sizeToken={sizeToken}
           key={idx}
           idx={idx}
-          isSelected={idx === selectedIdx}
+          isSelected={isSelected ? isSelected : idx === selectedIdx}
           contentsWidthClass={contentsWidthClass}
           onClick={onClick}
         />
@@ -58,8 +62,12 @@ const Pagination = ({
   );
 };
 
-const Bar = () => {
-  return <hr className={barStyle} />;
+interface BarProps {
+  barWidthClass?: string;
+}
+
+const Bar = ({ barWidthClass }: BarProps) => {
+  return <hr className={classNames(barStyle, barWidthClass)} />;
 };
 
 interface PointProps {