Feature/#256 위키페이지 로딩스피너 오류 컴포넌트 적용

components/wiki.page/Contents.tsx

@@ -38,16 +38,20 @@ export default function Contents({ profile }: ProfileProps) {
       showSnackbar('로그인 후 이용해주세요.', 'fail');
       return;
     }
-    const res = await instance.get(`/profiles/${profile.code}/ping`);
-    if (res.status === 204) {
-      setIsInfoSnackBarOpen(false);
-      setIsQuizOpen(true);
-    } else {
-      const registeredDate = new Date(res.data.registeredAt);
-      const nowDate = new Date();
-      const diff = nowDate.getTime() - registeredDate.getTime();
-      setDiffTime(diff);
-      setIsInfoSnackBarOpen(true);
+    try {
+      const res = await instance.get(`/profiles/${profile.code}/ping`);
+      if (res.status === 204) {
+        setIsInfoSnackBarOpen(false);
+        setIsQuizOpen(true);
+      } else {
+        const registeredDate = new Date(res.data.registeredAt);
+        const nowDate = new Date();
+        const diff = nowDate.getTime() - registeredDate.getTime();
+        setDiffTime(diff);
+        setIsInfoSnackBarOpen(true);
+      }
+    } catch (error) {
+      showSnackbar('다시 시도해주세요.', 'fail');
     }
   };
 
@@ -56,20 +60,23 @@ export default function Contents({ profile }: ProfileProps) {
     showSnackbar('정답입니다!', 'success');
     setIsQuizOpen(false);
 
-    const accessToken = localStorage.getItem('accessToken');
-    const res = await instance.get('/users/me', {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    });
-
-    const userCode = (res.data as { profile: ProfileAnswer }).profile.code;
-    if (profile.code === userCode) {
-      setIsProfileEdit(true);
-    } else {
-      setIsProfileEdit(false);
+    try {
+      const accessToken = localStorage.getItem('accessToken');
+      const res = await instance.get('/users/me', {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+      const userCode = (res.data as { profile: ProfileAnswer }).profile.code;
+      if (profile.code === userCode) {
+        setIsProfileEdit(true);
+      } else {
+        setIsProfileEdit(false);
+      }
+      setIsEditing(true);
+    } catch (error) {
+      showSnackbar('다시 시도해주세요.', 'fail');
     }
-    setIsEditing(true);
   };
 
   //위키 제목과 내용 편집
@@ -111,9 +118,9 @@ export default function Contents({ profile }: ProfileProps) {
       setProfileData(profileData);
       setIsEditing(false);
       setIsProfileEdit(false);
+      showSnackbar('저장되었습니다.', 'success');
     } catch (error) {
-      console.error('프로필을 저장하는 데 실패했습니다.', error);
-      // 요청 실패시 오류 처리 추가 (예: 사용자에게 알림)
+      showSnackbar('저장에 실패했습니다.', 'fail');
     }
   };
 

pages/wiki/[code].tsx

@@ -4,19 +4,22 @@ import { ProfileAnswer } from 'types/profile';
 
 import instance from '@/lib/axios-client';
 import Contents from '@/components/wiki.page/Contents';
+import Spinner from '@/components/Spinner';
+import IconFaceDizzy from '@/components/Svg/IconFaceDizzy';
+import ErrorMessage from '@/components/ErrorMessage';
 
 const getProfileData = async (code: string): Promise<ProfileAnswer | null> => {
   try {
     const res = await instance.get<ProfileAnswer>(`/profiles/${code}`);
     return res.data;
   } catch (e) {
-    console.error('프로필을 불러오지 못했습니다.', e);
-    return null; // 오류 발생 시 null 반환
+    return null;
   }
 };
 
 export default function Wiki() {
   const [profile, setProfile] = useState<ProfileAnswer | null>(null);
+  const [isError, setIsError] = useState(false);
   const router = useRouter();
   const { code } = router.query;
 
@@ -28,26 +31,45 @@ export default function Wiki() {
           if (profileData) {
             setProfile(profileData); // 프로필 상태 업데이트
           } else {
-            alert('프로필을 불러오지 못했습니다.');
+            setIsError(true);
           }
         } catch (error) {
-          console.error('프로필을 불러오는 중에 오류가 발생했습니다.', error);
-          alert('프로필을 불러오는 중에 오류가 발생했습니다.');
+          setIsError(true);
         }
       }
     };
 
-    fetchProfile().catch((error) => {
-      // Promise 거부 처리
-      console.error('useEffect에서 오류가 발생했습니다.', error);
-    });
+    fetchProfile();
   }, [code]);
 
   return (
     <>
-      <div className="mt-[120px] flex justify-center pc:mx-[100px]">
-        {profile ? <Contents profile={profile} /> : <p>불러오는 중입니다...</p>}
-      </div>
+      {isError ? (
+        <div className="min-h-screen">
+          <div className="container flex min-h-screen items-center justify-center">
+            <div className="inline-flex gap-8 px-4 mo:flex-col mo:gap-2">
+              <IconFaceDizzy width={180} height={180} className="mo:mx-auto" />
+
+              <ErrorMessage
+                title="데이터를 가져오는데 문제가 있어요."
+                code="500"
+              >
+                서버에서 전송한 데이터를 가져오는데 문제가 발생했습니다.
+                <br />
+                다시 한 번 시도해주세요.
+              </ErrorMessage>
+            </div>
+          </div>
+        </div>
+      ) : profile ? (
+        <div className="mt-[120px] flex justify-center pc:mx-[100px]">
+          <Contents profile={profile} />
+        </div>
+      ) : (
+        <div className="flex h-[calc(100vh-120px)] items-center justify-center">
+          <Spinner size={10} />
+        </div>
+      )}
     </>
   );
 }