From a8bbce726aa44f67a3c691584c0fc910826d2ded Mon Sep 17 00:00:00 2001 From: ATeals <125727432+ATeals@users.noreply.github.com> Date: Tue, 26 Nov 2024 10:13:58 +0900 Subject: [PATCH] =?UTF-8?q?Feature=20#145=20mutation=20=EA=B2=B0=EA=B3=BC?= =?UTF-8?q?=20toast=EB=A1=9C=20=EB=9D=84=EC=9A=B0=EA=B8=B0=20(#146)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(#145): lotus update form 기본값 추가 * feat(#145): 코드 실행 버튼 mutation 결과 toast * feat(#145): lotus create form mutation 결과 toast * feat(#145): lotus delete mutation 결과 toast * feat(#145): lotus update mutation 결과 toast * feat(#145): user info form 결과 toast --- apps/frontend/src/feature/user/component.tsx | 7 ++++-- .../src/widget/lotusCodeRun/CodeRunButton.tsx | 22 ++++++++++++++++--- .../widget/lotusCreate/LotusCreateForm.tsx | 12 ++++++++++ .../frontend/src/widget/lotusDelete/index.tsx | 20 +++++++++++++---- .../widget/lotusUpdate/LotusUpdateButton.tsx | 18 ++++++++++++--- .../widget/lotusUpdate/LotusUpdateForm.tsx | 4 ++-- .../src/widget/user/SuspenseUserInfoBox.tsx | 13 +++++++++-- 7 files changed, 80 insertions(+), 16 deletions(-) diff --git a/apps/frontend/src/feature/user/component.tsx b/apps/frontend/src/feature/user/component.tsx index 3bb29163..7c1499ac 100644 --- a/apps/frontend/src/feature/user/component.tsx +++ b/apps/frontend/src/feature/user/component.tsx @@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form'; import { z } from 'zod'; interface UserEditableInfoProps { + disabled?: boolean; value: string; onToggleIsEdit: () => void; onEditValue: (value: string) => void; @@ -13,7 +14,7 @@ const userInfoInputValue = z.object({ value: z.string().min(1, { message: '입력값이 존재하지 않습니다.' }) }); -export function UserInfoInputForm({ value, onToggleIsEdit, onEditValue }: UserEditableInfoProps) { +export function UserInfoInputForm({ value, onToggleIsEdit, onEditValue, disabled }: UserEditableInfoProps) { const { register, reset, @@ -37,7 +38,9 @@ export function UserInfoInputForm({ value, onToggleIsEdit, onEditValue }: UserEd return (
- + diff --git a/apps/frontend/src/widget/lotusCodeRun/CodeRunButton.tsx b/apps/frontend/src/widget/lotusCodeRun/CodeRunButton.tsx index bfd09534..25b9412f 100644 --- a/apps/frontend/src/widget/lotusCodeRun/CodeRunButton.tsx +++ b/apps/frontend/src/widget/lotusCodeRun/CodeRunButton.tsx @@ -4,21 +4,33 @@ import { LotusRunCodeForm } from './LotusRunCodeForm'; import { lotusHistoryQueryOptions, useCodeRunMutation } from '@/feature/history/query'; import { ModalBox } from '@/shared'; import { useOverlay } from '@/shared/overlay'; +import { useToast } from '@/shared/toast'; export function CodeRunButton({ lotusId }: { lotusId: string }) { const { open, exit } = useOverlay(); - const { mutate } = useCodeRunMutation(); + const { toast } = useToast(); + + const { mutate, isPending } = useCodeRunMutation(); const queryClient = useQueryClient(); const handleCodeRun = ({ execFileName, inputs }: { execFileName: string; inputs: string[] }) => { + exit(); + mutate( { lotusId, input: inputs, execFileName }, { onSuccess: () => { - exit(); queryClient.invalidateQueries(lotusHistoryQueryOptions.list({ id: lotusId })); + toast({ description: '코드가 실행되었습니다.', variant: 'success', duration: 2000 }); + }, + onError: () => { + toast({ + description: '코드 실행 중 오류가 발생했습니다. 다시 시도해 주세요.', + variant: 'error', + duration: 2000 + }); } } ); @@ -31,5 +43,9 @@ export function CodeRunButton({ lotusId }: { lotusId: string }) { )); - return ; + return ( + + ); } diff --git a/apps/frontend/src/widget/lotusCreate/LotusCreateForm.tsx b/apps/frontend/src/widget/lotusCreate/LotusCreateForm.tsx index c67c4234..cb17c65f 100644 --- a/apps/frontend/src/widget/lotusCreate/LotusCreateForm.tsx +++ b/apps/frontend/src/widget/lotusCreate/LotusCreateForm.tsx @@ -7,6 +7,7 @@ import { SuspenseUserGistSelect } from './SuspenseUserGistSelect'; import { useLotusCreateMutation } from '@/feature/lotus'; import { AsyncBoundary } from '@/shared/boundary'; import { TagInput } from '@/shared/tagInput/TagInput'; +import { useToast } from '@/shared/toast'; interface LotusCreateFormValue { title: string; @@ -18,6 +19,8 @@ interface LotusCreateFormValue { export function LotusCreateForm() { const { mutate, isPending } = useLotusCreateMutation(); + const { toast } = useToast({ isCloseOnUnmount: false }); + const navigate = useNavigate(); const [formValue, setFormValue] = useState({ @@ -39,6 +42,15 @@ export function LotusCreateForm() { { onSuccess: ({ id }) => { navigate({ to: `/lotus/$lotusId`, params: { lotusId: id } }); + + toast({ description: 'Lotus가 생성되었습니다.', variant: 'success', duration: 2000 }); + }, + onError: () => { + toast({ + description: 'Lotus 생성 중 오류가 발생했습니다. 다시 시도해 주세요.', + variant: 'error', + duration: 2000 + }); } } ); diff --git a/apps/frontend/src/widget/lotusDelete/index.tsx b/apps/frontend/src/widget/lotusDelete/index.tsx index b92e351c..29c06419 100644 --- a/apps/frontend/src/widget/lotusDelete/index.tsx +++ b/apps/frontend/src/widget/lotusDelete/index.tsx @@ -4,24 +4,36 @@ import { RiDeleteBin5Fill } from 'react-icons/ri'; import { useLotusDeleteMutation } from '@/feature/lotus'; import { ModalBox } from '@/shared'; import { useOverlay } from '@/shared/overlay'; +import { useToast } from '@/shared/toast'; export function LotusDeleteButton({ lotusId }: { lotusId: string }) { - const { mutate } = useLotusDeleteMutation(); + const { mutate, isPending } = useLotusDeleteMutation(); + const { open, exit } = useOverlay(); + const { toast } = useToast({ isCloseOnUnmount: false }); const navigate = useNavigate(); const handleDeleteLotus = () => { + exit(); + mutate( { id: lotusId }, { onSuccess: () => { - console.log('성공'); + toast({ description: 'Lotus가 삭제되었습니다.', variant: 'success', duration: 2000 }); + navigate({ to: '/lotus' }); + }, + onError: () => { + toast({ + description: 'Lotus 삭제 중 오류가 발생했습니다. 다시 시도해 주세요.', + variant: 'error', + duration: 2000 + }); } } ); - exit(); }; const handleOpenDeleteModal = () => { @@ -45,7 +57,7 @@ export function LotusDeleteButton({ lotusId }: { lotusId: string }) { }; return ( - diff --git a/apps/frontend/src/widget/lotusUpdate/LotusUpdateButton.tsx b/apps/frontend/src/widget/lotusUpdate/LotusUpdateButton.tsx index ff3023fa..736f11b1 100644 --- a/apps/frontend/src/widget/lotusUpdate/LotusUpdateButton.tsx +++ b/apps/frontend/src/widget/lotusUpdate/LotusUpdateButton.tsx @@ -5,24 +5,36 @@ import { LotusUpdateForm } from './LotusUpdateForm'; import { lotusQueryOptions, useLotusUpdateMutation } from '@/feature/lotus'; import { ModalBox } from '@/shared'; import { useOverlay } from '@/shared/overlay'; +import { useToast } from '@/shared/toast'; export function LotusUpdateButton({ lotusId }: { lotusId: string }) { - const { mutate } = useLotusUpdateMutation(); + const { mutate, isPending } = useLotusUpdateMutation(); const { open, exit } = useOverlay(); + const { toast } = useToast(); const queryClient = useQueryClient(); const onSubmit = (body: { title: string; tags: string[] }) => { + exit(); + mutate( { body, id: lotusId }, { onSuccess: () => { queryClient.invalidateQueries(lotusQueryOptions.detail({ id: lotusId })); + + toast({ description: 'Lotus가 수정되었습니다.', variant: 'success', duration: 2000 }); + }, + onError: () => { + toast({ + description: 'Lotus 수정 중 오류가 발생했습니다. 다시 시도해 주세요.', + variant: 'error', + duration: 2000 + }); } } ); - exit(); }; const handleOpenUpdateModal = () => { @@ -36,7 +48,7 @@ export function LotusUpdateButton({ lotusId }: { lotusId: string }) { }; return ( - diff --git a/apps/frontend/src/widget/lotusUpdate/LotusUpdateForm.tsx b/apps/frontend/src/widget/lotusUpdate/LotusUpdateForm.tsx index c2298ad6..2fad9d05 100644 --- a/apps/frontend/src/widget/lotusUpdate/LotusUpdateForm.tsx +++ b/apps/frontend/src/widget/lotusUpdate/LotusUpdateForm.tsx @@ -15,7 +15,7 @@ export function LotusUpdateForm({ lotusId, onSubmit, onCancel }: LotusUpdateForm const [title, setTitle] = useState(lotus.title); - const [tags, setTags] = useState([]); + const [tags, setTags] = useState(lotus.tags); const handleSubmit = () => { onSubmit?.({ title, tags }); @@ -30,7 +30,7 @@ export function LotusUpdateForm({ lotusId, onSubmit, onCancel }: LotusUpdateForm setTitle(e.target.value)} /> 태그 diff --git a/apps/frontend/src/widget/user/SuspenseUserInfoBox.tsx b/apps/frontend/src/widget/user/SuspenseUserInfoBox.tsx index 64f2fa68..89605ee3 100644 --- a/apps/frontend/src/widget/user/SuspenseUserInfoBox.tsx +++ b/apps/frontend/src/widget/user/SuspenseUserInfoBox.tsx @@ -11,9 +11,9 @@ export function SuspenseUserInfoBox() { const queryClient = useQueryClient(); const { data: user } = useSuspenseQuery(userQueryOptions.info()); - const { mutate } = useUserMutation(); - const { toast } = useToast(); + const { mutate, isPending } = useUserMutation(); + const { toast } = useToast(); const [isEdit, setIsEdit] = useState(false); const onToggleIsEdit = () => { @@ -26,11 +26,19 @@ export function SuspenseUserInfoBox() { { onSuccess: () => { queryClient.invalidateQueries(userQueryOptions.info()); + toast({ variant: 'success', description: '닉네임이 수정되었습니다.', duration: 2000 }); + }, + onError: () => { + toast({ + variant: 'error', + description: '닉네임 수정 중 오류가 발생했습니다. 다시 시도해 주세요.', + duration: 2000 + }); } } ); @@ -48,6 +56,7 @@ export function SuspenseUserInfoBox() {
{isEdit ? ( onEditUserInfo(value)}