Skip to content

Commit

Permalink
[노철] - 비지니스 로직 분리 (#471)
Browse files Browse the repository at this point in the history 
* ♻️ : #468 - 마이페이지 로직 분리

* ♻️ : #468 - 계획 페이지 로직 분리

* ♻️ : #468 - 계획 수정 페이지 로직 분리

* ♻️ : #468 - 필요없는 훅 제거

* ♻️ : #468 - 함수 대신 컴포넌트 return 변경

* ♻️ : #468 - 함수 대신 컴포넌트로 변경
  • Loading branch information
@qkdl60
qkdl60 authored Feb 5, 2024
1 parent 86de908 commit fbd16d2
Show file tree
Hide file tree
Showing 7 changed files with 355 additions and 244 deletions.
143 changes: 143 additions & 0 deletions src/app/(header)/my/hooks/useMyPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
import { deleteUsers } from '@/apis/client/deleteUsers';
import { ajajaToast } from '@/components/Toaster/customToast';
import { KAKAO_LOGOUT_URL } from '@/constants/login';
import { QUERY_KEY } from '@/constants/queryKey';
import { useGetUserInformationQuery } from '@/hooks/apis/useGetUserInformationQuery';
import { usePutUserReceiveMutation } from '@/hooks/apis/usePutUserReceiveMutation';
import { usePostUsersRefreshMutation } from '@/hooks/apis/useRefreshNicknameMutation';
import { ReceiveType } from '@/types/apis/users/GetUserInformation';
import { useQueryClient } from '@tanstack/react-query';
import { deleteCookie } from 'cookies-next';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

export default function useMyPage() {
const queryClient = useQueryClient();
const { userInformation } = useGetUserInformationQuery();
const { refreshNickname } = usePostUsersRefreshMutation();
const { nickname, remindEmail, defaultEmail, receiveType, emailVerified } =
userInformation;
const { changeReceiveType, isChangeReceiveTypePending } =
usePutUserReceiveMutation();
const [isOpenEmailModal, setIsOpenEmailModal] = useState<boolean>(false);
const [isOpenLogOutModal, setIsOpenLogOutModal] = useState<boolean>(false);
const [isOpenWithdrawalModal, setIsOpenWithdrawalModal] =
useState<boolean>(false);
const [isOpenRemindWayModal, setIsOpenRemindWayModal] =
useState<boolean>(false);
const router = useRouter();
const handleChangeNickName = () => {
refreshNickname(undefined, {
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: [QUERY_KEY.USER_INFORMATION],
});
ajajaToast.success('닉네임이 변경되었습니다.');
},
onError: () => {
ajajaToast.error('변경 실패, 다시 시도해주세요.');
},
});
};
const handleGoEmailVerification = () => {
setIsOpenEmailModal(true);
};
const handleGORemindWay = () => {
setIsOpenRemindWayModal(true);
};
const handleCloseEmailVerificationModal = () => {
setIsOpenEmailModal(false);
};
const handleLogOut = () => {
setIsOpenLogOutModal(true);
};

const handleRealLogOut = async () => {
router.push(KAKAO_LOGOUT_URL);
};
const handleCloseLogOutModal = () => {
setIsOpenLogOutModal(false);
};
const handleWithdrawal = () => {
setIsOpenWithdrawalModal(true);
};
const handleRealWithdrawal = () => {
deleteUsers().then(() => {
deleteCookie('auth');
router.push('/login');
ajajaToast.success('회원탈퇴에 성공했습니다.');
});
};
const handleCloseWithdrawalModal = () => {
setIsOpenWithdrawalModal(false);
};
const handleSetVerifiedEmail = () => {
Promise.all([
queryClient.invalidateQueries({
queryKey: [QUERY_KEY.USER_INFORMATION],
}),
queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MY_PLANS] }),
]);
};

const handleChangeReceiveType = (checked: ReceiveType) => {
if (checked === receiveType) {
ajajaToast.error('기존과 다른 방식을 선택해주세요.');
return;
}
changeReceiveType(checked, {
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: [QUERY_KEY.USER_INFORMATION],
});
ajajaToast.success('리마인드방식이 변경되었습니다.');
},
onError: () => {
ajajaToast.error('변경 실패, 다시 시도해주세요.');
},
});
};

const createRemindWayText = () => {
if (receiveType === 'both') {
return (
<>
<span className="color-origin-primary">이메일</span>과{' '}
<span className="color-origin-primary">카카오톡</span>
</>
);
}
return (
<span className="color-origin-primary">
{receiveType === 'email' ? '이메일' : '카카오톡'}
</span>
);
};
const remindWay = createRemindWayText();
return {
receiveType,
nickname,
remindEmail,
defaultEmail,
emailVerified,
isChangeReceiveTypePending,
isOpenEmailModal,
isOpenLogOutModal,
isOpenRemindWayModal,
isOpenWithdrawalModal,
handleChangeNickName,
handleChangeReceiveType,
handleCloseEmailVerificationModal,
handleCloseLogOutModal,
handleCloseWithdrawalModal,
handleGORemindWay,
handleGoEmailVerification,
handleLogOut,
handleRealLogOut,
handleRealWithdrawal,
handleSetVerifiedEmail,
handleWithdrawal,
remindWay,
setIsOpenRemindWayModal,
};
}
141 changes: 28 additions & 113 deletions src/app/(header)/my/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,45 @@
'use client';

import { deleteUsers } from '@/apis/client/deleteUsers';
import {
Button,
Icon,
Modal,
ModalBasic,
ModalVerification,
} from '@/components';
import { ajajaToast } from '@/components/Toaster/customToast';
import { KAKAO_LOGOUT_URL } from '@/constants/login';
import { QUERY_KEY } from '@/constants/queryKey';
import { useGetUserInformationQuery } from '@/hooks/apis/useGetUserInformationQuery';
import { usePutUserReceiveMutation } from '@/hooks/apis/usePutUserReceiveMutation';
import { usePostUsersRefreshMutation } from '@/hooks/apis/useRefreshNicknameMutation';
import { ReceiveType } from '@/types/apis/users/GetUserInformation';
import { useQueryClient } from '@tanstack/react-query';
import { deleteCookie } from 'cookies-next';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import ModalRemindWay from './_components/ModalRemindWay/ModalRemindWay';
import useMyPage from './hooks/useMyPage';
import './index.scss';

export default function MyPage() {
const queryClient = useQueryClient();
const { userInformation } = useGetUserInformationQuery();
const { refreshNickname } = usePostUsersRefreshMutation();
const { nickname, remindEmail, defaultEmail, receiveType, emailVerified } =
userInformation;
const { changeReceiveType, isChangeReceiveTypePending } =
usePutUserReceiveMutation();
const [isOpenEmailModal, setIsOpenEmailModal] = useState<boolean>(false);
const [isOpenLogOutModal, setIsOpenLogOutModal] = useState<boolean>(false);
const [isOpenWithdrawalModal, setIsOpenWithdrawalModal] =
useState<boolean>(false);
const [isOpenRemindWayModal, setIsOpenRemindWayModal] =
useState<boolean>(false);
const router = useRouter();
const handleChangeNickName = () => {
refreshNickname(undefined, {
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: [QUERY_KEY.USER_INFORMATION],
});
ajajaToast.success('닉네임이 변경되었습니다.');
},
onError: () => {
ajajaToast.error('변경 실패, 다시 시도해주세요.');
},
});
};
const handleGoEmailVerification = () => {
setIsOpenEmailModal(true);
};
const handleGORemindWay = () => {
setIsOpenRemindWayModal(true);
};
const handleCloseEmailVerificationModal = () => {
setIsOpenEmailModal(false);
};
const handleLogOut = () => {
setIsOpenLogOutModal(true);
};
const {
receiveType,
nickname,
remindEmail,
defaultEmail,
emailVerified,
isChangeReceiveTypePending,
isOpenEmailModal,
isOpenLogOutModal,
isOpenRemindWayModal,
isOpenWithdrawalModal,
remindWay,
handleChangeNickName,
handleChangeReceiveType,
handleCloseEmailVerificationModal,
handleCloseLogOutModal,
handleCloseWithdrawalModal,
handleGORemindWay,
handleGoEmailVerification,
handleLogOut,
handleRealLogOut,
handleRealWithdrawal,
handleSetVerifiedEmail,
handleWithdrawal,
setIsOpenRemindWayModal,
} = useMyPage();

const handleRealLogOut = async () => {
router.push(KAKAO_LOGOUT_URL);
};
const handleCloseLogOutModal = () => {
setIsOpenLogOutModal(false);
};
const handleWithdrawal = () => {
setIsOpenWithdrawalModal(true);
};
const handleRealWithdrawal = () => {
deleteUsers().then(() => {
deleteCookie('auth');
router.push('/login');
ajajaToast.success('회원탈퇴에 성공했습니다.');
});
};
const handleCloseWithdrawalModal = () => {
setIsOpenWithdrawalModal(false);
};
const handleSetVerifiedEmail = () => {
Promise.all([
queryClient.invalidateQueries({
queryKey: [QUERY_KEY.USER_INFORMATION],
}),
queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MY_PLANS] }),
]);
};

const handleChangeReceiveType = (checked: ReceiveType) => {
if (checked === receiveType) {
ajajaToast.error('기존과 다른 방식을 선택해주세요.');
return;
}
changeReceiveType(checked, {
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: [QUERY_KEY.USER_INFORMATION],
});
ajajaToast.success('리마인드방식이 변경되었습니다.');
},
onError: () => {
ajajaToast.error('변경 실패, 다시 시도해주세요.');
},
});
};

const remindWay = () => {
if (receiveType === 'both') {
return (
<>
<span className="color-origin-primary">이메일</span>과{' '}
<span className="color-origin-primary">카카오톡</span>
</>
);
}
return (
<span className="color-origin-primary">
{receiveType === 'email' ? '이메일' : '카카오톡'}
</span>
);
};
return (
<>
<div className="my-page__wrapper">
Expand Down Expand Up @@ -184,7 +99,7 @@ export default function MyPage() {
리마인드 및 응원 메시지
</h2>
<div className="my-page__remindway--content font-size-base">
{remindWay()}을 통해서 리마인드 및 응원 메시지를 받고 있어요
{remindWay}을 통해서 리마인드 및 응원 메시지를 받고 있어요
</div>
<Button
border={false}
Expand Down
Loading

0 comments on commit fbd16d2

Please sign in to comment.