52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
|
import { useState, useCallback, useMemo } from "react";
|
||
|
|
import { useQueryClient } from "@tanstack/react-query";
|
||
|
|
import { queryKeys } from "@/lib/queryKeys";
|
||
|
|
import type { CategoryInfo } from "@/types/commonCode";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 선택된 카테고리 상태를 관리하는 커스텀 훅
|
||
|
|
* React Query 캐시를 활용하여 전역 상태 관리
|
||
|
|
*/
|
||
|
|
export function useSelectedCategory() {
|
||
|
|
const queryClient = useQueryClient();
|
||
|
|
const [selectedCategoryCode, setSelectedCategoryCode] = useState<string>("");
|
||
|
|
|
||
|
|
// 현재 선택된 카테고리 정보를 React Query 캐시에서 가져오기
|
||
|
|
const selectedCategory = useMemo(() => {
|
||
|
|
if (!selectedCategoryCode) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
const categories = queryClient.getQueryData<CategoryInfo[]>(queryKeys.categories.list());
|
||
|
|
if (!categories || !Array.isArray(categories)) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return categories.find((category) => category.category_code === selectedCategoryCode) || null;
|
||
|
|
}, [selectedCategoryCode, queryClient]);
|
||
|
|
|
||
|
|
// 카테고리 선택 함수
|
||
|
|
const selectCategory = useCallback((categoryCode: string) => {
|
||
|
|
setSelectedCategoryCode(categoryCode);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 카테고리 선택 해제 함수
|
||
|
|
const clearSelection = useCallback(() => {
|
||
|
|
setSelectedCategoryCode("");
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 선택된 카테고리가 있는지 확인
|
||
|
|
const hasSelection = Boolean(selectedCategoryCode);
|
||
|
|
|
||
|
|
return {
|
||
|
|
// 상태
|
||
|
|
selectedCategoryCode,
|
||
|
|
selectedCategory,
|
||
|
|
hasSelection,
|
||
|
|
|
||
|
|
// 액션
|
||
|
|
selectCategory,
|
||
|
|
clearSelection,
|
||
|
|
};
|
||
|
|
}
|