eomsangdon/Aislo
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

refactor(B07): 상세 설계 화면 페이지 자체 변종을 부품 상자 부품으로 — 도면 단추 · 장 번호 · 도구 단추 · 카드 · 띠 알림 · 값 목록 (PLAN 553-1)

Browse Source 
- 도면 단추(날 ui-panel-btn) · 장 번호 · 도구 단추 = 단추 부품 · ⚙ = 아이콘 단추 꼴 · 평면도 줄 = 목록 줄 꼴
- 머리 = 패널 머리 + 배지 · 확정 건너뜀 = 띠 알림 · 빈 글 = 빈 상태 · 측점 정보 = 값 목록 · ⚙ 모달 그룹 상자 = 카드 · 종류 이름 칸 = 입력
- window.confirm 둘 → 확인창 부품 · 죽은 CSS 걷음 · 시험 헬퍼 부품 가짜 한 벌(helper_b07_part_stubs) · 153-1 옛 오류(removeAttribute) 고침 · 가이드 선택자 · 지킴 시험

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
eomsangdon
2026-10-26 22:29:22 +09:00
co-authored by Claude Sonnet 5.5
parent 6bb0a5312d
commit 835f9d9290
16 changed files with 312 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
B07_DesignDetail/B07_DesignDetail_UI_Style.css
+25 -138
View File
@@ -26,20 +26,6 @@
overflow-y: auto;
}
.b07-drawing-list__heading {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--spacing-12);
border-bottom: 1px solid var(--color-border);
}
.b07-drawing-list__heading span,
.b07-drawing-list__empty {
color: var(--color-text-muted);
font-size: var(--text-body-sm);
}
/* 횡단도는 2열 배치 — 단, **칸이 좁아지면 1열로 접는다**(2026-09-08).
좌측 패널이 320 고정이던 동안은 2열이 늘 128.8px 라 문제가 없었으나, 공용
오버레이가 좁은 폭에서 패널을 280·227·182 로 물리면서 칸이 108.8 → 82.4 → 60px
@@ -76,16 +62,12 @@
}
.b07-drawing-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
/* 격자 칸의 기본 최소폭은 글자 길이라, 이름이 길면 칸이 패널을 밀어내 단추가
오른쪽으로 튀어나갔다(2026-09-04 실측 14px). 0으로 풀면 이름이 `…`로 잘린다. */
min-width: 0;
/* 크기 · 테두리 · 바탕 · 글자 = 공용 `.ui-panel-btn`(269) · 여기선 확정 여부 좌측 색 띠(미확정: 투명)만 */
/* 크기 · 테두리 · 바탕 · 글자 = 단추 부품(고스트 32) · 여기선 확정 여부 좌측 색 띠(미확정: 투명)만 */
border-left: 3px solid transparent;
text-align: center;
}
.b07-drawing-button__name {
@@ -101,29 +83,19 @@
padding-left: 22px;
}
/* ⚙ = 아이콘 단추 부품 꼴(span) · 자리만 단추 안 오른쪽 */
.b07-drawing-button__settings {
position: absolute;
top: 50%;
right: 6px;
right: 4px;
transform: translateY(-50%);
color: var(--color-text-muted);
line-height: 1;
cursor: pointer;
}
.b07-drawing-button__settings:hover,
.b07-drawing-button__settings:focus-visible {
color: var(--color-primary);
}
.b07-drawing-button:hover,
.b07-drawing-button[data-active="true"] {
border-color: var(--color-border);
background: var(--color-mist-violet);
}
.b07-drawing-button[data-active="true"] {
color: var(--color-primary);
background: var(--color-accent-soft);
color: var(--color-accent);
}
/* 확정: 좌측 띠 + 측점 글자색을 함께 성공색으로 반영 */
@@ -174,13 +146,6 @@
gap: var(--spacing-8);
}
.b07-info__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-8);
}
.b07-info__block {
display: flex;
flex-direction: column;
@@ -193,27 +158,6 @@
color: var(--color-text-muted);
}
.b07-info__row {
display: flex;
justify-content: space-between;
gap: var(--spacing-8);
font-size: 0.76rem;
}
.b07-info__key {
color: var(--color-text-muted);
}
.b07-info__val {
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.b07-info__empty {
font-size: 0.76rem;
color: var(--color-text-muted);
}
/* 횡단 장 배치(153-1 · 280-5 ⚙ 횡단 모달 · 523-1 그룹 상자) — 한 줄에 한 일:
「장 배치」 배치 열 · 행 / 적용 · 「표」 표 배율 · 한 줄 안 같은 너비. */
.b07-cross-layout {
@@ -250,15 +194,6 @@
min-width: 0;
}
/* 확정을 건너뛴 개발 상태 알림 — 눈에 띄되 도면 목록을 밀어내지 않게 한 줄만. */
.b07-drawing-list__bypass {
margin: var(--spacing-4) 0 0;
padding: var(--spacing-4) var(--spacing-8);
border-left: 3px solid var(--color-warning, #d9a441);
color: var(--color-text-muted);
font-size: var(--text-caption);
}
/* 표준도 제원 입력 모양은 B08 로 이관(2026-09-13) — `B08_Quantity_UI_StructureSheet_Spec.ts` 가 스스로 넣음. */
/* 계획평면도 묶음 — 종류별 이름 줄 + 장 단추, 아래 [평면도 관리](PLAN 60 · 67 · 130장) */
@@ -322,17 +257,7 @@
}
/* 「평면도 장」 한 블록(140-2) — 종류마다 한 줄 [≡] 이름 [1][2] · 줄 끌어 놓기 = 종류 순서 */
.b07-plan-manage__row {
padding: 2px var(--spacing-4);
border: 1px solid transparent;
border-radius: var(--radius-buttons);
}
.b07-plan-manage__row[data-active="true"] {
border-color: var(--color-border);
background: var(--color-mist-violet);
}
/* 줄 = 목록 줄 부품(28) · 여기선 끌어 놓을 자리 선만 */
.b07-plan-manage__row[data-drop="before"] {
box-shadow: inset 0 2px 0 var(--color-primary);
}
@@ -341,25 +266,13 @@
box-shadow: inset 0 -2px 0 var(--color-primary);
}
.b07-plan-manage__grip {
color: var(--color-text-muted);
cursor: grab;
.b07-plan-manage__sheet.b07-plan-kind__name {
flex: 1 1 auto;
justify-content: flex-start;
}
.b07-plan-manage__sheet {
min-width: 26px;
padding: 2px var(--spacing-4);
border: 1px solid var(--color-border);
border-left: 3px solid transparent;
border-radius: var(--radius-buttons);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--text-caption);
cursor: pointer;
}
.b07-plan-manage__sheet.b07-plan-kind__name {
text-align: left;
}
.b07-plan-manage__sheet[data-confirmed="true"] {
@@ -367,8 +280,8 @@
}
.b07-plan-manage__sheet[data-active="true"] {
color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-accent);
border-color: var(--color-accent);
}
.b07-plan-tools__block {
@@ -409,15 +322,6 @@
min-width: 0;
}
.b07-plan-tools__button {
padding: var(--spacing-4) var(--spacing-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-buttons);
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
}
/* 목록에서 연 도면 탭 줄 + CAD(82-4) */
.b07-cad-stack {
display: flex;
@@ -469,30 +373,6 @@ html.is-bm-route .b07-cad-stack > .cad-tabs {
white-space: nowrap;
}
.b07-settings__note {
margin: 0;
color: var(--color-text-secondary);
font-size: 13px;
}
.b07-settings__group {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
min-width: 0;
margin: 0;
padding: var(--spacing-8) var(--spacing-12) var(--spacing-12);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.b07-settings__group > legend {
padding: 0 var(--spacing-4);
color: var(--color-text-secondary);
font-size: 12px;
font-weight: 600;
}
.b07-settings__actions {
display: flex;
align-items: center;
@@ -507,9 +387,6 @@ html.is-bm-route .b07-cad-stack > .cad-tabs {
/* 단추 줄 한 규격 — 안내선 단추(좌측 패널 작은 꼴)도 같은 키 · 좁은 폭에 맞춘 옆 여백 */
.b07-settings__actions .ui-btn {
padding: var(--spacing-8) var(--spacing-12);
font-size: var(--text-body-sm);
border-radius: var(--radius-buttons);
white-space: nowrap;
}
@@ -533,10 +410,8 @@ html.is-bm-route .b07-cad-stack > .cad-tabs {
display: none;
}
.b07-scale__error {
margin: 0;
color: var(--color-danger);
font-size: 12px;
.b07-scale__error[hidden] {
display: none;
}
/* 받지 못한 도면(508-3b) — 미리받기 · 열기가 두 번 다 실패 · 누르면 다시 받음 */
@@ -548,3 +423,15 @@ html.is-bm-route .b07-cad-stack > .cad-tabs {
content: " · 다시 받기";
color: var(--color-danger);
}
/* 설정 모달 그룹 상자 = 카드 부품 · 제목은 옛 legend 크기로 작게(모달 h3 규칙이 키우지 않게) */
.b07-settings__group > .ui-card__title {
margin-bottom: var(--spacing-8);
color: var(--color-text-secondary);
font-size: var(--text-caption);
font-weight: 600;
}
.b07-settings__group > .ui-card__body {
gap: var(--spacing-8);
}