[중간 코드 리뷰]

[DevelopSoo]

발표 UX 피드백 정리

모임 찾기 페이지

1. 날짜 전체 선택이 안됨

모임 찾기 상세 페이지

1. 좋아요가 기본적으로 회색이라 disabled 된 것 같음
2. 참여하기 후 검토하는 시스템은 딱히 없는지?

찜한 모임

1. 로그인 이미 했는데, 또 로그인 페이지 뜸
2. 404 페이지

[jay0425]

찜한 모임 구현 예정입니다 피드백 감사합니다!

[DevelopSoo]

중복 선언된 API들

Reboot/apis/meetings.ts

Lines 74 to 91 in 3817ade

	export async function deleteMeetingsJoin({
	meetingId,
	}: {
	meetingId: number;
	}): Promise<SuccessResponse> {
	const route = ROUTE_MEETINGS_JOIN(meetingId);
	const res = await clientFetch(route, {
	method: "DELETE",
	headers: { "Content-Type": "application/json" },
	});
	if (!res.ok) {
	const error: ErrorResponse = await res
	.json()
	.catch(() => ({ code: "UNKNOWN_ERROR", message: "모임 참여 취소에 실패했습니다." }));
	throw new Error(error.message);
	}
	return res.json();
	}

Reboot/features/mypage/apis.ts

Lines 133 to 139 in 3817ade

	export async function deleteMeetingsJoin({ meetingId }: { meetingId: number }): Promise<void> {
	const res = await clientFetch(`/meetings/${meetingId}/join`, {
	method: "DELETE",
	});
	await throwApiError(res, "모임 예약 취소에 실패했습니다.");
	}

Reboot/features/mypage/apis.ts

Lines 174 to 179 in 3817ade

	export async function postMeetingsFavorites(meetingId: number): Promise<void> {
	const res = await clientFetch(`/meetings/${meetingId}/favorites`, {
	method: "POST",
	});
	await throwApiError(res, "찜 추가에 실패했습니다.");
	}

Reboot/apis/meetings.ts

Lines 14 to 31 in 3817ade

	export async function postMeetingsFavorite({
	meetingId,
	}: {
	meetingId: number;
	}): Promise<MeetupItemResponse> {
	const route = ROUTE_MEETINGS_FAVORITES(meetingId);
	const res = await clientFetch(route, {
	method: "POST",
	headers: { "Content-Type": "application/json" },
	});
	if (!res.ok) {
	const error: ErrorResponse = await res
	.json()
	.catch(() => ({ code: "UNKNOWN_ERROR", message: "모임 찜 추가에 실패했습니다." }));
	throw new Error(error.message);
	}
	return res.json();
	}

Reboot/apis/meetings.ts

Lines 34 to 51 in 3817ade

	export async function deleteMeetingsFavorite({
	meetingId,
	}: {
	meetingId: number;
	}): Promise<SuccessResponse> {
	const route = ROUTE_MEETINGS_FAVORITES(meetingId);
	const res = await clientFetch(route, {
	method: "DELETE",
	headers: { "Content-Type": "application/json" },
	});
	if (!res.ok) {
	const error: ErrorResponse = await res
	.json()
	.catch(() => ({ code: "UNKNOWN_ERROR", message: "모임 찜 해제에 실패했습니다." }));
	throw new Error(error.message);
	}
	return res.json();
	}

Reboot/features/mypage/apis.ts

Lines 182 to 188 in 3817ade

	export async function deleteMeetingsFavorites(meetingId: number): Promise<void> {
	const res = await clientFetch(`/meetings/${meetingId}/favorites`, {
	method: "DELETE",
	});
	await throwApiError(res, "찜 해제에 실패했습니다.");
	}

현재 같은 API들이 중복으로 설정된 것 같습니다. 확인해보시고 중복이 아니라면 상관없으나 중복이라면 하나를 삭제해서 재사용해주세요.

[DevelopSoo]

dangerouslySetInnerHTML 사용

Reboot/features/connect/components/PostDetailCard/index.tsx

Lines 82 to 85 in 3817ade

	<div
	className="mt-6 min-h-[140px] max-w-none overflow-hidden text-base leading-6 tracking-[-0.32px] text-gray-700 md:mt-10 [&_em]:italic [&_img]:my-4 [&_img]:rounded-[24px] [&_ol]:list-decimal [&_ol]:pl-5 [&_strong]:font-bold [&_u]:underline [&_ul]:list-disc [&_ul]:pl-5"
	dangerouslySetInnerHTML={{ __html: content }}
	/>

현재 dangerouslySetInnerHTML 속성을 사용해서 화면에 보여주고 있네요. tiptap 같은 에디터 때문인 것 같습니다.

일반적으로 tiptap에서는 script 태그와 같은 특정 태그를 허용하지 않는 것 같습니다. 다만 실제로 서버에 저장할 땐 대부분 sanitize-html, dompurify 등과 같은 라이브러리를 사용해서 정제 후 저장하는 것을 추천하는 것 같네요.

저도 직접 사용해본 적이 없어서 확인이 필요하나 여러분들이 직접 문제가 없는지 한 번 검토해보시면 좋을 것 같습니다.

참고)

• Does TipTap sanitize HTML or do I have to use a dedicated package? ueberdosis/tiptap#2845
• https://stackoverflow.com/questions/76963680/do-i-need-to-sanitise-tiptap-text-editor-in-nextjs

[DevelopSoo]

유저 상태 관리 이중화 (React Query + Zustand)

Reboot/providers/member-provider.tsx

Lines 7 to 23 in 3817ade

	export function MemberProvider({ children }: { children: React.ReactNode }) {
	const { data: user, isSuccess, isPending, isError } = useGetMe();
	const { setUser, clearUser, setIsPending, setIsError } = useUserStore();
	useEffect(() => {
	setIsPending(isPending);
	setIsError(isError);
	if (isSuccess && user) {
	setUser(user);
	} else if (!isPending) {
	clearUser();
	}
	}, [isSuccess, isPending, isError, user]);
	return <>{children}</>;
	}

현재 서버 상태 관리 라이브러리인 React Query로 유저 정보를 가져온 후, 클라이언트 상태 관리 라이브러리인 zustand에 유저 정보를 저장하고 있습니다.

React Query의 목적이 서버에서 가져온 데이터를 추가로 클라이언트 상태 관리에 관리하지 않고, 서버 상태를 그래도 관리하기 위함인데요.

zustand로 추가로 또 저장해야 하는 이유가 있을까요?

이중으로 관리할 때는 다음과 같은 문제가 발생할 수 있습니다.

• React Query가 백그라운드 refetch로 유저 정보를 갱신해도, useEffect 동기화에 타이밍 차이가 있어서 Zustand 쪽은 이전 값을 보여주는 순간이 생길 수 있습니다.
• isPending, isError 같은 상태를 Zustand에 복제하고 있는데, React Query가 이미 제공하는 값이라 불필요한 코드가 늘어납니다.

즉, 제 생각엔 React Query 캐시를 직접 사용하는 useUser() 훅을 만들면
MemberProvider와 Zustand 스토어를 모두 제거할 수 있을 것 같습니다.

예시) 아래 코도는 예시일 뿐이며 적절하게 수정해서 사용해주세요.

// 수정된 코드 - Zustand 스토어 제거, React Query 캐시를 직접 사용하는 훅
// hooks/useUser.ts
import { useGetMe } from "@/features/auth/queries";

export function useUser() {
  const { data: user, isPending, isError } = useGetMe();
  return {
    user: user ?? null,
    isLoggedIn: !!user,
    isPending,
    isError,
  };
}

// 기존에 useUserStore()를 사용하던 곳을 useUser()로 교체
// 로그인/로그아웃 시에는 queryClient.setQueryData(["me"], user) 사용

// 수정된 코드 - mutations.ts
export function useLogin(onSuccess: () => void) {
  const queryClient = useQueryClient();
  const { handleShowToast } = useToast();

  return useMutation({
    mutationFn: postLogin,
    onSuccess: (data) => {
      // Zustand 대신 React Query 캐시에 직접 저장
      queryClient.setQueryData(["me"], data.user);
      handleShowToast({ message: "로그인이 완료됐습니다.", status: "success" });
      onSuccess();
    },
    onError: (error: Error) => {
      handleShowToast({ message: error.message, status: "error" });
    },
  });
}

export function useLogout() {
  const queryClient = useQueryClient();
  const { handleShowToast } = useToast();

  return useMutation({
    mutationFn: postLogout,
    onSuccess: () => {
      // React Query 캐시 초기화만으로 충분
      queryClient.setQueryData(["me"], null);
      queryClient.removeQueries({ queryKey: ["me"] });
      handleShowToast({ message: "로그아웃 됐습니다.", status: "success" });
    },
  });
}

[DevelopSoo]

불필요한 리프레시 토큰 중복 코드

Reboot/libs/serverFetch.ts

Lines 39 to 47 in 3817ade

	// refresh 진행 중이면 그 Promise 재사용
	if (!refreshMap.has(refreshTokenValue)) {
	const refreshPromise = refreshToken().finally(() => {
	setTimeout(() => refreshMap.delete(refreshTokenValue), 10_000);
	});
	refreshMap.set(refreshTokenValue, refreshPromise);
	}

이전에 캐치업 시간에 말씀드린 것처럼 백엔드 코드에서 Race Conditions를 해결해주셨기 때문에 해당 코드는 필요가 없어질 것 같습니다. 또한 이 코드가 있다고 하더라도 서버리스 환경으로 인해 제대로 동작하지 않을 것 같습니다.

[DevelopSoo]

에러 처리 방식 혼재

Reboot/features/auth/apis.ts

Lines 16 to 20 in 3817ade

	const error = new Error(data?.message ?? "오류가 발생했습니다.") as Error & {
	status: number;
	};
	error.status = response.status;
	throw error;

Reboot/features/meetupDetail/apis/apis.ts

Lines 36 to 37 in 3817ade

	const error = await res.json().catch(() => null);
	throw new Error(error?.message ?? "모임 참여에 실패했습니다.");

Reboot/features/mypage/apis.ts

Line 120 in 3817ade

await throwApiError(res, "모임 상태 변경에 실패했습니다.");

통일된 에러 방식을 구축해서 재사용하시는 것이 좋겠습니다.

[DevelopSoo]

하나의 파일에 너무 많은 컴포넌트 사용

Reboot/features/meetupDetail/containers/meetupContainer/index.tsx

Lines 34 to 195 in 3817ade

	export default function MeetupDetailClient({ meetupId }: MeetupDetailClientProps) {
	return (
	<>
	{/* 섹션 1 - 모임 소개 */}
	<ErrorBoundary FallbackComponent={SectionErrorFallback}>
	<Suspense fallback={<MeetupIntroSkeleton />}>
	<MeetupIntroSection meetupId={meetupId} />
	</Suspense>
	</ErrorBoundary>
	{/* 섹션 2 - 모임 설명 */}
	<ErrorBoundary FallbackComponent={SectionErrorFallback}>
	<Suspense fallback={<MeetupDescSkeleton />}>
	<MeetupDescSection meetupId={meetupId} />
	</Suspense>
	</ErrorBoundary>
	{/* 섹션 3 - 지도 */}
	<ErrorBoundary FallbackComponent={SectionErrorFallback}>
	<Suspense fallback={<MeetupMapSkeleton />}>
	<MeetupMapSection meetupId={meetupId} />
	</Suspense>
	</ErrorBoundary>
	{/* 섹션 4 - 리뷰 목록 */}
	<ErrorBoundary FallbackComponent={SectionErrorFallback}>
	<Suspense fallback={<MeetupReviewSkeleton />}>
	<MeetupReviewSection meetupId={meetupId} />
	</Suspense>
	</ErrorBoundary>
	{/* 섹션 5 - 관련 모임 */}
	<ErrorBoundary FallbackComponent={SectionErrorFallback}>
	<Suspense fallback={<MeetupRelatedSkeleton />}>
	<MeetupRelatedSection meetupId={meetupId} />
	</Suspense>
	</ErrorBoundary>
	</>
	);
	}
	function MeetupIntroSection({ meetupId }: { meetupId: number }) {
	const { data: meeting } = useMeetingDetail(meetupId);
	const { data: participantsData } = useParticipants(meetupId);
	const { user, isPending: isMePending } = useUserStore();
	const isHost = !isMePending && meeting.hostId === user?.id;
	const editInitialData = toMeetupEditData(meeting);
	const participants = participantsData?.data ?? [];
	return (
	<section className="flex w-full flex-col gap-4 md:flex-row lg:gap-5">
	<div className="relative aspect-343/241 w-full overflow-hidden rounded-2xl md:aspect-auto md:w-1/2 md:self-stretch lg:rounded-4xl">
	<Image alt={meeting.name} src={meeting.image} fill className="object-cover" priority />
	</div>
	<div className="flex w-full flex-col gap-5 md:w-1/2">
	<InformationContainer {...meeting} isHost={isHost} editInitialData={editInitialData} />
	<PersonnelContainer
	capacity={meeting.capacity}
	participantCount={meeting.participantCount}
	participants={participants}
	confirmedAt={meeting.confirmedAt}
	/>
	</div>
	</section>
	);
	}
	function MeetupDescSection({ meetupId }: { meetupId: number }) {
	const { data: meeting } = useMeetingDetail(meetupId);
	return (
	<section className="mt-10 flex h-fit w-full flex-col gap-3 md:gap-4 lg:gap-5">
	<span className="pl-1.5 text-base font-semibold md:text-xl lg:pl-2.5 lg:text-2xl">
	모임 설명
	</span>
	<div className="w-full overflow-hidden rounded-3xl bg-white px-5 py-4 md:rounded-4xl md:px-12 md:py-6">
	<span className="text-sm font-normal text-gray-700 md:text-lg">{meeting.description}</span>
	</div>
	</section>
	);
	}
	function MeetupMapSection({ meetupId }: { meetupId: number }) {
	const { data: meeting } = useMeetingDetail(meetupId);
	return (
	<section className="mt-10 flex h-fit w-full flex-col gap-3 md:mt-16 md:gap-4 lg:mt-20 lg:gap-5">
	<span className="pl-1.5 text-base font-semibold md:text-xl lg:pl-2.5 lg:text-2xl">
	모임 장소
	</span>
	<KakaoMap
	address={meeting.address}
	latitude={meeting.latitude}
	longitude={meeting.longitude}
	/>
	</section>
	);
	}
	function MeetupReviewSection({ meetupId }: { meetupId: number }) {
	const { currentPage, currentCursor, handlePageChange } = useCursorPagination();
	const { data: reviewsData } = useReviews(meetupId, currentCursor);
	const hasMoreReviews = reviewsData.hasMore;
	const comments = useMemo<CommentProps[]>(
	() =>
	(reviewsData?.data ?? []).map((review) => ({
	id: review.id,
	score: review.score,
	comment: review.comment,
	createdAt: review.createdAt,
	user: review.user,
	})),
	[reviewsData],
	);
	return (
	<section className="mt-10 w-full md:mt-16 lg:mt-20">
	<CommentCards
	meetingId={meetupId}
	comments={comments}
	currentPage={currentPage}
	hasMore={hasMoreReviews}
	onPageChange={(page) => handlePageChange(page, reviewsData?.nextCursor, hasMoreReviews)}
	/>
	</section>
	);
	}
	function MeetupRelatedSection({ meetupId }: { meetupId: number }) {
	const { data: meeting } = useMeetingDetail(meetupId);
	const { data: relatedData } = useRelatedMeetings(meetupId, meeting.region, meeting.type);
	const relatedMeetings = relatedData?.data ?? [];
	const { ref, style, overlays, ...dragScrollEvents } = useDragScroll<HTMLDivElement>();
	return (
	<section className="mt-17 flex h-fit w-full flex-col gap-3 md:mt-18 md:gap-4 lg:mt-22">
	<div className="pl-1.5 lg:pl-2.5">
	<h3 className="text-base font-semibold md:text-xl lg:text-2xl">이런 모임은 어떠세요?</h3>
	</div>
	{relatedMeetings.length === 0 ? (
	<Empty section className="w-full">
	추천 모임이 없어요.
	</Empty>
	) : (
	<div className="relative pb-4">
	<div
	ref={ref}
	style={style}
	className={`grid grid-cols-2 gap-4 md:flex md:gap-6 lg:gap-8 ${containerStyle}`}
	{...dragScrollEvents}>
	{relatedMeetings.map((meet) => (
	<div key={meet.id} className="w-full shrink-0 md:w-75.5">
	<CompactCards {...meet} />
	</div>
	))}
	</div>
	{overlays}
	</div>
	)}
	</section>
	);
	}

현재 코드는 MeetupReviewSection, MeetupRelatedSection, MeetupMapSection, MeetupIntroSection 등 여러 개의 컴포넌트가 혼재합니다. 분리하지 않은 이유가 있나요?

[DevelopSoo]

state 업데이트 문제 발생 가능성 있음

Reboot/hooks/useCursorPagination.ts

Lines 17 to 24 in 3817ade

	const handlePageChange = (page: number, nextCursor?: string, hasMore?: boolean) => {
	if (page > currentPage && hasMore) {
	setCursorHistory((prev) => [...prev.slice(0, pageIndex + 1), nextCursor]);
	setPageIndex(page - 1);
	} else if (page < currentPage) {
	setPageIndex(page - 1);
	}
	};

handlePageChange는 함수가 생성된 시점의 currentPage와 pageIndex 값을 기억합니다. 만약 해당 함수를 가지는 컴포넌트가 리렌더링되지 않고, handlePageChange 함수가 자식 컴포넌트의 props로 전달되는 경우 state가 바뀌어도 옛날 값을 보는 경우가 있을 수 있습니다.

예를 들면,
pageIndex=0, currentPage=1 이라고 합시다.
사용자가 2페이지를 클릭하여 handlePageChange가 호출되는데, 이때는 pageIndex가 0인 상태로 시작합니다.
setState가 비동기로 호출되고 pageIndex가 1로 업데이트 되기 전에 빠르게 3페이지를 클릭하여 handlePageChange 가 호출됩니다.
이 시점에 pageIndex가 아직 0일 수 있습니다.

물론 사람이 클릭하는 수준에서는 이렇게 빠르게 클릭할 수는 없기 때문에 시각적으로 큰 문제는 없을 것 같습니다.
다만 위와 같은 상황은 버그가 발생할 수 있다고 경고하기 때문에 함수형 업데이트를 활용하시는 것을 추천드립니다.

예시)

// 수정된 코드
const handlePageChange = useCallback(
  (page: number, nextCursor?: string, hasMore?: boolean) => {
    setPageIndex((prevIndex) => {
      const prevPage = prevIndex + 1;
      if (page > prevPage && hasMore) {
        setCursorHistory((prev) => [...prev.slice(0, prevIndex + 1), nextCursor]);
        return page - 1;
      } else if (page < prevPage) {
        return page - 1;
      }
      return prevIndex;
    });
  },
  [],
);

참고)
https://ko.react.dev/reference/react/useState#updating-state-based-on-the-previous-state

[DevelopSoo]

쿼리키 관리 방식 통일하기

Reboot/features/reviews/queries/queryKeys.ts

Lines 5 to 14 in 3817ade

	export const reviewsQueryKeys = {
	reviews: {
	all: REVIEWS_QUERY_BASE_KEY,
	list: (params: ReviewsListKeyParams) => [...REVIEWS_QUERY_BASE_KEY, "list", params] as const,
	statistics: [...REVIEWS_QUERY_BASE_KEY, "statistics"] as const,
	categories: {
	statistics: [...REVIEWS_QUERY_BASE_KEY, "categories", "statistics"] as const,
	},
	},
	};

Reboot/features/meetup/queries.ts

Lines 25 to 32 in 3817ade

	export const meetupMutationKeys = {
	postMeetup: ["meetup", "post"] as const,
	uploadImage: ["meetup", "image", "upload"] as const,
	postFavorite: ["meetings", "favorite", "post"] as const,
	deleteFavorite: ["meetings", "favorite", "delete"] as const,
	postJoin: ["meetings", "join", "post"] as const,
	deleteJoin: ["meetings", "join", "delete"] as const,
	};

reviews는 쿼리키를 파일로 분리해서 잘 사용하고 있는데, 다른 곳은 다른 파일에서 혼재해서 사용하는 것 같습니다. 사용 방식을 통일하시면 좋겠네요. 그리고 meetupMutationKeys의 경우 export를 해서 또 내보내기를 해야 한다면 reviews처럼 분리하는 게 좋겠습니다.

[DevelopSoo]

쿼리키의 의미

Reboot/features/meetup/queries.ts

Lines 25 to 32 in 3817ade

	export const meetupMutationKeys = {
	postMeetup: ["meetup", "post"] as const,
	uploadImage: ["meetup", "image", "upload"] as const,
	postFavorite: ["meetings", "favorite", "post"] as const,
	deleteFavorite: ["meetings", "favorite", "delete"] as const,
	postJoin: ["meetings", "join", "post"] as const,
	deleteJoin: ["meetings", "join", "delete"] as const,
	};

뮤테이션을 위한 쿼리키가 필요한 이유가 있나요? 쿼리키의 경우, 조회했던 데이터의 캐시를 활용 및 업데이트하는 용도로 사용하는데요. 여기에서 mutationKey의 목적은 무엇인가요?

[DevelopSoo]

response.json의 반환 타입 미설정

Reboot/features/auth/apis.ts

Lines 3 to 48 in 3817ade

	export async function postLogin(data: { email: string; password: string }) {
	const response = await clientFetch("/auth/login", {
	method: "POST",
	body: JSON.stringify(data),
	});
	if (!response.ok) {
	let data;
	try {
	data = await response.json();
	} catch {
	data = null;
	}
	const error = new Error(data?.message ?? "오류가 발생했습니다.") as Error & {
	status: number;
	};
	error.status = response.status;
	throw error;
	}
	return response.json();
	}
	export async function postSignUp(data: { email: string; password: string; name: string }) {
	const response = await clientFetch("/auth/signup", {
	method: "POST",
	body: JSON.stringify(data),
	});
	if (!response.ok) {
	let data;
	try {
	data = await response.json();
	} catch {
	data = null;
	}
	const error = new Error(data?.message ?? "오류가 발생했습니다.") as Error & {
	status: number;
	};
	error.status = response.status;
	throw error;
	}
	return response.json();
	}

response.json 은 기본적으로 Promise any 타입을 반환합니다. 반환되는 타입이 필요없다면 상관없으나 추후에 반환값을 사용한다면 타입을 정확하게 지정하는 것이 에러 발생을 막아줍니다.

[DevelopSoo]

반환 방식의 불일치

Reboot/features/auth/apis.ts

Lines 3 to 60 in 3817ade

	export async function postLogin(data: { email: string; password: string }) {
	const response = await clientFetch("/auth/login", {
	method: "POST",
	body: JSON.stringify(data),
	});
	if (!response.ok) {
	let data;
	try {
	data = await response.json();
	} catch {
	data = null;
	}
	const error = new Error(data?.message ?? "오류가 발생했습니다.") as Error & {
	status: number;
	};
	error.status = response.status;
	throw error;
	}
	return response.json();
	}
	export async function postSignUp(data: { email: string; password: string; name: string }) {
	const response = await clientFetch("/auth/signup", {
	method: "POST",
	body: JSON.stringify(data),
	});
	if (!response.ok) {
	let data;
	try {
	data = await response.json();
	} catch {
	data = null;
	}
	const error = new Error(data?.message ?? "오류가 발생했습니다.") as Error & {
	status: number;
	};
	error.status = response.status;
	throw error;
	}
	return response.json();
	}
	export async function postLogout() {
	return clientFetch("/auth/logout", {
	method: "POST",
	});
	}
	export async function postSocialLogin(data: { accessToken: string; refreshToken: string }) {
	return clientFetch("/auth/socialLogin", {
	method: "POST",
	body: JSON.stringify(data),
	});
	}

어떤 경우는 response.json을 반환하고, 어떤 경우는 clientFetch 호출을 반환합니다. 규칙을 통일하면 실제 사용할 때도 혼란이 적을 것 같습니다.

[PollyGotACracker]

쿼리키의 의미

Reboot/features/meetup/queries.ts

Lines 25 to 32 in 3817ade

export const meetupMutationKeys = {
postMeetup: ["meetup", "post"] as const,
uploadImage: ["meetup", "image", "upload"] as const,
postFavorite: ["meetings", "favorite", "post"] as const,
deleteFavorite: ["meetings", "favorite", "delete"] as const,
postJoin: ["meetings", "join", "post"] as const,
deleteJoin: ["meetings", "join", "delete"] as const,
};
뮤테이션을 위한 쿼리키가 필요한 이유가 있나요? 쿼리키의 경우, 조회했던 데이터의 캐시를 활용 및 업데이트하는 용도로 사용하는데요. 여기에서 mutationKey의 목적은 무엇인가요?

1. useQuery에 queryKey를 넣는 것처럼 useMutation에도 mutationKey를 넣어 일관적인 코드를 작성하고자 했습니다.
2. mutationKey를 통해 mutate를 호출하지 않은 다른 컴포넌트에서 상태를 확인할 수 있다고 합니다(참고). 하지만 코드에서 이를 활용하고 있지는 않습니다.