Merge branch 'develop' of https://github.com/Mile-Writings/Mile-Client …

…into refactor/#432/MainPagePerformanceOptimization

src/App.tsx

@@ -4,7 +4,13 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import Router from './routers/Router';
 
 const App = () => {
-  const queryClient = new QueryClient();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 20 * 1000,
+      },
+    },
+  });
   return (
     <div style={{ fontSize: '16px' }}>
       <QueryClientProvider client={queryClient}>

src/components/commons/Button.tsx

@@ -49,6 +49,9 @@ const basicCSS = css`
   justify-content: center;
   padding: 1rem 1.6rem;
 
+  white-space: nowrap;
+  text-align: center;
+
   cursor: pointer;
   border-radius: 0.8rem;
 `;

src/constants/commentErrorMessage.ts

@@ -0,0 +1,2 @@
+export const NO_COMMENT_ERROR = '댓글을 입력해주세요';
+export const LONG_COMMENT_ERROR = '댓글 최대 길이를 초과했습니다';

src/constants/errorText.ts

@@ -0,0 +1,7 @@
+export const ERROR_MESSAGE = {
+  approach: '잘못된 접근입니다. error code: ',
+  authorization: '접근 권한이 없습니다. error code: ',
+  authentication: '로그인이 필요한 서비스입니다. ',
+  unexpected: '예상치 못한 에러입니다. 마일에게 문의해주세요. ',
+  network: '네트워크 에러입니다. 잠시후 다시 시도해주세요. ',
+};

src/mocks/handler.ts

@@ -1,5 +1,4 @@
 import { http, HttpResponse } from 'msw';
-
 export const handlers = [
   http.get('/api/moim/moimId/topicList', ({ request }) => {
     const url = new URL(request.url);
@@ -47,7 +46,6 @@ export const handlers = [
   http.put('/api/topic/topicId', () => {
     return HttpResponse.json({ status: 200, message: '글감 수정이 완료되었습니다.' });
   }),
-
   http.get('/api/moim/:moimId/authenticate', () => {
     return HttpResponse.json({
       status: 200,
@@ -57,7 +55,6 @@ export const handlers = [
       },
     });
   }),
-
   http.get('/api/moim/:moimId/public-status', () => {
     return HttpResponse.json({
       status: 200,
@@ -67,4 +64,22 @@ export const handlers = [
       message: '공개/비공개 확인',
     });
   }),
+  http.post('https://dev.milewriting.com/api/post/:postId/curious', () => {
+    console.log('mocking 완료');
+    return HttpResponse.json({
+      status: 403,
+      message: '접근권한없음',
+      data: {
+        message: "'궁금해요'는 이미 존재합니다.",
+        status: 40306,
+      },
+    });
+  }),
+  http.delete('https://dev.milewriting.com/api/post/:postId/curious', async () => {
+    console.log('삭제 mocking 완료');
+    return HttpResponse.json({
+      status: 500,
+      message: '접근권한없음',
+    });
+  }),
 ];

src/pages/admin/apis/fetchAdminData.ts

@@ -50,7 +50,7 @@ export const postAdminTopic = async ({
     });
     return response.data;
   } catch (error) {
-    console.log('에러:', error);
+    throw error;
   }
 };
 

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],
@@ -50,6 +48,19 @@ export const usePostAdminTopic = (groupId: string | undefined, pageNum: number)
         queryKey: ['adminTopic', groupId, pageNum],
       });
     },
+    onError: (err) => {
+      if (isAxiosError(err) && err.response?.status) {
+        const errorCode = err.response?.data.status;
+        console.log(errorCode, 'code');
+        if (errorCode === 40005) {
+          alert('요청 값에 빈 값이 존재합니다');
+        } else if (errorCode === 40006) {
+          alert('요청 값이 길이를 초과했습니다');
+        } else {
+          console.log(err.response.data.message);
+        }
+      }
+    },
   });
 
   const postMutateAdminTopic = ({ topic, topicTag, topicDescription }: postAdminTopicPropTypes) =>
@@ -122,6 +133,18 @@ export const useEditAdminTopic = (
         queryKey: ['adminTopic', groupId, pageNum],
       });
     },
+    onError: (err) => {
+      if (isAxiosError(err) && err.response?.status) {
+        const errorCode = err.response?.data.status;
+        if (errorCode === 40005) {
+          alert('요청 값에 빈 값이 존재합니다');
+        } else if (errorCode === 40006) {
+          alert('요청 값이 길이를 초과했습니다');
+        } else {
+          console.error();
+        }
+      }
+    },
   });
 
   const editMutateAdminTopic = ({ topic, topicTag, topicDescription }: editTopicPropType) =>
@@ -145,6 +168,16 @@ export const useDeleteAdminTopic = (
         queryKey: ['adminTopic', groupId, pageNum],
       });
     },
+    onError: (err) => {
+      if (isAxiosError(err) && err.response?.status) {
+        const errorCode = err.response?.data.status;
+        if (errorCode === 40015) {
+          alert('모임에 최소 하나의 글감이 있어야 합니다');
+        } else {
+          console.error();
+        }
+      }
+    },
   });
 
   const deleteMutateAdminTopic = () => {
@@ -178,11 +211,22 @@ export const usePutAdminGroupInfo = ({
       putAdminEditGroupInfo({ groupName, groupDesc, groupImageServerUrl, isPublic, groupId }),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: [QUERY_KEY_GROUPFEED.fetchHeaderGroup],
+        queryKey: groupKey.detail(groupId || ''),
       });
     },
     onError: (err) => {
-      if (isAxiosError(err)) {
+      if (isAxiosError(err) && err.response?.status) {
+        const errorCode = err.response?.data.status;
+        if (errorCode === 40005) {
+          alert('요청 값에 빈 값이 존재합니다');
+        } else if (errorCode === 40006) {
+          alert('요청 값이 길이를 초과했습니다');
+        } else if (errorCode === 40018) {
+          alert('사용 불가능한 모임명입니다');
+        } else {
+          console.error();
+        }
+
         if (err?.response?.status === 500) {
           alert('서버내부 오류입니다. ');
         } else if (err?.response?.status === 401) {
@@ -209,7 +253,7 @@ export const useDeleteGroup = (groupId: string) => {
     onSuccess: () => {
       //key에 대한 정책을 변경해야함, 현재는 key의 unique함은 보장되어있지만 관련성이 적어 key의 역할을 제대로 못하고있음
       queryClient.invalidateQueries({
-        queryKey: [QUERY_KEY_GROUPFEED.fetchHeaderGroup],
+        queryKey: groupKey.all,
       });
       navigate('/');
     },

src/pages/createGroup/hooks/queries.ts

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { getGroupNameValidation } from '../apis/getGroupNameValidation';
 import { CreateGroupRequestTypes, postCreateGroup } from '../apis/postGroup';
+import { isAxiosError } from 'axios';
 
 export const QUERY_KEY_CREATE_GROUP = {
   getGroupNameValidation: 'getGroupNameValidation',
@@ -66,6 +67,23 @@ export const usePostCreateGroup = ({
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY_CREATE_GROUP.postCreateGroup] });
       navigate(`/group/success/${data.data.data.moimId}`);
     },
+    onError: (err) => {
+      if (isAxiosError(err) && err.response?.status) {
+        const errorCode = err.response?.data.status;
+        if (errorCode === 40005) {
+          alert('요청 값에 빈 값이 존재합니다');
+          window.location.reload();
+        } else if (errorCode === 40006) {
+          alert('요청 값이 길이를 초과했습니다');
+        } else if (errorCode === 40018) {
+          alert('사용불가능한 모임명입니다');
+        } else if (errorCode === 40019) {
+          alert('최대 가입 가능 모임 개수를 초과했습니다');
+        } else {
+          console.error();
+        }
+      }
+    },
   });
 
   return { mutate, data };

src/pages/createGroupSuccess/CreateGroupSuccess.tsx

@@ -56,6 +56,7 @@ const CreatGroupSection = styled.section`
   gap: 4rem;
   align-items: center;
   width: 72rem;
+  margin-top: 7.4rem;
   padding: 6.4rem 0;
 
   background-color: ${({ theme }) => theme.colors.white};

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

@@ -22,6 +22,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`);