[MyCodeTrip]Reservation - UserInfo validation

이름·2022년 1월 11일
0

SecondProject

목록 보기
2/2

두 번째 프로젝트이니 만큼 매일매일 기록을 남겨봅시다. 2일차.

Reservation

이번 프로젝트에서 저는 reservation page를 맡았는데, 약 3개+ 5n개의 input을 유저가 형식에 맞춰 작성하도록 한 후, input 내용과 이전 페이지에서 건내받은 data를 기준으로 boarding pass까지 보여주기가 목표입니다.(n은 승객의 숫자)

page layout은 다음과 같습니다.

굉장한 필기체!

layout에 맞게 컴포넌트를 쪼개줍니다. 저는 UserInfo 안에 3개의 input에는 Booker에 대한 정보를 담고, 그 밑에 PassengerInfo가 안겨있는 형태로 짰습니다.
블로그를 쓰면서 생각해보건데, 이런 불필요한 component의 depth가 생기는 것이 좋을까? 라는 의문이 드네요.

1. userInfo

먼저 fetch로 불러올 데이터나 다른 사람과 공유하는 component는 제외하고 UserInfo conponent부터 작업하기 시작했습니다.

UserInfo conponent는 3개의 input을 받으며, 각각 예약자 이름, 이메일 주소, 전화번호를 기록합니다.
만약 API에서 불러올 수 있다면(소셜로그인이라 어디까지 불러올 수 있는지 잘 모르겠으므로) user의 정보를 defaultValue로 불러올 수 있지 않을까? 라는 작은 목표를 가지고 접근했습니다.

먼저 name, email, phoneNumber는 state로 관리합니다.
각각의 validation 조건에 따라 validation hint display를 조절합니다. <-Today I did!

현재 문제상황 : input 창에 type을 text로 해서 phone number를 입력받고 싶었는데, (이유 1. browser마다 다른 ui 안가져옴. 이유 2. maxlength 통제가능) value에서 text 제거하고 숫자 부분만 state에 저장하기는 가능하지만 input value창 자체에 number만 입력하도록 하지는 못하고 있습니다.
해당 컴포넌트의 목표 : UserInfo component에서 hint display여부를 조사해서 notice display 통제 가능한지 확인 -> 안되면 다시 validation condition으로 notice display 통제

0개의 댓글