동일한 쿠폰명 보여주기 대작전!

커머스에서 쿠폰을 표시하는 페이지가 많다.

그러나, 동일한 쿠폰인데 쿠폰의 이름이 표시되는 페이지마다 다르다면 사용자는 혼란을 느낄 것이다.

 

그런 점을 캐치해서 PM 님과 함께 동일한 쿠폰 명을 보여주게끔 수정한 내용을 적겠다.

 

---

쿠폰을 보여주는 페이지들.. 이렇게나 많다!

- 장바구니 페이지, 주문 페이지, 쿠폰함 페이지, 상품 상세 페이지 등,, 

- 페이지별로 UI variation 이 나타나기 시작했고 기존의 쿠폰명을 보여주는 공용 로직으로는 이 니즈를 충족시켜줄 수 없었기에 페이지별로 함수를 각각 만들기 시작했고 워딩이 일부 달라지게 되었다.

 

 

---

메인 포인트

- 데이터에 따른 워딩은 동일하되 페이지별로 UI 는 다를 수 있다. 

- 위 사진 말고도 variation 이 좀 더 있다.

---

그래서 어떻게 했나?

- 결론부터 말하자면 데이터 별로 함수를 다 쪼갰고 다양한 레이아웃에 맞추어 조합해서 사용할 수 있게끔 했다.

 

1. 쿠폰명

- 쿠폰명의 경우 [option] <prefix> <price> <text> 대략 이런 구조로 이루어졌다는 걸 파악했다.

-  공용 로직은 object 를 반환하게끔 하고 textNode 로만 사용하는 곳은 래핑해서 사용하고 스타일을 입히거나 레이아웃이 살짝 다른 경우에는 그대로 사용했다.

 

2. 기타 정보들

- 할인코드 조건, 쿠폰 사용 조건, 최대 할인, 쿠폰 만료일, 쿠폰 d-day  등의 로직별로 함수를 분리했다.

 

결론

- 필요한대로 쏙쏙 가져다 쓰니 개발자도 편하고 사용자도 동일한 워딩을 보게되어 마음이 편했을 것이다.

- 하지만 조건에 따라 보여줘야 하는 정보가 많기는 해서.. 함수가 많아져 복잡해졌고.. 그래서 처음으로 테스트코드도 작성해보았다.

 

---

PM 분이 케이스별로 너무 잘 정리해주셔서.. 쿠폰명 로직이 탄생했다고 본다.

언제나 고생하는 PM 님들 화이팅 :)