Refactor/#100: 커스텀 Alert, Confirm 일괄 적용 (#101)

* refactor: 커스텀 Alert 일괄 적용 * refactor: 커스텀 Confirm 일괄 적용
ConceptBe · Apr 17, 2024 · b27f297 · b27f297
1 parent 8964802
commit b27f297
Show file tree

Hide file tree

Showing 16 changed files with 63 additions and 34 deletions.
diff --git a/src/pages/FeedDetail/components/Comment.tsx b/src/pages/FeedDetail/components/Comment.tsx
@@ -6,6 +6,7 @@ import EditComment from './EditComment';
 import ModifyDropdown from './ModifyDropdown';
 import Recomment from './Recomment';
 import WriteRecomment from './WriteRecomment';
+import useConfirm from '../../../hooks/useConfrim';
 import { MemberSkills } from '../../Profile/types';
 import { get999PlusCount } from '../../utils';
 import useDeleteCommentMutation from '../hooks/mutations/useDeleteComment';
@@ -42,6 +43,7 @@ const Comment = ({
     likes,
   },
 }: Props) => {
+  const openConfirm = useConfirm();
   const [isEditComment, setIsEditComment] = useState<boolean>(false);
   const [isOpenRecommentTextarea, setIsOpenRecommentTextarea] = useState<boolean>(false);
   const { deleteComment } = useDeleteCommentMutation({ feedId });
@@ -67,9 +69,8 @@ const Comment = ({
     setIsEditComment(true);
   };
 
-  const onDeleteComment = () => {
-    //TODO: #54 머지 후 Confirm 컴포넌트로 대체
-    if (confirm('댓글을 삭제하시겠습니까?')) deleteComment(parentCommentId);
+  const onDeleteComment = async () => {
+    if (await openConfirm({ content: '댓글을 삭제하시겠습니까?' })) deleteComment(parentCommentId);
   };
 
   return (

diff --git a/src/pages/FeedDetail/components/Recomment.tsx b/src/pages/FeedDetail/components/Recomment.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import CommentProfileInfo from './CommentProfileInfo';
 import EditComment from './EditComment';
 import ModifyDropdown from './ModifyDropdown';
+import useConfirm from '../../../hooks/useConfrim';
 import { get999PlusCount } from '../../utils';
 import useDeleteCommentMutation from '../hooks/mutations/useDeleteComment';
 import useFocusEditComment from '../hooks/useFocusEditComment';
@@ -35,6 +36,7 @@ const Recomment = ({
     likes,
   },
 }: Props) => {
+  const openConfirm = useConfirm();
   const [isEditComment, setIsEditComment] = useState<boolean>(false);
   const { deleteComment } = useDeleteCommentMutation({ feedId });
   const toggleLikeComment = useToggleLikeComment({ feedId, commentId: childCommentId, isLike: likes });
@@ -49,9 +51,8 @@ const Recomment = ({
     setIsEditComment(true);
   };
 
-  const onDeleteComment = () => {
-    //TODO: #54 머지 후 Confirm 컴포넌트로 대체
-    if (confirm('답글을 삭제하시겠습니까?')) deleteComment(childCommentId);
+  const onDeleteComment = async () => {
+    if (await openConfirm({ content: '답글을 삭제하시겠습니까?' })) deleteComment(childCommentId);
   };
 
   return (

diff --git a/src/pages/FeedDetail/hooks/mutations/useDeleteComment.ts b/src/pages/FeedDetail/hooks/mutations/useDeleteComment.ts
@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { http } from '../../../../api/http';
+import useAlert from '../../../../hooks/useAlert';
 
 interface Props {
   feedId: string;
@@ -10,6 +11,7 @@ interface Props {
 const _deleteComment = (commentId: string) => http.delete(`/comments/${commentId}`);
 
 const useDeleteCommentMutation = ({ feedId }: Props) => {
+  const openAlert = useAlert();
   const queryClient = useQueryClient();
   const { mutate: deleteComment, ...rest } = useMutation({
     mutationFn: _deleteComment,
@@ -18,7 +20,7 @@ const useDeleteCommentMutation = ({ feedId }: Props) => {
       queryClient.invalidateQueries({ queryKey: ['feed', 'detail', feedId] });
     },
     onError: (error: AxiosError<{ message: string }>) => {
-      alert(error.response?.data.message ?? '댓글 삭제에 실패했습니다.');
+      openAlert({ content: error.response?.data.message ?? '댓글 삭제에 실패했습니다.' });
     },
   });
 

diff --git a/src/pages/FeedDetail/hooks/mutations/useDeleteCommentLike.ts b/src/pages/FeedDetail/hooks/mutations/useDeleteCommentLike.ts
@@ -2,20 +2,22 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { http } from '../../../../api/http';
+import useAlert from '../../../../hooks/useAlert';
 
 const _deleteLikeComment = (commentId: string) => {
   return http.delete(`/comments/likes/${commentId}`);
 };
 
 const useDeleteCommentLike = ({ feedId }: { feedId: string }) => {
+  const openAlert = useAlert();
   const queryClient = useQueryClient();
   const { mutate: deleteLikeComment, ...rest } = useMutation({
     mutationFn: _deleteLikeComment,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['comments', feedId] });
     },
     onError: (error: AxiosError<{ message: string }>) => {
-      alert(error.response?.data.message ?? '좋아요 해제에 실패했습니다.');
+      openAlert({ content: error.response?.data.message ?? '좋아요 해제에 실패했습니다.' });
     },
   });
 

diff --git a/src/pages/FeedDetail/hooks/mutations/useDeleteFeedLike.ts b/src/pages/FeedDetail/hooks/mutations/useDeleteFeedLike.ts
@@ -2,20 +2,22 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { http } from '../../../../api/http';
+import useAlert from '../../../../hooks/useAlert';
 
 const _deleteLike = (id: string) => {
   return http.delete(`/ideas/likes/${id}`);
 };
 
 const useDeleteFeedLike = (id: string) => {
+  const openAlert = useAlert();
   const queryClient = useQueryClient();
   const { mutate: deleteLike, ...rest } = useMutation({
     mutationFn: _deleteLike,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['feed', 'detail', id] });
     },
     onError: (error: AxiosError<{ message: string }>) => {
-      alert(error.response?.data.message ?? '좋아요 해제에 실패했습니다.');
+      openAlert({ content: error.response?.data.message ?? '좋아요 해제에 실패했습니다.' });
     },
   });
 

diff --git a/src/pages/FeedDetail/hooks/mutations/useDeleteFeedScrap.ts b/src/pages/FeedDetail/hooks/mutations/useDeleteFeedScrap.ts
@@ -2,20 +2,22 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { http } from '../../../../api/http';
+import useAlert from '../../../../hooks/useAlert';
 
 const _deleteScrap = (id: string) => {
   return http.delete<void>(`/bookmark/${id}`);
 };
 
 const useDeleteFeedScrap = (id: string) => {
+  const openAlert = useAlert();
   const queryClient = useQueryClient();
   const { mutate: deleteScrap, ...rest } = useMutation({
     mutationFn: _deleteScrap,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['feed', 'detail', id] });
     },
     onError: (error: AxiosError<{ message: string }>) => {
-      alert(error.response?.data.message ?? '스크랩 해제에 실패했습니다.');
+      openAlert({ content: error.response?.data.message ?? '스크랩 해제에 실패했습니다.' });
     },
   });
 

diff --git a/src/pages/FeedDetail/hooks/mutations/usePatchComment.ts b/src/pages/FeedDetail/hooks/mutations/usePatchComment.ts
@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { http } from '../../../../api/http';
+import useAlert from '../../../../hooks/useAlert';
 
 interface CommentPayload {
   content: string;
@@ -16,6 +17,7 @@ interface Props {
 const _editComment = (commentId: string, payload: CommentPayload) => http.patch(`/comments/${commentId}`, payload);
 
 const usePatchComment = ({ feedId, commentId, onSuccess }: Props) => {
+  const openAlert = useAlert();
   const queryClient = useQueryClient();
   const { mutate: editComment, ...rest } = useMutation({
     mutationFn: (payload: CommentPayload) => _editComment(commentId, payload),
@@ -24,7 +26,7 @@ const usePatchComment = ({ feedId, commentId, onSuccess }: Props) => {
       if (onSuccess) onSuccess();
     },
     onError: (error: AxiosError<{ message: string }>) => {
-      alert(error.response?.data.message ?? '댓글 수정에 실패했습니다.');
+      openAlert({ content: error.response?.data.message ?? '댓글 수정에 실패했습니다.' });
     },
   });
 

diff --git a/src/pages/FeedDetail/hooks/mutations/usePostComment.ts b/src/pages/FeedDetail/hooks/mutations/usePostComment.ts
@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { http } from '../../../../api/http';
+import useAlert from '../../../../hooks/useAlert';
 
 interface CommentPayload {
   ideaId: string;
@@ -16,6 +17,7 @@ interface Props {
 const _postComment = (payload: CommentPayload) => http.post('/comments', payload);
 
 const usePostComment = ({ feedId }: Props) => {
+  const openAlert = useAlert();
   const queryClient = useQueryClient();
   const { mutate: postComment, ...rest } = useMutation({
     mutationFn: _postComment,
@@ -24,7 +26,7 @@ const usePostComment = ({ feedId }: Props) => {
       queryClient.invalidateQueries({ queryKey: ['feed', 'detail', feedId] });
     },
     onError: (error: AxiosError<{ message: string }>) => {
-      alert(error.response?.data.message ?? '댓글 작성에 실패했습니다.');
+      openAlert({ content: error.response?.data.message ?? '댓글 작성에 실패했습니다.' });
     },
   });
 

diff --git a/src/pages/FeedDetail/hooks/mutations/usePostCommentLike.ts b/src/pages/FeedDetail/hooks/mutations/usePostCommentLike.ts
@@ -2,18 +2,20 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { http } from '../../../../api/http';
+import useAlert from '../../../../hooks/useAlert';
 
 const _postLikeComment = (commentId: string) => http.post(`/comments/likes/${commentId}`);
 
 const usePostCommentLike = ({ feedId }: { feedId: string }) => {
+  const openAlert = useAlert();
   const queryClient = useQueryClient();
   const { mutate: postLikeComment, ...rest } = useMutation({
     mutationFn: _postLikeComment,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['comments', feedId] });
     },
     onError: (error: AxiosError<{ message: string }>) => {
-      alert(error.response?.data.message ?? '좋아요에 실패했습니다.');
+      openAlert({ content: error.response?.data.message ?? '좋아요에 실패했습니다.' });
     },
   });
 

diff --git a/src/pages/FeedDetail/hooks/mutations/usePostFeedLike.ts b/src/pages/FeedDetail/hooks/mutations/usePostFeedLike.ts
@@ -2,20 +2,22 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { http } from '../../../../api/http';
+import useAlert from '../../../../hooks/useAlert';
 
 const _postLike = (id: string) => {
   return http.post(`/ideas/likes/${id}`);
 };
 
 const usePostFeedLike = (id: string) => {
+  const openAlert = useAlert();
   const queryClient = useQueryClient();
   const { mutate: postLike, ...rest } = useMutation({
     mutationFn: _postLike,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['feed', 'detail', id] });
     },
     onError: (error: AxiosError<{ message: string }>) => {
-      alert(error.response?.data.message ?? '좋아요에 실패했습니다.');
+      openAlert({ content: error.response?.data.message ?? '좋아요에 실패했습니다.' });
     },
   });
 

diff --git a/src/pages/FeedDetail/hooks/mutations/usePostFeedScrap.ts b/src/pages/FeedDetail/hooks/mutations/usePostFeedScrap.ts
@@ -2,20 +2,22 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import { http } from '../../../../api/http';
+import useAlert from '../../../../hooks/useAlert';
 
 const _postScrap = (id: string) => {
   return http.post<void>(`/bookmark/${id}`);
 };
 
 const usePostFeedScrap = (id: string) => {
+  const openAlert = useAlert();
   const queryClient = useQueryClient();
   const { mutate: postScrap, ...rest } = useMutation({
     mutationFn: _postScrap,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['feed', 'detail', id] });
     },
     onError: (error: AxiosError<{ message: string }>) => {
-      alert(error.response?.data.message ?? '스크랩에 실패했습니다.');
+      openAlert({ content: error.response?.data.message ?? '스크랩에 실패했습니다.' });
     },
   });
 

diff --git a/src/pages/ProfileEdit/hooks/usePutProfileMutation.ts b/src/pages/ProfileEdit/hooks/usePutProfileMutation.ts
@@ -3,6 +3,7 @@ import { AxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 
 import { http } from '../../../api/http';
+import useAlert from '../../../hooks/useAlert';
 import { PutSignUp } from '../types';
 
 const updateUserNickname = (newNickname: string) => {
@@ -14,6 +15,7 @@ const updateUserNickname = (newNickname: string) => {
 const _putProfile = (memberId: string, payload: PutSignUp) => http.put<void>(`/members/${memberId}`, payload);
 
 const usePutProfileMutation = (memberId: string, newNickname: string) => {
+  const openAlert = useAlert();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const { mutate: putProfile, ...rest } = useMutation({
@@ -24,8 +26,7 @@ const usePutProfileMutation = (memberId: string, newNickname: string) => {
       navigate(`/profile/${memberId}`);
     },
     onError: (error: AxiosError<{ message: string }>) => {
-      // TODO: #54 머지 이후 Alert 컴포넌트 사용
-      alert(error.response?.data.message ?? '필수 정보를 입력하지 않아 저장할 수 없습니다.');
+      openAlert({ content: error.response?.data.message ?? '필수 정보를 입력하지 않아 저장할 수 없습니다.' });
     },
   });
 

diff --git a/src/pages/Write/Write.page.tsx b/src/pages/Write/Write.page.tsx
@@ -17,7 +17,7 @@ import {
   Flex,
   useDropdown,
 } from 'concept-be-design-system';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 
 import Header from './components/Header';
 import RecruitmentPlaceSection from './components/RecruitmentPlaceSection';
@@ -27,6 +27,7 @@ import { useWritingInfoQuery } from './hooks/queries/useWritingInfoQuery';
 import { Info } from './types';
 import { get2DepthCountsBy1Depth } from './utils/get2DepthCountsBy1Depth';
 import SEOMeta from '../../components/SEOMeta/SEOMeta';
+import useAlert from '../../hooks/useAlert';
 import useInitScrollPosition from '../../hooks/useInitScrollPosition';
 
 const cooperationWays = [
@@ -36,6 +37,7 @@ const cooperationWays = [
 ];
 
 const WritePage = () => {
+  const openAlert = useAlert();
   const { postIdeas } = usePostIdeasMutation();
   const { branches, purposes, recruitmentPlaces, skillCategoryResponses } = useWritingInfoQuery();
 
@@ -90,27 +92,27 @@ const WritePage = () => {
 
     // TODO: 글쓰기 필수 조건 누락 시 토스트 띄워주기 (alert -> toast)
     if (!title) {
-      alert('제목을 입력해 주세요');
+      openAlert({ content: '제목을 입력해 주세요' });
       return;
     }
     if (introduce.length < 10) {
-      alert('본문 내용을 10자 이상 입력해 주세요');
+      openAlert({ content: '본문 내용을 10자 이상 입력해 주세요' });
       return;
     }
     if (!branchIds.length) {
-      alert('분야를 1개 이상 선택해 주세요');
+      openAlert({ content: '분야를 1개 이상 선택해 주세요' });
       return;
     }
     if (!purposeIds.length) {
-      alert('목적을 1개 이상 선택해 주세요');
+      openAlert({ content: '목적을 1개 이상 선택해 주세요' });
       return;
     }
     if (!cooperationWay) {
-      alert('협업방식을 선택해 주세요');
+      openAlert({ content: '협업방식을 선택해 주세요' });
       return;
     }
     if (!recruitmentPlaceId) {
-      alert('모집지역을 선택해주세요.');
+      openAlert({ content: '모집지역을 선택해주세요.' });
       return;
     }
 
@@ -135,7 +137,7 @@ const WritePage = () => {
 
   const onClickTeamRecruitment = (selected: Info) => {
     if (selectedSkillResponses.length >= 10) {
-      alert('10개 이상 선택할 수 없습니다.');
+      openAlert({ content: '10개 이상 선택할 수 없습니다.' });
       return;
     }
     setSelectedSkillResponses((prev) =>

diff --git a/src/pages/Write/hooks/mutations/usePostIdeasMutation.ts b/src/pages/Write/hooks/mutations/usePostIdeasMutation.ts
@@ -3,6 +3,7 @@ import { AxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 
 import { http } from '../../../../api/http';
+import useAlert from '../../../../hooks/useAlert';
 import { PostIdeasRequest } from '../../types';
 
 const _postIdeas = (ideas: PostIdeasRequest) => {
@@ -13,6 +14,7 @@ const _postIdeas = (ideas: PostIdeasRequest) => {
 type PostIdeaError = AxiosError<{ message: string }>;
 
 export const usePostIdeasMutation = () => {
+  const openAlert = useAlert();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
@@ -23,7 +25,7 @@ export const usePostIdeasMutation = () => {
       navigate('/');
     },
     onError: (error: PostIdeaError) => {
-      alert(error.response?.data.message ?? '글 작성에 실패했습니다.');
+      openAlert({ content: error.response?.data.message ?? '글 작성에 실패했습니다.' });
     },
   });