Fix: AlertModal -> Toast

CLIPPER-1st · Mar 17, 2024 · 9a9563a · 9a9563a
1 parent 12f13e8
commit 9a9563a
Show file tree

Hide file tree

Showing 10 changed files with 140 additions and 244 deletions.
diff --git a/src/components/Button/LikePageButton/index.tsx b/src/components/Button/LikePageButton/index.tsx
@@ -5,17 +5,13 @@ import LikeClickedImg from '@/assets/Icons/LikeClicked.png'
 import useCheckUrl from '@/hooks/useCheckUrl';
 import { useNavigate } from 'react-router-dom';
 import { useLoginStatus } from '@/hooks/useLoginStatus';
-import { useRecoilState } from 'recoil';
-import { alertModalState } from '@/atoms/modalState';
-import useModal from '@/hooks/useModal';
-import AlertModal from '@/components/Modal/AlertModal';
+import useToast from '@/hooks/useToast';
 
 export default function LikePageButton(props: LikePageButtonProps) {
  const isMatched = useCheckUrl(['/likes']);
  const navigate = useNavigate();
  const {isLoggedIn} = useLoginStatus();
- const [alertModal, setAlertModal] = useRecoilState(alertModalState);
- const { closeModal } = useModal();
+ const { displayToast } = useToast();
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let timer: string | number | NodeJS.Timeout;
 
@@ -27,29 +23,16 @@ export default function LikePageButton(props: LikePageButtonProps) {
  if(!isLoggedIn) { //TODO: isLoggedIn
  navigate('/likes')
  } else {
- setAlertModal({
- isOpen: true,
- message: '로그인 후\n이용해주세요.',
- }); 
- timer = setTimeout(() => {
- navigate('/mypage')
- }, 800);
+ displayToast('로그인 후 이용해주세요.'); 
+ timer = setTimeout(() => {
+ navigate('/mypage')
+ }, 1000);
  }
  }
 
  return (
- <>
- <Button width={33.06} height={30.28} background={getImage()} onClick={() => handleClicked()}{...props}>
- {props.children}
- </Button>
- {alertModal?.isOpen && (
- <AlertModal 
- isOpen={alertModal?.isOpen}
- onClose={closeModal}
- >
- {alertModal?.message}
- </AlertModal>
- )}
- </>
+ <Button width={33.06} height={30.28} background={getImage()} onClick={() => handleClicked()}{...props}>
+ {props.children}
+ </Button>
  );
 }
diff --git a/src/components/Button/ProfileNameButton/index.tsx b/src/components/Button/ProfileNameButton/index.tsx
@@ -10,12 +10,12 @@ import { userInfoState } from '@/atoms/userInfoState';
 import { useQueryClient } from '@tanstack/react-query';
 import { useChangeNickname } from '@/hooks/useChangeNickname';
 import { isAxiosError } from 'axios';
-import { alertModalState } from '@/atoms/modalState';
+import useToast from '@/hooks/useToast';
 
 export default function ProfileNameButton(props: TextButtonProps) {
- const [alertModal, setAlertModal] = useRecoilState(alertModalState);
+ const { displayToast } = useToast();
  const [showSearchBar, setShowSearchBar] = useRecoilState(showSearchBarState);
- const {value: nicknameTerm, setValue: setNicknameTerm, reset} = useInput();
+ const {value: nicknameTerm, setValue: setNicknameTerm, reset} = useInput<HTMLTextAreaElement>();
  const [userInfo, ] = useRecoilState(userInfoState);
  const queryClient = useQueryClient();
  const { mutate } = useChangeNickname();
@@ -30,24 +30,23 @@ export default function ProfileNameButton(props: TextButtonProps) {
  }
 
  const handleProfileChangeClick = () => {
- mutate(nicknameTerm, {
- onSuccess: async () => {
- setShowSearchBar(!showSearchBar);
- setAlertModal({
- isOpen: true,
- message: '닉네임 변경이\n완료되었습니다.',
- }); 
- await queryClient.invalidateQueries({queryKey: ['userInfo']});
- },
- onError: (error) => {
- if(isAxiosError(error)) {
- setAlertModal({
- isOpen: true,
- message: '변경에 실패했습니다.\n다시 시도해주세요.',
- }); 
- }
- },
- });
+ if (!nicknameTerm) {
+ displayToast(`변경할 닉네임을 입력해주세요.`);
+ return;
+ } else {
+ mutate(nicknameTerm, {
+ onSuccess: async () => {
+ setShowSearchBar(!showSearchBar);
+ displayToast('닉네임 변경이 완료되었습니다.');
+ await queryClient.invalidateQueries({queryKey: ['userInfo']});
+ },
+ onError: (error) => {
+ if(isAxiosError(error)) {
+ displayToast('변경에 실패했습니다. 다시 시도해주세요.');
+ }
+ },
+ });
+ }
  };
 
  return (
@@ -66,7 +65,7 @@ export default function ProfileNameButton(props: TextButtonProps) {
  maxLength={20}
  value={nicknameTerm}
  onChange={handleChange}
- defaultValue={userInfo?.data?.infos?.nickname}
+ defaultValue={userInfo.data.infos.nickname}
  />
  <RegisterButton 
  position={'relative'}

diff --git a/src/components/FavoritePlace/AddFavoritePlaceMap/index.tsx b/src/components/FavoritePlace/AddFavoritePlaceMap/index.tsx
@@ -12,22 +12,20 @@ import { useLocation } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRegisterFavoritePlace } from '@/hooks/useRegisterFavoritePlace';
 import { isAxiosError } from 'axios';
-import { alertModalState } from '@/atoms/modalState';
 import { PostRegisterFavoritePlaceRequest } from '@/interfaces/postRegisterFavoritePlaceRequest';
 import { mapCenterState } from '@/atoms/location';
-import AlertModal from '@/components/Modal/AlertModal';
-import useModal from '@/hooks/useModal';
 import { placeTypes } from '@/constants/placeTypes';
+import useToast from '@/hooks/useToast';
 
 export default function AddFavoritePlaceMap() {
- const [alertModal, setAlertModal] = useRecoilState(alertModalState);
- const { closeModal } = useModal();
+ const { displayToast } = useToast();
  const nowUrl = useLocation();
  const [showMap, setShowMap] = useRecoilState(toggleState((nowUrl.pathname)));
  const [selectedPlaceName, setSelectedPlaceName] = useRecoilState(selectedPlaceNameState);
  const queryClient = useQueryClient();
  const { mutate } = useRegisterFavoritePlace();
  const mapCenter = useRecoilValue(mapCenterState);
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
  let timer: string | number | NodeJS.Timeout;
 
  const handleSelectFavoritePlace = (name: string) => {
@@ -42,21 +40,15 @@ export default function AddFavoritePlaceMap() {
  };
  mutate(body, {
  onSuccess: async () => {
- setAlertModal({
- isOpen: true,
- message: '자주 가는 장소가\n등록되었습니다.',
- }); 
+ displayToast('자주 가는 장소가 등록되었습니다.'); 
  await queryClient.invalidateQueries({queryKey: ['userInfo']});
  timer = setTimeout(() => {
  setShowMap(!showMap);
- }, 800); 
+ }, 1000); 
  },
  onError: (error) => {
  if(isAxiosError(error)) {
- setAlertModal({
- isOpen: true,
- message: '등록에 실패했습니다.\n다시 시도해주세요.',
- }); 
+ displayToast('등록에 실패했습니다. 다시 시도해주세요.'); 
  }
  },
  });
@@ -79,14 +71,6 @@ export default function AddFavoritePlaceMap() {
  onClick={() => handleRegisterFavoritePlace()}
  />
  </Styled.Container>
- {alertModal?.isOpen && (
- <AlertModal 
- isOpen={alertModal?.isOpen}
- onClose={closeModal}
- >
- {alertModal?.message}
- </AlertModal>
- )}
  </>
  )
 }
diff --git a/src/components/FavoritePlace/NameCard/index.tsx b/src/components/FavoritePlace/NameCard/index.tsx
@@ -1,18 +1,15 @@
-import { alertModalState } from '@/atoms/modalState';
 import DeleteFavoritePlaceButton from '@/components/Button/DeleteFavoritePlaceButton';
-import AlertModal from '@/components/Modal/AlertModal';
 import ReconfirmAlertModal from '@/components/Modal/ReconfirmAlertModal';
 import useModal from '@/hooks/useModal';
 import { ILocation } from '@/interfaces/userInfo';
-import { useRecoilState } from 'recoil';
 import * as Styled from './style';
 
 export default function NameCard({ id, name, latitude, longitude }: ILocation) {
  const {isOpen, 
  openModal, 
  closeModal
  } = useModal();
-
+ //TODO: 이 namecard를 클릭하면 해당 위치로 이동하게끔 구현해야함
  return (
  <>
  <Styled.Container>
@@ -22,8 +19,6 @@ export default function NameCard({ id, name, latitude, longitude }: ILocation) {
  </Styled.Wrapper>
  </Styled.Container>
 
-
-
  {isOpen && (
  <ReconfirmAlertModal
  isOpen={isOpen}

diff --git a/src/components/Modal/ReconfirmAlertModal/index.tsx b/src/components/Modal/ReconfirmAlertModal/index.tsx
@@ -3,16 +3,14 @@ import theme from '@/theme';
 import * as Styled from './style';
 import SmallButton from '@/components/Button/SmallButton';
 import useModal from '@/hooks/useModal';
-import { useRecoilState } from 'recoil';
-import { alertModalState } from '@/atoms/modalState';
-import AlertModal from '@/components/Modal/AlertModal';
 import { useDeleteFavoritePlace } from '@/hooks/useDeleteFavoritePlace';
 import { isAxiosError } from 'axios';
 import { useQueryClient } from '@tanstack/react-query';
 import { ReconfirmAlertModalProps } from '@/interfaces/modal';
+import useToast from '@/hooks/useToast';
 
 export default function ReconfirmAlertModal({onClose, isOpen, name, id, ...props}: ReconfirmAlertModalProps) {
- const [alertModal, setAlertModal] = useRecoilState(alertModalState);
+ const { displayToast } = useToast();
  const { closeModal } = useModal();
  const queryClient = useQueryClient();
  const { mutate } = useDeleteFavoritePlace();
@@ -21,46 +19,30 @@ export default function ReconfirmAlertModal({onClose, isOpen, name, id, ...props
  mutate(id, {
  onSuccess: async () => {
  closeModal();
- setAlertModal({
- isOpen: true,
- message: '삭제되었습니다.',
- }); 
+ displayToast('삭제되었습니다.');
  await queryClient.invalidateQueries({queryKey: ['userInfo']});
  },
  onError: (error) => {
  if(isAxiosError(error)) {
- setAlertModal({
- isOpen: true,
- message: '삭제 실패했습니다.\n다시 시도해주세요.',
- }); 
+ displayToast('삭제 실패했습니다. 다시 시도해주세요.');
  }
  },
  });
  };
 
  return (
- <>
- <Modal modalTitle={''} isOpen={isOpen} onClose={onClose} modalType={'SmallModal'} modalColor={theme.colors.white} color={theme.colors.darkBrown} fontSize={20} {...props}>
- <Styled.ModalInnerWrapper>
- {`자주 가는 장소 "${name}"\n삭제 하시겠습니까?`}
- <Styled.ButtonContainer>
- <SmallButton onClick={handleDeleteFavoritePlace}>
- 예
- </SmallButton>
- <SmallButton onClick={() => onClose()}>
- 아니요
- </SmallButton>
- </Styled.ButtonContainer>
- </Styled.ModalInnerWrapper>
- </Modal>
- {alertModal?.isOpen && (
- <AlertModal 
- isOpen={alertModal?.isOpen}
- onClose={onClose}
- >
- {alertModal?.message}
- </AlertModal>
- )}
- </>
+ <Modal modalTitle={''} isOpen={isOpen} onClose={onClose} modalType={'SmallModal'} modalColor={theme.colors.white} color={theme.colors.darkBrown} fontSize={20} {...props}>
+ <Styled.ModalInnerWrapper>
+ {`자주 가는 장소 "${name}"\n삭제 하시겠습니까?`}
+ <Styled.ButtonContainer>
+ <SmallButton onClick={handleDeleteFavoritePlace}>
+ 예
+ </SmallButton>
+ <SmallButton onClick={() => onClose()}>
+ 아니요
+ </SmallButton>
+ </Styled.ButtonContainer>
+ </Styled.ModalInnerWrapper>
+ </Modal>
  );
 }
diff --git a/src/components/Modal/SignoutModal/index.tsx b/src/components/Modal/SignoutModal/index.tsx
@@ -2,42 +2,28 @@ import Modal from '@/components/Modal';
 import theme from '@/theme';
 import * as Styled from './style';
 import SmallButton from '@/components/Button/SmallButton';
-import { useRecoilValue } from 'recoil';
-import { alertModalState } from '@/atoms/modalState';
-import AlertModal from '@/components/Modal/AlertModal';
 import { useSignout } from '@/hooks/useSignout';
 import { SignoutModalProps } from '@/interfaces/modal';
 
 export default function SignoutModal({onClose, isOpen, ...props}: SignoutModalProps) {
- const alertModal = useRecoilValue(alertModalState);
  const { mutate } = useSignout();
 
  const handleSignout = () => {
  mutate();
  };
 
  return (
- <>
- <Modal modalTitle={'정말 탈퇴하시겠습니까?'} isOpen={isOpen} onClose={onClose} modalType={'MediumModal'} modalColor={theme.colors.white} color={theme.colors.darkBrown} fontSize={20} {...props}>
- <Styled.ModalInnerWrapper>
- <Styled.ButtonContainer>
- <SmallButton onClick={handleSignout}>
- 예
- </SmallButton>
- <SmallButton onClick={() => onClose()}>
- 아니요
- </SmallButton>
- </Styled.ButtonContainer>
- </Styled.ModalInnerWrapper>
- </Modal>
- {alertModal?.isOpen && (
- <AlertModal 
- isOpen={alertModal?.isOpen}
- onClose={onClose}
- >
- {alertModal?.message}
- </AlertModal>
- )}
- </>
+ <Modal modalTitle={'정말 탈퇴하시겠습니까?'} isOpen={isOpen} onClose={onClose} modalType={'SmallModal'} modalColor={theme.colors.white} color={theme.colors.darkBrown} fontSize={20} {...props}>
+ <Styled.ModalInnerWrapper>
+ <Styled.ButtonContainer>
+ <SmallButton onClick={handleSignout}>
+ 예
+ </SmallButton>
+ <SmallButton onClick={() => onClose()}>
+ 아니요
+ </SmallButton>
+ </Styled.ButtonContainer>
+ </Styled.ModalInnerWrapper>
+ </Modal>
  );
 }