refactor: GeneralCarousel 컴포넌트 children prop 추가 (#173)

hang-log-design-system · Jan 8, 2024 · 1e0a108 · 1e0a108
1 parent 830716f
commit 1e0a108
Showing 1 changed file with 26 additions and 22 deletions.
diff --git a/src/components/GeneralCarousel/GeneralCarousel.tsx b/src/components/GeneralCarousel/GeneralCarousel.tsx
@@ -21,6 +21,7 @@ export interface useGeneralCarouselProps {
   showNavigationOnHover?: boolean;
   showArrows?: boolean;
   showDots?: boolean;
+  children?: JSX.Element | JSX.Element[] | null;
 }
 
 const GeneralCarousel = ({
@@ -30,6 +31,7 @@ const GeneralCarousel = ({
   showNavigationOnHover = true,
   showArrows = true,
   showDots = true,
+  children = null,
 }: useGeneralCarouselProps) => {
   const { viewIndex, itemRef, carouselBoxRef, handleMoveImage, handleClickLeft, handleClickRight } =
     useGeneralCarousel(items);
@@ -50,28 +52,30 @@ const GeneralCarousel = ({
         </div>
       )}
       <Box css={sliderWrapperStyling}>
-        {items.map((Item, index) => {
-          if (typeof Item === 'string') {
-            return (
-              <div
-                ref={index === viewIndex ? itemRef : null}
-                key={crypto.randomUUID()}
-                css={getItemWrapperStyling(width, height)}
-              >
-                <img draggable={false} src={Item} alt="이미지" />
-              </div>
-            );
-          }
-          return (
-            <div
-              ref={index === viewIndex ? itemRef : null}
-              key={crypto.randomUUID()}
-              css={getItemWrapperStyling(width, height)}
-            >
-              <Item />
-            </div>
-          );
-        })}
+        {children === null
+          ? items.map((Item, index) => {
+              if (typeof Item === 'string') {
+                return (
+                  <div
+                    ref={index === viewIndex ? itemRef : null}
+                    key={crypto.randomUUID()}
+                    css={getItemWrapperStyling(width, height)}
+                  >
+                    <img draggable={false} src={Item} alt="이미지" />
+                  </div>
+                );
+              }
+              return (
+                <div
+                  ref={index === viewIndex ? itemRef : null}
+                  key={crypto.randomUUID()}
+                  css={getItemWrapperStyling(width, height)}
+                >
+                  <Item />
+                </div>
+              );
+            })
+          : children}
       </Box>
     </div>
   );