[원티드 프리온보딩 프론트엔드][1주차 2차 과제] - 어드민 페이지 구현

어떤 프로젝트였을까?

👉 배포링크 바로가기
👉 깃허브 바로가기

구현 사항

1. 노출 기한 및 판매기간 설정
   • 제한 없음, 미노출, 노출 기간 설정 분류
2. 상품 기본 정보
   • 카테고리 지정
   • 필터 태그 검색 기능
   • 상품 정보
   • 상품 이미지 추가
3. 상품 옵션
   • 이미지 첨부
   • 옵션 세트 추가 및 삭제
   • 옵션 추가 및 삭제
   • 선택 옵션 추가 및 삭제
   • 할인율 계산
   • 재고 파악
4. 상품 소개 / 구매자 추천 이미지
   • 이미지 업로드
5. 상품 정보 고시
   • 정보고시 추가 및 삭제
   • 항목 추가 및 삭제
6. 상품 배송 설정 / 혜택 허용 설정 / 기타 설정
   • 토글 구현

아쉬운 점

작성한 모든 값 전역 상태관리하기

• 각자가 맡은 영역별로 우선 state를 끌어올려 전체 상탯값을 갖고 있기로 했다.
• 그리고 저장버튼이 눌리면 각 컨테이너의 입력값들을 전역상태에 저장하기로 했다.

문제는 전역상탯값에 제대로 저장이 안된다는 것이었다.

한 컨테이너의 정보는 제대로 들어오지만, 원했던대로 각 컨테이너의 이름을 key로 각각 value에 정보를 담은 객체가 들어오지 않았다. 아무래도 덮어씌워지는 것 같았다.

뭐가 문제였을까?

전역상탯값을 업데이트 하는 시점의 문제였던 것 같다.
입력값들을 저장하는 로직은 다음과 같다.
1. 각 컨테이너 영역에는 모든 항목별 입력값이 최상위 컴포넌트에 저장된다.
2. 저장 버튼을 눌렀을 때 클릭 여부에 대한 전역상탯값이 업데이트된다.
3. 이 상탯값을 구독하고 있던 컨테이너 영역들은 저장버튼이 클릭되었을 때 하나의 또 다른 선택값 객체 안에 해당 컨테이너 영역의 이름을 key로, 각 항목별 정보를 담은 객체를 value로 업데이트 한다.

그런데 이 때 저장 버튼 클릭 여부를 알 수 있도록 useEffect 의존성 배열에 추가하여 사용했는데, 이 시점에 문제가 있었던 것 같다.

어떻게 해결할 수 있을까?

• 추가예정: 리팩토링 진행 예정