feat(M02): 면적산출 상세 오른쪽 = 일위대가 패널 AreaPanel — 담은 로직 · 자재목록(기준 · 반영) · 줄 누름 칸 지정 · 칸 값 바뀌면 바로 곱함 · 조합 줄 · [조합 고치기] 지움 (PLAN 39-4 D2 · D6)

- AreaLink 칸 값 글(수 · 글 · 참 · 오류) 고침 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W4uKaV4ZBhsJN4GHG7yRj4
2026-10-04 19:06:21 +09:00
parent f0b8882a84
commit 611f5413f3
5 changed files with 267 additions and 20 deletions
@@ -0,0 +1,64 @@
+/* M02 면적산출 상세 오른쪽 패널(일위대가 담은 로직 · 자재목록) · 칸 지정 모달 — 틀은 공용 사이드바 카드 ·
+   접기 · 폭 손잡이 · 접기 손잡이 */
+
+/* 편집 칸 = 시트 | 패널 — 패널 폭은 손잡이가 `--m02-apanel-width` 로 줌 */
+.m02-apanel {
+  position: relative;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  width: var(--m02-apanel-width, 36rem); /* 금액 칸 넷이 가로 굴림 없이 보이게 */
+  min-width: 280px;
+  max-width: 60%;
+  min-height: 0;
+  border-left: 1px solid var(--color-border);
+}
+
+.m02-apanel.is-resizing {
+  transition: none;
+}
+
+.m02-apanel.is-collapsed {
+  width: 0;
+  min-width: 0;
+}
+
+.m02-apanel.is-collapsed > .m02-apanel__body,
+.m02-apanel.is-collapsed > .ui-resizer {
+  display: none;
+}
+
+/* 접기 손잡이 — 패널 왼쪽 밖 세로 가운데(시트 위로) */
+.m02-apanel > .ui-workflow-overlay__handle--side {
+  z-index: 6;
+  right: auto;
+  left: calc(-1 * var(--spacing-24));
+  border-right: 0;
+  border-radius: var(--radius-buttons) 0 0 var(--radius-buttons);
+}
+
+/* 안쪽만 굴림 — 페이지 스크롤 안 생김 */
+.m02-apanel__body {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--spacing-8);
+}
+
+/* 칸 지정 모달 — 지금 연결 한 줄 · [지금 고른 칸으로] [풀기] · 주소 칸 [잇기] */
+.m02-area-link__now {
+  margin: 0 0 var(--spacing-12);
+  color: var(--color-text-secondary);
+}
+
+.m02-area-link__row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--spacing-8);
+  margin-bottom: var(--spacing-12);
+}
+
+.m02-area-link__row > .ui-field {
+  flex: 1 1 auto;
+  margin: 0;
+}