From 5507485829af47e8c08474756cf46b593c03e34e Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Thu, 10 Aug 2023 17:15:41 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20pinDetail=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EC=8B=9C=20=EA=B8=B0=EC=A1=B4=20=EC=97=90=EB=9F=AC=20=EB=A9=94?= =?UTF-8?q?=EC=84=B8=EC=A7=80=20=EC=83=81=ED=83=9C=EA=B0=80=20=EC=9C=A0?= =?UTF-8?q?=EC=A7=80=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/PinPreview/index.tsx | 4 +- frontend/src/hooks/useFormValues.ts | 8 +++- frontend/src/pages/PinDetail.tsx | 41 ++++++++++++++------ frontend/src/pages/SelectedTopic.tsx | 8 +++- frontend/src/pages/UpdatedPinDetail.tsx | 9 +++++ 5 files changed, 56 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/PinPreview/index.tsx b/frontend/src/components/PinPreview/index.tsx index 0d3fb3076..ad57240aa 100644 --- a/frontend/src/components/PinPreview/index.tsx +++ b/frontend/src/components/PinPreview/index.tsx @@ -16,6 +16,7 @@ export interface PinPreviewProps { setTagPins: (value: string[]) => void; taggedPinIds: number[]; setTaggedPinIds: React.Dispatch>; + setIsEditPinDetail: React.Dispatch>; } const PinPreview = ({ @@ -29,6 +30,7 @@ const PinPreview = ({ setTagPins, taggedPinIds, setTaggedPinIds, + setIsEditPinDetail, }: PinPreviewProps) => { const { routePage } = useNavigator(); @@ -62,7 +64,7 @@ const PinPreview = ({ const onClickSetSelectedPinId = () => { setSelectedPinId(pinId); - + setIsEditPinDetail(false); routePage(`/topics/${topicId}?pinDetail=${pinId}`); }; diff --git a/frontend/src/hooks/useFormValues.ts b/frontend/src/hooks/useFormValues.ts index e90211e9d..83ae9d14a 100644 --- a/frontend/src/hooks/useFormValues.ts +++ b/frontend/src/hooks/useFormValues.ts @@ -55,7 +55,13 @@ const useFormValues = >( setErrorMessages((prev) => ({ ...prev, [name]: '' })); }; - return { formValues, errorMessages, setFormValues, onChangeInput }; + return { + formValues, + errorMessages, + setFormValues, + setErrorMessages, + onChangeInput, + }; }; export default useFormValues; diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx index 1ab0a8cf6..b55fd9de9 100644 --- a/frontend/src/pages/PinDetail.tsx +++ b/frontend/src/pages/PinDetail.tsx @@ -16,18 +16,32 @@ import Button from '../components/common/Button'; import { styled } from 'styled-components'; import { ModalPortal, useModalContext } from '../context/ModalContext'; -const PinDetail = ({ pinId }: { pinId: number }) => { +interface PinDetailProps { + pinId: number; + isEditPinDetail: boolean; + setIsEditPinDetail: React.Dispatch>; +} + +const PinDetail = ({ + pinId, + isEditPinDetail, + setIsEditPinDetail, +}: PinDetailProps) => { const [searchParams, setSearchParams] = useSearchParams(); const [pin, setPin] = useState(null); - const [isEditing, setIsEditing] = useState(false); const { showToast } = useToast(); const { isModalOpen, openModal, closeModal } = useModalContext(); - const { formValues, errorMessages, setFormValues, onChangeInput } = - useFormValues({ - name: '', - images: [], - description: '', - }); + const { + formValues, + errorMessages, + setFormValues, + setErrorMessages, + onChangeInput, + } = useFormValues({ + name: '', + images: [], + description: '', + }); useEffect(() => { const getPinData = async () => { @@ -48,7 +62,12 @@ const PinDetail = ({ pinId }: { pinId: number }) => { }; const onClickEditPin = () => { - setIsEditing(true); + setIsEditPinDetail(true); + setErrorMessages({ + name: '', + images: '', + description: '', + }); updateQueryString('edit', 'true'); }; @@ -63,12 +82,12 @@ const PinDetail = ({ pinId }: { pinId: number }) => { if (!pin) return <>; - if (isEditing) + if (isEditPinDetail) return ( { const [selectedPinId, setSelectedPinId] = useState(null); const [taggedPinIds, setTaggedPinIds] = useState([]); const [isOpen, setIsOpen] = useState(true); + const [isEditPinDetail, setIsEditPinDetail] = useState(false); const { routePage } = useNavigator(); const { setCoordinates } = useContext(CoordinatesContext); const { setWidth } = useContext(LayoutWidthContext); @@ -130,6 +131,7 @@ const SelectedTopic = () => { setTagPins={setTagPins} taggedPinIds={taggedPinIds} setTaggedPinIds={setTaggedPinIds} + setIsEditPinDetail={setIsEditPinDetail} /> ))} @@ -159,7 +161,11 @@ const SelectedTopic = () => { $borderLeft={`1px solid ${theme.color.gray}`} $zIndex={1} > - + diff --git a/frontend/src/pages/UpdatedPinDetail.tsx b/frontend/src/pages/UpdatedPinDetail.tsx index e0c01ee66..4c0e20fad 100644 --- a/frontend/src/pages/UpdatedPinDetail.tsx +++ b/frontend/src/pages/UpdatedPinDetail.tsx @@ -7,6 +7,8 @@ import { putApi } from '../apis/putApi'; import { SetURLSearchParams } from 'react-router-dom'; import { ModifyPinFormProps } from '../types/FormValues'; import InputContainer from '../components/InputContainer'; +import { hasErrorMessage, hasNullValue } from '../validations'; +import useToast from '../hooks/useToast'; interface UpdatedPinDetailProps { searchParams: URLSearchParams; @@ -31,6 +33,8 @@ const UpdatedPinDetail = ({ setIsEditing, onChangeInput, }: UpdatedPinDetailProps) => { + const { showToast } = useToast(); + const removeQueryString = (key: string) => { const updatedSearchParams = { ...Object.fromEntries(searchParams) }; delete updatedSearchParams[key]; @@ -38,6 +42,11 @@ const UpdatedPinDetail = ({ }; const onClickUpdatePin = async () => { + if (hasErrorMessage(errorMessages) || hasNullValue(formValues)) { + showToast('error', '입력하신 항목들을 다시 한 번 확인해주세요.'); + return; + } + await putApi(`/pins/${pinId}`, formValues); setIsEditing(false); removeQueryString('edit');