Merge pull request #143 from hhjin1/card-hj

[Feat] Card: 무한스크롤 기능 추가, 카드 클릭 시 카드 상세모달 열림 기능 추가

Author: rover1523

src/components/button/ColumnsButton.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import clsx from "clsx";
-import Image from "next/image";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   fullWidth?: boolean;
@@ -18,22 +17,19 @@ const ColumnsButton: React.FC<ButtonProps> = ({
         "flex justify-center items-center gap-[10px] bg-white transition-all",
         "rounded-lg px-4 py-3 font-semibold",
         "border border-gray-200 hover:border-purple-500",
-        fullWidth ? "w-full" : "w-[284px] md:w-[544px] lg:w-[354px]", // 반응형 너비
-        "h-[70px] md:h-[70px] lg:h-[70px]", // 반응형 높이
-        "mt-[10px] md:mt-[16px] lg:mt-[20px]", // 여백
+        fullWidth ? "w-full" : "w-[284px] md:w-[544px] lg:w-[354px]",
+        "h-[70px] md:h-[70px] lg:h-[70px]",
+        "mt-[10px] md:mt-[16px] lg:mt-[20px]",
         "text-lg md:text-2lg lg:text-2lg",
         className
       )}
       {...props}
     >
       <span className="font-semibold">{children}</span>
-      <Image
-        src="/svgs/add.svg"
-        alt="Plus Icon"
-        width={24}
-        height={24}
-        className="w-[18px] h-[18px] md:w-[20px] md:h-[20px] lg:w-[22px] lg:h-[22px] p-1 rounded-md bg-purple-100"
-      />
+
+      <span className="w-[23px] h-[23px] flex items-center justify-center text-[#5534DA] text-[20px] font-extralight rounded-md bg-[#F1EFFD]">
+        +
+      </span>
     </button>
   );
 };

src/components/button/TodoButton.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import clsx from "clsx";
-import Image from "next/image";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   fullWidth?: boolean;
@@ -18,22 +17,18 @@ const TodoButton: React.FC<ButtonProps> = ({
         "flex justify-center items-center gap-[10px] bg-white transition-all",
         "rounded-lg px-4 py-3 font-semibold",
         "border border-gray-200 hover:border-purple-500",
-        fullWidth ? "w-full" : "w-[284px] md:w-[544px] lg:w-[314px]", // 반응형 너비
-        "h-[32px] md:h-[40px] lg:h-[40px]", // 반응형 높이
-        "mt-[10px] md:mt-[16px] lg:mt-[20px]", // 여백
+        fullWidth ? "w-full" : "w-[284px] md:w-[544px] lg:w-[314px]",
+        "h-[32px] md:h-[40px] lg:h-[40px]",
+        "mt-[10px] md:mt-[16px] lg:mt-[20px]",
         "text-lg md:text-2lg lg:text-2lg",
         className
       )}
       {...props}
     >
       <span className="truncate">{children}</span>
-      <Image
-        src="/svgs/add.svg"
-        alt="Plus Icon"
-        width={24}
-        height={24}
-        className="w-5 h-5 md:w-6 md:h-6 lg:w-7 lg:h-7 p-1 bg-purple-100 rounded-md"
-      />
+      <span className="w-5 h-5 md:w-6 md:h-6 lg:w-6 lg:h-6 flex items-center justify-center rounded-md bg-[#F1EFFD] text-[#5534DA] text-[16px] md:text-[18px] lg:text-[20px] font-light">
+        +
+      </span>
     </button>
   );
 };

src/components/columnCard/Card.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 type CardProps = CardType & {
   imageUrl?: string | null;
   assignee: AssigneeType;
+  onClick?: () => void;
 };
 
 export default function Card({
@@ -12,9 +13,11 @@ export default function Card({
   tags,
   assignee,
   imageUrl,
+  onClick,
 }: CardProps) {
   return (
     <div
+      onClick={onClick}
       className={`
         flex flex-col md:flex-row lg:flex-col
         items-start rounded-md bg-white border border-gray-200 p-4

src/components/columnCard/CardList.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import { CardType } from "@/types/task";
+import Card from "./Card";
+import { getCardsByColumn } from "@/api/card";
+
+type CardListProps = {
+  columnId: number;
+  teamId: string;
+  initialTasks: CardType[];
+  onCardClick: (card: CardType) => void;
+};
+
+const ITEMS_PER_PAGE = 6;
+
+export default function CardList({
+  columnId,
+  initialTasks,
+  onCardClick,
+}: CardListProps) {
+  const [cards, setCards] = useState<CardType[]>(initialTasks);
+  const [cursorId, setCursorId] = useState<number | null>(
+    initialTasks.length > 0 ? initialTasks[initialTasks.length - 1].id : null
+  );
+  const [hasMore, setHasMore] = useState(true);
+  const observerRef = useRef<HTMLDivElement | null>(null);
+  const isFetchingRef = useRef(false);
+
+  /* cursorId 업데이트 방식 변경 */
+  const fetchMoreCards = useCallback(async () => {
+    if (isFetchingRef.current || !hasMore) return;
+
+    isFetchingRef.current = true;
+
+    try {
+      const res = await getCardsByColumn({
+        columnId,
+        size: ITEMS_PER_PAGE,
+        cursorId: cursorId ?? undefined, // 최신 cursorId 사용
+      });
+
+      const newCards = res.cards as CardType[];
+
+      if (newCards.length > 0) {
+        setCards((prev) => {
+          const existingIds = new Set(prev.map((card) => card.id));
+          const uniqueCards = newCards.filter(
+            (card) => !existingIds.has(card.id)
+          );
+          return [...prev, ...uniqueCards];
+        });
+
+        // cursorId 안전하게 업데이트
+        setCursorId((prevCursorId) => {
+          const newCursor = newCards[newCards.length - 1]?.id ?? prevCursorId;
+          return newCursor;
+        });
+      }
+
+      if (newCards.length < ITEMS_PER_PAGE) {
+        setHasMore(false);
+      }
+    } catch (error) {
+      console.error("카드 로딩 실패:", error);
+    } finally {
+      isFetchingRef.current = false;
+    }
+  }, [columnId, cursorId, hasMore]);
+
+  /* 무한 스크롤 */
+  useEffect(() => {
+    if (!observerRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore) {
+          fetchMoreCards();
+        }
+      },
+      { threshold: 0.5 }
+    );
+
+    observer.observe(observerRef.current);
+
+    return () => observer.disconnect();
+  }, [fetchMoreCards, hasMore]);
+
+  return (
+    <div className="grid gap-3 w-full grid-cols-1">
+      {cards.map((task) => (
+        <Card
+          key={task.id}
+          {...task}
+          assignee={task.assignee}
+          onClick={() => onCardClick(task)}
+        />
+      ))}
+      {hasMore && <div ref={observerRef} className="h-20 " />}
+    </div>
+  );
+}

src/components/columnCard/Column.tsx

@@ -1,17 +1,18 @@
+// Column.tsx
 import { useEffect, useState } from "react";
 import Image from "next/image";
 import { CardType } from "@/types/task";
-import { CardDetailType } from "@/types/cards";
-import Card from "./Card";
 import TodoModal from "@/components/modalInput/ToDoModal";
 import TodoButton from "@/components/button/TodoButton";
 import ColumnManageModal from "@/components/columnCard/ColumnManageModal";
 import ColumnDeleteModal from "@/components/columnCard/ColumnDeleteModal";
 import { updateColumn, deleteColumn } from "@/api/columns";
-import { getDashboardMembers } from "@/api/card";
+import { getDashboardMembers, getCardDetail } from "@/api/card";
 import { MemberType } from "@/types/users";
-import CardDetailModal from "../modalDashboard/CardDetailModal";
 import { TEAM_ID } from "@/constants/team";
+import CardList from "./CardList";
+import CardDetailModal from "@/components/modalDashboard/CardDetailModal";
+import { CardDetailType } from "@/types/cards";
 
 type ColumnProps = {
   columnId: number;
@@ -30,21 +31,17 @@ export default function Column({
   const [isColumnModalOpen, setIsColumnModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isTodoModalOpen, setIsTodoModalOpen] = useState(false);
+  const [isCardDetailModalOpen, setIsCardDetailModalOpen] = useState(false);
+  const [selectedCard, setSelectedCard] = useState<CardDetailType | null>(null);
   const [members, setMembers] = useState<
     { id: number; userId: number; nickname: string }[]
   >([]);
-  const [selectedCard, setSelectedCard] = useState<CardDetailType | null>(null);
-
-  const handleCloseDetailModal = () => {
-    setSelectedCard(null);
-  };
 
+  // ✅ 멤버 불러오기
   useEffect(() => {
     const fetchMembers = async () => {
       try {
-        const result = await getDashboardMembers({
-          dashboardId,
-        });
+        const result = await getDashboardMembers({ dashboardId });
 
         const parsed = result.map((m: MemberType) => ({
           id: m.id,
@@ -89,13 +86,23 @@ export default function Column({
     }
   };
 
+  const handleCardClick = async (cardId: number) => {
+    try {
+      const detail = await getCardDetail(cardId);
+      setSelectedCard(detail);
+      setIsCardDetailModalOpen(true);
+    } catch (e) {
+      console.error("카드 상세 불러오기 실패:", e);
+    }
+  };
+
   return (
     <div
       className={`
-    flex flex-col border-r border-gray-200 bg-gray-50 rounded-md p-4
-    h-auto sm:m-h-screen
-    max-h-[401px] sm:max-h-none
-  `}
+      flex flex-col border-r border-[#EEEEEE] bg-gray-50 rounded-md p-4
+      h-auto sm:m-h-screen
+      max-h-[401px] sm:max-h-none w-full lg:w-[360px]
+    `}
     >
       {/* 칼럼 헤더 */}
       <div className="flex items-center justify-between">
@@ -119,49 +126,19 @@ export default function Column({
       </div>
 
       {/* 카드 영역 */}
-      <div className=" flex-1 pb-4 flex flex-col items-center gap-3 ">
+      <div className="flex-1 pb-4 flex flex-col items-center gap-3">
         <div onClick={() => setIsTodoModalOpen(true)} className="mb-2">
           <TodoButton />
         </div>
 
-        {/* 카드 1개만 렌더링 (모바일), 전체 렌더링 (md 이상) */}
-        <div className="w-full flex flex-wrap justify-center gap-3">
-          {tasks.map((task, index) => {
-            const isMobile =
-              typeof window !== "undefined" && window.innerWidth < 768;
-            if (isMobile && index > 0) return null;
-            return (
-              <div
-                key={task.id}
-                onClick={() =>
-                  setSelectedCard({
-                    id: task.id,
-                    title: task.title,
-                    tags: task.tags,
-                    dueDate: task.dueDate,
-                    assignee: {
-                      ...task.assignee,
-                      profileImageUrl: task.assignee.profileImageUrl ?? "",
-                    },
-                    imageUrl: task.imageUrl ?? null,
-                    description: task.description ?? "",
-                    columnId: task.columnId,
-                    dashboardId: task.dashboardId,
-                    status: columnTitle,
-                    createdAt: new Date().toISOString(),
-                    updatedAt: new Date().toISOString(),
-                  })
-                }
-              >
-                <Card
-                  key={task.id}
-                  {...task}
-                  imageUrl={task.imageUrl}
-                  assignee={task.assignee}
-                />
-              </div>
-            );
-          })}
+        {/* 무한스크롤 카드 리스트로 대체 */}
+        <div className="w-full max-h-[800px] overflow-y-auto">
+          <CardList
+            columnId={columnId}
+            teamId={TEAM_ID}
+            initialTasks={tasks}
+            onCardClick={(card) => handleCardClick(card.id)}
+          />
         </div>
       </div>
 
@@ -195,12 +172,17 @@ export default function Column({
         onClose={() => setIsDeleteModalOpen(false)}
         onDelete={handleDeleteColumn}
       />
-      {selectedCard && (
+
+      {/* 카드 상세 모달 */}
+      {isCardDetailModalOpen && selectedCard && (
         <CardDetailModal
           card={selectedCard}
-          onClose={handleCloseDetailModal}
           currentUserId={selectedCard.assignee.id}
           dashboardId={dashboardId}
+          onClose={() => {
+            setIsCardDetailModalOpen(false);
+            setSelectedCard(null);
+          }}
         />
       )}
     </div>