[선물방 메인] 삭제 모달 공통 컴포넌트로 분리, 플로팅 버튼 기능 추가

[urjimyu]

이슈 넘버

• close [선물방 메인] 플로팅 버튼 관련 추가 기능 수정 적용 #439

구현 사항

• 등록 선물 개수에 따라 플로팅 버튼 유무 조정
• 플로팅 버튼 유무에 따라 토스트 메시지 위치 수정

Need Review

플로팅 버튼 조건 추가

• 내가 등록한 선물이 2개 미만일 때만 플로팅 버튼이 보여야 하고, 그에 맞는 토스트 메시지 위치 조정이 필요해 추가했습니다.
• react-toastify를 조건에 따라 다른 커스텀 위치에 뜨도록 하고 싶은 분들은 해당 PR 참고하시면 좋을 것 같아요!

//toast.info 안에 className을 prop에 따라 지정해주었습니다.
 className: isBtn ? 'custom-toast-margin' : '',

// GlobalStyle에 해당 className에 해당하는 마진 값을 주었습니다.
.custom-toast-margin{
    margin-bottom: 6.4rem;
}

공통 DeleteModal 사용법

• 모달을 여닫기 위한 setState를 넘겨주는 것으로 수정했습니다! (다른 방식 제안도 환영입니다)

• 모달 컴포넌트

interface DeleteModalProps {
  children: React.ReactNode;
  onClickDelete: (giftId?: number) => void;
  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
  clickedItem?: number | undefined;
}

// 중략
          <BtnMedium
            customStyle={{
              width: '12rem',
              outline: 'none',
              border: 'none',
              backgroundColor: 'white',
              color: 'black',
            }}
            onClick={() => (clickedItem ? onClickDelete(clickedItem) : onClickCancel())}
          >
            네, 삭제할게요
          </BtnMedium>

• 사용 예시

{isModalOpen && (
        <DeleteModal
          setIsModalOpen={setIsModalOpen}
          onClickDelete={handleClickConfirmDeleteBtn}
          clickedItem={clickedItem}
        >
          정말 상품을 삭제하시겠어요?
        </DeleteModal>
      )}

📸 스크린샷

Screen.Recording.2024-02-29.at.8.35.02.PM.mov

Reference

[github-actions]

PR Preview Action v1.4.6
🚀 Deployed preview to https://SWEET-DEVELOPERS.github.io/sweet-client/pr-preview/pr-445/
on branch gh-pages at 2024-02-29 05:36 UTC

[hoeun0723]

확인했습니다!! 조건 활용과 옵서녈 처리를 하니 공통으로 사용할 수 있은 컴포넌트가 되었네요!! merge 해주시면 사용해보고, 문제 있으면 또 말씀 드리거나 직접 수정하겠습니다!! 감사합니다😊

[imeureka]

확인했습니다! 고생하셨어요 :)

[imeureka]

if 문으로 mutation을 넣었군요! 저도 이렇게 모달을 열어보겠습니다!