[우테코 FE 6기] 레벨2 미션1, 2 페이먼츠 미션 회고 💳

내가 만든 카드.. ~

 

 

매우 늦었지만 이제라도 작성해 보는 페이먼츠 미션 회고이다.

 

레벨 2부터는 하나하나의 미션이 이전 미션과 연결성이 적었던 레벨 1과 달리 미션들이 두 개씩 묶여 이전의 미션을 더 업그레이드하거나 이전 프로젝트에 추가될 수 있는 기능에 대해서 작업하게 되었다.

 

그래서 레벨 2의 첫번째 미션(1 ~ 2주 차) 은 카드 모듈로, 사용자가 입력한 카드 정보로 카드 모듈을 만드는 미션이었고
두 번째 미션(3 ~4주 차)은 모달 라이브러리와 커스텀 훅 배포로 해당 모듈에서 사용했던 커스텀 훅들을 더 자잘하게 분리하고, 공용 모달 컴포넌트를 만들어서 라이브러리로 배포하는 미션이었다.

 

---

 

첫 번째 미션이었던 카드 모듈 미션에서의 학습 목표는

 

✔️ 재사용 가능한 인풋 컴포넌트 개발

✔️ 스토리북 사용

✔️ 그리고 효과적으로 카드 정보를 관리하는 상태 관리

 

를 경험하는 것이었다.

---

 

재사용 가능한 인풋 컴포넌트 개발

 

 

재사용 가능한 인풋 컴포넌트를 만들기 정말 많은 고생을 했던 거 같다.

 

다른 크루들을 보면 이름, 카드 넘버 등의 입력 필드는 따로 만들고 그곳에서 사용하는 재사용 가능한 입력 컴포넌트를 만들었다면 우리는 입력 컴포넌트부터 입력 필드까지 모두 재사용할 수 있도록 만들었었다.

 

사용할 입력 형태에 따른 정보를 객체로 정의하고 이를 사용하는 방식으로 예를 들어 입력 폼에서 이런 식으로 재사용된 입력 필드들을 가지고 있는 것이다.

 

      <InputField
        title="카드 유효기간을 입력해 주세요"
        subtitle="월/년도(MMYY)를 순서대로 입력해 주세요."
        inputTypes={INPUT_TYPE_CATEGORIES.EXPIRY_DATE}
        handleInput={handleExpiryDateInput}
      />
      <InputField
        title="카드 소유자 이름을 입력해 주세요"
        inputTypes={INPUT_TYPE_CATEGORIES.USER_NAME}
        handleInput={handleUserNameInput}
      />

 

 

그 뒤 InputField 내에서 재사용 가능한 input 컴포넌트를 입력 정보로 받은 만큼 map을 사용해 호출해 주었다.

<InputBox>
	{inputTypes.inputInfo.map((info: InputInfo, index: number) => (
		<Input
			info={info}
      handleInput={(value) => handleUpdateInput(index, value)}
      isError={!!errorMessages[index]}
      handleErrorMessage={(errorMessage) =>
       handleUpdateErrorMessages(index, errorMessage)
      }
   />
 ))}
</InputBox>

 

 

이렇게 사용하니 인풋 컴포넌트와 인풋 필드 컴포넌트 모두 재사용할 수 있게 되어서 재사용 딴에는 성공적인 거 같아 보였다.

 

물론 이때의 코드도 마음에 들었다.

필드 자체가 재사용 가능하다 보니 어떤 필드가 추가되어서 새로운 코드 파일을 추가하지 않아도 폼 내부에서 필드만 하나 더 추가하면 되게 되었다.

 

 

그래서 step2 가 원만히 흘러갈 줄 알았는데..

 

커스텀 훅이 나의 발목을 붙잡았다. 그리고 동적 입력까지..

 

 

커스텀 훅과 관련된 나의 고민과 해결 과정은 나의 테코톡에 거의 다 담겨있다 보니 링크만 남기고 스킵하도록 하겠다.

 

헤일리의 테코톡 회고록 바로가기

 

 

---

 

스토리북 사용

 

그리고 또 스토리북 사용에 도전해 보았다.

@storybook/cli - Storybook

 

 

스토리북은 사실 들어보기만 하고 사용해 본 적이 없었다. ((거의 모든 테스트 관련 정보들이 그렇다…

 

사실 작성하면서도 이게 왜 테스트이지…? 그냥 컴포넌트 모음집 아닌가라는 생각이 강했는데 컴포넌트를 문서화 함으로써 내가 아닌 다른 기획자, 디자이너가 이를 보고 즉각적으로 피드백을 해줄 수 있다는 관점에서 테스트가 된다고 이해하게 되었다.

 

사실 생각해 보면 대부분 디자이너분들이 내 작업물에 대해 피드백해주시려면 내가 페이지 작업을 거의 완성한 후 배포를 진행해야만 확인할 수 있었는데 이렇게 스토리북을 따로 배포해서 전달하면 UI 적인 피드백을 더 쉽게 받을 수 있을 거 같다.

 

앞으로도 스토리북을 프로젝트를 진행할 때 사용해보고 싶다.

 

---

 

합성 컴포넌트를 활용한 모달 컴포넌트 제작

 

2번째 미션은 모달 컴포넌트와 커스텀 훅을 제작한 후 라이브러리로 배포하는 것이었다.

 

처음 모달 컴포넌트를 제작할 때는 일반적으로 컴포넌트를 만들 때처럼 props로 옵션들을 전달받아 해당 옵션에 따른 모달의 모습을 그려줬다.

 

그런데 그러다 보니 props 가 점점 많아지게 되고 어디까지 우리가 옵션을 제공해야 할지 고민이 생기기 시작했다.

예를 들어 닫기 기능에 대해서 사용자는 이를 닫기 버튼으로 사용하고 싶을 수도 있고 버튼 없이 모달 상단에 X 아이콘 버튼 으로 사용해주고 싶을 수도 있다. 혹은 두 개 사용할수도, 두개 다 사용하고 싶지 않을 수도 있었다.

 

`닫기 기능` 하나뿐만 아니라 이제 확인 버튼 혹은 콘텐츠의 위치, 더 나아가 버튼의 위치, 크기까지 고려하려고 생각하다 보니 props 가 점점 많아졌다.

 

// 중간 과정이었던 처음의 모달 props
export default function Modal({
  position,
  title,
  children,
  content,
  isOpen,
  onConfirm,
  onClose,
}: ModalProps) {

 

 

 

이에 대해 크루들과 이야기하다가 합성 컴포넌트에 대해 이야기가 나왔고 이를 적용해 보기로 했다.

 

적용 과정에서 카카오 기술 블로그에 합성 컴포넌트 관련 글을 읽게 되었는데 우리가 거쳐온 과정과 거의 동일해서 글을 읽고 그 기술을 얼른 습득했다.

 

합성 컴포넌트로 재사용성 극대화하기 | 카카오엔터테인먼트 FE 기술블로그

 

 

이미 거의 다 만들어놓은 컴포넌트였기 때문에 합성 컴포넌트로 변환하는 건 어렵지 않았다.

그리고 이후에 합성 컴포넌트로 바꾼 걸 매우 매우 잘했다고 생각했다. (이후 미션에서도 사용했어야 했음)

 

---

 

모달 & 카드 커스텀 훅 라이브러리 배포 

 

- 모달 라이브러리

styled-base-modal

 

- 카드 커스텀 훅 라이브러리 

use-card-input-hook

 

 

이렇게 잘 만든 모달 컴포넌트와 잘게 분리하여 만든 커스텀 훅을 이제 라이브러리로 만들어서 배포해 보았다.

 

배포 자체는 어렵지 않았으나, 뿌듯함은 말로 할 수 없었습니다. 항상 내가 다운만 받던 라이브러리를 배포하다니!

뿌듯하고, 또 이유를 모르겠지만 400명 넘게 내 라이브러리를 다운로드하여가서 더 신기했던 거 같다.

 

---

 

이렇게 페이먼츠 미션이 끝났다.

 

테코톡 준비에 미션까지 하느라 정말 정신없이 지나간 미션들이었던 거 같다.

벌써 한 달이 지났다니 시간이 참 빠르다.