eomsangdonandClaude Opus 5
5203191751
사용자 지시(2026-09-04) — 「3D 는 보조라 후순위. 조용히 뒤에서 뜨고 다 되면 팝업으로 알릴 것. 로딩 도넛은 진행률과 무관하게 계속 돌고 숫자만 갱신」, 그리고 「직교/원근 전환 단추는 넣음」. 진입 로딩 - 단계 5 → 4. ④ 종·횡단 자료까지 끝나면 로딩 표시를 걷어 화면을 바로 쓰게 함. - 3D 지형은 finally 뒤 배경 작업으로 돌리고 끝나면 토스트 「3D 지형 준비 완료」. 실패해도 나머지 화면은 그대로 씀. [초기화]는 재진입이라 같은 규칙이 걸림. - 「확정 지표면 없음」 판정을 ③ 뒤로 앞당김. 진행 서클(공용) - 회전 껍데기(`__spin`)를 한 겹 두고 CSS 회전을 거기에만 검. 껍데기는 늘 돌고 안쪽 svg 는 12시 고정이라 호·숫자가 제자리에서 갱신됨. `is-indeterminate` 제거. 직교/원근 전환 - 카메라 두 벌을 `B05_Profile_UI_Viewer_Camera.ts` 가 쥐고 갈아 끼움. 위치·시선· 근평면·먼평면과 보이는 크기를 옮겨 화면이 튀지 않음. - 마커 입력·구조물 클릭·커서 피벗 유틸이 카메라를 함수로 받게 바꿈(공용 유틸은 값도 그대로 받아 B04 호출부는 무변경). 자체검증(공용 브라우저 5173, 용화_LAS) — 진행률 25→50→75%, 회전 애니메이션 running 유지(변환행렬 표본 전부 다름), 로딩 걷힌 순간 그래프선 2·좌측단추 61· 3D 메쉬 2, 1.8초 뒤 메쉬 489 + 토스트. 초기화 재진입도 같음. 전환 단추는 Ortho ↔ Perspective 왕복 후 값 완전 일치, B04 페이지 오류 0건. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
93 lines
2.4 KiB
CSS
93 lines
2.4 KiB
CSS
/* 공통 프로그레스 서클 — 뷰포트 위에 얹는 원형 진행 표시.
|
|
테두리 두께·색은 공통 로딩 스피너(.ui-spinner)와 같게 맞추고, 가운데에 진행률만 더한다. */
|
|
.ui-progress-circle {
|
|
--ui-progress-size: 72px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* 컨테이너 정중앙 오버레이 — 3D 뷰포트·지도·그래프 어디에나 같은 방식으로 얹는다.
|
|
컨테이너에 position: relative 가 있어야 한다. */
|
|
.ui-progress-circle--overlay {
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ui-progress-circle__dial {
|
|
position: relative;
|
|
width: var(--ui-progress-size);
|
|
height: var(--ui-progress-size);
|
|
}
|
|
|
|
/* 회전 껍데기 — 진행률을 알든 모르든 **항상** 돈다(2026-09-04 사용자 지시).
|
|
무거운 단계에서 호가 안 늘어도 도넛이 멈춰 보이지 않는다. 안쪽 svg는 12시 고정이라
|
|
호·숫자는 제자리에서 갱신된다. */
|
|
.ui-progress-circle__spin {
|
|
width: 100%;
|
|
height: 100%;
|
|
animation: ui-progress-spin 1s linear infinite;
|
|
}
|
|
|
|
.ui-progress-circle__svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
/* 12시 방향에서 시계 방향으로 채운다. */
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.ui-progress-circle__track {
|
|
fill: none;
|
|
stroke: var(--color-mist-violet);
|
|
stroke-width: 8;
|
|
}
|
|
|
|
.ui-progress-circle__bar {
|
|
fill: none;
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 8;
|
|
stroke-linecap: round;
|
|
transition: stroke-dashoffset var(--transition-base);
|
|
}
|
|
|
|
@keyframes ui-progress-spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.ui-progress-circle__percent {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-text-body);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.ui-progress-circle__label {
|
|
max-width: 22ch;
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
border-radius: var(--radius-inputs);
|
|
background: color-mix(in srgb, var(--color-surface-raised) 82%, transparent);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
text-align: center;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.ui-progress-circle__label:empty {
|
|
display: none;
|
|
}
|