Files
Aislo/B05_Profile/B05_Profile_UI_RouteEdit_Recommend_Help.ts
T
eomsangdonandClaude Opus 5.5 481001ca65 feat(B05): 노선 추천 모달 오른쪽 설명 칸 — 세로 구분선 · 갈래 여덟 · 공통 제약 넷 · 결과 줄 읽는 법
- 기존 칸 그대로 · 모달 폭 960 → 1320px · 좁은 폭(1000px 이하)은 아래로
- 글은 서버 엔진 실제 동작 기준(만드는 법 · 이럴 때 · 주의) — `_Recommend_Help.ts` 로 나눔
- 고른 갈래 설명 강조 · 보이는 자리로 굴림
- 검증 시나리오 ui_checks/48-2

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015KYZ2HWWdUwZWYnn3tQz7X
2026-10-05 14:01:15 +09:00

189 lines
9.3 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* =============================================================================
* B05_Profile_UI_RouteEdit_Recommend_Help.ts
* [노선 추천] 모달 오른쪽 설명 칸(계획서 48-2) — 갈래 여덟 · 공통 제약 넷 · 결과 줄 읽는 법.
*
* 글은 서버 엔진(`B05_Profile_Engine_RouteInitial*`)이 실제로 하는 일을 따라 적는다 — 엔진을
* 바꾸면 여기 글도 같이 고친다. 고른 갈래는 강조하고 보이는 자리로 굴린다.
* ========================================================================== */
import type { RouteInitialLogic } from "./B05_Profile_Api_RouteInitial";
import { LOGIC_LABEL } from "./B05_Profile_UI_RouteEdit_Initial_Model";
interface HelpEntry {
/** 한 줄 요약. */
summary: string;
/** 노선을 만드는 법. */
how: string[];
/** 이럴 때 고름. */
when: string;
/** 주의할 점. */
caution: string;
}
const LOGIC_HELP: Record<RouteInitialLogic, HelpEntry> = {
follow: {
summary: "전처리 때 만든 예상노선(점선)을 그대로 따라가는 노선",
how: [
"새로 길을 찾지 않음 — 예상노선 꺾임점에 최소 곡선반지름으로 곡선만 넣음",
"전처리 초기 계획노선과 같은 규칙이라 같은 선이 나옴",
"종단기울기 · 계류 이격은 막지 않고, 넘은 곳만 「못 지킨 구간」에 적음",
],
when: "현장 답사로 정한 노선을 출발점으로 삼을 때 · 가장 빨리 나옴",
caution: "법정 기울기 · 계류 이격을 보장하지 않음 — 못 지킨 구간을 꼭 확인",
},
gradeline: {
summary: "정한 기울기로 등고선을 비스듬히 건너는 등경사선(영선) 노선",
how: [
"구간마다 기울기가 「목표 기울기」에 가장 가깝게 붙도록 길을 찾음",
"목표 칸을 비우면 종단기울기 상한이 목표 · 상한보다 크게 넣으면 상한으로 잘림",
"후보 중 목표와의 차(측점 20m 기울기 평균)가 가장 작은 것을 고름",
],
when: "일정한 기울기로 오르내리는 노선이 필요할 때(지형도 위 영선 잡기와 같은 일)",
caution:
"오르막 · 내리막을 가리지 않음 · 목표를 비우면 상한에 붙은 가파른 노선이 되기 쉬움 — 목표를 상한보다 조금 낮게 넣기를 권함",
},
earthwork: {
summary: "깎고 쌓는 흙(절토 + 성토)이 가장 적은 노선",
how: [
"옆경사가 급한 곳 · 지반이 상한보다 가파른 곳을 비싸게 보고 길을 찾음",
"후보 중 절토 + 성토 어림 양이 가장 적은 것을 고름",
"흙 양 = 계획고를 상한 안으로 맞춘 선과 옆경사 단면(노폭 4m)으로 어림",
],
when: "토공량 · 사토 처리를 줄여야 할 때",
caution: "비탈면 흙은 빠진 어림값 · 연장이 길어지는지 비교값으로 함께 볼 것",
},
gentle: {
summary: "종단기울기가 가장 순한 노선",
how: [
"기울기가 상한에 가까울수록 크게 벌점을 매겨 길을 찾음",
"후보 중 가장 가파른 구간의 기울기가 가장 낮은 것을 고름(같으면 평균 기울기)",
],
when: "차량 주행 · 노면 침식이 걱정되는 노선",
caution: "거리 비용이 작아 돌아가는 긴 노선이 나올 수 있음 — 연장을 확인",
},
safe: {
summary: "급한 옆경사 · 계류 가까운 곳을 피하는 노선",
how: [
"옆경사 35°(약 70%) 이상 · 계류 이격 거리 안을 위험 구간으로 보고 피함",
"후보 중 위험 구간을 지나는 길이가 가장 짧은 것을 고름(같으면 평균 옆경사)",
"35° 기준 = 「35° 이상 전폭 절토」 기술 기준",
],
when: "붕괴 · 유실 위험이 큰 급경사지 · 계곡 가까운 지형",
caution:
"계곡을 따라가는 지형에서는 위험 구간이 어디서나 길어 다른 갈래와 차이가 작음 — 계류 이격 값을 줄여 다시 셈해 볼 것",
},
crossings: {
summary: "계류를 건너는 횟수가 가장 적은 노선",
how: [
"계류 위를 지나는 칸에 벌점을 매겨 길을 찾음",
"후보 중 계류 횡단 수가 가장 적은 것을 고름(같으면 계류에서 더 먼 쪽)",
"10m 안에서 여러 번 건너는 것은 한 번으로 셈",
],
when: "배수관 · 세월교 같은 횡단 구조물을 줄이고 싶을 때",
caution: "소하천 · 지방하천 · 국가하천만 셈 — 작은 세류는 빠짐",
},
cost: {
summary: "토공 · 연장 · 계류 횡단을 한 숫자로 묶은 공사비 어림이 가장 낮은 노선",
how: [
"공사비 어림 = 흙 1㎥ × 1 + 연장 1m × 2 + 계류 횡단 1곳 × 400(흙 ㎥ 상당)",
"같은 비율을 1m 당 값으로 바꿔 길을 찾고, 후보 중 어림값이 가장 낮은 것을 고름",
],
when: "토공 · 연장 · 구조물 수를 한꺼번에 비교하고 싶을 때",
caution: "실제 원가가 아닌 상대값(임시 비율) — 갈래끼리 비교용으로만 볼 것",
},
weighted: {
summary: "예상 · 토공 · 기울기 세 비중(합 100)을 섞어 찾은 노선",
how: [
"예상 = 예상노선에서 떨어지지 않기 · 토공 = 흙 양 줄이기 · 기울기 = 순한 기울기",
"비중대로 섞은 비용 하나로 한 번 길을 찾음 — 한쪽이 100 이면 그 갈래와 같은 노선",
"자물쇠로 비중 하나를 고정하면 나머지 둘만 움직임 · 기본 50 / 25 / 25",
],
when: "예상노선을 어느 정도 살리면서 토공 · 기울기도 챙기고 싶을 때",
caution: "제약은 벌점일 뿐이라 넘는 구간이 남을 수 있음 — 못 지킨 구간을 확인",
},
};
const CRITERIA_HELP: Array<{ name: string; text: string }> = [
{
name: "종단기울기 상한(%)",
text: "이보다 가파른 구간을 만들지 않음. 비우면 임도 종류 · 지형 · 설계속도 법정 값(20km/h 일반 9% · 특수 14%). 곡선을 넣은 뒤 넘으면 상한을 조금씩 낮춰 다시 찾음",
},
{
name: "최소 반지름(m)",
text: "꺾는 곳마다 이 반지름의 곡선이 들어갈 만큼 곧게 간 뒤에만 다시 꺾음. 비우면 설계속도 · 지형 법정 값(20km/h 15m · 12m)",
},
{
name: "계류 이격(m)",
text: "계류에서 이 거리 안으로는 따라 걷지 않고 건너거나 빠져나가는 방향으로만 움직임. 비우면 100m(타당성평가 「산지계류 100m 이내」 기준)",
},
{
name: "지반 고름 폭(m)",
text: "기울기를 잴 때 지형 잔굴곡을 고르는 폭. 클수록 매끈한 지반으로 봄. 비우면 5m",
},
];
const LINES_HELP: Array<{ name: string; text: string }> = [
{
name: "비교값",
text: "연장 · 기울기 최대 · 평균 · 옆경사 · 절토 · 성토 · 계류 횡단 · 공사비 어림 — 갈래를 바꿔 가며 견줌",
},
{
name: "못 지킨 구간",
text: "제약을 넘은 측점(5곳까지 · 나머지는 「외 N곳」, 전체는 마우스를 올리면 보임)",
},
{
name: "상한을 풂",
text: "지형상 상한 안으로는 시점 · 종점을 이을 수 없어 꼭 필요한 만큼만 상한을 올린 경우",
},
{
name: "거의 같은 노선",
text: "제약 안에서 갈 길이 좁은 띠 하나뿐이라 갈래가 달라도 노선이 겹치는 경우 — 제약 값을 바꾸면 벌어질 수 있음",
},
];
const LOGIC_ORDER: RouteInitialLogic[] = [
"follow",
"gradeline",
"earthwork",
"gentle",
"safe",
"crossings",
"cost",
"weighted",
];
/** 설명 칸 HTML — 모달 본문 끝에 붙는다(세로 구분선 오른쪽). */
export function recommendHelpHtml(): string {
const logics = LOGIC_ORDER.map((key) => {
const entry = LOGIC_HELP[key];
return `<article class="b05-routerec__help-item" data-help-logic="${key}">
<h4>${LOGIC_LABEL[key]}</h4>
<p class="b05-routerec__help-summary">${entry.summary}</p>
<ul>${entry.how.map((line) => `<li>${line}</li>`).join("")}</ul>
<p><b>이럴 때</b> ${entry.when}</p>
<p class="b05-routerec__help-caution"><b>주의</b> ${entry.caution}</p>
</article>`;
}).join("");
const list = (items: Array<{ name: string; text: string }>): string =>
`<dl>${items.map((item) => `<dt>${item.name}</dt><dd>${item.text}</dd>`).join("")}</dl>`;
return `<aside class="b05-routerec__help" aria-label="노선 추천 설명">
<h3>추천 갈래</h3>
<p class="b05-routerec__help-lead">제약을 지키는 후보 노선 여러 벌을 찾은 뒤, 갈래마다 자기 기준이 가장 좋은 것을 고름.</p>
${logics}
<h3>공통 제약</h3>
<p class="b05-routerec__help-lead">예상노선 추적 · 비중 계산을 뺀 갈래는 넘지 않음 · 칸을 비우면 기본값.</p>
${list(CRITERIA_HELP)}
<h3>결과 줄 읽는 법</h3>
${list(LINES_HELP)}
</aside>`;
}
/** 고른 갈래 설명을 강조하고 보이는 자리로 굴린다. */
export function syncRecommendHelp(body: HTMLElement, logic: RouteInitialLogic): void {
body.querySelectorAll<HTMLElement>("[data-help-logic]").forEach((item) => {
const on = item.dataset.helpLogic === logic;
if (on && !item.classList.contains("is-on")) item.scrollIntoView({ block: "nearest" });
item.classList.toggle("is-on", on);
});
}