✨ 글 작성 에러핸들링

FRONTENDBOOTCAMP-11th · Jan 15, 2025 · 1dd18a0 · 1dd18a0
1 parent 3338fa3
commit 1dd18a0
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 31 deletions.
diff --git a/public/images/arrow/next.svg b/public/images/arrow/next.svg
diff --git a/public/images/arrow/prev.svg b/public/images/arrow/prev.svg
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
@@ -2,10 +2,9 @@ import { FadeLoader } from 'react-spinners';
 
 const Loading = () => {
   return (
-      <div className="h-full flex flex-col gap-3 items-center justify-center">
-        <h1>로딩 중..</h1>
-        <FadeLoader color="#4CAF50" />
-      </div>
+    <div className="h-full flex flex-col gap-3 items-center justify-center">
+      <FadeLoader color="#4CAF50" className="w-[20px] h-[20px]" />
+    </div>
   );
 };
 

diff --git a/src/components/PostType.tsx b/src/components/PostType.tsx
@@ -10,14 +10,18 @@ interface props {
 <PostType type={typeBuy} /> */
 }
 function PostType({ type }: props) {
-  let buttonValue: string = '';
-  if (type == 'sell') buttonValue = '팔아요';
-  else if (type == 'buy') buttonValue = '같이 사요';
-
   return (
-      <p className="border h-fit bg-back2 text-sub border-transparent text-[12px] py-1 px-2 text-center rounded-[4px]">
-        {buttonValue}
-      </p>
+    <>
+      {type === 'sell' ? (
+        <p className="border h-fit text-back2 bg-sub border-transparent text-[12px] py-1 px-2 text-center rounded-[4px]">
+          팔아요
+        </p>
+      ) : (
+        <p className="border h-fit bg-back2 text-sub border-transparent text-[12px] py-1 px-2 text-center rounded-[4px]">
+          같이 사요
+        </p>
+      )}
+    </>
   );
 }
 

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -1,22 +1,12 @@
 import { forwardRef, useState } from 'react';
+import { Location } from '../constants/location';
 interface SelectTypes {
   meetingLocation: string;
   setMeetingLocation: (arg0: string) => void;
 }
 
 const Select = forwardRef<HTMLDivElement, SelectTypes>(
   ({ meetingLocation, setMeetingLocation }: SelectTypes, ref) => {
-    const location: string[] = [
-      '전체지역',
-      '서울',
-      '경기',
-      '강원',
-      '충청',
-      '경상',
-      '전라',
-      '제주',
-    ];
-
     const [isVisible, setIsVisible] = useState<boolean>(false);
 
     // 클릭 시 토글 나오게
@@ -31,7 +21,7 @@ const Select = forwardRef<HTMLDivElement, SelectTypes>(
     };
 
     // 리스트 생성
-    const list = location.map((item, index) => (
+    const list = Location.map((item, index) => (
       <li
         key={item}
         className={`flex flex-col items-center text-main ${

diff --git a/src/components/Total.tsx b/src/components/Total.tsx
@@ -142,6 +142,7 @@ function Total({ data, onRefetch }: TotalProps) {
         pauseOnHover={false}
         theme="colored"
         transition={Slide}
+        toastClassName="mx-4"
       />
     </div>
   );

diff --git a/src/constants/location.ts b/src/constants/location.ts
@@ -0,0 +1,10 @@
+export const Location = [
+  '전체지역',
+  '서울',
+  '경기',
+  '강원',
+  '충청',
+  '경상',
+  '전라',
+  '제주',
+];
diff --git a/src/pages/login/login.tsx b/src/pages/login/login.tsx
@@ -176,6 +176,7 @@ const Login: React.FC = () => {
         pauseOnHover={false}
         theme="colored"
         transition={Slide}
+        toastClassName="mx-4"
       />
     </>
   );

diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
@@ -185,7 +185,11 @@ const Main = () => {
                 imageScr={products?.mainImages[0]?.path || ''}
               />
             ))}
-            {isLoading && <Loading />}
+            {isLoading && (
+              <div className='pt-3'>
+                <Loading />
+              </div>
+            )}
             {/* 더보기 버튼 */}
             {items.length < totalItems && ( // 모든 데이터를 불러온 경우 버튼 숨김
               <button

diff --git a/src/pages/signUp/signUp.tsx b/src/pages/signUp/signUp.tsx
@@ -287,6 +287,7 @@ const SignUp: React.FC = () => {
         pauseOnHover={false}
         theme="colored"
         transition={Slide}
+        toastClassName="mx-4"
       />
     </>
   );

diff --git a/src/pages/write/write.tsx b/src/pages/write/write.tsx
@@ -35,6 +35,9 @@ interface FormData {
     type: string; // 판매글 타입
   };
 }
+interface AxiosErrorResponse {
+  errors: { msg: string }[];
+}
 
 const Write = () => {
   const {
@@ -90,9 +93,10 @@ const Write = () => {
       });
     },
     onError: (err) => {
-      const axiosError = err as AxiosError;
+      const axiosError = err as AxiosError<AxiosErrorResponse>;
       if (axiosError.response) {
         console.error('Error Response:', axiosError.response.data); // 서버에서 반환된 에러 메시지
+        toast.error(`${axiosError.response.data.errors[0].msg}`);
       } else {
         console.error('Unexpected Error:', err); // 기타 에러
       }
@@ -174,6 +178,7 @@ const Write = () => {
         pauseOnHover={false}
         theme="colored"
         transition={Slide}
+        toastClassName="mx-4"
       />
       <div className="min-h-screen bg-back1 pt-14 pb-[100px]">
         <Header>