feat(project): 프로젝트 화면 좌측메뉴 강제접힘 + 우측 내업무 패널 + 보드 가로스크롤 격리

- 프로젝트 관리(index/project/inbox) 진입 시 메인 좌측 사이드바를 전역 설정과
  무관하게 항상 접어서 렌더(force_sidebar_collapsed) — 서버에서 바로
  data-collapsed=true 로 그려 깜빡임도 없다.
- 프로젝트 상세 화면(보드/리스트/달력/타임라인) 오른쪽에 홈 화면과 동일한
  "내 업무" 패널 추가(프로젝트별 그룹, 클릭 시 팝업 편집).
- 보드에 세션이 늘어나면 .pj-board 안에서만 가로 스크롤돼야 하는데
  .pj-main 에 min-width:0 이 없어 grid 트랙 자체가 넓어져 페이지 전체가
  가로 스크롤되던 문제 수정.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-15 22:13:49 +09:00
parent 5c72e66305
commit fc2ae9d1a3
7 changed files with 105 additions and 10 deletions
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916f" />
<link rel="stylesheet" href="/static/project.css?v=20260916g" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %}
@@ -45,5 +45,5 @@
{% endif %}
</div>
<script src="/static/project.js?v=20260916g" defer></script>
<script src="/static/project.js?v=20260916h" defer></script>
{% endblock %}
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916f" />
<link rel="stylesheet" href="/static/project.css?v=20260916g" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %}
@@ -376,5 +376,5 @@
<script>
window.PJ_COLORS = {{ ["#4573d2","#37a3a3","#62a420","#e8a33d","#e8384f","#aa62e3","#f06a6a","#5a6772"] | tojson }};
</script>
<script src="/static/project.js?v=20260916g" defer></script>
<script src="/static/project.js?v=20260916h" defer></script>
{% endblock %}
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916f" />
<link rel="stylesheet" href="/static/project.css?v=20260916g" />
<!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
<!-- 타임라인 vis-timeline — self-host -->
@@ -152,6 +152,50 @@
</table>
</div>
</section>
<!-- ── 우측: 내 업무 (홈 화면과 동일) ── -->
<aside class="pj-home-side pj-project-mytasks">
<div class="pj-section-head"><h2>내 업무</h2></div>
{% if not my_projects %}
<div class="pj-empty pj-empty-sm">배정된 업무가 없습니다.</div>
{% else %}
<div class="pj-mytree">
{% for p in my_projects %}
<div class="pj-mytree-group">
<a class="pj-mytree-proj" href="/project/p/{{ p.id }}">
<span class="material-symbols-outlined" style="color: {{ p.color }}; font-size:18px;">folder</span>
<span class="pj-mytree-proj-name">{{ p.name }}</span>
</a>
<ul class="pj-mytree-tasks">
{% for t in p.tasks %}
<li class="pj-mytree-task {% if t.completed_at %}is-done{% endif %}">
<a href="/project/p/{{ t.project_id }}?task={{ t.id }}" data-task-id="{{ t.id }}" class="pj-task-popup-link">
<span class="pj-mytree-lead">
{% if t.comment_count %}
<span class="pj-cmt-badge" data-task-id="{{ t.id }}" data-count="{{ t.comment_count }}" title="댓글 {{ t.comment_count }}개">
<span class="pj-cmt-ic">💬</span><span class="pj-cmt-n">{{ t.comment_count }}</span>
</span>
{% endif %}
</span>
<span class="pj-mytree-body">
<span class="pj-mytree-title">{{ t.title }}</span>
{% if t.start_date or t.due_date %}
<span class="pj-mytree-dates">
{% if t.start_date and t.due_date %}{{ t.start_label }} ~ {{ t.due_label }}
{% elif t.due_date %}~ {{ t.due_label }}
{% else %}{{ t.start_label }} ~{% endif %}
</span>
{% endif %}
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
{% endif %}
</aside>
</div>
</div>
@@ -324,10 +368,11 @@
"projects": {{ projects_meta | tojson }},
"stagesByProject": {{ stages_by_project | tojson }},
"boardStages": {{ board_stage_names | tojson }},
"avatars": {{ avatars | tojson }}
"avatars": {{ avatars | tojson }},
"myTasks": {{ my_tasks | tojson }}
}
</script>
<script src="/static/vendor/vis-timeline/vis-timeline-graph2d.min.js"></script>
<script src="/static/project.js?v=20260916g" defer></script>
<script src="/static/project.js?v=20260916h" defer></script>
{% endblock %}