[프로젝트 회고] 상품 등록 관리자 페이지

윤창현·2022년 1월 30일

Project-Log preonboarding wanted 프로젝트 회고

Project-Log

목록 보기

11/17

🥩 상품 등록 페이지(관리자)

📝 과제 설명

이번 과제는 고기 관련 커머스에 노출되는 상품의 신규 등록 또는 수정하는 영역으로
상품 등록의 전체적인 페이지를 구현했다.
처음 PDF 파일을 받아 과제를 확인했을 때는 범위가 넓고 요구사항이 많아 보였는데 4명이 함께
업무 범위를 나누고 난이도를 정해서 균등하게 분배하고 나니 생각은 바뀌었다.
이번에는 2명씩 페어 프로그래밍이 아닌, 4명 모두가 함께 초기 세팅을 하고 컨벤션을 정한 뒤,
폴더 구조를 맞춰 진행하는 조금 더 업그레이드된 협업을 경험하게 되었다.

⚙️ 기술 스택

React, React Hooks
JavaScript, Styled-Component
MUI Library (Date,Time Picker / Switch)
Git & GitHub, Build Tool (Create React App)

💻 담당 업무

상품 노출 및 판매기간 설정 / 상품 카테고리 / 상품 배송 및 기타 설정

🗓 상품 노출 및 판매기간 설정

상품 노출 기한과 판매 기한의 레이아웃은 동일했기 때문에 코드를 작성하기 전에 먼저 input 태그에 display:flex와 colum을 통해 새로의 형태로 만들어 준 뒤 MUI 라이브러리에 DateTimePicker를 사용하여 아래와 같은 형태를 만들겠다는 계획을 세웠다.

<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을 통해서 원하는 구조를 만들었다.

🗂 상품 카테고리

초기 세팅 과정에서 json 파일로 목데이터를 미리 만들어두었기에 그것을 사용해서 카테고리를 불러오고 체크박스를 클릭했을 시 해당 카테고리가 우측에 생성.
아무 선택이 없는 경우 '카테고리를 지정해 주세요'라는 텍스트가 뜨도록 구현해야 했다.

  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 페이지를 구현했던 경험이 있어서 이번 과제를 수월하게 진행할 수 있을 줄 알았으나, 비슷하면서도 새로운 로직과 레이아웃을 만나 우여곡절을 겪으며 더 성장했다고 생각한다.
협업과 소통에 강점을 갖고 있으니, 개발자로서 로직의 다양성과 흐름 이해를 목표로 더욱 열심히 공부하는 프리온보딩 코스를 보내겠다.🥋