영상 갯수 제한 피드백(11월 초 작업 기준)

영상 갯수 제한 작업

영상 갯수 제한 작업 및 일정이상 갯수일 경우 오류 안내

조건

1. 영상 갯수 제한
2. 일정 갯수 이상이거나 이하일 경우 오류 메세지 출력
3. default 로 영상 제작시 전체 선택
4. 7개 이상이면 영상제작 X && 0개면 영상제작 X
5. Redux toolkit 활용하여 프론트 단에서만 작업진행

//api call 
class Service {
  static getProducts = async (Request: Request) => {
    return await Client.credentialsInstance.get(
      `${Client.path.api}ddd/dddd/dddd/`,
      {
        params: Request,
      }
    );
  };
}

export interface Request {
   backend types
  // 프론트에서 추가
  selectedVideo: boolean;
  //해당 셀렉트 비디오 항목의 체크가 된 부분을 redux toolkit store에 전달
}

api 호출 후 해당 항목의 구조에 selectedVideo boolean 옵션 추가 boolean 옵션 여부에 따라 영상 갯수 체크

.addCase(
        `${fetch.success}`,
        (state, action: PayloadAction<{ Request: Request }>) => {
          // 모든 상품 selectMode null로 초기화 && 첫번째, 두번쨰상품으로 초기화
          action.payload.products.list.map((el) => {
            작업물
            el.selectedVideo = true;
          });
          state.Request = action.payload.Request;
        }
      )

해당 초깃값을 redux-toolkit extraReducers을 활용하여 세팅

 setSelectVideo(
      state,
      action: PayloadAction<{ prdId: number; selectedVideo: boolean }>
    ) {
      const { prdId, selectedVideo } = action.payload;
      state.request &&
        state.request.list.map((prd, index) => {
          if (prdId === index) {
            prd.selectedVideo = selectedVideo;
          }
        });
    },

createSlice 활용하여 리듀서 생성 후 action type, action creator, reducer를 작업 후 셀렉트 비디오를 할당

allCheckVideo(state, action: PayloadAction<{ selectedVideo: boolean }>) {
    const { selectedVideo } = action.payload;
     state.request &&
      state.request.list.map((prd, _) => {
        prd.selectedVideo = selectedVideo;
      });
 },

클릭시 모든 request의 selectedVideo 조절을 위한 리듀서 생성

그 후 비디오 생성 페이지로 이동 해당 리듀서들 할당

  const changeAllCheck = (event: CheckboxChangeEvent) => {
    if (event.target.checked) {
      setIsCheckAll(true);
      dispatch(
        blogAction.allCheckVideo({
          selectedVideo: event.target.checked,
        })
      );
    } else {
      setIsCheckAll(false);
      dispatch(
        blogAction.allCheckVideo({
          selectedVideo: event.target.checked,
        })
      );
    }
  };
  const onChangeCheckVideo = (event: CheckboxChangeEvent, index: number) => {
    dispatch(
      blogAction.setSelectVideo({
        prdId: index,
        selectedVideo: event.target.checked,
      })
    );
  };