[1단계 - 페이먼츠 미션] 파노(전환오) 미션 제출합니다.

[jho2301]

안녕하세요 Vallista님 !

썬 @SunYoungKwon 과 페이먼츠 미션 진행한 파노 @jho2301 입니다.

리액트 많이 어렵네요..ㅠㅠ

리뷰 잘 부탁드립니다

요구사항

공통

• Storybook 상호 작용 테스트

카드 등록

• 카드 정보 입력시 카드이미지에 실시간으로 반영한다.

• 카드번호 8자리를 입력하면, 해당 카드가 어느 회사의 카드인지 카드 이미지에 나타난다.

  • 카드사와 매칭되지 않는 카드번호 입력시, 사용자가 카드사를 직접 선택한다.

• 카드번호 뒤 8자리는 숨김처리한다.

• 소유자 이름은 30자를 넘어갈 수 없다.

• 소유자 이름 입력 시 입력된 값의 길이를 표시한다.

• 보안코드는 숨김처리한다.

• 카드 비밀번호 앞 두 자리는 숨김처리한다.

• 카드 소유자 이름 입력 시, 소문자는 자동으로 대문자로 변환한다.

• 카드 정보 입력창 의도한 입력 외에는 입력을 받지 않는다.

  • 카드 번호: 숫자만 입력할 수 있다, 한 칸당 4자리까지 입력할 수 있다.
  • 만료일: 숫자만 입력할 수 있다. 한 칸당 2자리까지 입력할 수 있다. 월에 유효범위를 벗어나는 값을 입력할 수 없다.
  • 카드 소유자 이름: 영문만 입력할 수 있다. 30자까지 입력할 수 있다.
  • 보안 코드: 숫자만 입력할 수 있다. 3자리까지 입력할 수 있다.
  • 비밀번호: 숫자만 입력할 수 있다. 각 칸당 한 자리까지 입력할 수 있다.

• 만료일 입력창에 한 자리만 입력하고, focus blur시 나머지 한 자리를 0으로 채워준다.

데모

storybook

gh-pages

• 카드번호 8번째 자리를 입력할 때, 입력 숫자가 8, 9일시 카드사를 수동으로 선택하는 모달이 나옵니다. dimmed영역 터치하여 모달에서빠져나올 수 있는데, 카드사를 찾지 않고 다시 등록 시도시에 카드사 선택 모달을 다시 띄웁니다.
• 모바일향 웹앱으로 가로길이 375px 디스플레이의 모바일 기기 대응에 목표를 두고 과제를 구현했습니다.
• 폼 입력을 모두 받아 submit하면 유효성검사하는 지점까지 과제 진행했습니다.
• step2에서 카드저장 + 카드 리스트 구현하겠습니다.

웹 VSCode 환경

https://github.surf/jho2301/react-payments/tree/step1

디렉토리 구조

src/
├── App.tsx
├── components
│   ├── AddCard
│   │   ├── AddCardForm
│   │   │   ├── AddCadForm.stories.js
│   │   │   ├── AddCardInputLabel
│   │   │   │   ├── AddCardInputLabel.stories.js
│   │   │   │   ├── index.tsx
│   │   │   │   └── styles.ts
│   │   │   ├── index.tsx
│   │   │   ├── styles.tsx
│   │   │   └── validator.ts
│   │   ├── AddCardTemplate
│   │   │   └── index.tsx
│   │   ├── CardBrandModal
│   │   │   ├── CardBrandModal.stories.js
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   └── NicknameModal
│   │       ├── NicknameModal.stories.js
│   │       ├── index.tsx
│   │       └── styles.ts
│   ├── CardList
│   │   ├── AddCardButton
│   │   │   ├── AddCardButton.stories.js
│   │   │   ├── index.tsx
│   │   │   └── styles.ts
│   │   ├── index.tsx
│   │   └── styles.ts
│   └── common
│       ├── Button
│       │   ├── Button.stories.js
│       │   ├── IconButton.stories.js
│       │   └── index.tsx
│       ├── Container
│       │   ├── Container.stories.js
│       │   └── index.tsx
│       ├── CreditCard
│       │   ├── CreditCard.stories.js
│       │   ├── index.tsx
│       │   └── styles.ts
│       ├── Input
│       │   ├── Input.stories.js
│       │   └── index.tsx
│       ├── Modal
│       │   ├── Modal.stories.js
│       │   └── index.tsx
│       └── Template
│           ├── Template.stories.js
│           └── index.tsx
├── constants
│   ├── addCardForm.ts
│   ├── cardData.ts
│   ├── creditCard.ts
│   ├── i18n.ts
│   ├── messages.ts
│   └── palette.ts
├── global.styles.ts
├── index.tsx
├── pages
│   ├── AddCardPage
│   │   ├── AddCardPage.stories.js
│   │   └── index.tsx
│   └── CardListPage
│       ├── CardListPage.stories.js
│       └── index.tsx
├── react-app-env.d.ts
├── types.ts
└── utils
    ├── format.ts
    └── validator.ts

중점적으로 리뷰받고 싶은 부분.

1. 디렉토리 구조 구성하는데 의문이 들었습니다. 특정 컴포넌트만 사용하는 자식 컴포넌트는 부모 컴포넌트의 디렉토리 안에 포함시켜주었는데, 뎁스가 깊어지는 것이 단점, 디렉토리구조가 직관적으로 구성되는 것이 장점 같습니다. 뎁스를 줄이는 것이 나을까요? 해당 부분 조언 듣고 싶습니다.
2. TS 배우면서 사용해봤습니다. 타입 구성하는데 많이 애를 먹었습니다. 잘 사용하고 있는지도 의문입니다 ㅎㅎ; 피드백 많이 받고 싶습니다.
3. 스타일드컴포넌츠로 컴포넌트 구성하는데 MUI 참고해서 props로 스타일을 조작하려고 했습니다. 미숙한 부분 피드백 받고싶습니다.
4. 스토리북을 사용해봤습니다. 컴포넌트를 만들어서 스타일 잡고, 페이지도 스토리 파일로 만들어서 과제 진행해봤습니다. 사용하면서 개발서버를 몇 번 실행 안 했을 정도로 편하게 구현할 수 있었습니다. 궁금한 점은 여기서 더 어떻게 활용할 수 있을지 의문이 듭니다. 현업에서는 어떻게 활용하는지 궁금합니다.

[jho2301]

원래의 생각보다 고민하고, 고칠부분이 많아서 하루 늦었습니다. 죄송합니다

1. children을 명시적으로 타이핑하고, FC/VFC를 사용해봤습니다. JBee님이 올려주신 CRA PR 과 다른 아티클도 찾아보면서 FC타입의 장단점에 대해 파악해보고, 고민을 해봤는데 children에 대한 제어를 할 수 있다면 FC가 갖는 가장 큰 단점이 제거되는 것으로 생각했습니다. 버그를 컴파일타임에 잡아내는 것이 타입스크립트의 큰 장점인 만큼, Vallista님의 의견에 동의해서 실수를 방지하기 위해 변수타입을 지정해보았습니다.

2. 리뷰를 반영해서 form 상태를 하나의 객체로 만들었습니다. 가독성이 상승한 반면, 단일 프로퍼티를 수정하는 상황만 존재해서 각 프로퍼티를 변경하는 setState함수를 추상화해 만들어 주었습니다. 하나의 프로퍼티가 변경될 때마다 새로운 객체를 계속 생성해주는 부분도 걸립니다. 이 부분은 트레이드오프로 생각하면 좋은 부분일까요?

[Vallista]

안녕하세요 파노님!
당연히 죄송할 필요 없습니다 ㅠㅠ 고민하신 것 충분히 알고 있고, 코드 잘 보았습니다!

위에 말씀해주신 부분은 trade-off긴 합니다. 다만 추후 context api 형태로 옮기거나 store를 만든다면 요러한 부분은 어느정도 해소가 될 부분일 것 입니다!

[Vallista]

안녕하세요 파노님!
당연히 죄송할 필요 없습니다 ㅠㅠ 고민하신 것 충분히 알고 있고, 코드 잘 보았습니다!

위에 말씀해주신 부분은 trade-off긴 합니다. 다만 추후 context api 형태로 옮기거나 store를 만든다면 요러한 부분은 어느정도 해소가 될 부분일 것 입니다!

[Vallista]

전반적으로 잘 피드백을 적용해주셔서 좋고, 다음 미션 Context API에서 적용해보면서 기존 부분과 비교를 해보면 좋겠습니다!