이커머스 결제 플랫폼 다크모드 색상 가독성 개선

fix: 이커머스 PG 플랫폼 다크모드 UI 대비/색상 보정

다크모드 UI 수정 작업임. 라이트모드 기준으로 짠 CSS가 다크모드에서 가독성 문제를 일으켰음.

다크모드 적용 방식

:root {
  --bg-primary: #ffffff;
  --text-primary: #1a1a1a;
  --border-color: #e0e0e0;
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --text-primary: #f0f0f0;
  --border-color: #333333;
}

주요 버그 패턴

증상	원인	수정
흰 배경에 흰 텍스트	색상 하드코딩	CSS 변수 사용
테두리 안 보임	밝은 색 고정	`--border-color` 적용
아이콘 안 보임	흰색 SVG	`currentColor` 사용
Fallback 색상	변수 미정의 구간	모든 컴포넌트 변수 적용

/* 잘못된 예 */
.card { background: #fff; color: #333; }

/* 올바른 예 */
.card {
  background: var(--bg-primary);
  color: var(--text-primary);
}

개발 원칙 정리

이 작업을 진행하면서 재확인한 원칙들:

작은 커밋: 변경 단위를 작게 유지해서 코드 리뷰와 롤백이 쉽게.

테스트 먼저: 변경 전 현재 동작을 파악하고, 변경 후 동일하게 동작하는지 확인.

문서 동기화: 코드가 바뀌면 관련 주석과 문서도 같이 업데이트.

원칙	이유
단일 책임	하나의 함수/클래스는 하나의 역할만
명시적 코드	영리한 코드보다 읽기 쉬운 코드
실패 우선 처리	happy path보다 에러 케이스 먼저 설계