[feat] added Slide Component

- added height, maxHeight props at Modal Component

Author: seongjin2427

src/app/(MainLayout)/components/ReadOnlyCommonFeed/ReadOnlyCommonFeed.module.scss

@@ -5,16 +5,19 @@
   width: 100%;
   height: 100%;
   max-height: 800px;
+  overflow: hidden;
 
   .left {
-    width: 670px;
+    width: 60%;
+    max-width: 670px;
+    height: 100%;
     border-right: 1px solid $COLOR_GRAY_2;
   }
 
   .right {
+    width: 40%;
     display: flex;
     flex-direction: column;
-    flex: 1;
   }
 
   .right_up {

src/app/(MainLayout)/components/ReadOnlyCommonFeed/ReadOnlyCommonFeed.tsx

@@ -8,6 +8,7 @@ import FeedCommentList from '../FeedCommentList';
 import styles from './ReadOnlyCommonFeed.module.scss';
 import FeedLikeBox from '../FeedLikeBox';
 import FeedCommentWriteInput from '../FeedCommentWriteInput';
+import Slide from '../Slide';
 
 const MOCK_FEED_DATA = {
   username: 'seongjin',
@@ -30,7 +31,13 @@ const ReadOnlyCommonFeed = () => {
 
   return (
     <div className={styles.container}>
-      <div className={styles.left}>Left</div>
+      <div className={styles.left}>
+        <Slide>
+          <div>111111111111111111111111111111111111111111111111111111</div>
+          <div>222222222222222222222222222222222222222222222222222222</div>
+          <div>333333333333333333333333333333333333333333333333333333</div>
+        </Slide>
+      </div>
       <div className={styles.right}>
         <div className={styles.right_up}>
           <FeedTextContent feedData={MOCK_FEED_DATA} />

src/app/(MainLayout)/components/Slide/Slide.module.scss

@@ -0,0 +1,50 @@
+@use '../../../../styles/helpers/index' as *;
+
+.container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.slide_wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.5s ease;
+}
+
+.slide_item {
+  width: 100%;
+  height: 100%;
+}
+
+.empty_icon {
+  width: 35px;
+  height: 35px;
+}
+
+.arrow {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  height: 35px;
+  border-radius: 9999px;
+  background-color: $COLOR_GRAY_6;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.left_arrow {
+  left: 30px;
+}
+
+.right_arrow {
+  right: 30px;
+}

src/app/(MainLayout)/components/Slide/Slide.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import {
+  Children,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import clsx from 'clsx';
+
+import LeftArrowIcon from '@/assets/icons/left_arrow.svg';
+import RightArrowIcon from '@/assets/icons/right_arrow.svg';
+
+import styles from './Slide.module.scss';
+
+interface SlideProps {
+  children: ReactNode;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+}
+
+const Slide = ({ children, leftIcon, rightIcon }: SlideProps) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [parentWidth, setParentWidth] = useState<number | undefined>(
+    0 || undefined,
+  );
+  const containerRef = useRef<HTMLUListElement>(null);
+
+  const updateParentWidth = useCallback(() => {
+    if (containerRef.current) {
+      setParentWidth(containerRef.current.offsetWidth);
+    }
+  }, []);
+
+  // ? debounce 적용 함수
+  // const debouncedUpdateParentWidth = useCallback(
+  //   debounce(updateParentWidth, 200),
+  //   [updateParentWidth],
+  // );
+
+  useEffect(() => {
+    updateParentWidth();
+  }, [updateParentWidth]);
+
+  useEffect(() => {
+    window.addEventListener('resize', () => updateParentWidth);
+
+    return () => {
+      window.removeEventListener('resize', () => updateParentWidth);
+    };
+  }, [updateParentWidth]);
+
+  const slideItems =
+    Children.map<ReactNode, ReactNode>(children, (childElement) => (
+      <li
+        className={styles.slide_item}
+        style={{ width: parentWidth, flexShrink: 0 }}
+      >
+        {childElement}
+      </li>
+    )) ?? [];
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % slideItems.length);
+  };
+
+  const handlePrev = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex === 0 ? slideItems.length - 1 : prevIndex - 1,
+    );
+  };
+
+  const hasNext = currentIndex < slideItems.length - 1;
+  const hasPrev = currentIndex > 0;
+
+  return (
+    <ul className={styles.container} ref={containerRef}>
+      <div
+        className={styles.slide_wrapper}
+        style={{
+          transform: `translateX(-${currentIndex * (parentWidth ?? 0)}px)`,
+        }}
+      >
+        {slideItems}
+      </div>
+
+      {hasPrev && (
+        <button
+          className={clsx(styles.arrow, styles.left_arrow)}
+          onClick={handlePrev}
+        >
+          {leftIcon ?? <LeftArrowIcon />}
+        </button>
+      )}
+      {hasNext && (
+        <button
+          className={clsx(styles.arrow, styles.right_arrow)}
+          onClick={handleNext}
+        >
+          {rightIcon ?? <RightArrowIcon />}
+        </button>
+      )}
+    </ul>
+  );
+};
+
+export default Slide;

src/app/(MainLayout)/components/Slide/index.ts

@@ -0,0 +1 @@
+export { default } from './Slide';

src/components/common/FeedWrapper/FeedWrapper.tsx

@@ -1,16 +1,25 @@
 'use client';
 
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 
 import Modal from '../Modal';
 
 interface FeedWrapperProps {
   children?: ReactNode;
-  modalWidth?: string;
+  modalWidth?: CSSProperties['width'];
+  modalMaxWidth?: CSSProperties['maxWidth'];
+  modalHeight?: CSSProperties['height'];
+  modalMaxHeight?: CSSProperties['maxHeight'];
 }
 
-const FeedWrapper = ({ modalWidth = '1070px', children }: FeedWrapperProps) => {
+const FeedWrapper = ({
+  modalWidth = '90vw',
+  modalMaxWidth = '1070px',
+  modalHeight = '80vw',
+  modalMaxHeight = '800px',
+  children,
+}: FeedWrapperProps) => {
   const router = useRouter();
   const searchParams = new URLSearchParams(useSearchParams()).get('f');
 
@@ -24,7 +33,13 @@ const FeedWrapper = ({ modalWidth = '1070px', children }: FeedWrapperProps) => {
   }
 
   return (
-    <Modal width={modalWidth} onClose={closeFeed}>
+    <Modal
+      width={modalWidth}
+      maxWidth={modalMaxWidth}
+      height={modalHeight}
+      maxHeight={modalMaxHeight}
+      onClose={closeFeed}
+    >
       {children}
     </Modal>
   );

src/components/common/Modal/Modal.tsx

@@ -4,10 +4,20 @@ import styles from './modal.module.scss';
 type ModalProps = {
   children?: ReactNode;
   width?: CSSProperties['width'];
+  maxWidth?: CSSProperties['maxWidth'];
+  height?: CSSProperties['height'];
+  maxHeight?: CSSProperties['maxHeight'];
   onClose?: (status: boolean) => void;
 };
 
-const Modal = ({ children, width = '800px', onClose }: ModalProps) => {
+const Modal = ({
+  children,
+  width = '800px',
+  maxWidth,
+  height,
+  maxHeight,
+  onClose,
+}: ModalProps) => {
   const handleContainerClick = (e: MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
   };
@@ -25,7 +35,7 @@ const Modal = ({ children, width = '800px', onClose }: ModalProps) => {
       />
       <div
         className={styles.container}
-        style={{ width }}
+        style={{ width, maxWidth, height, maxHeight }}
         onClick={handleContainerClick}
         role="presentation"
       >

src/utils/event-optimizer.ts

@@ -0,0 +1,13 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const debounce = <T extends (...args: any[]) => any>(
+  func: T,
+  delay: number,
+) => {
+  let timer: NodeJS.Timeout;
+  return (...args: Parameters<T>): void => {
+    clearTimeout(timer);
+    timer = setTimeout(() => func(...args), delay);
+  };
+};
+
+export { debounce };