[ Refactor/#423 ] group page query key 리팩토링

src/pages/admin/hooks/queries.ts

@@ -2,30 +2,28 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { isAxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 
+import { groupKey } from '../../groupFeed/hooks/queries';
 import deleteGroup from '../apis/deleteGroup';
 import {
+  deleteAdminTopic,
   editAdminTopic,
   fetchAdminTopic,
   postAdminTopic,
   postAdminTopicPropTypes,
-  deleteAdminTopic,
 } from '../apis/fetchAdminData';
 import fetchAdminGroupInfo from '../apis/fetchAdminGroupInfo';
 import fetchDeleteMember from '../apis/fetchDeleteMember';
 import { fetchInvitationLink } from '../apis/fetchInvitationLink';
 import fetchMemberInfo from '../apis/fetchMemberInfo';
 import putAdminEditGroupInfo, { AdminEditGroupInfoPropTypes } from '../apis/putAdminEditGroupInfo';
 
-import { QUERY_KEY_GROUPFEED } from '../../groupFeed/hooks/queries';
-
 export const QUERY_KEY_ADMIN = {
   useMemberInfo: 'fetchMemberInfo',
   fetchInvitationLink: 'fetchInvitationLink',
   fetchAdminGroupInfo: 'fetchAdminGroupInfo',
   putAdminEditGroupInfo: 'putAdminEditGroupInfo',
   deleteGroup: 'deleteGroup',
 };
-
 export const useAdminTopic = (groupId: string | undefined, pageNum: number) => {
   const { data, isLoading, isError, error } = useQuery({
     queryKey: ['adminTopic', groupId, pageNum],
@@ -178,7 +176,7 @@ export const usePutAdminGroupInfo = ({
       putAdminEditGroupInfo({ groupName, groupDesc, groupImageServerUrl, isPublic, groupId }),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: [QUERY_KEY_GROUPFEED.fetchHeaderGroup],
+        queryKey: groupKey.detail(groupId || ''),
       });
     },
     onError: (err) => {
@@ -209,7 +207,7 @@ export const useDeleteGroup = (groupId: string) => {
     onSuccess: () => {
       //key에 대한 정책을 변경해야함, 현재는 key의 unique함은 보장되어있지만 관련성이 적어 key의 역할을 제대로 못하고있음
       queryClient.invalidateQueries({
-        queryKey: [QUERY_KEY_GROUPFEED.fetchHeaderGroup],
+        queryKey: groupKey.all,
       });
       navigate('/');
     },

src/pages/groupFeed/GroupFeed.tsx

@@ -34,6 +34,7 @@ const GroupFeed = () => {
     isError,
     error,
   } = useGroupFeedAuth(groupId || '');
+
   const { isPublic, isLoading: isPublicLoading } = useGroupFeedPublicStatus(groupId || '');
 
   //sessionStorage에 저장된 카테고리 id 값을 가져옴

src/pages/groupFeed/carousel/Carousel.tsx

@@ -42,11 +42,15 @@ const Carousel = () => {
     setSelectedTopicId(topicId);
   };
 
-  const { topicInfo, isLoading: articleListLoading } = useArticleList(selectedTopicId);
+  const { topicInfo, isLoading: articleListLoading } = useArticleList(
+    selectedTopicId,
+    groupId || '',
+  );
 
   useEffect(() => {
     if (groupFeedCategoryData) {
       setSelectedTopicId(groupFeedCategoryData[0]?.topicId);
+      console.log(groupFeedCategoryData);
     }
   }, [groupFeedCategoryData]);
 
@@ -73,9 +77,6 @@ const Carousel = () => {
             </CarouselContainer>
           ))}
         </Slider>
-        {/* {groupFeedCategoryData !== undefined && groupFeedCategoryData?.length > 6 && (
-          <GroupTabBtnBaseNextIcon className="groupFeedCarousel .slick-next.slick-disabled " />
-        )} */}
       </CarouselWrapper>
       <Spacing marginBottom="3.2" />
       <Topic>{topicInfo?.topic}</Topic>
@@ -98,21 +99,6 @@ const CarouselWrapper = styled.div`
   border-bottom: 0.1rem solid ${({ theme }) => theme.colors.gray30};
 `;
 
-// const GroupTabBtnBaseBeforeIcon = styled(GroupTabBtnBaseBeforeIc)`
-//   position: absolute;
-//   left: -1rem;
-
-//   pointer-events: none;
-// `;
-
-// const GroupTabBtnBaseNextIcon = styled(GroupTabBtnBaseNextIc)`
-//   position: absolute;
-//   top: 3.2rem;
-//   right: -1rem;
-
-//   pointer-events: none;
-// `;
-
 const Topic = styled.div`
   width: 63.1rem;
 

src/pages/groupFeed/carousel/EachArticle.tsx

@@ -23,6 +23,7 @@ const EachArticle = (props: EachProfilePropTypes) => {
   const { groupId, selectedTopicId } = props;
   const { postListData, fetchNextPage, hasNextPage, isFetchingNextPage } = useArticleList(
     selectedTopicId || '',
+    groupId,
   );
   const navigate = useNavigate();
   const handleGoPostDetail = (postId: string) => {

src/pages/groupFeed/components/GroupTodayWriteStyle.tsx

@@ -1,12 +1,10 @@
 import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
 
-import { useTodayWritingStyle } from '../hooks/queries';
-
 import Button from '../../../components/commons/Button';
 import Error from '../../error/Error';
 import Loading from '../../loading/Loading';
-
+import { useTodayTopic } from '../hooks/queries';
 interface GroupTodayWriteStylePropTypes {
   isMember: boolean | undefined; //나의 글 작성하기 권한 확인
   groupId: string | undefined; //오늘의 주제
@@ -15,7 +13,7 @@ interface GroupTodayWriteStylePropTypes {
 const GroupTodayWriteStyle = (props: GroupTodayWriteStylePropTypes) => {
   const navigate = useNavigate();
   const { isMember, groupId } = props;
-  const { content, isLoading, isError, error } = useTodayWritingStyle(groupId || '');
+  const { content, isLoading, isError, error } = useTodayTopic(groupId || '');
 
   const handleNavigatePostPage = () => {
     navigate(`/post/${groupId}/post`);

src/pages/groupFeed/hooks/queries.ts

@@ -1,5 +1,4 @@
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-
 import checkAuthenticate from '../../../utils/checkAuthenticate';
 import {
   fetchArticleList,
@@ -15,20 +14,6 @@ import {
   fetchWriterNameOnly,
 } from '../apis/fetchGroupFeed';
 import { fetchHeaderGroup } from '../apis/fetchHeaderGroup';
-
-export const QUERY_KEY_GROUPFEED = {
-  getGroupFeedAuth: 'getGroupFeedAuth',
-  getGroupFeedPublicStatus: 'getGroupFeedPublicStatus',
-  getTodayWritingStyle: 'getTodayWritingStyle',
-  getCuriousPost: 'getCuriousPost',
-  getGroupFeedCategory: 'getGroupFeedCategory',
-  getCuriousWriters: 'getCuriousWriters',
-  getArticleList: 'getArticleList',
-  fetchHeaderGroup: 'fetchHeaderGroup',
-  getWriterNameOnly: 'getWriterNameOnly',
-  getWriterInfo: 'getWriterInfo',
-};
-
 interface GroupFeedAuthQueryResult {
   isMember: boolean | undefined;
   isOwner: boolean | undefined;
@@ -37,9 +22,28 @@ interface GroupFeedAuthQueryResult {
   error: Error | null;
 }
 
+export const groupKey = {
+  all: ['group'] as const,
+  info: () => [...groupKey.all, 'info'] as const,
+  detail: (groupId: string) => [...groupKey.info(), 'detail', groupId] as const,
+  auth: (groupId: string) => [...groupKey.info(), 'auth', groupId] as const,
+  isPublic: (groupId: string) => [...groupKey.info(), 'public', groupId] as const,
+  topics: (groupId: string) => [...groupKey.all, 'topic', groupId] as const,
+  topic: (groupId: string) => [...groupKey.topics(groupId), 'todayTopic'] as const,
+  posts: (topicId: string, groupId: string) =>
+    [...groupKey.topics(groupId), 'posts', topicId] as const,
+  curiousPosts: (groupId: string) => [...groupKey.info(), 'curiousPosts', groupId] as const,
+  curiousWriters: (groupId: string) => [...groupKey.info(), 'curiousWriter', groupId] as const,
+
+  user: () => [...groupKey.all, 'user'] as const,
+  userName: (groupId: string) => [...groupKey.user(), 'userName', groupId] as const,
+  userInfo: (writerNameId: number | undefined) =>
+    [...groupKey.user(), 'userInfo', writerNameId] as const,
+  userGroups: () => [...groupKey.user(), 'groups'] as const,
+};
 export const useGroupFeedAuth = (groupId: string): GroupFeedAuthQueryResult => {
   const { data, isLoading, isError, error } = useQuery({
-    queryKey: [QUERY_KEY_GROUPFEED.getGroupFeedAuth, groupId],
+    queryKey: groupKey.auth(groupId),
     queryFn: () => fetchGroupFeedAuth(groupId),
     enabled: !!checkAuthenticate(),
   });
@@ -66,7 +70,7 @@ interface GroupInfoQueryResult {
 
 export const useGroupFeedPublicStatus = (groupId: string) => {
   const { data, isLoading, isError } = useQuery({
-    queryKey: [QUERY_KEY_GROUPFEED.getGroupFeedPublicStatus, groupId],
+    queryKey: groupKey.isPublic(groupId),
     queryFn: () => fetchGroupPublicStatus(groupId),
     enabled: !!groupId,
   });
@@ -78,7 +82,7 @@ export const useGroupFeedPublicStatus = (groupId: string) => {
 
 export const useGroupInfo = (groupId: string): GroupInfoQueryResult => {
   const { data, isLoading, isError, error } = useQuery({
-    queryKey: ['groupFeed_Info_moimId', groupId],
+    queryKey: groupKey.detail(groupId),
     queryFn: () => fetchGroupInfo(groupId),
   });
 
@@ -87,9 +91,9 @@ export const useGroupInfo = (groupId: string): GroupInfoQueryResult => {
   return { groupInfoData, isLoading, isError, error };
 };
 
-export const useTodayWritingStyle = (groupId: string) => {
+export const useTodayTopic = (groupId: string) => {
   const { data, isLoading, isError, error } = useQuery({
-    queryKey: [QUERY_KEY_GROUPFEED.getTodayWritingStyle, groupId],
+    queryKey: groupKey.topic(groupId),
     queryFn: () => fetchTodayTopic(groupId),
   });
 
@@ -99,7 +103,7 @@ export const useTodayWritingStyle = (groupId: string) => {
 
 export const useCuriousPost = (groupId: string) => {
   const { data, isLoading, isError, error } = useQuery({
-    queryKey: [QUERY_KEY_GROUPFEED.getCuriousPost, groupId],
+    queryKey: groupKey.curiousPosts(groupId),
     queryFn: () => fetchCuriousPost(groupId),
   });
 
@@ -110,7 +114,7 @@ export const useCuriousPost = (groupId: string) => {
 
 export const useTopicList = (groupId: string) => {
   const { data, isLoading, isError, error } = useQuery({
-    queryKey: [QUERY_KEY_GROUPFEED.getGroupFeedCategory, groupId],
+    queryKey: groupKey.topics(groupId),
     queryFn: () => fetchTopicList(groupId),
   });
 
@@ -121,7 +125,7 @@ export const useTopicList = (groupId: string) => {
 
 export const useCuriousWriters = (groupId: string) => {
   const { data, isLoading, isError, error } = useQuery({
-    queryKey: [QUERY_KEY_GROUPFEED.getCuriousWriters, groupId],
+    queryKey: groupKey.curiousWriters(groupId),
     queryFn: () => fetchCuriousWriters(groupId),
   });
 
@@ -130,10 +134,10 @@ export const useCuriousWriters = (groupId: string) => {
   return { curiousWriterData, isLoading, isError, error };
 };
 
-export const useArticleList = (topicId: string) => {
+export const useArticleList = (topicId: string, groupId: string) => {
   const { data, isLoading, isError, error, hasNextPage, fetchNextPage, isFetchingNextPage } =
     useInfiniteQuery({
-      queryKey: [QUERY_KEY_GROUPFEED.getArticleList, topicId],
+      queryKey: groupKey.posts(topicId, groupId),
       queryFn: ({ pageParam }) => fetchArticleList(topicId, pageParam),
       staleTime: 10000, //20초 캐시
       enabled: !!topicId,
@@ -164,7 +168,7 @@ export const useArticleList = (topicId: string) => {
 
 export const useFetchHeaderGroup = () => {
   const { data } = useQuery({
-    queryKey: [QUERY_KEY_GROUPFEED.fetchHeaderGroup],
+    queryKey: groupKey.userGroups(),
     queryFn: () => fetchHeaderGroup(),
     retry: 3,
   });
@@ -177,7 +181,7 @@ export const useFetchWriterNameOnly = (
   isOwner: boolean | undefined,
 ) => {
   const { data } = useQuery({
-    queryKey: [QUERY_KEY_GROUPFEED.getWriterNameOnly, groupId],
+    queryKey: groupKey.userName(groupId),
     queryFn: () => fetchWriterNameOnly(groupId),
     enabled: !!isMember || !!isOwner,
   });
@@ -190,7 +194,7 @@ export const useFetchWriterNameOnly = (
 //[GET] 필명 + 프로필 설명 GET
 export const useFetchWriterInfo = (writerNameId: number | undefined) => {
   const { data } = useQuery({
-    queryKey: [QUERY_KEY_GROUPFEED.getWriterInfo, writerNameId],
+    queryKey: groupKey.userInfo(writerNameId),
     queryFn: () => fetchWriterInfo(writerNameId),
     enabled: writerNameId !== undefined,
   });
@@ -210,7 +214,7 @@ export const useEditWriterIntro = (writerNameId: number | undefined) => {
       fetchEditIntro({ writerNameId, description }),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: [QUERY_KEY_GROUPFEED.getWriterInfo, writerNameId],
+        queryKey: groupKey.userInfo(writerNameId),
       });
     },
   });

src/pages/groupInvite/components/GroupInfo.tsx

@@ -14,7 +14,7 @@ interface GroupInfoPropTypes {
 
 const GroupInfo = (props: GroupInfoPropTypes) => {
   const { moimTitle, imageUrl, leader, foundedDate, memberCount, description } = props;
-  console.log(moimTitle);
+
   return (
     <GroupInfoWrapper>
       <GroupImg src={imageUrl} alt={'모임 이미지'} />