diff --git a/package-lock.json b/package-lock.json index 63ae282..bd7729b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@tailwindcss/vite": "^4.1.18", "@tanstack/react-query": "^5.90.19", + "@tanstack/react-query-devtools": "^5.91.3", "axios": "^1.13.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", @@ -1991,9 +1992,19 @@ } }, "node_modules/@tanstack/query-core": { - "version": "5.90.19", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.19.tgz", - "integrity": "sha512-GLW5sjPVIvH491VV1ufddnfldyVB+teCnpPIvweEfkpRx7CfUmUGhoh9cdcUKBh/KwVxk22aNEDxeTsvmyB/WA==", + "version": "5.91.2", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.91.2.tgz", + "integrity": "sha512-Uz2pTgPC1mhqrrSGg18RKCWT/pkduAYtxbcyIyKBhw7dTWjXZIzqmpzO2lBkyWr4hlImQgpu1m1pei3UnkFRWw==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/query-devtools": { + "version": "5.93.0", + "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.93.0.tgz", + "integrity": "sha512-+kpsx1NQnOFTZsw6HAFCW3HkKg0+2cepGtAWXjiiSOJJ1CtQpt72EE2nyZb+AjAbLRPoeRmPJ8MtQd8r8gsPdg==", "license": "MIT", "funding": { "type": "github", @@ -2001,18 +2012,35 @@ } }, "node_modules/@tanstack/react-query": { - "version": "5.90.19", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.19.tgz", - "integrity": "sha512-qTZRZ4QyTzQc+M0IzrbKHxSeISUmRB3RPGmao5bT+sI6ayxSRhn0FXEnT5Hg3as8SBFcRosrXXRFB+yAcxVxJQ==", + "version": "5.91.3", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.91.3.tgz", + "integrity": "sha512-D8jsCexxS5crZxAeiH6VlLHOUzmHOxeW5c11y8rZu0c34u/cy18hUKQXA/gn1Ila3ZIFzP+Pzv76YnliC0EtZQ==", + "license": "MIT", + "dependencies": { + "@tanstack/query-core": "5.91.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18 || ^19" + } + }, + "node_modules/@tanstack/react-query-devtools": { + "version": "5.91.3", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.91.3.tgz", + "integrity": "sha512-nlahjMtd/J1h7IzOOfqeyDh5LNfG0eULwlltPEonYy0QL+nqrBB+nyzJfULV+moL7sZyxc2sHdNJki+vLA9BSA==", "license": "MIT", "dependencies": { - "@tanstack/query-core": "5.90.19" + "@tanstack/query-devtools": "5.93.0" }, "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { + "@tanstack/react-query": "^5.90.20", "react": "^18 || ^19" } }, diff --git a/package.json b/package.json index a42d658..29647ca 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@tailwindcss/vite": "^4.1.18", "@tanstack/react-query": "^5.90.19", + "@tanstack/react-query-devtools": "^5.91.3", "axios": "^1.13.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", diff --git a/public/sub_logo.png b/public/sub_logo.png index 5a9d2b1..4da123a 100644 Binary files a/public/sub_logo.png and b/public/sub_logo.png differ diff --git a/public/sub_logo2.png b/public/sub_logo2.png new file mode 100644 index 0000000..5a9d2b1 Binary files /dev/null and b/public/sub_logo2.png differ diff --git a/src/features/home/api/company.ts b/src/features/home/api/company.ts index 222dc4e..488095e 100644 --- a/src/features/home/api/company.ts +++ b/src/features/home/api/company.ts @@ -1,5 +1,6 @@ import { HOME_QUERY_KEY } from "../consts/queryKeys"; import api from "@/shared/api/api"; +import { QUERY_CACHE_TIME } from "@/shared/consts/cacheTimes"; import { API_ENDPOINTS } from "@/shared/consts/endpoints"; import { useSuspenseQuery } from "@tanstack/react-query"; @@ -12,7 +13,9 @@ export const getCompanyList = async () => { export const useGetCompany = () => { return useSuspenseQuery({ queryFn: getCompanyList, - queryKey: [HOME_QUERY_KEY.COMPANY], + queryKey: [HOME_QUERY_KEY.COMPANIES], select: res => res.data, + staleTime: QUERY_CACHE_TIME.COMPANIES.staleTime, + gcTime: QUERY_CACHE_TIME.COMPANIES.gcTime, }); }; diff --git a/src/features/home/api/my.types.ts b/src/features/home/api/my.types.ts deleted file mode 100644 index eeb9953..0000000 --- a/src/features/home/api/my.types.ts +++ /dev/null @@ -1,20 +0,0 @@ -export type MyProfileType = { - nickName: string; - description: string; -}; - -export type InterestTypeDto = { - category: string; - keywords: string[]; -}; - -export type InterestDataDto = { - interests: InterestTypeDto[]; -}; - -export type InterestResponseDto = { - data: InterestDataDto; - code: string; - isSuccess: boolean; - message: string; -}; diff --git a/src/features/home/api/recommendation.ts b/src/features/home/api/recommendation.ts index fa8f03f..0afacfb 100644 --- a/src/features/home/api/recommendation.ts +++ b/src/features/home/api/recommendation.ts @@ -1,4 +1,5 @@ import api from "@/shared/api/api"; +import { QUERY_CACHE_TIME } from "@/shared/consts/cacheTimes"; import { HOME_QUERY_KEY } from "../consts/queryKeys"; import { SHARED_QUERY_KEY } from "@/shared/consts/queryKeys"; import { API_ENDPOINTS } from "@/shared/consts/endpoints"; @@ -13,13 +14,15 @@ export const getRecommendPostList = async () => { export const useGetRecommendPostList = (isLogin: boolean) => { return useQuery({ queryKey: [ - HOME_QUERY_KEY.POSTS, + SHARED_QUERY_KEY.POSTS, SHARED_QUERY_KEY.MY, HOME_QUERY_KEY.POSTS_RECOMMEND, ], queryFn: getRecommendPostList, select: res => res.data, enabled: isLogin, + staleTime: QUERY_CACHE_TIME.POSTS.staleTime, + gcTime: QUERY_CACHE_TIME.POSTS.gcTime, }); }; @@ -32,7 +35,7 @@ export const postRecommendList = async () => { export const usePostRecommendPostList = () => { const queryClient = useQueryClient(); const queryKey = [ - HOME_QUERY_KEY.POSTS, + SHARED_QUERY_KEY.POSTS, SHARED_QUERY_KEY.MY, HOME_QUERY_KEY.POSTS_RECOMMEND, ] as const; diff --git a/src/features/home/api/search.ts b/src/features/home/api/search.ts index f3a9ee4..d6e5558 100644 --- a/src/features/home/api/search.ts +++ b/src/features/home/api/search.ts @@ -3,7 +3,9 @@ import { useMutation, useSuspenseQuery } from "@tanstack/react-query"; import type { SearchType } from "./search.types"; import { HOME_QUERY_KEY } from "../consts/queryKeys"; import api from "@/shared/api/api"; +import { QUERY_CACHE_TIME } from "@/shared/consts/cacheTimes"; import { API_ENDPOINTS } from "@/shared/consts/endpoints"; +import { SHARED_QUERY_KEY } from "@/shared/consts/queryKeys"; export const getSearchPost = async (query: string) => { const { data } = await api.get(API_ENDPOINTS.search, { params: { query } }); @@ -12,9 +14,11 @@ export const getSearchPost = async (query: string) => { export const useGetSearchPost = (query: string) => { return useSuspenseQuery({ - queryKey: [HOME_QUERY_KEY.POSTS, HOME_QUERY_KEY.POSTS_SEARCH, query], + queryKey: [SHARED_QUERY_KEY.POSTS, HOME_QUERY_KEY.POSTS_SEARCH, query], queryFn: () => getSearchPost(query), select: res => res.data, + staleTime: QUERY_CACHE_TIME.POSTS.staleTime, + gcTime: QUERY_CACHE_TIME.POSTS.gcTime, }); }; diff --git a/src/features/home/consts/queryKeys.ts b/src/features/home/consts/queryKeys.ts index aa3fd53..94c5b5a 100644 --- a/src/features/home/consts/queryKeys.ts +++ b/src/features/home/consts/queryKeys.ts @@ -1,7 +1,6 @@ export const HOME_QUERY_KEY = { - COMPANY: "company", - POSTS: "posts", - POSTS_COMPANIES: "companies", + COMPANIES: "companies", // 게시글이 있는 회사 목록 조회 + POSTS_BY_COMPANY: "by-company", // 회사 기준 게시글 목록 조회 POSTS_RECOMMEND: "recommend", POSTS_SEARCH: "search", } as const; diff --git a/src/features/home/model/useInfiniteCompaniesPosts.ts b/src/features/home/model/useInfiniteCompaniesPosts.ts index 212361b..7259694 100644 --- a/src/features/home/model/useInfiniteCompaniesPosts.ts +++ b/src/features/home/model/useInfiniteCompaniesPosts.ts @@ -1,3 +1,5 @@ +import { SHARED_QUERY_KEY } from "@/shared/consts/queryKeys"; +import { QUERY_CACHE_TIME } from "@/shared/consts/cacheTimes"; import { getCompaniesPostList } from "../api/post"; import { HOME_QUERY_KEY } from "../consts/queryKeys"; import { useSuspenseInfiniteQuery } from "@tanstack/react-query"; @@ -6,15 +8,15 @@ interface UseInfiniteCompaniesPostsParams { companies: string[]; size?: number; } - +//기업별 게시글 필터링 조회 export const useInfiniteCompaniesPosts = ({ companies, size = 20, }: UseInfiniteCompaniesPostsParams) => { return useSuspenseInfiniteQuery({ queryKey: [ - HOME_QUERY_KEY.POSTS, - HOME_QUERY_KEY.POSTS_COMPANIES, + SHARED_QUERY_KEY.POSTS, + HOME_QUERY_KEY.POSTS_BY_COMPANY, companies, ] as const, queryFn: ({ pageParam }) => @@ -36,7 +38,7 @@ export const useInfiniteCompaniesPosts = ({ }, select: res => res.pages, - staleTime: 1000 * 60 * 5, - gcTime: 1000 * 60 * 10, + staleTime: QUERY_CACHE_TIME.POSTS.staleTime, + gcTime: QUERY_CACHE_TIME.POSTS.gcTime, }); }; diff --git a/src/features/home/model/useInfinitePosts.ts b/src/features/home/model/useInfinitePosts.ts index df6cde1..b685c2a 100644 --- a/src/features/home/model/useInfinitePosts.ts +++ b/src/features/home/model/useInfinitePosts.ts @@ -1,19 +1,18 @@ import { getPostList } from "../api/post"; -import { HOME_QUERY_KEY } from "../consts/queryKeys"; -import type { - PageParamType, - PostResponseDto, -} from "../api/post.types"; +import type { PageParamType, PostResponseDto } from "../api/post.types"; +import { QUERY_CACHE_TIME } from "@/shared/consts/cacheTimes"; import { useSuspenseInfiniteQuery, type QueryFunctionContext, } from "@tanstack/react-query"; +import { SHARED_QUERY_KEY } from "@/shared/consts/queryKeys"; interface UseInfinitePostsParams { sortBy: "LATEST" | "POPULAR"; size?: number; } +//인기순, 최근생성된 게시글 export const useInfinitePosts = ({ sortBy, size = 20, @@ -22,14 +21,14 @@ export const useInfinitePosts = ({ PostResponseDto, Error, PostResponseDto[], - readonly [typeof HOME_QUERY_KEY.POSTS, "LATEST" | "POPULAR"], + readonly [typeof SHARED_QUERY_KEY.POSTS, "LATEST" | "POPULAR"], PageParamType >({ - queryKey: [HOME_QUERY_KEY.POSTS, sortBy] as const, + queryKey: [SHARED_QUERY_KEY.POSTS, sortBy] as const, queryFn: ({ pageParam, }: QueryFunctionContext< - readonly [typeof HOME_QUERY_KEY.POSTS, "LATEST" | "POPULAR"], + readonly [typeof SHARED_QUERY_KEY.POSTS, "LATEST" | "POPULAR"], PageParamType >) => getPostList({ @@ -56,7 +55,7 @@ export const useInfinitePosts = ({ }, select: res => res.pages, - staleTime: 1000 * 60 * 5, - gcTime: 1000 * 60 * 10, + staleTime: QUERY_CACHE_TIME.POSTS.staleTime, + gcTime: QUERY_CACHE_TIME.POSTS.gcTime, }); }; diff --git a/src/features/home/ui/PostCardList.tsx b/src/features/home/ui/PostCardList.tsx index 1e5d1ee..9ce0a5e 100644 --- a/src/features/home/ui/PostCardList.tsx +++ b/src/features/home/ui/PostCardList.tsx @@ -16,7 +16,7 @@ const PostCardList = ({ selectedTab }: PostCardListProps) => { const { companies } = useCompanyStore(); const infiniteRef = useRef(null); - const companyQuery = useInfiniteCompaniesPosts({ companies }); + const companyQuery = useInfiniteCompaniesPosts({ companies }); //기업별 post List const recentQuery = useInfinitePosts({ sortBy: "LATEST" }); const popularQuery = useInfinitePosts({ sortBy: "POPULAR" }); const { user } = useUserStore(); @@ -48,6 +48,7 @@ const PostCardList = ({ selectedTab }: PostCardListProps) => { (page: PostResponseDto) => page.data.posts, ) ?? []); + console.log(posts); return ( <>