SKRF-460 fix : 클럽 공지사항 QA적용 (#221)

* feat : 공지사항 수정, 작성 비속어 처리 * feat : 공지사항 5번째 줄 부터 ellipsis 처리 * refactor : 모달 close기능 훅의 onSuccess로 옮김
Space-Club · Dec 1, 2023 · c8aec36 · c8aec36
1 parent c9f129d
commit c8aec36
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 12 deletions.
diff --git a/src/components/ClubNotice/ClubNotice.style.ts b/src/components/ClubNotice/ClubNotice.style.ts
@@ -6,11 +6,16 @@ const ClubNoticeContainer = styled(whiteGreyBox)`
   display: flex;
   width: 100%;
   height: 100%;
-  padding: 1.1rem 2rem;
+  padding: 1.3rem 2rem;
   cursor: pointer;
 `;
 
 const ClubNoticeTextStyled = styled.textarea`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
   font-size: ${Theme.fontSize.largeContent};
   width: 100%;
   height: 100%;

diff --git a/src/components/Modals/NoticeModal.tsx b/src/components/Modals/NoticeModal.tsx
@@ -42,15 +42,14 @@ const NoticeModal = ({
 
   const { createToast } = useToast();
 
-  const { postNotice } = usePostNoticeMutation();
-  const { patchNotice } = usePatchClubNoticeMutation();
-  const { deleteNotice } = useDeleteClubNoticeMutation();
+  const { postNotice } = usePostNoticeMutation({ handleSuccess: () => onClose() });
+  const { patchNotice } = usePatchClubNoticeMutation({ handleSuccess: () => onClose() });
+  const { deleteNotice } = useDeleteClubNoticeMutation({ handleSuccess: () => onClose() });
 
   const handleCreateNoticeButtonClick = () => {
     const notice = getValidNotice();
     if (notice) {
       postNotice({ clubId, notice });
-      onClose();
     }
   };
 
@@ -74,7 +73,6 @@ const NoticeModal = ({
       throw new Error('공지사항 삭제를 위해서 noticeId가 필요합니다.');
     }
     deleteNotice({ clubId, noticeId });
-    onClose();
   };
 
   const getValidNotice = () => {
@@ -125,7 +123,7 @@ const NoticeModal = ({
           ref={noticeContentRef}
           disabled={!isEdit}
           defaultValue={content}
-          maxLength={2000}
+          maxLength={1000}
           {...props}
         />
         <NoticeModalHeaderWrapper />

diff --git a/src/hooks/query/club/useDeleteClubNoticeMutation.ts b/src/hooks/query/club/useDeleteClubNoticeMutation.ts
@@ -1,16 +1,26 @@
 import deleteClubNotice from '@/apis/club/deleteClubNotice';
+import useToast from '@/hooks/useToast';
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { QUERY_KEY } from './useGetClubNoticeQuery';
 
-const useDeleteClubNoticeMutation = () => {
+interface useDeleteClubNoticeMutationProps {
+  handleSuccess?: () => void;
+}
+
+const useDeleteClubNoticeMutation = ({ handleSuccess }: useDeleteClubNoticeMutationProps) => {
   const queryClient = useQueryClient();
+  const { createToast } = useToast();
 
   const { mutate: deleteNotice } = useMutation({
     mutationFn: deleteClubNotice,
     onSuccess: () => {
       queryClient.invalidateQueries([QUERY_KEY.CLUB_NOTICE]);
+      handleSuccess?.();
+    },
+    onError: () => {
+      createToast({ message: '공지사항 삭제에 실패했습니다.', toastType: 'error' });
     },
   });
   return { deleteNotice };

diff --git a/src/hooks/query/club/usePatchClubNoticeMutation.ts b/src/hooks/query/club/usePatchClubNoticeMutation.ts
@@ -1,15 +1,32 @@
 import patchClubNotice from '@/apis/club/patchClubNotice';
+import useTextException from '@/hooks/useTextException';
+import useToast from '@/hooks/useToast';
+import { HttpException } from '@/types/common';
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
+import { AxiosError } from 'axios';
+
 import { QUERY_KEY } from './useGetClubNoticeQuery';
 
-const usePatchClubNoticeMutation = () => {
+interface usePatchClubNoticeMutationProps {
+  handleSuccess?: () => void;
+}
+
+const usePatchClubNoticeMutation = ({ handleSuccess }: usePatchClubNoticeMutationProps) => {
   const queryClient = useQueryClient();
+  const { handleTextException } = useTextException();
+  const { createToast } = useToast();
+
   const { data, mutate: patchNotice } = useMutation({
     mutationFn: patchClubNotice,
     onSuccess: () => {
       queryClient.invalidateQueries([QUERY_KEY.CLUB_NOTICE]);
+      handleSuccess?.();
+    },
+    onError: (error: AxiosError<HttpException>) => {
+      handleTextException(error);
+      createToast({ message: '공지사항 수정에 실패했습니다.', toastType: 'error' });
     },
   });
 

diff --git a/src/hooks/query/club/usePostClubNoticeMutation.ts b/src/hooks/query/club/usePostClubNoticeMutation.ts
@@ -1,20 +1,36 @@
 import postClubNotice from '@/apis/club/postClubNotice';
+import useTextException from '@/hooks/useTextException';
+import useToast from '@/hooks/useToast';
+import { HttpException } from '@/types/common';
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
+import { AxiosError } from 'axios';
+
 import { QUERY_KEY } from './useGetClubNoticeQuery';
 
-const usePostNoticeMutation = () => {
+interface usePostNoticeMutationProps {
+  handleSuccess?: () => void;
+}
+
+const usePostNoticeMutation = ({ handleSuccess }: usePostNoticeMutationProps) => {
   const queryClient = useQueryClient();
+  const { createToast } = useToast();
+  const { handleTextException } = useTextException();
 
-  const { mutate: postNotice } = useMutation({
+  const { mutate: postNotice, isSuccess: postSuccess } = useMutation({
     mutationFn: postClubNotice,
     onSuccess: () => {
       queryClient.invalidateQueries([QUERY_KEY.CLUB_NOTICE]);
+      handleSuccess?.();
+    },
+    onError: (error: AxiosError<HttpException>) => {
+      handleTextException(error);
+      createToast({ message: '공지사항 작성에 실패했습니다.', toastType: 'error' });
     },
   });
 
-  return { postNotice };
+  return { postNotice, postSuccess };
 };
 
 export default usePostNoticeMutation;