feat(B03): 입력 자료 컨테이너 통합·3열 배치 + 업로드 중 화면 잠금

지형 래스터(tif)만 선택 항목이고 나머지는 모두 필수라, 계획노선과 지형 자료를
따로 묶을 이유가 없다.

- 그룹 2개(원청 계획노선/지형 분석자료)를 "입력 자료" 한 그룹으로 통합
- 계획노선 카드에만 걸려 있던 전용 서식(1열 폭·보라 배경·테두리) 제거 —
  다른 카드와 같은 템플릿으로 통일
- 카드 배치 2열 -> 3열 (1280px 이하 2열, 720px 이하 1열)
- 선택 항목(tif)은 확장자 옆에 "선택" 표시
- [파일 업로드]를 누르면 버튼을 잠그고 안에 회전 원을 넣어 진행 중임을 보이며,
  업로드·분석이 끝날 때까지 화면 조작을 막는다(중복 업로드·단계 이동 방지)

파일 분리: 업로드 실행부(청크 업로드/분석 대기/결과 표시/교체 확인 모달)를
B03_FileInput_UI_Upload.ts로 이관해 페이지 파일을 700줄 제한 안으로 되돌림(830 -> 622).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-08 14:14:46 +09:00
co-authored by Claude Fable 5
parent 6c1a8023ca
commit 2ff37a6e41
4 changed files with 296 additions and 190 deletions
+23 -6
View File
@@ -195,17 +195,28 @@
.b03-file__group-content {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2행 2열 구조 */
grid-template-columns: repeat(3, 1fr); /* 3열 구조 */
gap: var(--spacing-24);
}
.b03-file__group--route .b03-file__group-content {
grid-template-columns: 1fr;
/* 업로드 중에는 화면 조작을 막는다 — 중복 업로드·단계 이동 방지(2026-08-08 사용자 지시). */
.b03-file--busy {
pointer-events: none;
}
.b03-file__group--route .b03-file__card {
border-color: var(--color-royal-amethyst, #3e0079);
background: var(--color-mist-violet, #edecff);
.b03-file--busy .b03-file__card-select,
.b03-file--busy .b03-file__card-remove,
.b03-file--busy .b03-file__dropzone {
opacity: 0.5;
}
/* 업로드 버튼 안에서 도는 원 — 공용 스피너를 버튼 글자 크기에 맞춰 줄인다. */
.b03-file__upload-spinner {
width: 14px;
height: 14px;
border-width: 2px;
border-color: rgb(255 255 255 / 40%);
border-top-color: var(--color-primary-text);
}
/* Wiza 8px radius 카드 */
@@ -448,6 +459,12 @@
border-bottom: 0;
}
@media (max-width: 1280px) {
.b03-file__group-content {
grid-template-columns: repeat(2, 1fr); /* 좁은 창에서는 2열 */
}
}
@media (max-width: 720px) {
.b03-file {
padding: var(--spacing-16) var(--spacing-12);