주문 페이지 모바일 반응형

feat: 주문 페이지 모바일 반응형 스타일 추가

상품 목록부터 주문까지 이어지는 흐름을 정비했음. 특히 상품 옵션 처리와 페이징, 카테고리 필터가 한 번에 엮이는 부분이 까다로웠음.

상품 옵션 처리 구조

// 옵션 유무 분기
if (product.hasOption()) {
    model.addAttribute("options", productMapper.selectOptions(productSn));
} else {
    model.addAttribute("directOrder", true);
}

주문 트랜잭션

단계	처리
재고 차감	FOR UPDATE 락으로 동시성 처리
포인트 차감	무상 → 유상 순서
수수료 생성	PENDING 상태로 INSERT
알림 발송	트랜잭션 외부에서 비동기 처리

결제 완료 시점에 재고 차감, 포인트 소비, 알림 발송이 한 트랜잭션 안에서 처리되도록 묶음. 중간에 실패하면 전체 롤백.

CSS 변수 시스템의 장점

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

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

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