[Baeg-won Clothing Gallery] 5. SALE, CONTACT 페이지 구현

📝 Outline

• 드디어 Sale, Contact 페이지 구현까지 끝이났으며, 이렇게 하여 Header에 명시했던 모든 페이지 구현이 완료되었다.

• 구현 스타일은 다음과 같다.

• Sale 페이지에서는 현재 할인 중인 상품의 기존 가격과 할인 가격을 나타내주고 있으며, Contact 페이지에서는 쇼핑몰의 이메일과 연락처, 위치 등의 정보를 출력하도록 하였다.
• 이때, 쇼핑몰의 위치는 Google Maps API를 사용하였으며, 진행 과정은 아래에서 설명하겠다.

---

📝 Review

• 이번에도 역시 리뷰하는 시간을 가져보자.
• 이번에 구현한 페이지는 딱히 어려운 부분이 없어서 글이 길어지진 않을 것 같다.

 

💬 Sale.vue

• 우선 Sale 페이지 구현을 위해서는 DB에 저장되어 있는 Product 엔티티에 할인 여부를 확인할 수 있는 컬럼을 추가해야 했다.
• 따라서 이를 위해 isDiscount와 discountPrice 컬럼을 추가해주었으며, 각각의 컬럼은 할인 여부와 할인가를 의미한다.

@Entity
@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class Product {

    ...

    @ColumnDefault("false")
    private boolean isDiscount;

    @ColumnDefault("'0'")
    private int discountPrice;

    ...
}

• 이를 통해 클라이언트에서는 할인 여부(isDiscount)에 따라 해당 페이지에 출력할 상품을 필터링하여 할인가(discountPrice)와 함께 상품을 출력할 것이다.
• 이를 위해 서버 단에 아래와 같은 코드를 작성해주었다.

if (category.equals("all")) {
    productList = productRepository.findAll();
} else if (category.equals("sale")) {
    productList = productRepository.findDiscountProduct();
} else {
    productList = productRepository.findProductByCategory(category);
}

• 즉, Sale 페이지에 접근할 경우 sale이라는 카테고리가 넘어오게 되고, 그에 맞는 상품 리스트를 DB에서 뽑아 가져오도록 한 것이다.
• 위에서 호출한 findDiscountProduct() 메서드는 Repository에 다음과 같이 정의되어 있다.

@Query(value = "SELECT * FROM product WHERE isDiscount = 1", nativeQuery = true)
List<Product> findDiscountProduct();

• Sale.vue는 기존에 구현했던 페이지와 유사하게, 기존 컴포넌트들(Image, List)을 조합하여 구현하였으며, 출력 결과는 다음과 같다.

 

💬 Google Maps API

• Contact 페이지에서는 Google Maps API를 사용하여 쇼핑몰의 위치를 지도로 나타내주었다.
• 참고로 필자는 Google Maps API 중에서도 무료인 Embed API를 사용하였다.
• 구현 과정은 다음과 같다.

• 우선 구글에서 제공하는 API를 사용하기 위해 계정을 생성하고, Google Maps Platform 프로젝트를 생성한다.

• 이후 위와 같이 API Key 생성 및 설정을 진행하면, 사용할 준비가 완료되었다.
• 이제 프로젝트로 돌아가 다음과 같은 코드를 작성해주면 된다.

<iframe
  width="100%"
  height="300"
  style="border: 0"
  loading="lazy"
  allowfullscreen
  src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=Evolve Clothing Gallery&region=KR&language=en"
></iframe>

• 이때 url에 들어가는 쿼리 스트링의 의미는 다음과 같다.
  • key: API Key
  • q: 장소 이름, 주소, 코드 또는 장소 ID
  • region: 지역 코드(KR로 설정하지 않을 시 동해가 일본해로 표기됨)
  • language: UI 요소 및 지도 타일의 레이블 표시에 사용할 언어
• 출력 결과는 다음과 같다.

• 여기까지 Header에 명시했던 모든 페이지를 구현하였고, 앞으로는 상품 상세보기 페이지와 상품 주문/등록 페이지, 장바구니 페이지 등 세부 페이지를 구현해보려고 한다.

---

📌 Reference

• https://kitty-geno.tistory.com/46

GitHub - Baeg-won/Baeg-won-Mall