[Refector] 사이드 메뉴 정렬 및 로고 변경, 칼럼 D&D삭제

[fix, Refector] 사이드 메뉴 정렬 및 로고 변경, 칼럼상세 D&D삭제

Author: MINJI121

src/components/columnCard/CardList.tsx

@@ -1,17 +1,4 @@
 import { useEffect, useState, useRef } from "react";
-import {
-  DndContext,
-  closestCenter,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  DragEndEvent,
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  verticalListSortingStrategy,
-  arrayMove,
-} from "@dnd-kit/sortable";
 import { CardType } from "@/types/task";
 import { getCardsByColumn } from "@/api/card";
 import SortableCard from "@/components/columnCard/SortableCard";
@@ -34,12 +21,6 @@ export const CardList = ({
   const [cards, setCards] = useState<CardType[]>([]);
   const observerRef = useRef<HTMLDivElement | null>(null);
 
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: { distance: 5 },
-    })
-  );
-
   // 카드 목록 api 호출 (마감일 빠른 순 정렬)
   useEffect(() => {
     const fetchCards = async () => {
@@ -60,7 +41,7 @@ export const CardList = ({
     fetchCards();
   }, [columnId, initialTasks]);
 
-  // 스크롤 감지
+  // 스크롤
   useEffect(() => {
     if (!scrollRoot?.current || !observerRef.current) return;
 
@@ -82,36 +63,12 @@ export const CardList = ({
     };
   }, [scrollRoot]);
 
-  // 드래그 & 드롭
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-
-    if (!over || active.id === over.id) return;
-
-    const oldIndex = cards.findIndex((card) => card.id === active.id);
-    const newIndex = cards.findIndex((card) => card.id === over.id);
-
-    const newOrder = arrayMove(cards, oldIndex, newIndex);
-    setCards(newOrder);
-  };
-
   return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragEnd={handleDragEnd}
-    >
-      <SortableContext
-        items={cards.map((card) => card.id)}
-        strategy={verticalListSortingStrategy}
-      >
-        <div className="w-full grid grid-cols-1 gap-3">
-          {cards.map((card) => (
-            <SortableCard key={card.id} card={card} onClick={onCardClick} />
-          ))}
-          <div ref={observerRef} className="h-[1px] bg-transparent" />
-        </div>
-      </SortableContext>
-    </DndContext>
+    <div className="w-full grid grid-cols-1 gap-3">
+      {cards.map((card) => (
+        <SortableCard key={card.id} card={card} onClick={onCardClick} />
+      ))}
+      <div ref={observerRef} className="h-[1px] bg-transparent" />
+    </div>
   );
 };

src/components/sideMenu/SideMenu.tsx

@@ -52,33 +52,39 @@ export default function SideMenu({
     <aside
       className={clsx(
         "z-20 flex flex-col h-screen overflow-y-auto lg:overflow-y-hidden overflow-x-hidden transition-all duration-200",
-        "bg-white border-r border-[var(--color-gray3)] px-3 py-5",
+        "bg-white border-r border-[var(--color-gray3)] py-5",
         isCollapsed
-          ? "w-[67px]"
-          : "w-[67px] sm:w-[67px] md:w-[160px] lg:w-[300px]"
+          ? "w-[67px] items-center px-0"
+          : "w-[67px] sm:w-[67px] md:w-[160px] lg:w-[300px] px-3"
       )}
     >
       {/* 로고 영역 */}
-      <div className="flex flex-col items-center md:items-start mb-8 px-1">
+      <div
+        className={clsx(
+          "flex flex-col mb-8",
+          isCollapsed ? "items-center px-0" : "items-center md:items-start px-1"
+        )}
+      >
         <Link href="/mydashboard" className="mb-2">
-          <Image
-            src="/svgs/logo_taskify.svg"
-            alt="Taskify Large Logo"
-            width={109}
-            height={34}
-            className="hidden md:block"
-            priority
-            unoptimized
-          />
-          <Image
-            src="/svgs/logo.svg"
-            alt="Taskify Small Logo"
-            width={24}
-            height={28}
-            className="md:hidden"
-            priority
-            unoptimized
-          />
+          {isCollapsed ? (
+            <Image
+              src="/svgs/logo.svg"
+              alt="작은 로고"
+              width={24}
+              height={28}
+              priority
+              unoptimized
+            />
+          ) : (
+            <Image
+              src="/svgs/logo_taskify.svg"
+              alt="Taskify 로고"
+              width={109}
+              height={34}
+              priority
+              unoptimized
+            />
+          )}
         </Link>
 
         {/* 접기/펼치기 버튼 (모바일에서는 숨김) */}