diff --git a/api/growth/index.ts b/api/growth/index.ts index 696599a4..03f5d7d1 100644 --- a/api/growth/index.ts +++ b/api/growth/index.ts @@ -1,12 +1,12 @@ import { Growth } from '@/types/growth'; import { axiosInstance } from '..'; -import { AddGrowthData, GrowthDetails } from '@/types/growth/details'; +import { GrowthDetails, GrowthDetailsData } from '@/types/growth/details'; import { GrowthSearchData } from '@/types/growth/search'; export default class GrowthAPI { constructor() {} - async createGrowth(formData: AddGrowthData) { + async createGrowth(formData: GrowthDetailsData) { return await axiosInstance.post('/growth', formData); } @@ -26,8 +26,8 @@ export default class GrowthAPI { ).data; } - async modifyGrowth(growthId: number) { - return await axiosInstance.put(`/growth/${growthId}`); + async modifyGrowth(growthId: number, data: GrowthDetailsData) { + return await axiosInstance.put(`/growth/${growthId}`, data); } async deleteGrowth(growthId: number) { diff --git a/components/calendar-monthly/pet-radio.tsx b/components/calendar-monthly/pet-radio.tsx index 187f9fc2..8e19729c 100644 --- a/components/calendar-monthly/pet-radio.tsx +++ b/components/calendar-monthly/pet-radio.tsx @@ -2,10 +2,10 @@ import Image from 'next/image'; import styles from './pet-radio.module.scss'; import { FieldValues, UseFormRegister } from 'react-hook-form'; import { IFormInput } from '@/types/calendar'; -import { AddGrowthData } from '@/types/growth/details'; +import { GrowthDetailsData } from '@/types/growth/details'; interface PetRadio { - register: UseFormRegister | UseFormRegister; + register: UseFormRegister | UseFormRegister; petName: string; petImage: string; defaultPet?: string; diff --git a/hooks/queries/growth/use-post-growth-query.ts b/hooks/queries/growth/use-post-growth-query.ts index bc094866..b44f84af 100644 --- a/hooks/queries/growth/use-post-growth-query.ts +++ b/hooks/queries/growth/use-post-growth-query.ts @@ -1,20 +1,18 @@ import GrowthAPI from '@/api/growth'; -import { AddGrowthData } from '@/types/growth/details'; +import { GrowthDetailsData } from '@/types/growth/details'; import { useMutation, useQueryClient } from '@tanstack/react-query'; const growthAPI = new GrowthAPI(); export const useCreateGrotwthMutation = () => { return useMutation({ - mutationFn: async (data: AddGrowthData) => await growthAPI.createGrowth(data), + mutationFn: async (data: GrowthDetailsData) => await growthAPI.createGrowth(data), }); }; export const useModifyGrowthMutation = (growthId: number) => { - const queryClient = useQueryClient(); return useMutation({ - mutationFn: async () => await growthAPI.modifyGrowth(growthId), - onSuccess: () => queryClient.invalidateQueries({ queryKey: ['growth', growthId], refetchType: 'active' }), + mutationFn: (data: GrowthDetailsData) => growthAPI.modifyGrowth(growthId, data), }); }; diff --git a/pages/growth/[growthId]/index.tsx b/pages/growth/[growthId]/index.tsx index 8f47dfde..c93cb6bb 100644 --- a/pages/growth/[growthId]/index.tsx +++ b/pages/growth/[growthId]/index.tsx @@ -2,7 +2,7 @@ import usePetsQuery from '@/hooks/queries/calendar/use-pets-query'; import { useGetGrowthDetailQuery } from '@/hooks/queries/growth/use-get-growth-queries'; import { useModifyGrowthMutation } from '@/hooks/queries/growth/use-post-growth-query'; import useModal from '@/hooks/use-modal'; -import { AddGrowthData } from '@/types/growth/details'; +import { GrowthDetailsContent, GrowthDetailsData } from '@/types/growth/details'; import { GROWTH_CATEGORY } from '@/utils/constants/growth'; import { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next'; import { Params } from 'next/dist/shared/lib/router/utils/route-matcher'; @@ -14,6 +14,8 @@ import CategoryInputs from '../create/category-inputs'; import classNames from 'classnames'; import CompleteModal from '../create/complete-modal'; import PetRadio from '@/components/calendar-monthly/pet-radio'; +import useCalenderDateStore from '@/store/calendar.store'; +import { convertToLocalDate } from '@/utils/convert-local-date'; export async function getServerSideProps(context: GetServerSidePropsContext) { const { @@ -31,22 +33,31 @@ export default function GrowthModify({ growthId }: InferGetServerSidePropsType(''); + const [memo, setMemo] = useState(''); + const [content, setContent] = useState({}); + const [initPetName, setInitPetName] = useState(''); + const year = useCalenderDateStore.use.year().toString(); + const month = (useCalenderDateStore.use.month() + 1).toString(); + const date = useCalenderDateStore.use.date().toString(); + const localDate = convertToLocalDate({ year, month, day: date }); + useEffect(() => { - if (growthList?.data?.category) { - setSelectedCategory(growthList?.data.category); + if (growthList?.data) { + setMemo(growthList.data.content.memo); + setSelectedCategory(growthList.data.category); + setContent(growthList.data.content); + setInitPetName(growthList.data.petName); } }, [growthList]); - + console.log(initPetName); const { register, handleSubmit, formState: { errors, isValid }, - } = useForm({ + } = useForm({ mode: 'onBlur', defaultValues: { - date: growthList?.data.dateTime, - category: growthList?.data.category, - content: growthList?.data.content, + dateTime: localDate, }, }); const openModal = () => { @@ -60,10 +71,10 @@ export default function GrowthModify({ growthId }: InferGetServerSidePropsType = (data) => { + const onSubmit: SubmitHandler = (data) => { + console.log(data); modifyMutation.mutate(data, { - onSuccess: (response) => { - console.log('Success:', response); + onSuccess: () => { openModal(); }, onError: (error) => { @@ -71,7 +82,6 @@ export default function GrowthModify({ growthId }: InferGetServerSidePropsType
@@ -80,18 +90,26 @@ export default function GrowthModify({ growthId }: InferGetServerSidePropsType {!!pets.length && + initPetName !== '' && pets.map((pet, i) => ( - + ))}
{errors.petName &&

{errors.petName.message}

}