[Feat/#188]: 프로필 피드 아이템 삭제

[SebellKo]

📍 작업 내용

프로필 피드 아이템 삭제를 구현했습니다.

• 프로필 피드 아이템 삭제 api 구현
• 프로필 피드 아이템 삭제 구현
• custom router의 navigate 상태 추가
• 우물, 피드아이템 삭제 바텀시트 분기처리

📍 구현 결과 (선택)

📍 기타 사항

메모, 리뷰 상세 페이지에서 각각 조건에 맞는 바텀시트를 보여주기 위해 지민님이 구현하신 useCustomeRouter의 navigate를
전역 상태를 이용해 상태값도 같이 전달할 수 있게 구현했습니다.
url의 쿼리스트링에 정보를 추가해 처리할까 했지만 상세 페이지 내부에서 탭을 변환할때 url이 초기화 되는 이슈가 있어 전역 상태를 이용했습니다.

추가적으로 피드 아이템 삭제를 구현하면서 우물 아이템 삭제 로직을 참고했는데요,
해당 로직을 참고하면서 메모 상세 페이지 데이터를 가져오는데 staleTime이 0으로 설정된걸 확인했습니다.

20초로 기본 설정되어 있기 때문에 최신화를 위해서 0으로 설정하신거라고 생각이 드는데,
이 로직을 invalidate.Queries를 이용해서 업데이트가 발생한 경우에만 다시 패치하는게 어떨까 생각이 듭니다.

import { useUserId } from '@/store/sessionStore';
import { QUERY_KEY } from '@/constants/query';
import { getPath } from '@/utils/getPath';
import { useCustomRouter } from '@/hooks/useCustomRouter';
import { GetMemoRes } from '@frolog/frolog-api';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { editMemoDetail, getMemoDetail } from '../api/memo.api';

/** 메모 상세 쿼리 및 수정 핸들링 훅 */
export const useMemoDetail = (
  wellId: string,
  bookId: string,
  memoId: string,
  memoData: GetMemoRes
) => {
  const { replace, router } = useCustomRouter('well');
  const userId = useUserId();
  const queryClient = useQueryClient();

  const { data: memoDetail } = useQuery({
    queryKey: [QUERY_KEY.memoDetail, memoId],
    queryFn: () => getMemoDetail({ id: memoId }),
    staleTime: 0,
    initialData: memoData,
  });

  const { mutate: handleEditMemo, isPending } = useMutation({
    mutationFn: (data: MemoFormType) =>
      editMemoDetail({
        id: memoId,
        content: memoDetail?.content === data.memo ? undefined : data.memo,
        is_public:
          memoDetail?.is_public === data.isPublic ? undefined : data.isPublic,
        images: memoDetail?.images === data.images ? undefined : data.images,
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: [QUERY_KEY.memoDetail, memoId],
      });

      replace(getPath.memoList(userId!, wellId, bookId));
      router.back();
    },
  });

  return { memoDetail, handleEditMemo, isPending };
};

invalidate.Queries를 사용할 경우 더 디테일한 조작이 가능하고, 사용자 액션으로 인해 최신화 되는 경우가 아니라면
캐싱된 데이터를 재사용 해도 된다고 생각하고, staleTime:0으로 인해 반복해서 요청되는 불필요한 네트워크 요청을 줄일 수 있다고 생각합니다.
더불어 불필요한 네트워크 요청을 줄이는건 비용 감소에도 효율적이라고 생각합니다.

지민님 의견 부탁드립니다 !

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
frolog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 13, 2025 9:06am

[JIMIN1020]

세종님? pr 확인이 늦어져서 죄송합니다
말씀하신 부분은 저도 동의합니다~! 그렇게 수정하면 좋겠네요