1주 차 두 번째 과제(22.01.27 ~ 22.01.29) TIL

프리온 보딩에서는 과제마다 각 기업이 요구하는 기술을 바탕으로 과제를 진행하는 방식입니다.

 

두 번째 과제 어드민 페이지 만들기

회사의 상품들을 관리할 수 있는 어드민 페이지 만드는 것이 과제였습니다

 

배포 깃 허브 링크 

https://github.com/Gilpop8663/02_adminPage

GitHub - Gilpop8663/02_adminPage: 원티드 프리온보딩 2기 14팀 어드민 페이지 프로젝트입니다

 

어드민 페이지

 

기능 구현 (맡았던 부분)

 

카테고리 지정

• 체크박스를 통해 해당 상품에 카테고리를 지정할 수 있어야 하며 체크박스 지정 해제 또는 선택된 카테고리의 X 버튼을 통해 지정을 해제할 수 있음

필터 태그 지정

• 필터 태그 검색창 포커스 시 필터 태그에 등록되어 있는 모든 태그가 제공됨.
• 필터 태그 검색 시 데이터 텍스트 일치 값 순으로 검색 결과 제공하며 검색 결과가 없는 경우에는 '검색 결과 없음'으로 보여줌
• 검색한 필터 태그 TAP 시, 해당 필터 태그 지정되며 이미 지정되어 있는 태그를 선택 시 중복으로 추가되지 않고 기존의 태그를 유지
• 지정된 태그는 검색창 아래에 표시되며 태그의 X 버튼을 통해서 지정 해제할 수 있음

상품 썸네일 이미지 업로드

• 이미지를 업로드할 수 있는 버튼(섬네일의 경우 최대 1개까지 업로드 가능)

상품명, 상품 구성 입력

• 상품의 상품명, 구성을 설명하는 텍스트를 입력하는 영역

상품 배송 설정 

• 주문 시간을 선택하면 선택한 날짜부터 새벽 배송 및 일반 배송일 설정 가능 (그 전 날짜는 불가능)

 

재사용성을 고려한 컴포넌트 분리

• 페이지 구성에 필요한 공통 기능들을 컴포넌트로 분리해 작업함으로써 불필요하게 반복되는 코드들을 줄이기 위한 목적

 

 

정리 및 회고

새로 알게 된 점

• 이번에 작업하기 전에 요구사항 기능에 같은 종류의 인풋 방식들이 보여서 페이지 구성에 필요한 공통 기능들을 컴포넌트로 분리해 작업함으로써 불필요하게 반복되는 코드들을 줄여보고자 하였었습니다.

힘들었던 점 / 해결과 극복 방법

• 카테고리에서 필터를 지정하고 취소할 때 옆의 체크박스에서도 체크가 풀려야 하는데 그것을 state 값으로 지정해서 boolean값으로 하는 것을 처음 해보았는데 어려웠지만 팀원들에게도 물어보고 계속 코드를 시도해보아서 해결했습니다.

 

• 필터 태그의 검색 기능을 만들 때 어떤 방식으로 로직을 짜야할지 고민이 되었었는데 팀원들에게 작업 화면을 공유하면서 물어보아서 includes로 글자가 포함되어 있는지를 통해 검색 기능을 구현하였습니다.

 

• 이렇게 많은 양의 코드를 취합해서 배포하는 일이 처음 있었는데 깃에서 풀 받고 나서 충돌이 많이 났었습니다. 그래서 앞으로는 PR 하는 것을 팀원들에게 말하고 머지한다고 말해야 한다고 느꼈고 팀원들과 이 부분에 대해서 합의하였습니다.

 

• 공통으로 사용할 모듈화 작업을 처음 해보았는데 처음 시작부터 미리 만들고 가자고 팀에서 이야기가 나와서 컴포넌트에서 prop 들을 받아서 이용할 수 있게 미리 만들었습니다. 처음 해보는 방식의 작업이라 어떻게 만들어 놓아야 할지 몰랐었는데 잘 아시는 팀원분이 팀분들에게 설명해주어서 만드는데 도움이 되었습니다.