SamProject/sam-react-prod
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
563b240fbfbf9dd668df5943847a3b3572654b15
sam-react-prod/claudedocs/[FIX-2026-02-26] windows-compatibility-checklist.md
유병철 b1686aaf66 feat: 모바일 반응형 UI 개선 및 공휴일/일정 시스템 통합 
- MobileCard 접기/펼치기(collapsible) 기능 추가 및 반응형 레이아웃 개선
- DatePicker 공휴일/세무일정 색상 코딩 통합, DateTimePicker 신규 추가
- useCalendarScheduleInit 훅으로 전역 공휴일/일정 데이터 캐싱
- 전 도메인 날짜 필드 DatePicker 표준화 (104 files)
- 생산대시보드/작업지시 모바일 호환성 강화
- 견적서/주문관리 반응형 그리드 적용
- 회계 모듈 기능 개선 (매입상세 결재연동, 미수금현황 조회조건 등)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 21:27:40 +09:00

5.0 KiB
Raw Blame History

Windows 호환성 개선 계획서

작성일: 2026-02-26 배경: macOS 개발환경 → Windows 공장 PC 사용자 환경 차이로 인한 이슈 상태: 계획 단계

완료된 작업

  • Popover 계열 컴포넌트 Windows 포커스 이슈 수정 (6개 파일)
    • ui/date-picker.tsx — onPointerDownOutside/onInteractOutside 방어
    • ui/time-picker.tsx — 동일
    • ui/date-range-picker.tsx — 동일
    • ui/multi-select-combobox.tsx — 동일
    • ui/searchable-select.tsx — 동일
    • molecules/ColumnSettingsPopover.tsx — 동일
  • 삭제 버튼 아이콘 X → Trash2 통일 (23개 파일)

Phase 1: IMPORTANT — 사용자 체감 영향 큰 항목

1-1. backdrop-filter 성능 최적화

  • 파일: src/app/globals.css (line 269-280)
  • 문제: backdrop-filter: blur() 가 Windows GPU에서 비효율적 → 공장 PC에서 스크롤 버벅거림
  • 영향 범위: .clean-glass 클래스 사용하는 전체 레이아웃 (Sidebar, Login 등)
  • 수정 방향:
    • prefers-reduced-motion / prefers-reduced-transparency 미디어쿼리로 분기
    • 성능 낮은 환경에서는 backdrop-filter: none + 불투명 배경 대체
  • globals.css .clean-glass 수정
  • 적용된 컴포넌트에서 시각적 변화 확인

1-2. 폰트 굵기 렌더링 차이 보정

  • 파일: src/app/globals.css (line 219-235), src/app/[locale]/layout.tsx (line 14-19)
  • 문제: Windows 폰트 렌더링이 macOS보다 ~0.5-1.5 weight 더 굵게 표시 (Pretendard 변수 폰트)
  • 영향 범위: 전체 UI 텍스트
  • 수정 방향:
    • -webkit-font-smoothing: antialiased 확인 (이미 적용됨)
    • font-weight: 400 명시적 지정
    • 필요 시 Windows에서 font-weight: 350 적용 검토 (변수 폰트이므로 가능)
  • 현재 폰트 설정 확인
  • Windows에서 시각 비교 테스트 후 보정값 결정
  • globals.css 수정

1-3. 스크롤바 동작 차이

  • 파일: src/app/globals.css (line 332-412), src/layouts/AuthenticatedLayout.tsx (line 173-197)
  • 문제: macOS는 스크롤바 자동 숨김, Windows는 항상 표시 → 투명→페이드인 방식이 어색
  • 영향 범위: 모든 스크롤 가능한 영역
  • 수정 방향:
    • 스크롤바 thumb을 기본 살짝 보이게 (rgba(0,0,0,0.1))
    • .is-scrolling 시 진하게 (rgba(0,0,0,0.2)) 유지
    • 너비 8px → 10-12px 로 Windows 기대치에 맞게 조정 검토
  • globals.css 스크롤바 스타일 수정
  • Windows에서 시각 확인

1-4. 숫자 포맷 locale 명시

  • 파일: src/app/[locale]/(protected)/sales/order-management-sales/[id]/edit/page.tsx (line 65-68)
  • 문제: toLocaleString(undefined, ...) → Windows 지역 설정에 따라 포맷 달라짐
  • 영향 범위: 해당 페이지 숫자 표시 (다른 곳에도 동일 패턴 있는지 추가 검색 필요)
  • 수정 방향:
    • undefined → 'ko-KR' 명시적 locale 지정
    • 프로젝트 전체에서 동일 패턴 일괄 검색 후 수정
  • toLocaleString(undefined 패턴 전체 검색
  • locale을 'ko-KR'로 일괄 변경

Phase 2: MINOR — 안정성/효율성 개선

2-1. number input 스피너 버튼 숨김

  • 파일: 품질관리 문서 등 input[type="number"] 사용처
  • 문제: Windows에서 ↑↓ 스피너 버튼 표시 → 터치스크린에서 실수 클릭
  • 수정 방향: 전역 CSS로 스피너 숨김 처리
  • globals.css에 input[type="number"] 스피너 숨김 CSS 추가

2-2. 클립보드 API 에러 핸들링

  • 파일: src/app/[locale]/(protected)/dev/component-registry/ComponentRegistryClient.tsx (line 44-48)
  • 문제: navigator.clipboard.writeText() 가 Windows 보안 정책으로 실패 가능
  • 수정 방향: try-catch + document.execCommand('copy') fallback
  • 클립보드 사용 코드 에러 핸들링 추가

2-3. 출퇴근 시계 갱신 주기 최적화

  • 파일: src/app/[locale]/(protected)/hr/attendance/page.tsx (line ~170-180)
  • 문제: setInterval(1000) 매초 갱신 → 공장 PC CPU 부하
  • 수정 방향: 날짜만 표시하므로 60초 간격으로 변경
  • setInterval 주기 1초 → 60초로 변경

테스트 체크리스트

모든 수정 후 Windows 환경에서 확인:

  • DatePicker: Dialog 안에서 날짜 선택 → 값 정상 입력
  • DatePicker: 이전/다음달 날짜 클릭 → 팝업 유지, 월 이동
  • TimePicker: Dialog 안에서 시간 선택 → 정상 동작
  • 스크롤: 메인 레이아웃 + 테이블 스크롤 부드러움 확인
  • 폰트: 텍스트 두께가 macOS와 비슷한 수준인지 확인
  • 숫자 포맷: 천단위 구분자, 소수점 정상 표시
  • number input: 스피너 버튼 안 보이는지 확인

참고

  • Windows 공장 PC 사양: 보통 중저사양 (Intel i3-i5, 8GB RAM, 내장 GPU)
  • 브라우저: Chrome 또는 Edge (Chromium 기반)
  • 터치스크린 사용 가능성 있음