[Refactor] 칸반 보드 컴포넌트 분리 및 드래그앤드롭 로직 분리

[PMtHk]

관련 이슈 번호

close #227

작업 내용

• 드래그 앤 드롭 로직을 분리했습니다.
  • 이 과정에서 DropHandler 는 여전히 외부에 있는 것이 더 좋아보여서, 인자로 받도록 했습니다.
• 칸반보드를 보드 / 섹션 / 태스크로 분리했습니다.

고민과 학습내용

태스크와 섹션 모두 더 분리를 할 수는 있을 것 같은데 오히려 흐름이 깨지는 것 같아서, 유지했습니다.
그리고, 섹션 안에 태스크가 들어가있으면 오히려 이해하기 어려울 것 같아
아래와 같이 구성했습니다.

<AnimatePresence mode="popLayout">
  {sections.map((section) => (
    <BoardSection
      key={section.id}
      section={section}
      isBelow={section.id === belowSectionId}
      onDrop={(e) => handleDrop(e, section.id)}
      onDragOver={(e) => handleDragOver(e, section.id)}
    >
      {section.tasks.map((task) => (
        <TaskCard
          key={task.id}
          task={task}
          isBelow={task.id === belowTaskId}
          onDragStart={(e) => handleDragStart(e, section.id, task.id)}
          onDragOver={(e) => handleDragOver(e, section.id, task.id)}
          onDragLeave={handleDragLeave}
          onDrop={(e) => handleDrop(e, section.id)}
          onTitleChange={handleTitleChange}
        />
      ))}
    </BoardSection>
  ))} 
</AnimatePresence>