AS-IS

전단, 일반 상품 api key가 각각 달라 computed로 key 두개를 호출하게끔 구현하였습니다.

computed: {
reviewsCount() {
        return this.item.reviewsCount || this.item.comment_cnt || 0;
    },
}

TO-BE

• 상품 상세 composition 변경
• 상품 상세 섹션별 컴포넌트화
• 상품 마스터 적용 컴포넌트에 접두사 Unified 붙임

공유할 내용

• 기존 로직은 컴포넌트명 앞을 Product로, 상품마스터 전환 컴포넌트명은 Unified를 붙였습니다. ProductView의 경우, 상품 상세를 보여주었던 기존과는 다르게 조건에 따라 보여줄 컴포넌트를 분기하는 역할로 변경되어서 기존 ProductView의 로직은 FlyerView로 이동하였습니다.(FlyerView 이지만, 전단 상세를 포함한 api가 변경되지 않는 상세페이지 포함)

• 상품 상세 아래의 연관 검색어, 추천구좌는 api가 아직 나오지 않아 추후 변경할 예정입니다.

• api 응답의 custom을 통해 custom하게 UI를 변경해야할 경우 ProductView에 UnifiedProductDetail의 slot을 통해 지정된 영역에 템플릿을 삽입할 수 있습니다. 해당 작업은 상품마스터 전환 작업 마무리 후 자유도를 높이는 방향으로 리팩토링할 예정입니다.

  

  <!-- ProductView.vue -->
  <template v-if="initDataLoaded">
        <FlyerProductView v-if="isFlyer" />
        <CustomProductView v-else-if="custom 상세 노출 조건">
        <UnifiedProductDetail v-else />
   </template>
  
  <!-- CustomProductView.vue -->
  <UnifiedProductDetail>
      <template #positionA>
          <div>custom content</div>
      </template>
  </UnifiedProductDetail>