[feat] add infinte scroll

package.json

@@ -13,6 +13,8 @@
     "@svgr/webpack": "^8.1.0",
     "@types/react-beautiful-dnd": "^13.1.8",
     "axios": "^1.7.7",
+    "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
     "next": "15.0.3",
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
@@ -21,6 +23,7 @@
     "zustand": "^5.0.1"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.13",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/app/(with-header-sidebar)/dashboard/[id]/components/Card.module.css

@@ -0,0 +1,12 @@
+.card {
+  padding: 16px;
+  border-radius: 6px;
+  border: 1px solid var(--gray-300);
+  background: var(--white);
+  margin-bottom: 20px;
+  height: 150px;
+}
+
+.card.dragging {
+  margin: 0;
+}

src/app/(with-header-sidebar)/dashboard/[id]/components/Card.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Draggable } from 'react-beautiful-dnd';
+import { CardData } from '@/types/dashboardView';
+import styles from './Card.module.css';
+
+interface Props {
+  item: CardData;
+  index: number;
+}
+
+function Card({ item, index }: Props) {
+  if (!item || !item.id) {
+    return null;
+  }
+
+  return (
+    <Draggable draggableId={`${item.id}`} index={index}>
+      {(provided, snapshot) => (
+        <div
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          className={`${styles.card} ${snapshot.isDragging ? styles.dragging : ''}`}
+        >
+          <div>{item.id}</div>
+        </div>
+      )}
+    </Draggable>
+  );
+}
+
+export default React.memo(Card);

src/app/(with-header-sidebar)/dashboard/[id]/components/Column.module.css

@@ -0,0 +1,112 @@
+.column {
+  display: flex;
+  flex-direction: column;
+  width: 354px;
+  height: 1010px;
+  padding: 20px;
+  border-right: 1px solid var(--gray-200);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.status {
+  display: flex;
+  align-items: center;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.title {
+  color: var(--black-100);
+  font-size: 18px;
+  font-weight: 700;
+  margin-left: 8px;
+  margin-right: 12px;
+}
+
+.totalCount {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  padding: 3px 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  background: var(--gray-200);
+  color: var(--gray-500);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.settingsWrapper {
+  width: 24px;
+  height: 24px;
+}
+
+.settings {
+  background-color: transparent;
+  width: 100%;
+  height: 100%;
+}
+
+.createCardSection {
+  margin-top: 25px;
+  margin-bottom: 16px;
+}
+
+.createCard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 314px;
+  height: 40px;
+  border: 1px solid var(--gray-300);
+  background: var(--white);
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--black-100);
+  line-height: 26px;
+  gap: 12px;
+  border-radius: 8px;
+}
+
+.createCardIcon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 3px;
+  border-radius: 4px;
+  background: var(--violet-light);
+}
+
+.scrollContext {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc(100vh - 124px);
+  height: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.scrollContext::-webkit-scrollbar {
+  width: 0;
+}
+
+.dropContext {
+  min-height: auto;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}

src/app/(with-header-sidebar)/dashboard/[id]/components/Column.tsx

@@ -0,0 +1,125 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { Droppable } from 'react-beautiful-dnd';
+import { ColumnData } from '@/types/dashboardView';
+import Button from '@/components/Button';
+import Image from 'next/image';
+import Card from './Card';
+import styles from './Column.module.css';
+
+function Column({
+  color,
+  title,
+  totalCount,
+  id,
+  items,
+  loadMoreData,
+}: ColumnData) {
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const loadMoreRef = useRef<HTMLDivElement | null>(null);
+  const columnRef = useRef<HTMLDivElement | null>(null);
+  const [minHeight, setMinHeight] = useState<string>('auto');
+
+  useEffect(() => {
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry.isIntersecting) {
+          loadMoreData(id);
+        }
+      },
+      {
+        root: document.querySelector('.scrollContext'),
+        threshold: 0.4,
+      }
+    );
+
+    const loadMoreElement = loadMoreRef.current;
+
+    if (totalCount === 0) return;
+
+    if (loadMoreElement && observerRef.current && totalCount >= 10) {
+      observerRef.current.observe(loadMoreElement);
+    }
+
+    return () => {
+      if (loadMoreElement && observerRef.current) {
+        observerRef.current.unobserve(loadMoreElement);
+      }
+    };
+  }, [id, loadMoreData]);
+
+  useEffect(() => {
+    if (items.length === 0 || items.length <= 5) {
+      setMinHeight('866px');
+    } else {
+      setMinHeight('auto');
+    }
+  }, [items]);
+
+  return (
+    <div className={styles.column} ref={columnRef}>
+      <div className={styles.header}>
+        <div className={styles.status}>
+          <div style={{ background: color }} className={styles.dot}></div>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.totalCount}>{totalCount}</div>
+        </div>
+
+        <div className={styles.settingsWrapper}>
+          <Button
+            type="button"
+            aria-label="컬럼 설정 버튼"
+            className={styles.settings}
+          >
+            <Image src="/icons/settings.svg" width={24} height={24} alt="" />
+          </Button>
+        </div>
+      </div>
+
+      <div className={styles.createCardSection}>
+        <Button
+          type="button"
+          className={styles.createCard}
+          aria-label="컬럼 생성 버튼"
+        >
+          <Image
+            src="/icons/add.svg"
+            width={22}
+            height={22}
+            alt=""
+            className={styles.createCardIcon}
+          />
+        </Button>
+      </div>
+
+      <div className={styles.scrollContext}>
+        <Droppable
+          droppableId={`${id}`}
+          isDropDisabled={false}
+          isCombineEnabled={false}
+          ignoreContainerClipping={true}
+          direction="vertical"
+        >
+          {(provided) => (
+            <div
+              className={styles.dropContext}
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+              style={{ minHeight }}
+            >
+              {items.map((item, index) =>
+                item ? <Card key={item.id} item={item} index={index} /> : null
+              )}
+
+              {provided.placeholder}
+
+              <div ref={loadMoreRef} style={{ height: '1px' }} />
+            </div>
+          )}
+        </Droppable>
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(Column);