롯데ON의 상품 상세 페이지는 상품·리뷰·문의·교환·반품 정보, 쿠폰 조회/발급, 장바구니 담기, 조회수 증가/광고 배너 기능을 한 화면에서 AJAX 비동기로 처리해 새로고침 없이 매끄러운 사용자 경험을 제공합니다. QueryDSL로 필요한 데이터만 조회해 DB 부담을 줄이고, Spring Security 인가 흐름과 CSP 메타 태그를 활용해 비회원 로그인 유도 및 HTTPS Mixed Content 문제를 해결했습니다.

✅ 핵심 기술

• QueryDSL 기반 데이터 조회
• AJAX 비동기 처리 (리뷰·문의 페이징/정렬, 쿠폰·장바구니 모달 등)
• Spring Security 인가 흐름 (credentials: 'include' + ViewLoginCheck 리다이렉트)
• CSP 메타 태그 (upgrade-insecure-requests)를 통한 Mixed Content 대응

✅ 성과

• 새로고침 없는 통합 UX 제공 (상품·탭 전환·정렬·페이징·쿠폰·장바구니)
• 네트워크·DB 부하 최소화 (필요 데이터만 조회, 페이지당 5개 페이징)
• 보안 강화 (HTTPS 환경에서 AJAX 요청 차단 문제 해결)
• 비회원 이탈 방지 (로그인 유도 후 원래 위치로 복귀)

구조

src/ └── main/ │── java/ │ └── kr.co.lotteon/ │ │── controller/ │ │ └── product/ │ │ │── ProductViewController.java │ │ └── ProductCouponController.java │ │── service/ │ │ └── product/ │ │ │── ProductViewService.java │ │ └── ProductCouponService.java │ │── repository/ │ │ │── product/ │ │ │ └── ProductRepository.java │ │ └── coupon/ │ │ ├── CouponRepository.java │ │ └── CouponIssueRepository.java │ │── entity/ │ │ │── product/ │ │ │ │── Product.java │ │ │ │── ProductDetail.java │ │ │ └── ProductImage.java │ │ └── coupon/ │ │ │── Coupon.java │ │ └── CouponIssue.java │ └── dto/ │ │── product/ │ │ │── ProductDTO.java │ │ │── ProductDetailDTO.java │ │ └── ProductImageDTO.java │ └── coupon/ │ │── CouponDTO.java │ └── CouponIssueDTO.java └── resources/ └── templates/ │ └── product/ │ └── view/ │ │── view.html │ │── detail.html │ │── review.html │ │── qna.html │ └── exchange.html └── static/ └── js/ └── product/ └── view.js

상품 보기 전체 페이지

롯데ON의 상품 상세 페이지는 상품의 모든 정보를 한눈에 확인하고, 리뷰/문의/교환·반품 정보를 탭으로 전환하며, 정렬·페이징 기능을 새로고침 없이 제공해 사용자 경험을 극대화했습니다.