장바구니 페이지 상품패널 구조 변경기

이번에는 장바구니 페이지 중 상품 패널 쪽의 구조를 변경한 이야기를 작성하겠습니다!

---

변경해야했던 이유

최신 화면

 

- 기존에는 위수탁샵과 쇼핑몰 샵과의 패널에 기능이나 디자인의 차이가 거의 나지 않았기 때문에 샵 > 하나의 상품 패널 컴포넌트 안에서 간단한 분기 정도로 되어있었다.

- 점점 샵별 패널 섹션에 서로 다른 디자인과 기능을 적용하고자하는 니즈가 증가했기때문에 구조를 변경할 수 밖에 없었다.

 

---

그래서 어떻게 했나?

 

1. figjam 을 사용해 목표로 삼은 구조를 그렸다.

- UI 및 데이터에 따른 섹션의 종류가 4개였고 비슷한 것 같으면서 약간씩 달랐다.

 

2. 컴포넌트 전략

- 하나의 컴포넌트에서 if문으로 분기해서 데이터만 넘길까 하다가 변경에 용이한 구조를 가져가는 것이 나중을 위해 좋다고 판단을 했다.

- 공용이라고 생각하는 UI 와 로직을 작게 쪼개서 각 섹션별 컴포넌트 내에서 조립해서 사용하게끔 구조를 변경했다.

 

3. 타입 추가 & ts 전환

- res 데이터로 내려주는 값들이 너무 많아 감당이 안되었는데 하는 김에 타입도 전부 추가했고 구조 변경 작업을 할 때에 수정한 컴포넌트들은 전부 타입스크립트로 작업했다.

 

---

결과

- 작은 단위의 공용컴포넌트를 조립해서 하나의 섹션을 추가하는 방식으로 진행했더니 나중에 또 다른 섹션이 생겨도 대응하기가 편했다.

- 각 섹션별로 구분이 명확해서 해당하는 부분의 코드 찾기가 쉬웠다.