Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[노철] - 비지니스 로직 분리 #471

Merged
merged 8 commits into from
Feb 5, 2024
143 changes: 143 additions & 0 deletions src/app/(header)/my/hooks/useMyPage.tsx
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
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();
Comment on lines +16 to +41
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ㅋㅋㅋㅋㅋ 어마무시하군요


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
Loading