1주차 두번째 과제 - admin 상품등록 페이지 만들기

첫째주가 순식간에 지나갔습니다.

비교적 간단했던 첫번째 과제에 비해 두번째 과제가 공개되고 저는 너무 많은 양과 난이도에 크게 당황했었습니다.

목요일에 나오는 과제가 제출 기한이 왜 토요일 오후 5시까지인지 깨닫게 되는 과제 였습니다.

과제는 admin 페이지에서 상품을 등록하는 페이지를 구현하는 것이였습니다.

 

구현해야하는 기능

- 캘린더를 이용한 기간설정
- 체크박스를 이용한 카테고리 설정
- 태그 검색 기능
- 이미지 첨부 기능
- 상품 옵션 추가 ( + 기본옵션 추가 + 추가옵션 추가 ... )
- 상태 전역 관리
- 유효성 검사

 

 

아주 간단하게만 정리했을 때 이러한 기능들을 구현해야 했습니다. (자세히 적으면 너무 많은 구현목록들...)

 

이 중에서 제가 맡은 파트는 카테고리, 태그 검색, 유효성 검사 파트였습니다.

 

 

🔴 카테고리 체크박스

카테고리는 체크박스에 체크하면 오른쪽에 선택한 카테고리가 나오는 형식이었습니다.

오른쪽 목록에서 지웠을 때 체크박스도 같이 해제됩니다.

🟡 태그 검색 기능

카테고리는 금방 구현했지만, 그 중에 검색기능은 구현해본적 없어 검색 라이브러리를 찾아야하나 했었는데 팀원분이 비슷한 기능을 구현한 적이 있다고하여 래퍼런스를 받아 라이브러리 없이 구현할 수 있었습니다.

filter 메서드를 이용한 검색 함수

input에 입력하면 아래에 검색결과가 실시간으로 나옵니다

🟢 Context API

여태 프로젝트를 진행할때 데이터를 굳이 전역으로 관리해야할 필요성을 못느껴서 전역 상태관리를 해본적이 없었습니다. 하지만 이번 프로젝트는 많은 컴포넌트로 나누어진 상태에서 모든 데이터를 모아 유효성을 체크하고 저장까지 해야했기 때문에 전역관리가 필수적이였습니다. ( 단순히 객체 useState 상태로 관리해야하나 생각도 했지만 그냥 생각했을 때도 뭔가 잘못된 느낌일거 같았습니다... )

다행히 팀원분 중 한분이 Context API 초기 세팅을 진행해주시고, 어떻게 사용하는지에 대해 설명을 해주셨습니다. 문법은 생소했지만 프로젝트에 바로 적용하니 금새 익숙해졌습니다.

 

내가 맡은 information data 부분

기존에는 하나의 Context 에 모든 값을 다 저장하려고 했지만 그러기엔 목록이 엄청 길어질것 같아 파트별로 나누게 되었습니다.

 

🔵 유효성 검사

여기서 진행한 유효성 검사는 과제에서 요구하는 필수 항목이 채워져 있는지 체크하고 그 값이 채워져 있다면 사용자에게 콘솔이나 alret 으로 보여주기 위한 유효성 검사였습니다. 필수항목을 체크하는 부분은 단순히 input 이 채워져있는지, 상태값이 null이 아니거나 length 가 0이 아닌지만 체크하면 될거라 생각했지만, 역시나 어려운 부분이 존재하였습니다.

 

다른 팀원분이 구현한 옵션 기능

옵션 기능의 유효성 체크가 조금 복잡했었는데 옵션은 원하는만큼 추가할 수 있고, 그 옵션 내에 옵션을 추가할수 있고, 또 그 옵션내에서 추가옵션 상품을 추가할 수 있었습니다.(3중구조) 사용자가 어느 옵션을 얼마나 추가할지 모르기 때문에 그때그때마다 사이즈를 계산하여 3중 반복문을 통하여 값을 가져오게 하였습니다.

(나중에 출력할때도 역시 3중 for문으로..)

 

처음 짠 로직이 바로 어긋나는 부분 없이 돌아가서 다행이였습니다.

 

🟣 후기

목,금,토 진행하며 금요일은 점심부터 다음날 새벽 7시까지 진행할 정도로 과제에 몰두했었습니다. 처음에 과제를 받고 느꼈던 어마어마한 양을 생각했지만 막상 팀원들과 디스코드, 라이브쉐어 등을 이용하여 협업을 진행하니 수월하게 과제를 마칠 수 있었던것 같습니다.

아주 조금 아쉬운 부분이라면 막판에 시간 계산이 잘 안되어 마감시간에 빠듯하게 과제를 제출해야 했었는데 이 이후 과제에서는 이슈관리를 바로 하여 체계적인 협업이 될 수 있도록 진행해보고 싶다는 생각을 했습니다. 그리고 이제 첫주차이기 때문에 앞으로의 팀과제가 얼마나 더 손발이 맞게 될 지도 기대가 되었습니다.

 

- GitHub

https://github.com/som-syom/Week1_Product_Registration

GitHub - som-syom/Week1_Product_Registration: 원티드 프론트엔드 프리온보딩 2기 두번째 과제인 상품 등록

- 배포 링크

https://infallible-edison-a64509.netlify.app/

설로인 상품 등록 페이지