2차 개발이 시작되고 피그마 디자인이 ... 공통 컴포넌트 제작 어떻게 하지?

안녕하세요, 초원입니다. 👩🏻‍💻

 

지난 6월, 1차 개발이 마무리되고 요구사항이 추가되면서 2차 개발이 시작되었습니다.

 

원래 두 장이었던 피그마 페이지가 이제는 셀 수 없이 많은 페이지로 늘어나면서,

같은 기능을 하면서도 디자인이 다른 컴포넌트들을 몇 개 발견하게 되었습니다.

(예: small, medium, large로 커버되던 버튼에 정사각형 버전이 추가되고, 접고 펼 수 있는 카드가 2개 이상 생성되는 등)

 

이러한 각각의 스타일이 여러 곳에서 사용된다면, 여러분은 어떤 기준으로 공통 컴포넌트를 제작하시나요?

 

카드 토글 컴포넌트 만들기

버튼은 사수님이 수정하시기로 해서, 저는 접고 펼 수 있는 공통 카드 토글 컴포넌트를 구현하기로 했습니다!

제가 어떤 순서로 구현했는지 설명드릴게요.

 

1. 어디에 어떻게 흩어져 있는지 파악

3개 페이지, 3개 스타일

 

2. 얼마나 다른지 파악

대시보드 페이지 - MyDocuCard

특이사항 : border 테두리 없음, 제목 하단 borderBottom 없음 (수평 배치), 전체를 감싸는 borderLeft 있음

 

사건조회 페이지 - MyDocuCard

특이사항 : border 테두리 있음, 제목 하단 borderBottom 있음 (수직 배치)

 

사건보정 페이지 - ?Card

특이사항: border 테두리 있음, 제목 하단 borderBottom 없음 (아이콘, 토글 제목 바로 옆 배치), 제목 옆 제출 버튼(토글 열면 콘텐츠 하단으로 이동)

 

3. 최소 공통 부분 추출 후 스토리북으로 초안 확인

열고 닫는 기능, 제목과 콘텐츠 부분, (border optional)

 

일단 여기까지 만들었는데 ..

 

느낀 점

퍼블리싱을 몰아서 하다 보니까 거의 외운 것처럼 반복해서 작성한 코드들이 있었는데,

공통 컴포넌트로 분리하면서 가독성도 훨씬 좋아지고

추후 API 붙을 때 바로 적용할 수 있도록 더미데이터 분리, map 적용 등의

작업도 함께 할 수 있어서 작업 속도 개선에도 한 몫 했다고 생각합니다!

 

아직 하는 중이라 완료되면 글을 수정하도록 하겠습니다 ~~