판매 매물 상세 페이지의 하단에 조건에 따라 노출되는 CTA 컴포넌트

처음엔 단순히 크롤링된 매물의 가격을 보여주고 해당 클롤링 플랫폼 판매 페이지로 이동 시켜주는것이 전부였는데 이 서비스가 가고자 하는 목표달성과 사용자 니즈로 인해 여러 타입과 조건이 추가

문제상황

• ProductCTAButton 이라는 굉장히 단순한 컴포넌트가 여러 타입과 조건을 만나면서 내부 로직이 매우 거대해짐

• 해당 컴포넌트에 종속적인 로직인줄만 알았던 것들이 점차 다른 컴포넌트와 페이지에서도 사용됨

• 관련 비즈니스 로직을 재사용하는것이 아닌 각각 페이지와 컴포넌트 내에서 개별적으로 작성됨

• 버튼의 노출 조건과 해당 버튼의 기능동작 로직이 각각 구현되어 있음

• 불필요하게 부모에서 내려주는 props

  interface ProductCTAButtonProps {
  	product?: Product;
  	roleSeller: UserRoleSeller;
  	isBlockUser: boolean;
  	isDup: boolean;
  	hasTarget: boolean;
  	salePrice: number;
  	hasOrder: boolean;
  	isPriceDown?: boolean;
  	offers?: ProductOffer[];
  	...
  }
  

• 노출 조건에 대한 타입과 로직이 너무 많고 명확하게 정리가 되어 있지 않음

  // 문제의 분기 코드
  // 0? 1? 숫자가 뭘 뜻하는지 알기 어렵고
  // 조건의 조합이 늘어나고 복잡해질수록 결과를 예측하기 어려움
  if (sellerType === 0) {...}
  if (sellerType === 1) {...}
  if (productType === 1) {...}
  if (status !== 1 && siteId === 34 && sellerType === 1) {...}
  if (status === 3 && sellerType !== 0 && productType === 1) {...}
  

• 중의적인 네이밍으로 사용된 변수나 함수로인해 매번 코드를 볼때마다 헷갈리거나 반복적으로 백엔드개발자에게 어떤 타입인지 물어서 확인해야함

• 언제든지 변칙적인 조건의 조합이 발생해서 새로운 분기가 발생할 수 있음

• 정말 작은 변경사항 수정하는데에도 여러 컴포넌트와 페이지를 확인해야함

• 변경사항이 해당 컴포넌트뿐만 아니라 다른 컴포넌트와 페이지에서도 이루어져야 하지만 따로 관리되고있어 누락되는 케이스가 빈번하게 발생

개선방향

1. 노출되는 버튼은 노출 조건과 상관없이 동작의 매핑이 정상적으로 되어 있어야 한다.