이번 과제는 고기 관련 커머스에 노출되는 상품의 신규 등록 또는 수정하는 영역으로
상품 등록의 전체적인 페이지를 구현했다.
처음 PDF 파일을 받아 과제를 확인했을 때는 범위가 넓고 요구사항이 많아 보였는데 4명이 함께
업무 범위를 나누고 난이도를 정해서 균등하게 분배하고 나니 생각은 바뀌었다.
이번에는 2명씩 페어 프로그래밍이 아닌, 4명 모두가 함께 초기 세팅을 하고 컨벤션을 정한 뒤,
폴더 구조를 맞춰 진행하는 조금 더 업그레이드된 협업을 경험하게 되었다.
- 상품 노출 및 판매기간 설정 / 상품 카테고리 / 상품 배송 및 기타 설정
<InputBox> <Input type="radio" name="exposure" value="0" defaultChecked /> <Label>제한없음</Label> </InputBox>
하지만 계획을 세우고 코드를 작성하는 과정에서 첫 번째 에러를 만나게 되었다.
input 태그 안에 제한 없음이라는 텍스트를 넣으려고 했는데
Error: input is a void element tag and must neither have
children
nor use..
위와 같은 에러를 발견해서 구글링을 통해 새로운 지식을 습득하게 되었다.
내가 마주한 에러는 styled-component 사용 시 발생하는 문제로,
input 등과 같이 자식을 가질 수 없는 태그에 자식을 넣었을 때 발생하는 에러라고 한다.
이에 따른 해결책으로 input 태그 안에 값을 제거해 주고 그 밑에 label을 통해서 원하는 구조를 만들었다.
const checkedCategory = id => { // checkedList state 값 활용 if (checkedList.indexOf(id) < 0) { // 체크한 카테고리 id 값 확인 setCheckedList(checkedList => [...checkedList, id]); } else { // 체크해제 확인을 위한 filter 활용 setCheckedList(checkedList.filter(checkedList => checkedList !== id)); } };
카테고리를 체크했을 때 id 값을 확인하여 넣고, 지워주는 역할의 함수이다.
좌측 체크박스 클릭 카테고리 const ChoiceCategory = category.map(item => ( <Check key={item.id}> <Input type="checkbox" checked={checkedList.indexOf(item.id) < 0 ? false : true} onClick={() => checkedCategory(item.id)} readOnly /> <Label>{item.name}</Label> </Check> ));
우측 체크 확인 카테고리 const upLoadCategory = checkedList.length === 0 ? ( <ShowCategory>카테고리를 지정해 주세요</ShowCategory> ) : ( category.map( item => checkedList.indexOf(item.id) >= 0 && ( <SelectBox key={item.id} value={item.id}> {item.name} <CrossIcon onClick={() => checkedCategory(item.id)} /> </SelectBox> ) ) );
상품 배송 박스에서는 '사용자 배송일 출발일 지정'과 '방문 수령'이 활성화 시 밑에 위치한 '선 주문 예약 배송' 이 비활성화되어야 하며, 그 반대의 경우 또한 구현되어야 했다.
ToggleSwitch 와 DateTimePicker는 MUI 라이브러리를 사용하였고 그 안에 함수를 적용하여 요구사항을 구현했다.
const [checkToggle1, setcheckToggle1] = useState(false); const [checkToggle2, setcheckToggle2] = useState(false); const [checkToggle3, setcheckToggle3] = useState(false);
const handleChange = e => { // 1,2번 토글의 자율성 + 3번 토글 비활성화 if (e.target.id === 'firstToggle') { setcheckToggle1(el => !el); } else { setcheckToggle2(el => !el); } setcheckToggle3(false); };
const toggleChange = () => { // 위의 반대 경우 3번 활성화 시 1,2번 비활성화 setcheckToggle1(false); setcheckToggle2(false); setcheckToggle3(el => !el); };
작년 기업 인턴십 과정에서 Admin 페이지를 구현했던 경험이 있어서 이번 과제를 수월하게 진행할 수 있을 줄 알았으나, 비슷하면서도 새로운 로직과 레이아웃을 만나 우여곡절을 겪으며 더 성장했다고 생각한다.
협업과 소통에 강점을 갖고 있으니, 개발자로서 로직의 다양성과 흐름 이해를 목표로 더욱 열심히 공부하는 프리온보딩 코스를 보내겠다.🥋