✨feat: 날짜와 상관없이 공개/비공개 설정 기능 구현

[rkdcodus]

✅ 체크리스트

• [x] api/diary/{diaryId}/visibility api 적용
• [x] 비공개/공개 설정 기능 구현
• [x] 버그 수정
  • [x] 모바일 환경에서 스크롤 시 보이는 스낵바 컴포넌트 버그
  • [x] 만료 모달 나타남과 동시에 사라지는 버그 (api 인터셉터의 소개페이지 이동코드 제거 => 모달 버튼 클릭 시 이동)

📝 작업 상세 내용

당일이 아니더라도 일기의 공개/비공개를 설정할 수 있는 기능이 추가되었습니다.

usePatchVisibility api 훅 생성

const fetchAxios = async (diaryId: Id) => {
  const res = await API.patch(END_POINT.visibility(diaryId));
  return res.data;
};

export const usePatchVisibility = (diaryId: Id, isPrivate?: boolean) => {
  const { toast } = useToast();
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: () => fetchAxios(diaryId),
    onSuccess: () => {
      toast(isPrivate ? '일기를 공개했어요' : '일기를 비공개했어요');
      queryClient.invalidateQueries({
        queryKey: ['get-diaryDetail'],
      });
    },
  });
};

• api/diary/{diaryId}/visibility patch api를 요청하는 훅을 생성했습니다.
• 공개/비공개 요청이 성공한다면 사용자에게 변경되었다는 문구를 toast로 보여줍니다.
• 또, 변경된 공개/비공개 데이터를 새롭게 업데이트해주기 위해 일기 상세페이지 데이터를 무효화시킵니다.

DiaryDetail/Setting.tsx 내부

const Setting = ({ diaryId, createdDate, detail }: SettingProps) => {
...
  const { mutate: patchVisibility } = usePatchVisibility(
    diaryId,
    detail?.isPrivate,
  );

  const editVisibility = () => {
    if (detail) {
      const setting = {
        title: detail.isPrivate ? '일기 공개하기' : '일기 비공개하기',
        content: detail.isPrivate
          ? MODAL.visibility.public
          : MODAL.visibility.private,
      };

      const button1 = {
        active: true,
        text: MODAL.cancel,
      };

      const button2 = {
        active: true,
        text: detail.isPrivate ? '공개하기' : '비공개하기',
        clickHandler: patchVisibility,
        color: semantic.light.accent.solid.alternative,
        interaction: INTERACTION.accent.subtle(),
      };

      modal(setting, button1, button2);
    }
  };

 ...
  return (
    <Menus icon={more}>
      {detail && (
        <Menu
          onClick={editVisibility}
          text={detail.isPrivate ? '공개하기' : '비공개하기'}
          svg={detail.isPrivate ? lockOpen : lock}
        />
      )}
      ... 

• 상세페이지에서 사용되는 Setting 컴포넌트라면 (detail 여부로 판단) 설정 목록에 비공개/공개 설정 메뉴바를 추가합니다.
• 메뉴 클릭 시, 재확인 모달을 띄워줍니다.
• 모달의 공개하기/비공개하기 버튼을 클릭하면 patch api를 요청합니다.

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

• [x] 브랜치 확인하기
• [x] 불필요한 코드가 들어가지 않았는지 재확인하기
• [ ] issue 닫기
• [x] reiewers, assignees, Lables 등록 확인하기

이슈 번호: