feat(project): 보드 카드를 같은 세션 안에서 드래그로 순서 변경

지금까지 같은 세션에 다시 놓으면 아무 일도 안 일어났다(다른 세션으로
옮길 때만 동작). 놓은 위치(마우스 Y좌표)를 카드들 사이 인덱스로 계산해
그 순서를 새 엔드포인트로 저장하고(tasks.sort_order, 세션 소속만 재배정 —
세션 재정렬의 reorder_stages 와 동일 패턴), 로컬 tasks 배열도 그 순서에
맞게 재배치(applyStageOrder)해 새로고침 없이 즉시 반영. 실제 3개 업무로
드래그→서버 저장→하드리로드까지 헤드리스 크롬으로 검증.

app/modules/project/db.py

@@ -812,6 +812,20 @@ class ProjectStore:
                         (i, int(sid), project_id),
                     )
 
+    def reorder_tasks(self, *, stage_id: int, ordered_ids: list[int]) -> None:
+        """보드 카드 드래그로 같은 세션 안에서 순서 바꾸기. sort_order 는
+        업무 생성 시 프로젝트 전체 기준으로 매겨지지만(다른 세션과 섞여도
+        무방 — 화면은 항상 세션으로 먼저 필터링한 뒤 이 값으로 정렬한다),
+        여기서는 이 세션 소속 업무만 골라 0부터 다시 매긴다."""
+        with self._pool.connection() as conn:
+            with conn.transaction():
+                for i, tid in enumerate(ordered_ids):
+                    conn.execute(
+                        "UPDATE tasks SET sort_order = %s "
+                        "WHERE id = %s AND stage_id = %s",
+                        (i, int(tid), stage_id),
+                    )
+
     # ════════════════════════════════════════════════════════════
     # 알림센터 (project_notifications)
     # ════════════════════════════════════════════════════════════

app/modules/project/router.py

@@ -1287,6 +1287,21 @@ async def api_reorder_stages(
     return JSONResponse({"stages": st.list_stages(project_id=project_id)})
 
 
+@router.put("/api/projects/{project_id}/stages/{stage_id}/tasks/order")
+async def api_reorder_tasks(
+    request: Request, project_id: int, stage_id: int, payload: dict[str, Any] = Body(...)
+) -> JSONResponse:
+    """보드에서 카드를 같은 세션 안에서 드래그로 재정렬."""
+    user = _require_user(request)
+    st = _db_or_503(request)
+    _require_manage(request, st, user, project_id)
+    ids = payload.get("ordered_ids") or []
+    if not isinstance(ids, list) or not ids:
+        raise HTTPException(status_code=400, detail="ordered_ids 가 필요합니다.")
+    st.reorder_tasks(stage_id=stage_id, ordered_ids=[int(i) for i in ids])
+    return JSONResponse({"ok": True})
+
+
 @router.put("/api/projects/{project_id}/stages/{stage_id}")
 async def api_update_stage(
     request: Request, project_id: int, stage_id: int, payload: dict[str, Any] = Body(...)

app/modules/project/templates/project/inbox.html

@@ -45,5 +45,5 @@
   {% endif %}
 </div>
 
-<script src="/static/project.js?v=20260917k" defer></script>
+<script src="/static/project.js?v=20260917l" defer></script>
 {% endblock %}

app/modules/project/templates/project/index.html

@@ -393,5 +393,5 @@
 <script>
   window.PJ_COLORS = {{ ["#4573d2","#37a3a3","#62a420","#e8a33d","#e8384f","#aa62e3","#f06a6a","#5a6772"] | tojson }};
 </script>
-<script src="/static/project.js?v=20260917k" defer></script>
+<script src="/static/project.js?v=20260917l" defer></script>
 {% endblock %}

app/modules/project/templates/project/project.html

@@ -461,5 +461,5 @@
 </script>
 
 <script src="/static/vendor/vis-timeline/vis-timeline-graph2d.min.js"></script>
-<script src="/static/project.js?v=20260917k" defer></script>
+<script src="/static/project.js?v=20260917l" defer></script>
 {% endblock %}

app/static/project.js

@@ -1910,6 +1910,17 @@
     // 보드 드롭(프로젝트 스코프) — 세션 id 로 바로 옮긴다. 이 프로젝트가 원
     // 소속이 아닌(멀티호밍된) 업무는 원본을 안 건드리고 "이 프로젝트 안에서의
     // 세션"만 연결(POST .../links)로 바꾼다.
+    // 드롭 지점(마우스 Y)이 이 컬럼의 카드들 중 어디에 해당하는지 인덱스로.
+    // 드래그 중인 카드 자신은 계산에서 제외(자기 위치가 기준을 흔들지 않게).
+    function cardDropIndex(body, clientY, excludeTaskId) {
+      const cards = Array.prototype.slice.call(body.querySelectorAll(".pj-card"))
+        .filter(function (c) { return String(c.dataset.taskId) !== String(excludeTaskId); });
+      for (let i = 0; i < cards.length; i++) {
+        const r = cards[i].getBoundingClientRect();
+        if (clientY < r.top + r.height / 2) return i;
+      }
+      return cards.length;
+    }
     function enableDropByStageId(body, stageId) {
       body.addEventListener("dragover", function (e) {
         if (!e.dataTransfer.types.includes("text/plain")) return;
@@ -1922,7 +1933,24 @@
         body.classList.remove("is-over");
         const taskId = parseInt(e.dataTransfer.getData("text/plain"), 10);
         const t = tasks.find(function (x) { return x.id === taskId; });
-        if (!t || t.stage_id === stageId) return;
+        if (!t) return;
+        if (t.stage_id === stageId) {
+          // 같은 세션 안에서 카드 위치만 이동 — 세션 이동이 아니라 정렬.
+          const currentOrder = tasks.filter(function (x) { return x.stage_id === stageId; });
+          const idx = cardDropIndex(body, e.clientY, taskId);
+          const withoutDragged = currentOrder.filter(function (x) { return x.id !== taskId; });
+          withoutDragged.splice(idx, 0, t);
+          const orderedIds = withoutDragged.map(function (x) { return x.id; });
+          const beforeIds = currentOrder.map(function (x) { return x.id; });
+          if (beforeIds.join(",") === orderedIds.join(",")) return;  // 놓은 자리가 원래 자리와 같으면 아무것도 안 함
+          try {
+            await api("PUT", "/project/api/projects/" + projectId + "/stages/" + stageId + "/tasks/order",
+              { ordered_ids: orderedIds });
+            applyStageOrder(stageId, orderedIds);
+            renderBoard();
+          } catch (err) { showToast("순서 변경 실패: " + err.message, "error"); }
+          return;
+        }
         try {
           if (t.project_id === projectId) {
             const res = await api("PUT", "/project/api/tasks/" + taskId, { stage_id: stageId });
@@ -1934,7 +1962,7 @@
             t.is_linked = true;
           }
           renderBoard();
-        } catch (err) { alert("이동 실패: " + err.message); }
+        } catch (err) { showToast("이동 실패: " + err.message, "error"); }
       });
     }
 
@@ -2154,6 +2182,20 @@
       else tasks.push(task);
     }
 
+    // 같은 세션 안 카드 드래그 재정렬 — tasks 배열은 여러 세션이 뒤섞인
+    // 하나의 배열이라, 이 세션이 차지하던 자리(인덱스)만 그대로 두고 그
+    // 자리에 들어갈 값만 새 순서대로 바꿔치기한다(다른 세션 업무의 상대
+    // 위치는 건드리지 않는다).
+    function applyStageOrder(stageId, orderedIds) {
+      const orderMap = {};
+      orderedIds.forEach(function (id, i) { orderMap[id] = i; });
+      const idxs = [];
+      tasks.forEach(function (t, i) { if (t.stage_id === stageId) idxs.push(i); });
+      const sorted = idxs.map(function (i) { return tasks[i]; })
+        .sort(function (a, b) { return orderMap[a.id] - orderMap[b.id]; });
+      idxs.forEach(function (i, k) { tasks[i] = sorted[k]; });
+    }
+
     function refreshActiveView() {
       // 모든 뷰 + 좌측 트리 클라이언트 재렌더(새로고침 없음).
       renderView(currentView);

docs/PROJECT_MODULE.md

@@ -96,8 +96,10 @@
   - **달력** — FullCalendar. 업무를 시작~마감 기간으로 표시. 클릭 편집.
   - **타임라인** — vis-timeline(간트형). 기간 있는 업무만.
   - **보드** — 세션별 칸반. 카드 드래그로 세션 이동(`PUT /api/tasks/{id}` `stage_id`,
-    멀티호밍된 업무는 `POST /api/tasks/{id}/links`). 세션 컬럼 자체도 드래그로
-    재정렬(§1-1).
+    멀티호밍된 업무는 `POST /api/tasks/{id}/links`). 같은 세션 안에서 드래그하면
+    이동이 아니라 카드 순서만 바꾼다(`PUT /api/projects/{id}/stages/{stage_id}/tasks/order`,
+    세션 재정렬과 같은 패턴 — `tasks.sort_order`를 그 세션 소속만 0부터 재배정).
+    세션 컬럼 자체도 드래그로 재정렬(§1-1).
   - **리스트** — 표.
   - 4개 뷰 모두 툴바의 "이 프로젝트"/"전체 프로젝트" 스코프 토글을 따른다(§1-1).
   - 라이브러리는 현재 CDN 로드(스켈레톤). 추후 `app/static/vendor/` self-host 권장.