[하루메이트] 리팩토링 - 일정 수정 기능

저장이라고 적혀있는 것을 수정으로 변경

기존 일정 수정 모달에는 수정이라고 쓰여 있어야 하는 부분을 저장이라고 되어 있었습니다.

{ismodify ? '일정 수정하기' : '일정 저장하기'}

그래서 위와 같은 조건부 렌더링으로 모두 변경해주었습니다.

변경 전

변경 후

 

---

모달에 일정 데이터를 불러오기

기존 수정 기능에는 아래 사진과 같이 썸네일과 제목 및 내용을 불러오지 않았습니다.

사용자가 수정을 눌렀으니 처음부터 수정하는게 좋지 않을까? 라는 생각으로 이렇게 구현한 것인데, 추후 다시 생각해보니 조금만 변경하고 싶을수도 있다는 생각이 들었습니다.

그래서 기존 데이터를 다시 넣어야겠다는 생각이 들어 변경하게 되었습니다.

 

장소와 일정 데이터 함께 불러오기

  const dispatchDestinationList = async () => {
    const response = await GetCourse({
      courseId,
    });
    const { destinationList } = response.data as PostReadT;
    dispatch(scheduleListActions.updateList(destinationList));
    return destinationList;
  };

  const { data: destinationList } = useQuery({
    queryKey: ['modify'],
    queryFn: dispatchDestinationList,
    refetchOnWindowFocus: false,
    enabled: isModify,
  });

리팩토링 전의 코드에서 일정 수정일 경우, 일정 데이터를 가져오는 코드입니다.

dispatchDestinationList함수에서 장소 데이터만 불러와서 사용하고 있기 때문에 일정에 관한 데이터도 불러오도록 바꿨습니다.

  const updateDestinationList = async () => {
    const response = await GetCourse({
      courseId,
    });
    const { courseData, destinationList } = response.data as PostReadT; // 이부분
    dispatch(scheduleListActions.updateList(destinationList));

    return { courseData, destinationList }; // 이부분
  };

  const { data: modifyData } = useQuery({
    queryKey: ['modify'],
    queryFn: updateDestinationList,
    refetchOnWindowFocus: false,
    enabled: isModify,
  });

추가로, 함수의 이름도 명확하지 않은 것 같아서 바꿨습니다.

 

모달에 props로 일정 데이터 넘겨주기

<ScheduleCreateModal ismodify={isModify} courseId={courseId} courseData={modifyData?.courseData}/>

 

썸네일, 제목, 내용 컴포넌트에 데이터 할당하기

<ThumbnailBox url={bgUrl || courseData?.courseThumbnail}>
  {!(bgUrl || courseData?.courseThumbnail) && (
    <Thumbnail style={{ iconWidth: 125, iconHeight: 103 }} />)}
    <SelfEnd bgUrl={!!bgUrl}>
      <GrayButton
        width="150px"
        height="2rem"
        brradius={cssToken.BORDER['rounded-s']}
        onClick={() => setIsThumbChouce(true)}>
        썸네일 선택
      </GrayButton>
    </SelfEnd>
</ThumbnailBox>

courseData(일정 데이터)가 있다면 넣어줄 수 있게 조건부로 작성했습니다.

bgUrl || courseData?.courseThumbnail인 이유?

courseData?.courseThumbnail이 앞으로 왔을 경우, 기존 썸네일이 존재하기 때문에 썸네일을 선택해도 무조건 기존에 있던 썸네일이 보이고 선택한 썸네일은 보여지지 않기 때문입니다.

 

제목과 내용의 경우 input과 textarea 태그를 사용했기 때문에 defaultValue 속성을 이용해서 위와 같이 할당해주었습니다.

 

결과

결과