쇼핑몰 상품 카테고리 구현하기 - 쿼리 스트링

쇼핑몰은 동일한 템플릿을 반복적으로 사용하는 경우가 많다. 
특히 상품을 상품의 색, 가격, 카테고리 등등 여러 조건에 의해 필터링할 때는 출력되는 상품은 다르더라도 그 형식은 대부분 동일하다. 상품의 상세페이지도 세부 정보만 다를 뿐 그 형식은 동일하다. 
따라서, 형식을 유지하면서 세부내용을 다르게 하기 위해서는 특정 정보가 필요한데 이러한 정보를 url을 통해 넘겨주는 것이 쿼리 스트링이다.

 

1. 쿼리스트링이란?

• 쿼리 스트링(Query String)은 URL의 일부로써 웹 페이지로 전달되는 매개변수를 나타내는 문자열이다.
• 쿼리 스트링은 `?` 문자로 URL의 경로와 구분되며, `key=value` 형식으로 매개변수를 표현한다.
• 여러 개의 매개변수는 `&` 문자로 구분된다.

 

url=http(프로토콜) + 도메일 + path + 쿼리스트링

• 위의 URL에서 `?` 이후의 문자열인 `category=poster&type=photo`가 쿼리 스트링이다. 
• 이 쿼리 스트링은 `category`와 `type` 두 개의 매개변수를 가지고 있으며, 각각의 값은 `poster`와 `photo`이다.
• 위 예시에서 productMain은 'path' 혹은 '라우트'라고 한다. 
• 위와 같이 쿼리스트링을 이용할 경우 하나의 path로 여러 가지 다른 결과를 제어할 수 있게 되는 것이다. 

 

 

 

2. 쿼리스트링 사용하기

상품 목록 페이지

개별 상품페이지

 

1) 쿼리스트링 설정하기

• 현재 하고 있는 쇼핑몰 개인 프로젝트에서 상품 목록에서 상품 이미지 카드 클릭시 개별 상세페이지로 이동하는 주소이다.
• 쿼리스트링은 아래와 같이 설정해주었다.
• 쿼리 스트링을 만드는 방법은 아래처럼 직접 입력해도 되고 JavaScript에 함수로 만들어줘도 된다. 중요한건 어떻게 만드느냐고 아니고 '?' 형식을 지키는 것이다.

      <div class="product-item" id="${itemObj.productId}">

        <div class="product-item-img">

           <a href="/stroke/product/productDetail?product_id=${itemObj.productId}">

            <img src="../${itemObj.productImage}" alt="">

          </a>

          <i class="${heartIconClass}" style="${heartIconStyle}"></i>

        </div>

 

        <div class="product-item-info">

          <span>${itemObj.productName}</span>

          <span>${itemObj.productArtist}</span>

          <span>${itemObj.productPrice}원</span>

        </div>

      </div>

<a href="/stroke/product/productDetail?product_id=${itemObj.productId}">

 

• ajax로 서버에서 전체 상품 리스트를 가져와서 객체배열로 저장하고 상품 카드를 동적으로 만들고 있다 (tmi)

 

 

 

2) 컨트롤러에서 쿼리스트링으로 해당 값 받아오기

 

		//제품 상세페이지 이동
		   @GetMapping("/productDetail")
		    public String getProductDetailPage(@RequestParam("product_id")int productId, 
		    								   Model model) {
			// productId를 사용하여 상품 정보 조회
		        Product product = service.getProductById(productId);

		        // 조회된 상품 정보를 모델에 추가하여 뷰로 전달
		        model.addAttribute("product", product);

		        return "product/productDetail"; // productDetail.jsp와 같은 뷰 페이지를 반환합니다.
		    }

• @RequestParam("product_id")int productId : 쿼리스트링의 경우 RequestParam으로 가져올 수 있다.
• 해당값을 바탕으로 서버에서 상품 정보를 가져와서 View단으로 다시 보내준다.
      

 

 

3) JSP에서 페이지 구현하기

        <!-- 상품 헤더 영역 -->

       <div class="product-detailArea" >

        <!-- 상품 썸네일 영역 -->

        <div class="product-imageArea" >

            <img class="target" src="${contextPath}/${product.productImage}"  data-zoom="2">

        </div>

        <!-- 상품 정보 영역 -->

        <div class="product-infoArea" >

            <div class="product-headingArea">

                <h2>${product.productName}</h2>

                <i class="fa-regular fa-heart"></i>

            </div>

            <div class="product-info-detail">

                <p class="writerName">${product.productArtist}</p>

                <button id="artist-page-btn" onclick="location.href='#' ">작가페이지</button>

                <p class="product-content">${product.productContent}</p>

            </div>

            <hr>

            <div class="product-price">

                <table summary="가격테이블">

                    <tr>

                        <td class="td1">판매가</td>

                        <td class="td2">${product.productPrice}원</td>

                    </tr>

                </table>

                <hr>

            </div>

            <div class="min-order">

                <span >최소주문수량 : 1개</span>

            </div>

            <div class="product-option">

                <table summary="가격테이블">

                    <tr>

                        <td class="td1">필수옵션</td>

                        <td class="td2">

                            <select name="option1" id="option1">

                                <c:if test="${not empty product.productOption1}">

                                    <c:set var="options" value="${fn:split(product.productOption1, '/')}"/>    

                                    <c:forEach items="${options}" var="option">

                                        <option value="${option}">${option}</option>

                                    </c:forEach>

                                </c:if>

                                <c:if test="${empty product.productOption1 and not empty product.productOption2}">

                                    <c:set var="options" value="${fn:split(product.productOption2, '/')}"/>    

                                    <c:forEach items="${options}" var="option">

                                        <option value="${option}">${option}</option>

                                    </c:forEach>

                                </c:if>

                            </select>

                        </td>

                    </tr>

                </table>

            </div>