feat(project): 3단계 구조 프론트엔드 — 세션 관리·스코프·하위업무·멀티호밍·이미지

지난 커밋(07f4d0f)의 백엔드 위에 화면을 얹는다.

- 세션(기존 "단계") 문구 통일 + 프로젝트 스코프("이 프로젝트")일 때 보드
  컬럼에 관리 UI 추가: 이름변경/완료토글/삭제(만든 사람만)/"+ 세션 추가"/
  드래그 재정렬(카드 드래그와 같은 네이티브 HTML5 DnD, 기존
  PUT stages/order 재사용).
- 프로젝트 화면 툴바에 "이 프로젝트"/"전체 프로젝트" 스코프 토글 추가.
  기본은 아사나처럼 지금 프로젝트만(달력/타임라인/보드/리스트 4개 뷰
  전부), "전체"는 예전처럼 접근 가능한 프로젝트를 다 합쳐서 보여준다.
  서버가 tasks 각 행에 context_project_id(어느 프로젝트를 보다가 담겼는지)
  를 실어주고 클라이언트가 그걸로 순수 필터링(재조회 없음).
- 하위 업무 인라인 UI — 업무 모달 안에 체크박스·제목·담당자·마감일이 한
  줄인 하위업무 목록(변경 즉시 저장), "+ 하위 업무 추가". 카드에는
  "완료/전체" 진행 배지만 표시. update_task 에 completed 필드 추가(세션이
  없는 하위업무의 직접 완료 토글용).
- 멀티호밍 UI — 업무 모달에 "연결된 프로젝트" 칩 + "+ 프로젝트에 추가"(
  프로젝트/세션 선택). 보드에서 다른 프로젝트가 원 소속인 카드는 그
  프로젝트 배지를 달고 나타나며, 드래그로 세션을 옮기면
  POST /api/tasks/{id}/links 로 그 프로젝트 안에서의 배치만 바뀐다(원본
  불변). 링크 생성 권한을 다듬음 — 최초 연결은 원/대상 프로젝트 양쪽 권한이
  필요하지만, 이미 연결된 카드를 그 프로젝트 보드 안에서 옮기는 것은 대상
  프로젝트 권한만 있으면 되게 해 정상적인 드래그가 403 나지 않게 했다.
- 업무 설명란을 textarea → contenteditable 로 교체. 클립보드 이미지
  붙여넣기/파일 업로드 버튼으로 삽입(기존 task_attachments 재사용, 새
  GET /api/attachments/{id}/inline 추가 — 기존 /download 는
  Content-Disposition: attachment 라 <img> 렌더링에 못 씀). 새 업무 작성
  중(저장 전)에는 이미지 삽입 비활성화.
- .pj-modal-card 에 max-height/overflow-y 추가(내용이 늘어 화면보다
  길어지는 것 방지).

홈(index.html)·프로젝트(project.html) 두 업무 모달 모두 요소 id 를 공유하는
기존 구조를 그대로 따라, 새 로직은 공용 함수(initDescEditor/initSubtaskBlock/
initLinksBlock)로 한 번만 작성해 양쪽에서 재사용한다.

docs/PROJECT_MODULE.md 갱신 — 1-1절에 3단계 구조·권한 변경 전반을 정리.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

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

@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/project.css?v=20260915i" />
+<link rel="stylesheet" href="/static/project.css?v=20260916a" />
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 {% endblock %}
 
@@ -45,5 +45,5 @@
   {% endif %}
 </div>
 
-<script src="/static/project.js?v=20260915g" defer></script>
+<script src="/static/project.js?v=20260916a" defer></script>
 {% endblock %}

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

@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/project.css?v=20260915i" />
+<link rel="stylesheet" href="/static/project.css?v=20260916a" />
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 {% endblock %}
 
@@ -244,12 +244,17 @@
     <input type="hidden" id="pj-t-id" />
     <input type="hidden" id="pj-t-project-id" />
     <label>제목<input type="text" id="pj-t-title" placeholder="업무 제목" /></label>
-    <label>설명<textarea id="pj-t-desc" rows="2"></textarea></label>
+    <label>설명</label>
+    <div class="pj-desc-toolbar">
+      <label class="pj-upload-btn">이미지 추가<input type="file" id="pj-desc-img-input" accept="image/*" hidden /></label>
+      <span class="pj-muted-sm" id="pj-desc-hint"></span>
+    </div>
+    <div class="pj-desc-editor" id="pj-t-desc" contenteditable="true" data-placeholder="설명을 입력하세요… (이미지는 붙여넣기 또는 위 버튼으로 추가)"></div>
     <div class="pj-form-row">
       <label>담당자
         <select id="pj-t-assignee"><option value="">불러오는 중…</option></select>
       </label>
-      <label>단계
+      <label>세션
         <select id="pj-t-stage"><option value="">불러오는 중…</option></select>
       </label>
     </div>
@@ -271,6 +276,29 @@
       <label>시작 시간<input type="time" id="pj-t-stime" disabled /></label>
       <label>마감 시간<input type="time" id="pj-t-dtime" disabled /></label>
     </div>
+    <div class="pj-task-extra" id="pj-subtask-block">
+      <div class="pj-extra-head">
+        <span class="material-symbols-outlined pj-gicon pj-gicon-sm">checklist</span> 하위 업무
+      </div>
+      <ul class="pj-subtask-list" id="pj-subtask-list"></ul>
+      <div class="pj-subtask-form">
+        <input type="text" id="pj-subtask-input" placeholder="하위 업무 추가…" />
+        <button type="button" class="pj-btn pj-btn-primary" id="pj-subtask-add">추가</button>
+      </div>
+    </div>
+    <div class="pj-task-extra" id="pj-links-block">
+      <div class="pj-extra-head">
+        <span class="material-symbols-outlined pj-gicon pj-gicon-sm">link</span> 연결된 프로젝트
+        <button type="button" class="pj-upload-btn" id="pj-link-add-btn">+ 프로젝트에 추가</button>
+      </div>
+      <div class="pj-link-chips" id="pj-link-chips"></div>
+      <div class="pj-link-form" id="pj-link-form" hidden>
+        <select id="pj-link-project"><option value="">프로젝트 선택…</option></select>
+        <select id="pj-link-stage"><option value="">세션 선택…</option></select>
+        <button type="button" class="pj-btn pj-btn-primary" id="pj-link-save">추가</button>
+        <button type="button" class="pj-btn" id="pj-link-cancel">취소</button>
+      </div>
+    </div>
     <div class="pj-task-extra" id="pj-attach-block">
       <div class="pj-extra-head">
         <span class="material-symbols-outlined pj-gicon pj-gicon-sm">attach_file</span> 첨부파일
@@ -321,5 +349,5 @@
 <script>
   window.PJ_COLORS = {{ ["#4573d2","#37a3a3","#62a420","#e8a33d","#e8384f","#aa62e3","#f06a6a","#5a6772"] | tojson }};
 </script>
-<script src="/static/project.js?v=20260915g" defer></script>
+<script src="/static/project.js?v=20260916a" defer></script>
 {% endblock %}

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

@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/project.css?v=20260915i" />
+<link rel="stylesheet" href="/static/project.css?v=20260916a" />
 <!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 <!-- 타임라인 vis-timeline — self-host -->
@@ -118,6 +118,12 @@
           <button type="button" class="pj-tab" data-view="board">보드</button>
           <button type="button" class="pj-tab" data-view="list">리스트</button>
         </div>
+        <!-- 아사나처럼 기본은 "이 프로젝트"만 보여준다. 전체 프로젝트 보기는
+             예전처럼 접근 가능한 모든 프로젝트를 합쳐서 보여주는 모드. -->
+        <div class="pj-view-tabs" id="pj-scope-toggle">
+          <button type="button" class="pj-tab is-active" data-scope="project">이 프로젝트</button>
+          <button type="button" class="pj-tab" data-scope="all">전체 프로젝트</button>
+        </div>
       </div>
 
       <!-- 달력 (휴가 모듈과 동일한 월간 그리드) -->
@@ -166,7 +172,7 @@
       <div class="pj-view" data-view="list" hidden>
         <table class="pj-table" id="pj-list">
           <thead>
-            <tr><th>업무</th><th>담당자</th><th>단계</th><th>우선순위</th><th>시작</th><th>마감</th></tr>
+            <tr><th>업무</th><th>담당자</th><th>세션</th><th>우선순위</th><th>시작</th><th>마감</th></tr>
           </thead>
           <tbody></tbody>
         </table>
@@ -181,7 +187,12 @@
     <h3 id="pj-task-modal-title">새 업무</h3>
     <input type="hidden" id="pj-t-id" />
     <label>제목<input type="text" id="pj-t-title" placeholder="업무 제목" /></label>
-    <label>설명<textarea id="pj-t-desc" rows="2"></textarea></label>
+    <label>설명</label>
+    <div class="pj-desc-toolbar">
+      <label class="pj-upload-btn">이미지 추가<input type="file" id="pj-desc-img-input" accept="image/*" hidden /></label>
+      <span class="pj-muted-sm" id="pj-desc-hint"></span>
+    </div>
+    <div class="pj-desc-editor" id="pj-t-desc" contenteditable="true" data-placeholder="설명을 입력하세요… (이미지는 붙여넣기 또는 위 버튼으로 추가)"></div>
     <div class="pj-form-row">
       <label>담당자
         <select id="pj-t-assignee">
@@ -193,7 +204,7 @@
           {% endfor %}
         </select>
       </label>
-      <label>단계
+      <label>세션
         <select id="pj-t-stage">
           {% for s in stages %}
           <option value="{{ s.id }}">{{ s.name }}</option>
@@ -219,6 +230,34 @@
       <label>시작 시간<input type="time" id="pj-t-stime" disabled /></label>
       <label>마감 시간<input type="time" id="pj-t-dtime" disabled /></label>
     </div>
+
+    <!-- 하위 업무 (기존 업무 편집 시에만) -->
+    <div class="pj-task-extra" id="pj-subtask-block" hidden>
+      <div class="pj-extra-head">
+        <span class="material-symbols-outlined pj-gicon pj-gicon-sm">checklist</span> 하위 업무
+      </div>
+      <ul class="pj-subtask-list" id="pj-subtask-list"></ul>
+      <div class="pj-subtask-form">
+        <input type="text" id="pj-subtask-input" placeholder="하위 업무 추가…" />
+        <button type="button" class="pj-btn pj-btn-primary" id="pj-subtask-add">추가</button>
+      </div>
+    </div>
+
+    <!-- 연결된 프로젝트 — 멀티호밍(아사나식). 기존 업무 편집 시에만 -->
+    <div class="pj-task-extra" id="pj-links-block" hidden>
+      <div class="pj-extra-head">
+        <span class="material-symbols-outlined pj-gicon pj-gicon-sm">link</span> 연결된 프로젝트
+        <button type="button" class="pj-upload-btn" id="pj-link-add-btn">+ 프로젝트에 추가</button>
+      </div>
+      <div class="pj-link-chips" id="pj-link-chips"></div>
+      <div class="pj-link-form" id="pj-link-form" hidden>
+        <select id="pj-link-project"><option value="">프로젝트 선택…</option></select>
+        <select id="pj-link-stage"><option value="">세션 선택…</option></select>
+        <button type="button" class="pj-btn pj-btn-primary" id="pj-link-save">추가</button>
+        <button type="button" class="pj-btn" id="pj-link-cancel">취소</button>
+      </div>
+    </div>
+
     <!-- 첨부파일 (기존 업무 편집 시에만) -->
     <div class="pj-task-extra" id="pj-attach-block" hidden>
       <div class="pj-extra-head">
@@ -292,5 +331,5 @@
 </script>
 
 <script src="/static/vendor/vis-timeline/vis-timeline-graph2d.min.js"></script>
-<script src="/static/project.js?v=20260915g" defer></script>
+<script src="/static/project.js?v=20260916a" defer></script>
 {% endblock %}