feat: 태스크 이동 위치 인디케이터 추가

boostcampwm-2024 · Nov 20, 2024 · 14539d7 · 14539d7
1 parent 1e9a27a
commit 14539d7
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/apps/client/src/components/Kanban.tsx b/apps/client/src/components/Kanban.tsx
@@ -190,6 +190,7 @@ export default function Kanban({ sections, refetch }: KanbanProps) {
           >
             {section.tasks.map((task) => (
               <KanbanTask
+                belowed={task.id === belowTaskId}
                 handleDragLeave={handleDragLeave}
                 handleDragOver={(e) =>
                   handleDragOver(e as unknown as DragEvent<HTMLDivElement>, section.id, task.id)
@@ -201,6 +202,11 @@ export default function Kanban({ sections, refetch }: KanbanProps) {
                 task={task}
               />
             ))}
+            <div
+              className={`mt-2 h-1 w-full rounded-full bg-blue-500 ${
+                activeSectionId === section.id && belowTaskId === -1 ? 'opacity-100' : 'opacity-0'
+              } transition-all`}
+            />
           </KanbanSection>
         ))}
         <Button type="button" variant="outline" className="h-full w-36" disabled>

diff --git a/apps/client/src/components/KanbanSection.tsx b/apps/client/src/components/KanbanSection.tsx
@@ -66,7 +66,7 @@ export function KanbanSection({
         </SectionMenu>
       </SectionHeader>
       <SectionContent
-        className="flex flex-1 flex-col gap-2 overflow-y-auto"
+        className="flex flex-1 flex-col overflow-y-auto"
         onDragOver={onDragOver}
         onDragLeave={onDragLeave}
         onDrop={onDrop}

diff --git a/apps/client/src/components/KanbanTask.tsx b/apps/client/src/components/KanbanTask.tsx
@@ -9,9 +9,16 @@ interface TaskProps {
   handleDragOver: (e: DragEvent<HTMLDivElement>) => void;
   handleDragLeave: () => void;
   handleDragStart: (e: DragEvent<HTMLDivElement>) => void;
+  belowed: boolean;
 }
 
-function KanbanTask({ task, handleDragOver, handleDragLeave, handleDragStart }: TaskProps) {
+function KanbanTask({
+  task,
+  handleDragOver,
+  handleDragLeave,
+  handleDragStart,
+  belowed,
+}: TaskProps) {
   const onDragOver = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -27,6 +34,9 @@ function KanbanTask({ task, handleDragOver, handleDragLeave, handleDragStart }:
       onDragOver={onDragOver}
       onDragLeave={handleDragLeave}
     >
+      <div
+        className={`my-1 h-1 w-full rounded-full bg-blue-500 ${belowed ? 'opacity-100' : 'opacity-0'} transition-all`}
+      />
       <Card className="bg-white transition-all duration-300">
         <CardHeader className="flex flex-row items-start gap-2">
           <CardTitle className="text-md mt-1.5 flex flex-1 break-keep">{task.title}</CardTitle>