boostcampwm2025 · Grit03 · Jan 8, 2026 · Jan 7, 2026 · Jan 7, 2026 · Jan 7, 2026
diff --git a/frontend/index.html b/frontend/index.html
@@ -7,7 +7,7 @@
     <title>frontend</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" class="dark"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@tailwindcss/vite": "^4.1.17",

diff --git a/.../src/common/components/cursorWithName.tsx → .../src/common/components/CursorWithName.tsx b/.../src/common/components/cursorWithName.tsx → .../src/common/components/CursorWithName.tsx
@@ -1,6 +1,6 @@
 import { LuMousePointer2 } from 'react-icons/lu';
 
-interface CursorProps {
+interface CursorWithNameProps {
   nickname: string;
   color: string;
   backgroundColor: string;
@@ -14,7 +14,7 @@ function CursorWithName({
   backgroundColor,
   x,
   y,
-}: CursorProps) {
+}: CursorWithNameProps) {
   const renderColor = color ? color : '#000000';
 
   return (

diff --git a/frontend/src/common/components/ReactPortal.tsx b/frontend/src/common/components/ReactPortal.tsx
@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import { createPortal } from 'react-dom';
+
+type ReactPortalProps = {
+  parent?: HTMLElement;
+} & PropsWithChildren;
+
+const defaultRoot = document.getElementById('root') as HTMLElement;
+
+export default function ReactPortal({
+  parent = defaultRoot,
+  children,
+}: ReactPortalProps) {
+  return parent && createPortal(children, parent);
+}
diff --git a/frontend/src/features/canvas/CanvasContent.tsx b/frontend/src/features/canvas/CanvasContent.tsx
@@ -1,8 +1,8 @@
+import CursorWithName from '@/common/components/CursorWithName';
 import type { Cursor } from '@/common/types/cursor';
-import TechStackWidget from '@/features/widgets/techStack/components/TechStackWidget';
+import TechStackWidget from '@/features/widgets/techStack/components/techStackWidget/TechStackWidget';
 import { useState } from 'react';
 import type { Camera } from '@/common/types/camera';
-import CursorWithName from '@/common/components/cursorWithName';
 
 interface CanvasContainerProps {
   camera: Camera;
@@ -23,7 +23,7 @@
  isPanning,
  remoteCursor,
 }: CanvasContainerProps) {
  const [techStackPosition, setTechStackPosition] = useState({
    x: 500,
    y: 500,
  });

diff --git a/frontend/src/features/widgets/techStack/components/TechStackItem.tsx b/frontend/src/features/widgets/techStack/components/TechStackItem.tsx
@@ -0,0 +1,45 @@
+import { memo, useState } from 'react';
+import { getTechIconUrl } from '@/features/widgets/techStack/utils/getTechIconUrl';
+import { Badge } from '@/common/components/shadcn/badge';
+
+interface TechIconProps {
+  name: string;
+}
+
+function TechIcon({ name }: TechIconProps) {
+  const [error, setError] = useState(false);
+  const iconUrl = getTechIconUrl(name);
+
+  if (error) {
+    return (
+      <Badge className="h-5 w-5 rounded-full bg-gray-200 font-bold text-gray-600">
+        {name.substring(0, 1)}
+      </Badge>
+    );
+  }
+
+  return (
+    <img
+      src={iconUrl}
+      alt={name}
+      className="h-5 w-5 object-contain"
+      onError={() => setError(true)}
+    />
+  );
+}
+
+export function TechStackItem({ techName }: { techName: string }) {
+  return (
+    <Badge
+      variant="outline"
+      className="hover:border-primary flex h-25 w-25 flex-col items-center justify-center gap-2 rounded-lg border-gray-700 px-2 py-1 transition-colors select-none hover:bg-gray-700"
+    >
+      <TechIcon name={techName} />
+      <div className="text-center text-xs font-medium text-wrap text-gray-300">
+        {techName}
+      </div>
+    </Badge>
+  );
+}
+
+export default memo(TechStackItem);
diff --git a/frontend/src/features/widgets/techStack/components/TechStackWidget.tsx b/frontend/src/features/widgets/techStack/components/TechStackWidget.tsx
diff --git a/frontend/src/features/widgets/techStack/components/modal/DraggableTechStackItem.tsx b/frontend/src/features/widgets/techStack/components/modal/DraggableTechStackItem.tsx
@@ -0,0 +1,28 @@
+import { memo } from 'react';
+import TechStackItem from '@/features/widgets/techStack/components/TechStackItem';
+import { useDraggable } from '@dnd-kit/core';
+import type { TechStack } from '@/features/widgets/techStack/types/techStack';
+
+function DraggableTechStackItem({ id, name, category }: TechStack) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `tech-stack-${id}`,
+    data: {
+      support: ['techStackWidget'] as const,
+      content: { id, name, category },
+    },
+  });
+
+  const style = {
+    // DragOverlay를 사용하므로 원본은 transform 없이 제자리에 유지
+    opacity: isDragging ? 0.8 : 1,
+    cursor: isDragging ? 'grabbing' : 'grab',
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <TechStackItem techName={name} />
+    </div>
+  );
+}
+
+export default memo(DraggableTechStackItem);
diff --git a/frontend/src/features/widgets/techStack/components/modal/LabelList.tsx b/frontend/src/features/widgets/techStack/components/modal/LabelList.tsx
diff --git a/frontend/src/features/widgets/techStack/components/modal/ModalHeader.tsx b/frontend/src/features/widgets/techStack/components/modal/ModalHeader.tsx
@@ -1,26 +1,35 @@
 import { Button } from '@/common/components/shadcn/button';
-import { LuTrash2 } from 'react-icons/lu';
+import { LuX } from 'react-icons/lu';
+import type { ComponentProps } from 'react';
 
 interface HeaderProps {
   title: string;
   icon: React.ReactNode;
-  onRemove: () => void;
+  onClose: () => void;
 }
 
-export default function ModalHeader({ title, icon, onRemove }: HeaderProps) {
+export default function ModalHeader({
+  title,
+  icon,
+  onClose,
+  ...props
+}: HeaderProps & ComponentProps<'header'>) {
   return (
-    <div className="mb-4 flex items-center justify-between border-b border-gray-700 pb-2 select-none">
-      <h4 className="flex items-center gap-2 font-bold text-white">
+    <header
+      className="flex cursor-move items-center justify-between border-b border-gray-700 px-4 py-1 select-none"
+      {...props}
+    >
+      <div className="flex items-center gap-2 text-sm font-bold text-white">
         {icon} {title}
-      </h4>
+      </div>
       <Button
         variant="ghost"
         onMouseDown={(e) => e.stopPropagation()}
-        onClick={onRemove}
-        className="hover:text-main text-gray-500 transition-colors hover:cursor-pointer hover:bg-transparent dark:hover:bg-transparent"
+        onClick={onClose}
+        className="hover:text-main shrink-0 text-gray-500 transition-colors hover:cursor-pointer hover:bg-transparent dark:hover:bg-transparent"
       >
-        <LuTrash2 size={16} />
+        <LuX size={16} />
       </Button>
-    </div>
+    </header>
   );
 }
diff --git a/frontend/src/features/widgets/techStack/components/modal/SearchBar.tsx b/frontend/src/features/widgets/techStack/components/modal/SearchBar.tsx
@@ -2,15 +2,14 @@ import { Button } from '@/common/components/shadcn/button';
 import { Input } from '@/common/components/shadcn/input';
 import { LuSearch } from 'react-icons/lu';
 
-export default function SearchBar({
-  search,
-  setSearch,
-}: {
+interface SearchBarProps {
   search: string;
   setSearch: (search: string) => void;
-}) {
+}
+
+export default function SearchBar({ search, setSearch }: SearchBarProps) {
   return (
-    <div className="relative mb-4 flex items-center justify-between pb-2 select-none">
+    <div className="relative mb-6 flex items-center justify-between select-none">
       <Input
         type="text"
         placeholder="기술 스택을 검색하세요"

diff --git a/frontend/src/features/widgets/techStack/components/modal/TechLabel.tsx b/frontend/src/features/widgets/techStack/components/modal/TechLabel.tsx
diff --git a/frontend/src/features/widgets/techStack/components/modal/TechStackList.tsx b/frontend/src/features/widgets/techStack/components/modal/TechStackList.tsx
@@ -0,0 +1,31 @@
+import { memo, useMemo } from 'react';
+import NoContents from './NoContents';
+import { TECH_STACKS } from '@/features/widgets/techStack/constant/techStackInfo';
+import DraggableTechStackItem from './DraggableTechStackItem';
+
+interface TechStackListProps {
+  keyword: string;
+}
+
+function TechStackList({ keyword }: TechStackListProps) {
+  const filteredStacks = useMemo(() => {
+    const lower = keyword.toLowerCase();
+    return TECH_STACKS.filter((tech) =>
+      tech.name.toLowerCase().includes(lower),
+    );
+  }, [keyword]);
+
+  if (filteredStacks.length === 0) {
+    return <NoContents />;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2 overflow-y-auto">
+      {filteredStacks.map((tech) => (
+        <DraggableTechStackItem key={tech.id} {...tech} />
+      ))}
+    </div>
+  );
+}
+
+export default memo(TechStackList);