fix: pinDetail 수정 시 기존 에러 메세지 상태가 유지되는 오류 수정

woowacourse-teams · Aug 10, 2023 · 5507485 · 5507485
1 parent 0036122
commit 5507485
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 14 deletions.
diff --git 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<React.SetStateAction<number[]>>;
+  setIsEditPinDetail: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 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
@@ -55,7 +55,13 @@ const useFormValues = <T extends Record<keyof T, string | string[]>>(
     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
@@ -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<React.SetStateAction<boolean>>;
+}
+
+const PinDetail = ({
+  pinId,
+  isEditPinDetail,
+  setIsEditPinDetail,
+}: PinDetailProps) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [pin, setPin] = useState<PinType | null>(null);
-  const [isEditing, setIsEditing] = useState<boolean>(false);
   const { showToast } = useToast();
   const { isModalOpen, openModal, closeModal } = useModalContext();
-  const { formValues, errorMessages, setFormValues, onChangeInput } =
-    useFormValues<ModifyPinFormProps>({
-      name: '',
-      images: [],
-      description: '',
-    });
+  const {
+    formValues,
+    errorMessages,
+    setFormValues,
+    setErrorMessages,
+    onChangeInput,
+  } = useFormValues<ModifyPinFormProps>({
+    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 (
       <UpdatedPinDetail
         searchParams={searchParams}
         setSearchParams={setSearchParams}
-        setIsEditing={setIsEditing}
+        setIsEditing={setIsEditPinDetail}
         pinId={pinId}
         formValues={formValues}
         errorMessages={errorMessages}

diff --git a/frontend/src/pages/SelectedTopic.tsx b/frontend/src/pages/SelectedTopic.tsx
@@ -22,6 +22,7 @@ const SelectedTopic = () => {
   const [selectedPinId, setSelectedPinId] = useState<number | null>(null);
   const [taggedPinIds, setTaggedPinIds] = useState<number[]>([]);
   const [isOpen, setIsOpen] = useState(true);
+  const [isEditPinDetail, setIsEditPinDetail] = useState<boolean>(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}
                     />
                   </li>
                 ))}
@@ -159,7 +161,11 @@ const SelectedTopic = () => {
                 $borderLeft={`1px solid ${theme.color.gray}`}
                 $zIndex={1}
               >
-                <PinDetail pinId={selectedPinId} />
+                <PinDetail
+                  pinId={selectedPinId}
+                  isEditPinDetail={isEditPinDetail}
+                  setIsEditPinDetail={setIsEditPinDetail}
+                />
               </Flex>
             </PinDetailWrapper>
           </>

diff --git 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,13 +33,20 @@ const UpdatedPinDetail = ({
   setIsEditing,
   onChangeInput,
 }: UpdatedPinDetailProps) => {
+  const { showToast } = useToast();
+
   const removeQueryString = (key: string) => {
     const updatedSearchParams = { ...Object.fromEntries(searchParams) };
     delete updatedSearchParams[key];
     setSearchParams(updatedSearchParams);
   };
 
   const onClickUpdatePin = async () => {
+    if (hasErrorMessage(errorMessages) || hasNullValue(formValues)) {
+      showToast('error', '입력하신 항목들을 다시 한 번 확인해주세요.');
+      return;
+    }
+
     await putApi(`/pins/${pinId}`, formValues);
     setIsEditing(false);
     removeQueryString('edit');