eomsangdonandClaude Opus 5
a059c5f152
사용자 지적(2026-09-03) — 선택 항목이 너무 크고 대중없이 놓임. 안내는 B04·B05 와 같은 공용 좌측 패널로 빼고 본문은 고르는 자리만 남김. - `B03_FileInput_UI_Guide.ts` 신설 — 필요한 파일 / 고르는 방법 / 알아 둘 것 3묶음을 공용 오버레이 `optionsContent` 에 실음. 문단 구획은 공용 `ui-sidebar-section`. - 선택 영역 160px 블록 → 한 줄 바. 긴 문구는 패널로 옮기고 힌트는 한 줄로 교체. - 카드 `min-height: 220px` 폐지, [선택]을 제목 줄 오른쪽 끝 작은 버튼으로 이동, 빈 칸은 제목 줄만 남김. 진행바·속도·예상완료는 올라가는 동안만 표시. - 여백 정리 — 컨테이너 패딩 32 → 20, 그룹 제목 24 → 16px, 격자 간격 24 → 12. - 좌측 패널이 열리면 본문을 밀어내는 규칙 추가 — B03 은 일반 레이아웃이라 공용 워크플로 레이아웃의 padding 규칙이 없어 패널이 카드를 덮었음. 검증: 카드 높이 232 → 66px(빈 칸)·117px(파일 있음), 선택 영역 160 → 47px, 문서 높이 1408px 로 한 화면 남짓. typecheck·prettier 통과. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
66 lines
2.3 KiB
TypeScript
66 lines
2.3 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;
|
|
}
|
|
|
|
/** 좌측 패널 본문 — 필요한 파일 · 고르는 방법 · 알아 둘 것. */
|
|
export function createInputGuide(): HTMLElement {
|
|
const guide = document.createElement("div");
|
|
guide.className = "b03-file__guide";
|
|
guide.append(
|
|
section("B03_Guide_Files_Title", [
|
|
"B03_Guide_Files_Route",
|
|
"B03_Guide_Files_Terrain",
|
|
"B03_Guide_Files_Optional",
|
|
]),
|
|
section("B03_Guide_How_Title", [
|
|
"B03_Guide_How_Drop",
|
|
"B03_Guide_How_Card",
|
|
"B03_Guide_How_Temp",
|
|
]),
|
|
section("B03_Guide_Notes_Title", [
|
|
"B03_Guide_Notes_Replace",
|
|
"B03_Guide_Notes_Crs",
|
|
"B03_Guide_Notes_LasFree",
|
|
]),
|
|
);
|
|
return guide;
|
|
}
|