diff --git a/B03_FileInput/B03_FileInput_UI_Guide.ts b/B03_FileInput/B03_FileInput_UI_Guide.ts new file mode 100644 index 00000000..f0e40830 --- /dev/null +++ b/B03_FileInput/B03_FileInput_UI_Guide.ts @@ -0,0 +1,77 @@ +/* ============================================================================= + * B03_FileInput_UI_Guide.ts + * 파일 입력 좌측 안내 패널 (2026-09-03 사용자 지시). + * + * 종전에는 고르는 방법·필요한 파일 목록이 **선택 영역과 카드 안에** 길게 들어가 있어 + * 카드 한 장이 220px씩 차지했다. 안내는 한 번 읽으면 되는 것이라 다른 단계(B04·B05)와 + * 같은 자리 — 공용 오버레이의 좌측 패널(`createWorkflowOverlays.optionsContent`) — 로 + * 옮기고, 본문은 고르는 자리만 남긴다. + * + * 패널 양식은 **B04~B07과 같은 공용 양식**을 그대로 쓴다(2026-09-03 사용자 지시): + * 패널 루트 `{page}__form`, 문단은 `ui-collapsible ui-sidebar-section` + 제목에 + * `ui-collapsible__title`. 제목 행을 누르면 접히는 동작·캐럿·외곽선이 전부 공용 것이다. + * ========================================================================== */ + +import { attachCollapsible } from "@ui/ui_template_collapsible"; +import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale"; + +function L(key: keyof typeof ui_locales): string { + return ui_locales[key][currentLanguageIndex]; +} + +/** 안내 문단 하나 — 공용 접기 컨테이너(B06 `buildGroup`과 같은 조립). */ +function section( + titleKey: keyof typeof ui_locales, + itemKeys: (keyof typeof ui_locales)[], +): HTMLElement { + const group = document.createElement("section"); + group.className = "b03-file__guide-group ui-collapsible ui-sidebar-section"; + + const title = document.createElement("h3"); + title.className = "b03-file__guide-legend ui-collapsible__title"; + title.textContent = L(titleKey); + + const list = document.createElement("ul"); + list.className = "b03-file__guide-list"; + for (const key of itemKeys) { + const item = document.createElement("li"); + item.textContent = L(key); + list.append(item); + } + + group.append(title, list); + return group; +} + +/** + * 좌측 패널 본문 — 필요한 파일 · 고르는 방법 · 알아 둘 것. + * + * `statusNote`(재접속 현황 배너)는 「고르는 방법」 끝에 붙는다 — 프로젝트가 이미 완료라 + * 다시 올리면 교체된다는 안내라서, 고르기 전에 읽을 것들과 같은 자리에 둔다 + * (2026-09-03 사용자 지시). + */ +export function createInputGuide(statusNote?: HTMLElement): HTMLElement { + const guide = document.createElement("div"); + guide.className = "b03-file__form"; + const howTo = section("B03_Guide_How_Title", [ + "B03_Guide_How_Drop", + "B03_Guide_How_Card", + "B03_Guide_How_Temp", + ]); + if (statusNote) howTo.append(statusNote); + guide.append( + section("B03_Guide_Files_Title", [ + "B03_Guide_Files_Route", + "B03_Guide_Files_Terrain", + "B03_Guide_Files_Optional", + ]), + howTo, + section("B03_Guide_Notes_Title", [ + "B03_Guide_Notes_Replace", + "B03_Guide_Notes_Crs", + "B03_Guide_Notes_LasFree", + ]), + ); + attachCollapsible(guide); + return guide; +} diff --git a/B03_FileInput/B03_FileInput_UI_Page.ts b/B03_FileInput/B03_FileInput_UI_Page.ts index d00be854..4a74dc82 100644 --- a/B03_FileInput/B03_FileInput_UI_Page.ts +++ b/B03_FileInput/B03_FileInput_UI_Page.ts @@ -10,12 +10,13 @@ import { createButton, createTag, showToast } from "@ui/ui_template_elements"; import { createGeneralLayout } from "@ui/ui_template_general_layout"; import { createWorkflowOverlays } from "@ui/ui_template_overlay"; import { createStepBar, WORKFLOW_STEP_ICONS } from "@ui/ui_template_workflow_layout"; -import { fetchUploadOverview, type UploadedFileResult } from "./B03_FileInput_Api_Fetch"; +import { fetchUploadOverview } from "./B03_FileInput_Api_Fetch"; import { clearPreloadMark } from "../A00_Common/b_asset_cache"; import { navigateTo } from "../A00_Common/router"; import { attachTempBatch } from "../B01_Dashboard/B01_Dashboard_Api_Temp"; import { clearRouteLatestCache } from "../B05_Profile/B05_Profile_Api_Fetch"; import { invalidateSectionDetail } from "../B06_Section/B06_Section_Section_Store"; +import { createInputGuide } from "./B03_FileInput_UI_Guide"; import { createTempPicker } from "./B03_FileInput_UI_TempPicker"; import { workflowSteps } from "../A00_Common/b_page_scaffold"; import { @@ -28,7 +29,6 @@ import { confirmReplaceUpload, isInitialPipelineRunning, pollInitialPipeline, - renderUploadResults, uploadOneFile, } from "./B03_FileInput_UI_Upload"; import { @@ -62,8 +62,6 @@ export async function renderB03FileInput(root: HTMLElement): Promise { // 대시보드 임시 보관함에서 가져올 자료 선택기 — 선택되면 [업로드]가 이동을 수행한다. const tempPicker = createTempPicker(() => updateUploadButton()); const cardMap = new Map(); - const resultList = document.createElement("ul"); - resultList.className = "b03-file__results"; let uploadButton: HTMLButtonElement; let resumeBanner: HTMLDivElement; let activeProjectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY) ?? ""; @@ -97,9 +95,8 @@ export async function renderB03FileInput(root: HTMLElement): Promise { dropzone.tabIndex = 0; const dropzoneLabel = document.createElement("strong"); dropzoneLabel.textContent = L("B03_File_Select_Label"); - const dropzoneHint = document.createElement("span"); - dropzoneHint.textContent = L("B03_File_Select_Hint"); - dropzone.append(dropzoneLabel, dropzoneHint, fileInput); + // 설명은 좌측 안내 패널 몫이다(2026-09-03 사용자 지시) — 여기는 자리 이름만 남긴다. + dropzone.append(dropzoneLabel, fileInput); const pageError = document.createElement("p"); pageError.className = "b03-file__error"; @@ -184,7 +181,10 @@ export async function renderB03FileInput(root: HTMLElement): Promise { } const validation = validateSlots(); uploadButton.disabled = validation !== null; - pageError.textContent = validation ?? ""; + // 「업로드할 파일을 선택하세요」는 버튼이 잠긴 것으로 이미 드러난다 — 고르기도 전에 + // 붉은 경고를 띄우지 않는다(2026-09-03 사용자 지시). 나머지 사유는 그대로 알린다. + pageError.textContent = + validation === null || validation === L("B03_File_Error_Required") ? "" : validation; } /** 확장자 줄 — 지금 필수인지에 따라 "· 선택" 꼬리표가 붙고 떨어진다. */ @@ -302,28 +302,31 @@ export async function renderB03FileInput(root: HTMLElement): Promise { function onFileSelected(selection: readonly File[], targetSlot?: FileSlot): void { if (selection.length === 0) return; - // LAS 없이 설계를 켜면 포인트클라우드는 아예 받지 않는다 (2026-08-30 사용자 지시) — - // 카드를 회색으로 덮어도 파일 선택 영역·드롭으로 들어올 수 있어 여기서 걸러 낸다. - const pointCloudExtensions = slots.get("las_laz")?.extensions ?? []; - const files = lasFreeDesign - ? selection.filter((file) => !pointCloudExtensions.includes(getExtension(file.name))) - : selection; - const blocked = files.length !== selection.length; - if (blocked && files.length === 0) { - pageError.textContent = L("B03_File_Error_LasFreeBlocked"); - return; - } // 개수는 "고른 파일 수"가 아니라 **최종적으로 차는 슬롯 수**로 센다. // 같은 슬롯을 다시 고르는 것은 교체라 개수가 늘지 않는다 — 더하기로 세면 5개를 고른 // 뒤 파일 선택 영역으로 하나만 바꾸려 해도 초과로 막힌다(2026-08-08). // 파일 하나에 카드 하나다. `.prj`만 확장자로 안 갈리므로 노선 도형과 basename이 // 같은지로 노선/지형 좌표계 카드를 정한다(2026-08-31 사용자 지시). const routeFile = slots.get("csv")?.file?.name; - const assignments = planSlotAssignments( - files, + const planned = planSlotAssignments( + selection, slotConfigs(), routeFile ? routeFile.replace(/\.[^.]*$/, "") : undefined, ); + // LAS 없이 설계를 켜면 **지형 자료를 통째로** 받지 않는다(2026-09-03 사용자 지시 — + // 종전에는 포인트클라우드만 걸렀다). 확장자가 아니라 **배정된 카드**로 거른다: `.prj`는 + // 노선·지형이 같은 확장자라 확장자로 거르면 노선 좌표계까지 함께 떨어진다. + const assignments = lasFreeDesign + ? planned.filter((item) => { + const slot = targetSlot ?? item.slot; + return slot === undefined || !TERRAIN_SLOTS.includes(slot); + }) + : planned; + const blocked = assignments.length !== planned.length; + if (assignments.length === 0) { + pageError.textContent = blocked ? L("B03_File_Error_LasFreeBlocked") : ""; + return; + } const occupied = new Set(selectedStates().map((state) => state.slot)); for (const item of assignments) { const slot = targetSlot ?? item.slot; @@ -379,7 +382,8 @@ export async function renderB03FileInput(root: HTMLElement): Promise { */ function isSlotRequired(state: FileSlotState): boolean { if (SHAPEFILE_DEPENDENT_SLOTS.includes(state.slot)) return routeIsShapefile(); - if (state.slot === "las_laz") return !lasFreeDesign; + // LAS 없이 설계면 지형 자료(포인트클라우드·좌표계·래스터)는 통째로 받지 않는다. + if (TERRAIN_SLOTS.includes(state.slot)) return lasFreeDesign ? false : state.isRequired; return state.isRequired; } @@ -430,10 +434,14 @@ export async function renderB03FileInput(root: HTMLElement): Promise { ? inRouteSet ? "route_prj" : "prj" - : Array.from(slots.values()).find( - (candidate) => - candidate.slot !== "route_prj" && candidate.extensions.includes(extension), - )?.slot; + : // 옛 프로젝트의 노선은 `.csv`로 올라가 있다 — 이제 받지는 않지만(2026-09-03) + // 이미 올라간 것은 계획노선 도형 카드에 그대로 보여야 한다. + extension === ".csv" + ? "csv" + : Array.from(slots.values()).find( + (candidate) => + candidate.slot !== "route_prj" && candidate.extensions.includes(extension), + )?.slot; const state = slot ? slots.get(slot) : undefined; if (state) { state.serverUploaded = { @@ -652,22 +660,20 @@ export async function renderB03FileInput(root: HTMLElement): Promise { pageError.textContent = ""; setUploading(true); - const uploaded: UploadedFileResult[] = []; try { for (let index = 0; index < targetStates.length; index += 1) { const state = targetStates[index]; - uploaded.push( - ...(await uploadOneFile( - activeProjectId, - state, - index === targetStates.length - 1, - () => renderSlot(state.slot), - lasFreeDesign, - )), + await uploadOneFile( + activeProjectId, + state, + index === targetStates.length - 1, + () => renderSlot(state.slot), + lasFreeDesign, ); } clearDerivedCaches(activeProjectId); - renderUploadResults(resultList, uploaded); + // 업로드 결과는 카드가 이미 완료 상태로 보여 준다 — 같은 내용을 목록으로 또 쌓지 + // 않는다(2026-09-03 사용자 지시). showToast(L("B03_File_Upload_Success"), "success"); showToast(L("B03_File_Analysis_InProgress"), "info"); @@ -736,28 +742,25 @@ export async function renderB03FileInput(root: HTMLElement): Promise { disabled: true, }); + // 고르는 자리 한 줄 — [입력 파일 선택] · [임시 보관함에서 불러오기] · [파일 업로드] + // (2026-09-03 사용자 지시). 셋이 한 동작의 앞뒤라 흩어 놓을 이유가 없다. + const pickRow = document.createElement("div"); + pickRow.className = "b03-file__pick-row"; + pickRow.append(dropzone, tempPicker.root, uploadButton); + const uploadControlPanel = document.createElement("div"); uploadControlPanel.className = "b03-file__control-panel"; - uploadControlPanel.append( - subtitle, - overviewBanner, - dropzone, - // 대시보드 임시 보관함에서 자료를 끌어오는 자리 — 업로드 컨테이너 안에 둔다. - tempPicker.root, - resumeBanner, - pageError, - uploadButton, - resultList, - ); + uploadControlPanel.append(subtitle, pickRow, resumeBanner, pageError); // 자료의 출처가 둘로 갈린다 — 원청이 준 계획노선, 측량이 준 지형(LAS·래스터). // 좌표계 파일(.prj)도 각각 하나씩 오므로 컨테이너를 나눠야 어느 칸에 무엇을 넣는지 // 화면만 보고 안다(2026-08-31 사용자 지시). + // 안내 문구 없음 — CSV 관련 설명이 붙어 있었으나 CSV는 사용자가 넣는 자료가 아니다 + // (2026-09-03 사용자 지시: 내부 계산 파일). const routeGroup = createCardGroup( L("B03_File_Group_Route"), ROUTE_SLOTS, "b03-file__group--route", - L("B03_File_Group_Route_Hint"), ); const terrainGroup = createCardGroup( L("B03_File_Group_Terrain"), @@ -777,18 +780,22 @@ export async function renderB03FileInput(root: HTMLElement): Promise { lasFreeRow.append(lasFreeCheck, lasFreeText); function applyLasFreeState(): void { lasFreeCheck.checked = lasFreeDesign; - const card = cardMap.get("las_laz"); - card?.classList.toggle("b03-file__card--disabled", lasFreeDesign); - // 카드를 회색으로 덮는 것만으로는 선택이 막히지 않는다 — 버튼·input을 실제로 잠근다. - card - ?.querySelectorAll( - ".b03-file__card-select, .b03-file__slot-input", - ) - .forEach((element) => { - element.disabled = lasFreeDesign; - }); - // 켜기 전에 이미 골라 둔 LAS는 내린다 — 켠 채로 남아 올라가는 사고를 막는다. - if (lasFreeDesign && slots.get("las_laz")?.file) removeFile("las_laz"); + terrainGroup.classList.toggle("b03-file__group--disabled", lasFreeDesign); + for (const slot of TERRAIN_SLOTS) { + const card = cardMap.get(slot); + card?.classList.toggle("b03-file__card--disabled", lasFreeDesign); + // 카드를 회색으로 덮는 것만으로는 선택이 막히지 않는다 — 버튼·input을 실제로 잠근다. + card + ?.querySelectorAll( + ".b03-file__card-select, .b03-file__card-remove, .b03-file__slot-input", + ) + .forEach((element) => { + element.disabled = lasFreeDesign; + }); + // 켜기 전에 골라 둔 로컬 파일은 내린다 — 켠 채로 남아 올라가는 사고를 막는다. + // 이미 서버에 올라간 자료(재입력)는 그대로 두고 조작만 잠근다(2026-09-03 사용자 지시). + if (lasFreeDesign && slots.get(slot)?.file) removeFile(slot); + } } lasFreeCheck.addEventListener("change", () => { lasFreeDesign = lasFreeCheck.checked; @@ -803,8 +810,9 @@ export async function renderB03FileInput(root: HTMLElement): Promise { updateUploadButton(); }); - // LAS 토글은 지형 컨테이너의 것이다 — 켜면 그 안의 포인트클라우드 카드만 잠긴다. - terrainGroup.append(lasFreeRow); + // LAS 토글은 **파일 입력 컨테이너**의 것이다(2026-09-03 사용자 지시) — 무엇을 받을지 + // 정하는 스위치라 고르는 자리 옆에 선다. 켜면 지형 컨테이너가 통째로 잠긴다. + uploadControlPanel.insertBefore(lasFreeRow, resumeBanner); const routePanel = document.createElement("div"); routePanel.className = "b03-file__control-panel b03-file__cards-container-panel"; @@ -842,10 +850,15 @@ export async function renderB03FileInput(root: HTMLElement): Promise { content: [uploadControlPanel, cardsContainer], }); layout.content.classList.add("b03-file__main-layout"); + // 고르는 방법·필요한 파일 안내는 좌측 패널로 뺐다 — 본문은 고르는 자리만 남긴다 + // (2026-09-03 사용자 지시). 자리·여닫기는 B04·B05 좌측 패널과 같은 공용 오버레이다. const overlays = createWorkflowOverlays({ title: L("B03_File_Title"), progressContent, - showTitlePanel: false, + optionsContent: createInputGuide(overviewBanner), + // 공용 워크플로 레이아웃(B04·B05)이 하는 일을 여기서도 한다 — 패널이 열리면 본문을 + // 그만큼 밀어내지 않으면 안내가 카드 위를 덮는다. + onOptionsOpenChange: (isOpen) => layout.root.classList.toggle("is-options-open", isOpen), }); layout.root.append(overlays.root); pageRoot = layout.root; diff --git a/B03_FileInput/B03_FileInput_UI_Style.css b/B03_FileInput/B03_FileInput_UI_Style.css index c0f8768f..ac1f2dcc 100644 --- a/B03_FileInput/B03_FileInput_UI_Style.css +++ b/B03_FileInput/B03_FileInput_UI_Style.css @@ -19,9 +19,11 @@ .b03-file__control-panel { display: flex; flex-direction: column; - gap: var(--spacing-20); + gap: var(--spacing-16); background: var(--color-canvas, #ffffff); - padding: var(--spacing-32); + /* 여백 32 → 16 (2026-09-03) — 고르는 자리만 남기고 안내를 좌측 패널로 뺐다. + `--spacing-20`은 테마에 없는 토큰이라 선언째 무효가 된다(패딩이 통째로 사라짐). */ + padding: var(--spacing-16); border-radius: var(--radius-large, 24px); /* Wiza 24px 대형 둥글기 */ border: 1px solid var(--color-mist, #e6e2e3); box-shadow: var(--shadow-lg); @@ -43,15 +45,40 @@ } /* Wiza 스타일 가이드의 Lavender Glow 그라데이션 및 soft purple border hover */ +/* 고르는 자리 한 줄 — [입력 파일 선택] · [임시 보관함] · [파일 업로드](2026-09-03). + 좁아지면 아래로 접히되, 선택 영역이 남는 폭을 먹는다. */ +/* 셋을 같은 폭·같은 높이로 나눈다 — 열 1:1:1(2026-09-03 사용자 지시). + flex 로는 버튼·드롭존의 내용 폭이 배분에 섞여 288·254·288 로 어긋났다. 격자는 + 칸을 먼저 나누므로 내용과 무관하게 정확히 1:1:1 이 된다. 좁아지면 칸이 접힌다. */ +.b03-file__pick-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + align-items: stretch; + gap: var(--spacing-8); +} + +.b03-file__pick-row > * { + min-width: 0; +} + +/* 칸을 꽉 채워야 세 칸의 높이가 같아진다 — 버튼은 기본이 내용 크기다. */ +.b03-file__pick-row .b03-file__temp-picker > .ui-btn, +.b03-file__pick-row > .ui-btn { + width: 100%; + height: 100%; +} + +/* 한 줄 바(2026-09-03) — 종전 160px 블록은 안내 문구를 담느라 컸다. 문구는 좌측 + 패널로 갔으므로 여기는 「끌어 놓거나 눌러서 고르는 자리」 표시만 한다. */ .b03-file__dropzone { - min-height: 160px; - padding: var(--spacing-32) var(--spacing-24); - border: 2px dashed var(--color-mist, #e6e2e3); - border-radius: var(--radius-large, 24px); + padding: var(--spacing-12) var(--spacing-16); + border: 1px dashed var(--color-mist, #e6e2e3); + border-radius: var(--radius-cards, 8px); background: var(--color-paper, #f6f7fa); display: flex; - flex-direction: column; - align-items: center; + flex-direction: row; + flex-wrap: wrap; + align-items: baseline; justify-content: center; gap: var(--spacing-8); cursor: pointer; @@ -77,7 +104,7 @@ .b03-file__dropzone strong { color: var(--color-deep-iris, #26114a); - font-size: var(--text-body, 16px); + font-size: var(--text-body-sm, 14px); font-weight: var(--font-weight-medium, 500); } @@ -86,11 +113,16 @@ color: var(--color-slate, #615e6e); } +/* 빈 오류 줄이 자리를 잡고 있으면 토글 아래가 통째로 비어 보인다 — 글자가 있을 때만 + 자리를 차지한다(2026-09-03 사용자 지시). */ .b03-file__error { - min-height: var(--spacing-16); color: var(--color-danger, #dc2626); font-size: var(--text-body-sm, 14px); - margin: var(--spacing-8) 0; + margin: 0; +} + +.b03-file__error:empty { + display: none; } .b03-file__resume { @@ -185,14 +217,124 @@ .b03-file__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: var(--spacing-24); + gap: var(--spacing-16); align-items: start; } +/* LAS 없이 설계 토글 — 파일 입력 컨테이너의 스위치(2026-09-03 사용자 지시). + B04 좌측 패널의 체크 줄(`b04-surface__check`)과 같은 서식이다. */ +.b03-file__lasfree { + display: flex; + align-items: center; + gap: var(--spacing-8); + align-self: flex-start; + padding: var(--spacing-8) var(--spacing-12); + border: 1px solid var(--color-mist, #e6e2e3); + border-radius: var(--radius-buttons, 8px); + font-size: var(--text-body-sm, 14px); + color: var(--color-deep-iris, #26114a); + cursor: pointer; + transition: border-color var(--transition-base, 0.2s); +} + +.b03-file__lasfree:hover { + border-color: var(--color-royal-amethyst, #3e0079); +} + +.b03-file__lasfree input { + width: 16px; + height: 16px; + margin: 0; + accent-color: var(--color-royal-amethyst, #3e0079); + cursor: pointer; +} + +/* 켜져 있으면 스위치 자신도 켜진 티를 낸다 — 지형 컨테이너가 왜 잠겼는지의 근거. */ +.b03-file__lasfree:has(input:checked) { + border-color: var(--color-royal-amethyst, #3e0079); + background: var(--color-mist-violet, #edecff); + font-weight: var(--font-weight-medium, 500); +} + +/* LAS 없이 설계를 켜면 지형 컨테이너는 받지 않는다 — 잠긴 것이 보이게 흐린다. */ +.b03-file__group--disabled { + opacity: 0.55; +} + +.b03-file__card--disabled { + background: var(--color-paper, #f6f7fa); + border-style: dashed; +} + +.b03-file__card--disabled .b03-file__card-select { + cursor: not-allowed; +} + +/* 좌측 안내 패널이 열리면 본문을 그만큼 밀어낸다 — 공용 워크플로 레이아웃(B04·B05)의 + `.ui-workflow-layout__body` 규칙과 같은 값. 접히면 손잡이 폭만 남긴다. */ +.b03-file__main-layout { + transition: padding-left var(--transition-base); +} + +.b03-file.is-options-open .b03-file__main-layout { + padding-left: min(var(--wf-left-panel-width), calc(100vw - var(--spacing-48))); +} + +.b03-file:not(.is-options-open) .b03-file__main-layout { + padding-left: var(--spacing-24); +} + +@media (max-width: 860px) { + .b03-file.is-options-open .b03-file__main-layout { + padding-left: 0; + } +} + +/* --- 좌측 안내 패널 (2026-09-03) — 본문에서 뺀 설명이 사는 자리. + 양식은 B04~B07 좌측 패널과 **같은 공용 양식**이다: 루트 `__form`, 문단은 + `ui-collapsible ui-sidebar-section`(외곽선·접힘·캐럿은 공용 CSS 몫), 제목은 + `__group-legend` 크기. 여기서는 값만 맞추고 새로 만들지 않는다. --- */ +.b03-file__form { + display: flex; + flex-direction: column; + gap: var(--spacing-16); + padding: var(--spacing-16); +} + +.b03-file__guide-group { + display: flex; + flex-direction: column; + gap: var(--spacing-8); + margin: 0; + padding: var(--spacing-16); + border-radius: var(--radius-cards); + background-color: var(--color-surface-raised); +} + +.b03-file__guide-legend { + margin: 0; + padding: 0 var(--spacing-8); + font-size: var(--text-caption); + font-weight: var(--font-weight-medium); + color: var(--color-text-secondary); +} + +/* 글자 크기·색도 공용 양식 그대로 — B04 좌측 패널 본문(`b04-surface__check`)과 같은 + `--text-body-sm` · `--color-text-body`(2026-09-03 사용자 지시: 양식 = 글자 크기 포함). */ +.b03-file__guide-list { + margin: 0; + padding-left: var(--spacing-16); + display: flex; + flex-direction: column; + gap: var(--spacing-4); + font-size: var(--text-body-sm); + color: var(--color-text-body); +} + .b03-file__group { display: flex; flex-direction: column; - gap: var(--spacing-20); + gap: var(--spacing-12); } .b03-file__group-hint { @@ -201,17 +343,20 @@ margin: calc(var(--spacing-8) * -1) 0 0 0; } +/* 제목 24px → 본문 크기(2026-09-03) — 컨테이너가 둘뿐이라 큰 제목이 자리만 먹었다. */ .b03-file__group-title { - font-size: var(--text-subheading, 24px); + font-size: var(--text-body, 16px); color: var(--color-deep-iris, #26114a); font-family: var(--font-britti-sans, inherit); - margin: 0 0 var(--spacing-8) 0; + margin: 0; } +/* 카드가 좁아지면 한 줄에 제목·상태·[선택]이 못 들어가 제목이 글자 단위로 접힌다 + (2026-09-03 실측: 안내 패널을 연 상태에서 카드 폭 210px). 폭이 모자라면 열을 줄인다. */ .b03-file__group-content { display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: var(--spacing-24); + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: var(--spacing-12); } /* 업로드 중에는 화면 조작을 막는다 — 중복 업로드·단계 이동 방지(2026-08-08 사용자 지시). */ @@ -235,16 +380,17 @@ } /* Wiza 8px radius 카드 */ +/* 카드 한 장 = 파일 한 칸. 빈 칸은 **한 줄**로 끝난다(2026-09-03 사용자 지시) — + 파일이 붙거나 올라가는 중에만 아래 내용(파일명·진행바)이 펼쳐진다. */ .b03-file__card { - min-height: 220px; - padding: var(--spacing-24); /* 내부 전체 패딩 확대 */ + padding: var(--spacing-12) var(--spacing-16); border: 1px solid var(--color-mist, #e6e2e3); border-radius: var(--radius-cards, 8px); background: var(--color-canvas, #ffffff); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; - gap: var(--spacing-20); + gap: var(--spacing-8); transition: transform var(--transition-base, 0.2s), border-color var(--transition-base, 0.2s), @@ -277,9 +423,11 @@ /* 카드가 좁아졌다(컨테이너 2열 × 카드 2열, 2026-08-31). 격자로 고정하면 제목이 글자 단위로 접히므로, 자리가 모자라면 배지·삭제 버튼이 다음 줄로 내려가게 한다. */ +/* 제목·상태·[선택]이 **한 줄**에 선다(2026-09-03) — 줄바꿈을 허용하면 [선택]이 아래로 + 내려가 카드가 두 줄이 됐다. 자리가 모자라면 제목이 줄어든다(min-width: 0). */ .b03-file__card-header { display: flex; - flex-wrap: wrap; + flex-wrap: nowrap; gap: var(--spacing-8); align-items: center; } @@ -300,22 +448,20 @@ .b03-file__card-heading { min-width: 0; - flex: 1 1 55%; + flex: 1 1 auto; display: flex; flex-direction: column; - gap: 2px; - margin-top: 2px; /* 제목 상단 여유 추가 */ + gap: 1px; } .b03-file__card-label { 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, @@ -357,25 +503,29 @@ } .b03-file__card-content { - flex: 1; display: flex; flex-direction: column; - justify-content: flex-end; - gap: var(--spacing-16); /* 버튼 하단 및 내부 간격 확대 */ - padding-bottom: var(--spacing-8); /* 파일 선택 버튼 하단 패딩 확보 */ + gap: var(--spacing-8); } +/* 빈 칸은 제목 줄만 남긴다 — 파일이 붙으면 이름·크기가, 올라가는 중에는 진행바가 선다. */ +.b03-file__card--empty .b03-file__card-content { + display: none; +} + +/* [선택]은 제목 줄 오른쪽 끝의 작은 버튼 — 종전 전폭 40px 버튼이 카드 높이를 키웠다. */ .b03-file__card-select { - width: 100%; - min-height: 40px; /* 버튼 높이 증가 */ + flex: 0 0 auto; + min-height: 26px; + padding: 0 var(--spacing-8); border: 1px solid var(--color-mist, #e6e2e3); border-radius: var(--radius-buttons, 8px); color: var(--color-deep-iris, #26114a); background: var(--color-canvas, #ffffff); font-weight: var(--font-weight-medium, 500); - font-size: var(--text-body-sm, 14px); + font-size: var(--text-caption, 12px); + white-space: nowrap; cursor: pointer; - margin-bottom: var(--spacing-8); /* 파일 선택 버튼 하단 마진 추가 */ transition: background var(--transition-base, 0.2s), border-color var(--transition-base, 0.2s); @@ -395,12 +545,18 @@ overflow-wrap: anywhere; } +/* 진행바·속도·예상완료는 **올라가는 동안만** 보인다(2026-09-03) — 끝난 카드에 남겨 두면 + 읽을 일 없는 세 줄이 카드 높이를 그대로 차지했다. */ .b03-file__progress-section { - display: flex; + display: none; flex-direction: column; gap: var(--spacing-8); } +.b03-file__card--uploading .b03-file__progress-section { + display: flex; +} + .b03-file__progress-bar-container { width: 100%; height: 6px; @@ -455,65 +611,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; -} diff --git a/B03_FileInput/B03_FileInput_UI_Style_Temp.css b/B03_FileInput/B03_FileInput_UI_Style_Temp.css index 4dfc2cde..11edd0e0 100644 --- a/B03_FileInput/B03_FileInput_UI_Style_Temp.css +++ b/B03_FileInput/B03_FileInput_UI_Style_Temp.css @@ -4,25 +4,11 @@ * 모달 껍데기(.b03-file__modal / -backdrop)는 기존 확인 모달 스타일을 그대로 쓴다. * ========================================================================== */ +/* 버튼 하나만 담는 자리 — 테두리를 또 두르면 버튼 테두리와 이중이 된다 + (2026-09-03 사용자 지시). */ .b03-file__temp-picker { display: flex; align-items: center; - gap: var(--spacing-12); - flex-wrap: wrap; - padding: var(--spacing-12); - border: 1px dashed var(--color-border); - border-radius: var(--radius-cards); -} - -.b03-file__temp-summary { - font-family: var(--font-body); - font-size: var(--text-caption); - color: var(--color-text-secondary); -} - -.b03-file__temp-summary.is-active { - color: var(--color-success); - font-weight: 700; } .b03-file__temp-modal { diff --git a/B03_FileInput/B03_FileInput_UI_Support.ts b/B03_FileInput/B03_FileInput_UI_Support.ts index 4ee67cc8..7b4e1707 100644 --- a/B03_FileInput/B03_FileInput_UI_Support.ts +++ b/B03_FileInput/B03_FileInput_UI_Support.ts @@ -60,7 +60,9 @@ const SLOT_CONFIGS: readonly SlotConfig[] = [ slot: "csv", labelKey: "B03_File_Slot_PlannedRoute", icon: "⌁", - extensions: [".csv", ".shp"], + // `.csv`는 받지 않는다 — 내부 계산이 만드는 파일이라 사용자가 넣는 자료가 아니다 + // (2026-09-03 사용자 지시). 슬롯 키 `csv`는 저장·서버 규약이라 그대로 둔다. + extensions: [".shp"], isRequired: true, }, { @@ -208,10 +210,10 @@ export function createFileCardTemplate(): HTMLTemplateElement {
+
-
diff --git a/B03_FileInput/B03_FileInput_UI_TempPicker.ts b/B03_FileInput/B03_FileInput_UI_TempPicker.ts index a94754dd..52d84a3c 100644 --- a/B03_FileInput/B03_FileInput_UI_TempPicker.ts +++ b/B03_FileInput/B03_FileInput_UI_TempPicker.ts @@ -46,19 +46,15 @@ export function createTempPicker( variant: "ghost", onClick: () => void openModal(), }); - const summary = document.createElement("span"); - summary.className = "b03-file__temp-summary"; - summary.textContent = L("B03_Temp_None"); - root.append(openButton, summary); + // 선택 요약(「선택된 보관 자료 없음」·묶음 이름)은 두지 않는다 — 불러온 자료는 카드가 + // 곧바로 보여 주고, 고르기 전 상태는 [파일 업로드]가 잠긴 것으로 이미 드러난다 + // (2026-09-03 사용자 지시). + root.append(openButton); let selectedBatch: TempBatchItem | null = null; function applySelection(batch: TempBatchItem | null): void { selectedBatch = batch; - summary.textContent = batch - ? `${L("B03_Temp_Selected")} ${batch.name} (${batch.files.length}${L("B03_Temp_FileCount")})` - : L("B03_Temp_None"); - summary.classList.toggle("is-active", Boolean(batch)); onSelected(batch); } diff --git a/B03_FileInput/B03_FileInput_UI_Upload.ts b/B03_FileInput/B03_FileInput_UI_Upload.ts index dafe030b..3f69e449 100644 --- a/B03_FileInput/B03_FileInput_UI_Upload.ts +++ b/B03_FileInput/B03_FileInput_UI_Upload.ts @@ -73,22 +73,6 @@ export function confirmReplaceUpload(slotLabel: string, fileName: string): Promi } /** 업로드 결과 목록(파일명 + 저장 경로)을 다시 그린다. */ -export function renderUploadResults( - list: HTMLElement, - results: readonly UploadedFileResult[], -): void { - list.replaceChildren(); - for (const result of results) { - const item = document.createElement("li"); - const filename = document.createElement("strong"); - filename.textContent = result.original_filename; - const path = document.createElement("span"); - path.textContent = `${L("B03_File_Result_Path")}: ${result.relative_path}`; - item.append(filename, path); - list.append(item); - } -} - /** * 파일 1건을 청크로 올린다. 중단된 세션이 있으면 그 지점부터 이어 올린다. * 진행 상황은 `onProgress`로만 알린다 — 갱신 주기는 config 값으로 제한한다. diff --git a/ui_template/ui_template_locale_b1.ts b/ui_template/ui_template_locale_b1.ts index 97b8a443..cbcaa673 100644 --- a/ui_template/ui_template_locale_b1.ts +++ b/ui_template/ui_template_locale_b1.ts @@ -224,9 +224,45 @@ export const ui_locales_b1 = { "Upload the required planned route, terrain, and point cloud files.", ], B03_File_Select_Label: ["입력 파일 선택", "Select input files"], - B03_File_Select_Hint: [ - "계획노선(CSV 또는 shapefile 5개)과 LAS/LAZ 1개, 지형 PRJ·TFW를 함께 고르면 카드에 나뉩니다. TIF는 선택 사항입니다.", - "Pick the planned route (a CSV or the five shapefile files), one LAS/LAZ, and the terrain PRJ and TFW together — they are sorted into cards. TIF is optional.", + /* --- 좌측 안내 패널 (2026-09-03) --- */ + B03_Guide_Files_Title: ["필요한 파일", "Files you need"], + B03_Guide_Files_Route: [ + "계획노선 — shapefile 한 벌(.shp·.shx·.dbf·.cpg·.prj) 5개.", + "Planned route — the five shapefile parts (.shp, .shx, .dbf, .cpg, .prj).", + ], + B03_Guide_Files_Terrain: [ + "지형 — 포인트클라우드 LAS/LAZ 1개와 좌표계 PRJ, 래스터 기준 TFW.", + "Terrain — one LAS/LAZ point cloud plus the PRJ projection and TFW world file.", + ], + B03_Guide_Files_Optional: [ + "지형 TIF(DEM)는 선택 사항 — 없어도 지표면 분석이 진행됩니다.", + "The terrain TIF (DEM) is optional — surface analysis runs without it.", + ], + B03_Guide_How_Title: ["고르는 방법", "How to pick"], + B03_Guide_How_Drop: [ + "여러 개를 한 번에 끌어 놓으면 확장자로 카드에 자동 배정됩니다.", + "Drop several files at once — each is assigned to a card by its extension.", + ], + B03_Guide_How_Card: [ + "카드의 [선택]으로 한 칸씩 지정하거나 ✕로 되돌릴 수 있습니다.", + "Use a card's [Select] to set one slot, or ✕ to clear it.", + ], + B03_Guide_How_Temp: [ + "[임시 보관함]은 대시보드에 미리 올려 둔 자료를 가져옵니다.", + "[Temporary storage] pulls files you staged on the dashboard.", + ], + B03_Guide_Notes_Title: ["알아 둘 것", "Before you upload"], + B03_Guide_Notes_Replace: [ + "이미 완료된 프로젝트에 다시 올리면 기존 분석 결과가 교체됩니다.", + "Uploading again to a finished project replaces the existing analysis.", + ], + B03_Guide_Notes_Crs: [ + "작업 좌표계는 라이다 PRJ가 기준 — 노선 좌표계와 다르면 업로드가 막힙니다.", + "The LiDAR PRJ sets the working CRS — a mismatched route CRS blocks the upload.", + ], + B03_Guide_Notes_LasFree: [ + "라이다가 없으면 [LAS 없는 설계]를 켜고 도엽 등고선으로 진행합니다.", + "With no LiDAR, turn on [Design without LAS] and work from sheet contours.", ], B03_File_Selected_Title: ["선택한 파일", "Selected files"], B03_File_Selected_Empty: ["선택한 파일이 없습니다.", "No files selected."], @@ -268,10 +304,6 @@ export const ui_locales_b1 = { B03_File_Group_Inputs: ["입력 자료", "Input files"], B03_File_Group_Route: ["계획노선 자료", "Planned route files"], B03_File_Group_Terrain: ["지형 자료 (LAS)", "Terrain files (LAS)"], - B03_File_Group_Route_Hint: [ - "shapefile은 파일 5개가 한 벌입니다. CSV 한 장으로 넣어도 됩니다.", - "A shapefile is a set of five files. A single CSV also works.", - ], B03_File_Group_Terrain_Hint: [ "여기의 PRJ·TFW는 지형 자료의 좌표계입니다 — 노선 PRJ와 별개입니다.", "The PRJ and TFW here describe the terrain data, separate from the route PRJ.", @@ -295,9 +327,7 @@ export const ui_locales_b1 = { B03_File_Slot_TerrainDem: ["지형 래스터", "Terrain DEM"], B03_File_Slot_CadDrawing: ["CAD 도면", "CAD Drawing"], /* --- B03 임시 보관함 불러오기 (2026-08-08) --- */ - B03_Temp_Btn_Open: ["임시 보관함에서 불러오기", "Load from temporary storage"], - B03_Temp_None: ["선택된 보관 자료 없음", "No stored set selected"], - B03_Temp_Selected: ["선택됨:", "Selected:"], + B03_Temp_Btn_Open: ["임시 보관함", "Temporary storage"], B03_Temp_FileCount: ["개 파일", " files"], B03_Temp_Modal_Title: ["보관 자료 선택", "Select stored files"], B03_Temp_Modal_Empty: [