[구현 능력 강화 Project] react-card-payment

Darlene·2021년 11월 5일

TIL 요구사항분석

TIL

목록 보기

7/10

👊 구현 능력 강화 프로젝트

💻 react-card-payment

목표

🎯 첫 번째 - 요구사항 분석

🎯 두 번째 - 요구사항 구현을 위한 전략 세우기

🎯 첫 번째 - 요구사항 분석

사용자 시나리오 형태로 작성
예시) ooo하면 ~ 한다.

요구사항 1. 카드 추가 화면

추가(+) 버튼을 클릭하면 카드 정보 등록 화면으로 이동한다.

보유카드가 존재하면 화면에서 확인할 수 있다.

- 카드 등록은 최대 5개까지 등록 가능합니다.
- 보유카드 이름 오름차순으로 보여진다.

요구사항 2. 카드 정보 등록 화면 & 카드 컬러 등록 화면

카드 정보를 입력하면 카드 정보를 등록할 수 있다.

2-1. 카드 번호 입력 폼
- 카드 번호 입력폼은 4개의 input으로 구성되어 있습니다.
- 입력값은 4자리 숫자 형태로 입력할 수 있습니다.
- placeholder는 0000 으로 보여집니다.
- 1번, 2번 input에 입력값을 입력하면 입력폼 & 카드에 입력한 카드번호(숫자)가 보여집니다.
- 3번, 4번 input에 입력값을 입력하면 입력폼 & 카드에 *(비밀번호) 형태로 보여집니다.

2-2. 만료일 입력 폼
- 만료일 입력폼은 2개의 input으로 구성되어 있습니다.
- 입력값은 2자리 숫자 형태로 입력할 수 있습니다.
- 1번 input의 placeholder는 "MM" 으로 보여집니다.
- 2번 input의 placeholder는 "YY" 으로 보여집니다.
- 1번, 2번에 입력값을 입력하면 입력폼 & 카드에 입력한 만료일(월/년)이 보여집니다.

2-3. 카드 소유자 이름(영문) 입력 폼
- 카드 소유자 이름 입력폼의 입력할 수 있는 글자 수는 30으로 제한되어 있습니다.
- placeholder는 "카드에 표시된 이름과 동일하게 입력하세요"라고 쓰여 있습니다.
- 입력값을 영문으로로 입력할 수 있으며, 소문자와 대문자 구분없이 영문자 형태로 입력하면 대문자로 입력폼과 카드에 보여집니다.
- 입력값을 입력하면 입력값의 글자 수가 자동으로 계산되어 보여집니다.

2-4. 보안코드(CVC/CVV) 입력 폼
- 보안코드 입력폼에 3자리 숫자형태로 입력할 수 있습니다.
- 보안코드를 입력하면 입력폼에 *(비밀번호) 형태로 보여집니다.
- 물음표 버튼을 클릭하면 CVC/CVV에 대한 안내 문구를 확인할 수 있습니다.
   - 안내 문구: 카드 뒷면 끝번호 3자리

2-5. 카드 비밀번호 입력 폼
- 카드 비밀번호 입력폼은 4개의 input으로 구성되어 있습니다.
- 카드 비밀번호 앞자리 두 자리를 1번, 2번 input에 숫자 형태로 입력할 수 있습니다. 
- 카드 비밀번호 뒷자리 두 자리는 . . 으로 보여집니다.
- 카드 비밀번호 앞자리 두 자리를 입력하면  입력폼에 *(비밀번호) 형태로 보여집니다.

색상 선택 버튼을 클릭하면 카드 색상을 변경할 수 있는 화면을 확인할 수 있다.
```
- 하단에 카드 색상 모달창이 보여집니다.
- 8개의 색상을 확인할 수 있습니다.
```
카드 색상을 선택하면 선택한 색상으로 카드 색상이 변경된 것을 확인할 수 있다.

모든 내용을 입력하고 "다음" 버튼을 클릭하면 카드 이름 등록 화면으로 이동할 수 있다.

- 카드 번호 입력 폼의 입력값이 없을 경우 "다음" 버튼을 클릭하면 "카드번호를 입력해주세요" 라는 알림창이 보여집니다.
- 만료일 입력 폼의 입력값이 없을 경우 "다음" 버튼을 클릭하면 "만료일을 입력해주세요" 라는 알림창이 보여집니다.
- 카드 소유자 이름(영문) 입력 폼의 입력값이 없을 경우 "다음" 버튼을 클릭하면 "카드 소유자 이름을 입력해주세요" 라는 알림창이 보여집니다.
- 보안코드 입력 폼의 입력값이 없을 경우 "다음" 버튼을 클릭하면 "보안코드를 입력해주세요" 라는 알림창이 보여집니다.
- 카드 비밀번호 입력 폼의 입력값이 없을 경우 "다음" 버튼을 클릭하면 "카드 비밀번호를 입력해주세요" 라는 알림창이 보여집니다.

요구사항 3. 카드 이름 등록 화면

카드 등록이 완료되면 등록한 카드의 정보를 확인할 수 있다.

카드 이름을 입력하고 "완료" 버튼을 클릭하면 카드 추가를 할 수 있다.

- placeholder는 "카드 이름을 입력해주세요." 으로 보여집니다.
- 완료 버튼을 클릭하고 나면 카드 정보 등록 입력폼 및 카드 색상이 초기화되어집니다.

회고

이전에 나는 기능 개발, 코드 구현을 할 때 '요구사항 분석' 및 '요구사항에 대한 전략'을 세우긴 하였지만 상세하게 세우지 않은 상태에서 바로 코드부터 작성했던 것 같다.

머릿 속에서 논리는 그려지는데 한글로 논리를 옮겨 적는 것이 어렵기도 했었다. 이런 맥락으로 봤을 때 테스트 코드가 요구사항 분석에 대한 상세 명세서였던 것이다.

어쨌든 나에게 부족한 부분은 무엇인가 라는 물음표를 던졌을 때 코드 작성에 가장 중요한 부분은 요구사항 분석이라고 생각한다.

이렇게 요구사항 분석을 통해 그 다음 단계는 어떻게 이루어져야 하는가, 몇 가지의 예외 경우는 무엇인지에 대한 상세한 분석이 필요하고 연습이 필요하다고 생각한다.

왜냐면 지금 나는 아주 조금 성장하였다고 생각한다.
몇 가지의 기능 구현을 접하면서 내가 놓쳤던 예외 사항 처리에 대한 경험들이 쌓이면서 하나씩 눈에 보이기 때문이다. (아직 부족한 점도 있겠지만..) 앞으로 더 많은 input을 통해 더 넓은 시야를 확보하기 위해 차근차근 연습해보자!