eomsangdonandClaude Opus 5
68e0a1c67f
사용자 지시 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>
74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
/* =============================================================================
|
|
* B03_FileInput_UI_Guide.ts
|
|
* 파일 입력 좌측 안내 패널 (2026-09-03 사용자 지시).
|
|
*
|
|
* 종전에는 고르는 방법·필요한 파일 목록이 **선택 영역과 카드 안에** 길게 들어가 있어
|
|
* 카드 한 장이 220px씩 차지했다. 안내는 한 번 읽으면 되는 것이라 다른 단계(B04·B05)와
|
|
* 같은 자리 — 공용 오버레이의 좌측 패널(`createWorkflowOverlays.optionsContent`) — 로
|
|
* 옮기고, 본문은 고르는 자리만 남긴다.
|
|
*
|
|
* 문단 구획은 공용 `ui-sidebar-section`을 쓴다(B04·B05 좌측 패널과 같은 테두리·간격).
|
|
* ========================================================================== */
|
|
|
|
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
|
|
|
|
function L(key: keyof typeof ui_locales): string {
|
|
return ui_locales[key][currentLanguageIndex];
|
|
}
|
|
|
|
/** 안내 문단 하나 — 제목 + 항목 목록. */
|
|
function section(
|
|
titleKey: keyof typeof ui_locales,
|
|
itemKeys: (keyof typeof ui_locales)[],
|
|
): HTMLElement {
|
|
const group = document.createElement("section");
|
|
group.className = "ui-sidebar-section b03-file__guide-group";
|
|
|
|
const title = document.createElement("h3");
|
|
title.className = "b03-file__guide-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__guide";
|
|
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",
|
|
]),
|
|
);
|
|
return guide;
|
|
}
|