feat(B03): 고르는 자리 한 줄 · 완료 안내는 좌측 패널 · 결과 목록 제거
사용자 지시 3건(2026-09-03). - 재접속 현황 배너(「…모두 완료된 프로젝트입니다」)를 좌측 안내 패널 「고르는 방법」 안으로 옮김 — 고르기 전에 읽을 것과 같은 자리. - [입력 파일 선택]·[임시 보관함에서 불러오기]·[파일 업로드]를 한 줄(`b03-file__pick-row`)로 묶음. 좁아지면 접히되 선택 영역이 남는 폭을 먹음. - 업로드 완료 항목 목록 삭제 — 같은 내용을 카드가 완료 상태로 이미 보여 줌. 쓰이지 않게 된 `renderUploadResults`와 `.b03-file__results` 규칙도 제거. 곁들여 고친 것 — 카드 격자를 2열 고정에서 `auto-fill minmax(260px, 1fr)` 로 바꿈. 안내 패널을 연 상태에서 카드 폭이 210px 로 눌려 제목이 글자 단위로 접혔음(실측). 제목은 한 줄 말줄임으로 둠. 검증: 한 줄 배치 실측 — 선택 397px · 보관함 331px · 업로드 102px, 높이 76px 로 정렬. 카드 66px(빈 칸)/117px(파일 있음), 제목 줄 높이 21px(한 줄). typecheck·prettier 통과. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -45,6 +45,25 @@
|
||||
}
|
||||
|
||||
/* Wiza 스타일 가이드의 Lavender Glow 그라데이션 및 soft purple border hover */
|
||||
/* 고르는 자리 한 줄 — [입력 파일 선택] · [임시 보관함] · [파일 업로드](2026-09-03).
|
||||
좁아지면 아래로 접히되, 선택 영역이 남는 폭을 먹는다. */
|
||||
.b03-file__pick-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-8);
|
||||
}
|
||||
|
||||
.b03-file__pick-row .b03-file__dropzone {
|
||||
flex: 1 1 320px;
|
||||
}
|
||||
|
||||
.b03-file__pick-row .b03-file__temp-picker,
|
||||
.b03-file__pick-row .ui-btn {
|
||||
flex: 0 0 auto;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
/* 한 줄 바(2026-09-03) — 종전 160px 블록은 안내 문구를 담느라 컸다. 문구는 좌측
|
||||
패널로 갔으므로 여기는 「끌어 놓거나 눌러서 고르는 자리」 표시만 한다. */
|
||||
.b03-file__dropzone {
|
||||
@@ -266,9 +285,11 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 카드가 좁아지면 한 줄에 제목·상태·[선택]이 못 들어가 제목이 글자 단위로 접힌다
|
||||
(2026-09-03 실측: 안내 패널을 연 상태에서 카드 폭 210px). 폭이 모자라면 열을 줄인다. */
|
||||
.b03-file__group-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: var(--spacing-12);
|
||||
}
|
||||
|
||||
@@ -371,11 +392,10 @@
|
||||
color: var(--color-deep-iris, #26114a);
|
||||
font-size: var(--text-body-sm, 14px);
|
||||
font-weight: var(--font-weight-medium, 500);
|
||||
/* 한글은 글자 단위로 끊기므로 어절을 지켜 준다 — "계획
|
||||
노선
|
||||
도형" 방지. */
|
||||
word-break: keep-all;
|
||||
overflow-wrap: break-word;
|
||||
/* 제목은 한 줄로 두고 모자라면 말줄임 — 접히면 카드가 세로로 길어진다(2026-09-03). */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.b03-file__card-ext,
|
||||
@@ -525,65 +545,3 @@
|
||||
.b03-file__card--error .b03-file__progress-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.b03-file__results {
|
||||
margin: var(--spacing-8) 0 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border: 1px solid var(--color-mist, #e6e2e3);
|
||||
border-radius: var(--radius-cards, 8px);
|
||||
overflow: hidden;
|
||||
background: var(--color-canvas, #ffffff);
|
||||
}
|
||||
|
||||
.b03-file__results:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.b03-file__results li {
|
||||
padding: var(--spacing-12) var(--spacing-16);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
border-bottom: 1px solid var(--color-mist, #e6e2e3);
|
||||
color: var(--color-deep-iris, #26114a);
|
||||
font-size: var(--text-body-sm, 14px);
|
||||
}
|
||||
|
||||
.b03-file__results li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
/* 좁아지면 두 컨테이너를 위아래로 쌓는다 — 카드가 눌려 글자가 접히는 것을 막는다. */
|
||||
.b03-file__columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.b03-file {
|
||||
padding: var(--spacing-16) var(--spacing-12);
|
||||
}
|
||||
|
||||
.b03-file__group-content {
|
||||
grid-template-columns: 1fr; /* 모바일에서는 1행 1열 구조 */
|
||||
}
|
||||
}
|
||||
|
||||
/* LAS 없는 설계(도엽등고선 기반) 토글 — 2026-08-30 */
|
||||
.b03-file__lasfree {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 2px;
|
||||
font-size: var(--text-body);
|
||||
color: var(--color-text-body);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.b03-file__card--disabled {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user