eomsangdonandClaude Opus 5.5
c4c541838e
- 탭 셋 일위대가표 · 단가산출표 · 단가산출 상세 = 서버 역할 id(이름으로 안 찾음 · STmate 단가산출근거 뛰기 풀림) · 두 형식 같은 탭 글 · 원본 시트 이름은 막대 - 새 logic/M02_MasterTemplete_Hopyo_SheetMap.ts(순수 — 줄 칠 · 블록 칠 · 머리 행 = 가장 나쁜 칠 · 뛸 곳) · 「이어짐」 = 확인 창 체크 규칙(캐시가 이김) - 새 M02_MasterTemplete_Hopyo_SheetNav.ts — 범례 createLegend · 맥락 단추(상세 · 목록 · 하위 호표 · 부르는 줄 차례로) · 뒤로 · 두 번 누름 = 첫 단추 · 다시 칠(목록 다시 읽음 · 캐시 고침 · 만들기) · 칠은 A 열 ~ 끝 열 · 띠는 A 열 - Hopyo_Sheet.ts = 잇는 줄만(580 → 609) · 줄 행 누름 = 그 줄 그대로 · 머리 행 = 호표 영역 - 779-6 — 같은 파일 창은 새 모달 대신 그 창을 앞으로 꺼내 그 자리로 · 닫기 = 제자리로 내림 · 마지막 격자 다시 씀(확인 · 고르기 창 [엑셀 보기] 모두 openSheet 한 곳으로 지나감) - Hopyo_Check.ts saveDraft = 다시 칠 알림 한 줄(663 → 662) · Hopyo_Api.ts at 내보냄(676 그대로) - 서버 Match.view — 목록 「후보」 중 이름 후보 안 찾은 줄만 다시 셈(뒤 셈 끝 뒤) → 확인 창 「없음」과 같음(빨강) · 북부청 임도 목록 응답 2.81 → 3.49 초(다시 셈 48 줄 · 없음 11) - 시험: 새 test_779_4_sheet_map(꼴 표 · 블록 칠 · 실물 EST · STmate 칠 행 수 · 뛸 곳) · test_m02_hopyo_screen 779 지킴 더함 - 낡은 시험 고침: test_779_2 기대 「후보 ≠ 없음 허용」 → 「모두 같음」(까닭 = 이번 덧 셈) · 도우미 helper_m02_hopyo_check · helper_729_3_hopyo_left 에 document 대역(까닭 = saveDraft 알림이 document 를 씀) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
378 lines
8.7 KiB
CSS
378 lines
8.7 KiB
CSS
/* M02 일위대가 실무자료(PLAN 324-4) — 좌측 판 · 본 화면(호표 표 · 줄 맞춤) · 색은 공용 토큰(밝음 · 어두움 같이) */
|
|
.m02-hopyo-side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.m02-hopyo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
min-width: 0;
|
|
}
|
|
|
|
.m02-hopyo__bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
/* 겉 = 보조 글 부품(ui-text--warning) · 여기는 줄바꿈 살림만 */
|
|
.m02-hopyo__warn {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.m02-hopyo__search {
|
|
max-width: 320px;
|
|
}
|
|
|
|
.m02-hopyo__row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.m02-hopyo__row:hover {
|
|
background: var(--color-accent-soft);
|
|
}
|
|
|
|
.m02-hopyo__num {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 실무자료 표 — 한글은 낱말 단위로만 줄바꿈(두세 글자마다 안 갈라짐) · 너무 긴 낱말만 쪼갬 */
|
|
.m02-hopyo__table :is(th, td) {
|
|
word-break: keep-all;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* 확인 창 줄 표(338 · 339 · 359-3) — 일위대가 상세 꼴(m02-labrow) · 체크 칸 · 수량 · 단위 = 줄바꿈 없음 ·
|
|
단추 = 세로로 쌓아 좁게 · 이름 · 별칭 · 품 비교가 남는 폭 · 칸 여백 좁힘(공용 표보다 앞서게 두 갈래 이름) */
|
|
.m02-hopyo__table.m02-hopyo__lines :is(th, td) {
|
|
padding: var(--spacing-8);
|
|
}
|
|
|
|
.m02-hopyo__table.m02-hopyo__lines td:first-child,
|
|
.m02-hopyo__lines :is(.m02-labrow__qty, .m02-labrow__unit) {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 이름 칸 대상 줄 — 키 · 이름 · 배 칸 · 몫 한 줄(상세 이름 칸의 한 줄 말줄임을 풂) */
|
|
.m02-hopyo__lines .m02-labrow__name > .m02-hopyo__part {
|
|
display: flex;
|
|
max-width: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.m02-hopyo__lines .m02-labrow__name > .m02-hopyo__state,
|
|
.m02-hopyo__lines .m02-labrow__kind > .m02-hopyo__state {
|
|
display: inline-block;
|
|
margin-left: var(--spacing-4);
|
|
}
|
|
|
|
/* 품 비교 — 항목마다 한 줄(글의 줄바꿈 그대로) */
|
|
.m02-hopyo__table.m02-hopyo__lines td.m02-hopyo__compare {
|
|
min-width: 9em;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.m02-hopyo__subhead {
|
|
margin: var(--spacing-8) 0 0;
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.m02-hopyo-ledger__table td:nth-child(1) {
|
|
min-width: 7em;
|
|
}
|
|
|
|
.m02-hopyo-ledger__table td:nth-child(2) {
|
|
min-width: 6em;
|
|
}
|
|
|
|
/* 단추 칸 — 단추 · 넣음/뺌을 세로로 쌓아 칸 폭 = 가장 긴 단추 */
|
|
.m02-hopyo__table.m02-hopyo__lines td.m02-hopyo__acts {
|
|
width: 1%;
|
|
}
|
|
|
|
.m02-hopyo__lines .m02-hopyo__acts > * {
|
|
display: flex;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.m02-hopyo__lines .m02-hopyo__acts > * + * {
|
|
margin: var(--spacing-4) 0 0;
|
|
}
|
|
|
|
.m02-hopyo__line.is-out {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.m02-hopyo__state {
|
|
display: inline-block;
|
|
padding: 0 var(--spacing-4);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-caption);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 상태 색(338) — 맞음 초록 · 별칭 파랑 · 다른 점 주황 · 후보 회색(테두리 기본) · 없음 빨강 */
|
|
.m02-hopyo__state.is-맞음,
|
|
.m02-hopyo__state.is-호표 {
|
|
border-color: var(--color-success);
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.m02-hopyo__state.is-별칭 {
|
|
border-color: var(--color-info);
|
|
color: var(--color-info);
|
|
}
|
|
|
|
.m02-hopyo__state.is-다른점 {
|
|
border-color: var(--color-warning);
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.m02-hopyo__state.is-후보,
|
|
.m02-hopyo__state.is-뺌,
|
|
.m02-hopyo__state.is-노임 {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.m02-hopyo__state.is-없음 {
|
|
border-color: var(--color-danger);
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
/* 우리 로직 칸 — 대상 여럿 = 칸 안 여러 줄(이름 · 키 · 몫 · 배 칸 · [옵션]) */
|
|
.m02-hopyo__parts {
|
|
min-width: 11em;
|
|
}
|
|
|
|
.m02-hopyo__part {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.m02-hopyo__part + .m02-hopyo__part {
|
|
margin-top: var(--spacing-4);
|
|
}
|
|
|
|
.m02-hopyo__whole {
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.m02-hopyo__times {
|
|
width: 6em;
|
|
}
|
|
|
|
.m02-hopyo__acts {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.m02-hopyo__acts > button + button {
|
|
margin-left: var(--spacing-4);
|
|
}
|
|
|
|
.m02-hopyo__block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.m02-hopyo__block h4 {
|
|
margin: 0;
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.m02-hopyo__built {
|
|
padding: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-surface-raised);
|
|
}
|
|
|
|
/* 고르기 창 머리 — 제목이 두 줄이어도 [닫기] 글이 안 갈라지고 안 줄어듦 */
|
|
.m02-hopyo__choose .ui-modal__top > .ui-btn {
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.m02-hopyo__cands {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-4);
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
|
|
.m02-hopyo__cand {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
/* 고르기 창 후보 묶음(358-1) — 뜻 낱말 안 겹치는 「후보」 = 회색 · 숫자만 닮음 = 접힘 */
|
|
.m02-hopyo__cand.is-weak {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.m02-hopyo__group > summary {
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
|
|
/* 별칭 장부(338) — 위 층 줄 = 회색 읽기만 · 고친 줄 = 왼쪽 띠 */
|
|
.m02-hopyo-ledger__row.is-upper {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.m02-hopyo-ledger__row.is-edited > td:first-child {
|
|
box-shadow: inset 3px 0 0 var(--color-accent);
|
|
}
|
|
|
|
/* 엑셀 보기 창(329) — 왼쪽 읽기 전용 시트 · 오른쪽 호표 목록 · 불러오기 결과 */
|
|
.m02-hopyo-sheet__dialog > .ui-modal__body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.m02-hopyo-sheet {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 22rem;
|
|
gap: var(--spacing-8);
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 좁은 폭(730-2) — 오른쪽 목록 22rem 이 시트 칸을 폭 0 으로 짓누름 → 위(시트) · 아래(목록) 쌓기 */
|
|
@media (max-width: 900px) {
|
|
.m02-hopyo-sheet {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
|
|
}
|
|
}
|
|
|
|
/* 세 보기 막대 · 범례(779-4) — 시트 위 한 줄씩 · 넘치면 감김 */
|
|
.m02-hopyo-sheet__nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.m02-hopyo-sheet__grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.m02-hopyo-sheet__side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
min-height: 0;
|
|
}
|
|
|
|
.m02-hopyo-sheet__list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.m02-hopyo-sheet__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
border-left: 3px solid transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.m02-hopyo-sheet__item:hover {
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.m02-hopyo-sheet__item.is-current {
|
|
border-left-color: var(--color-accent);
|
|
background: var(--color-accent-soft);
|
|
}
|
|
|
|
.m02-hopyo-sheet__no {
|
|
min-width: 4.5em; /* [수정] 단추가 줄마다 같은 자리 */
|
|
white-space: nowrap;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.m02-hopyo-sheet__name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 목록 숫자 — 다 연결(359-2)이면 녹색 · [수정] 은 번호 바로 오른쪽 · 줄 높이 안 커짐 */
|
|
.m02-hopyo-sheet__item .ui-text.is-linked {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.m02-hopyo-sheet__item > .ui-btn {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.m02-hopyo-sheet__result {
|
|
max-height: 40%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.m02-hopyo-sheet__result:empty {
|
|
display: none;
|
|
}
|
|
|
|
/* 고르기 창 근거(330) — 후보 꼬리표 · 엑셀 근거 줄 */
|
|
.m02-hopyo__basis {
|
|
margin-left: var(--spacing-8);
|
|
padding: 0 var(--spacing-4);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.m02-hopyo__basis.is-ok {
|
|
border-color: var(--color-success);
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.m02-hopyo__source {
|
|
padding-bottom: var(--spacing-8);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* 머리 글 ↔ [파일 업로드] — 구조물 조합 머리 ↔ 층 단추와 같은 12 px */
|
|
.m02-hopyo-side > .m02-side__row {
|
|
margin-top: var(--spacing-12);
|
|
}
|
|
|
|
/* 고름 대기 후보 줄 비교(746-2) — 고르기 칸 아래 · 후보 단추 줄 + 표 */
|
|
.m02-hopyo__cmp {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
margin-top: var(--spacing-4);
|
|
}
|