Merge pull request #201 from DevKor-github/fix/post-toast

[Fix] post 에러 핸들링

Author: jw0202058

src/features/post/components/StepFunnel/Step5/index.tsx

@@ -7,7 +7,14 @@ import * as c from '../style.css';
 import SelectedPhoto from '../../uploadedPhoto';
 import UploadFile from '../../UploadFile';
 import { useStep5Store } from '@/features/post/stores/Step5Store';
-import { ALLOWED_EXTENSIONS, MAX_DESC, MAX_SIZE_BYTES, MAX_SIZE_MB, MAX_TITLE } from '@/libs/constants';
+import {
+  ALLOWED_EXTENSIONS,
+  MAX_DESC,
+  MAX_FILE_LENGTH,
+  MAX_SIZE_BYTES,
+  MAX_SIZE_MB,
+  MAX_TITLE,
+} from '@/libs/constants';
 import AlertText from '../../AlertText';
 import { getFileKeys } from '@/common/utils/getFileKeys';
 import getImageUrl from '@/common/utils/getImageUrl';
@@ -42,11 +49,11 @@ const Step5 = () => {
     const validFiles = fileArray.filter(file => {
       const ext = file.name.split('.').pop()?.toLowerCase();
       if (!ext || !ALLOWED_EXTENSIONS.includes(ext)) {
-        openToast({ message: `"${file.name}"은(는) 지원하지 않는 확장자입니다.` });
+        openToast({ message: `지원하지 않는 확장자입니다.` });
         return false;
       }
       if (file.size > MAX_SIZE_BYTES) {
-        openToast({ message: `"${file.name}"은(는) ${MAX_SIZE_MB}MB를 초과합니다.` });
+        openToast({ message: `${MAX_SIZE_MB}MB를 초과합니다.` });
         return false;
       }
       return true;
@@ -122,8 +129,8 @@ const Step5 = () => {
               </div>
 
               <div className={s.AlertText}>
-                <AlertText isIcon={true}>최대 6장까지 등록이 가능해요.</AlertText>
-                <AlertText isIcon={true}>장당 최대 5MB까지 등록이 가능해요.</AlertText>
+                <AlertText isIcon={true}>최대 {MAX_FILE_LENGTH}장까지 등록이 가능해요.</AlertText>
+                <AlertText isIcon={true}>장당 최대 {MAX_SIZE_MB}MB까지 등록이 가능해요.</AlertText>
               </div>
             </div>
           </div>

src/features/post/components/WriteLayout/index.tsx

@@ -29,8 +29,10 @@ export const MAX_STEP = 6;
 const WriteLayout = ({ postState, itemId, isEdit }: Props) => {
   const [step, setStep] = useState(1);
 
-  const { mutate: postItem } = usePostItem();
-  const { mutate: putItem } = usePutItem();
+  const { mutate: postItem, isPending: isPosting } = usePostItem();
+  const { mutate: putItem, isPending: isPutting } = usePutItem();
+
+  const isSubmitting = isPosting || isPutting;
 
   const navigate = useNavigate();
   const data = useCollectPostData();
@@ -104,6 +106,7 @@ const WriteLayout = ({ postState, itemId, isEdit }: Props) => {
           isFirst={isFirst}
           isLast={isLast}
           postState={postState}
+          isSubmitting={isSubmitting}
         />
       </div>
     </div>

src/features/post/components/WriteLayout/navigator.tsx

@@ -18,9 +18,19 @@ interface NavigatorProps {
   isFirst: boolean;
   isLast: boolean;
   postState?: ItemDetailInterface;
+  isSubmitting?: boolean;
 }
 
-const Navigator = ({ totalSteps, currentStep, goNext, goPrev, isFirst, isLast, postState }: NavigatorProps) => {
+const Navigator = ({
+  totalSteps,
+  currentStep,
+  goNext,
+  goPrev,
+  isFirst,
+  isLast,
+  postState,
+  isSubmitting,
+}: NavigatorProps) => {
   const isStep1Valid = useStep1Store(state => state.isBtnValid());
   const isStep2Valid = useStep2Store(state => state.isBtnValid());
   const isStep3Valid = useStep3Store(state => state.isBtnValid());
@@ -36,10 +46,11 @@ const Navigator = ({ totalSteps, currentStep, goNext, goPrev, isFirst, isLast, p
   if (isLast && postState) {
     isBtnValid = !isStoreEqualToState(postState);
   }
-  const isBtnAble = isBtnValid ? 'main' : 'disabled';
+  const isBtnAble = isBtnValid && !isSubmitting ? 'main' : 'disabled';
 
   const onClick = () => {
-    if (isBtnValid) goNext();
+    if (!isBtnValid || isSubmitting) return;
+    goNext();
   };
 
   return (

src/libs/constants/index.ts

@@ -4,7 +4,7 @@ export const MAX_TITLE = 64;
 export const MAX_DESC = 1000;
 export const MAX_REVIEW = 500;
 export const ALLOWED_EXTENSIONS = ['jpg', 'jpeg', 'png', 'webp'];
-export const MAX_SIZE_MB = 5;
+export const MAX_SIZE_MB = 3;
 export const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
 export const MAX_FILE_LENGTH = 6;