쇼핑몰 플랫폼 패키지 구조와 CSS 전면 재구성

refactor: 쇼핑몰 플랫폼 CSS 재구성 및 로그인 페이지 스타일 개편

리팩토링은 기능 변경 없이 코드 품질을 올리는 작업임. 이번엔 패키지 구조 정리와 Service 계층을 Util 방식으로 전환하는 게 핵심이었음.

패키지 구조 재편

기존: 기능별 패키지 내 Controller/Service/Mapper 혼재
개선: Controller(web)와 Util(utl)만 존재

Service를 static Util로 전환한 이유:
- 단일 진입점이 명확해짐
- 의존성 주입 복잡도 감소
- 단위 테스트 작성 용이

전환 단계

리팩토링 중에 기능이 깨지면 안 됨. 각 단계마다 빌드 후 다음으로 넘어감. 커밋도 단계별로 분리해서 롤백 용이하게 유지함.

CSS 변수 시스템의 장점

CSS 변수(커스텀 프로퍼티)를 도입하면 테마 변경이 한 곳에서 전파됨. 특히 다크모드, 화이트라벨링 요구사항이 있을 때 진가를 발휘함.

/* 변수 정의 */
:root {
  --color-primary: #3b82f6;
  --spacing-md: 16px;
}

/* 사용 */
.btn-primary {
  background: var(--color-primary);
  padding: var(--spacing-md);
}

SCSS 빌드를 도입하면 변수 관리 + 중첩 선택자 + 믹스인까지 활용 가능함. 기존 CSS에서 마이그레이션할 때는 점진적으로 파일 단위로 전환하는 게 안전함.

끝