✨ 프로필이 없을 때 내 위키 오류페이지

components/MyWikiError.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import Button from './Button';
+import { SITE_NAME } from 'constants/terms';
+
+interface Props {
+  title: string;
+  buttonPosition?: 'left' | 'right';
+  children: ReactNode;
+}
+
+export default function MyWikiError({
+  title,
+  buttonPosition = 'left',
+  children,
+}: Props) {
+  const buttonRightStyle = buttonPosition === 'right' && 'justify-end';
+
+  return (
+    <div>
+      <div className="my-2 flex items-end gap-3">
+        <span className="text-8xl font-bold text-green-200 mo:text-32b ta:text-6xl">
+          {title}
+        </span>
+      </div>
+
+      <p className="mb-4 mt-8 text-balance break-keep text-18sb">{children}</p>
+
+      <div
+        className={`flex gap-4 text-balance mo:justify-center ${buttonRightStyle}`}
+      >
+        <Button href="/" variant="secondary" className="w-[140px]">
+          {SITE_NAME} 홈
+        </Button>
+        <Button href="/mypage" variant="primary" className="w-[140px]">
+          마이 페이지
+        </Button>
+      </div>
+    </div>
+  );
+}

pages/wiki/[code].tsx

@@ -7,6 +7,7 @@ import Contents from '@/components/wiki.page/Contents';
 import Spinner from '@/components/Spinner';
 import IconFaceDizzy from '@/components/Svg/IconFaceDizzy';
 import ErrorMessage from '@/components/ErrorMessage';
+import MyWikiError from '@/components/MyWikiError';
 
 const getProfileData = async (code: string): Promise<ProfileAnswer | null> => {
   try {
@@ -20,6 +21,7 @@ const getProfileData = async (code: string): Promise<ProfileAnswer | null> => {
 export default function Wiki() {
   const [profile, setProfile] = useState<ProfileAnswer | null>(null);
   const [isError, setIsError] = useState(false);
+  const [isMyWikiBlank, setIsMyWikiBlank] = useState(false);
   const router = useRouter();
   const { code } = router.query;
 
@@ -31,7 +33,7 @@ export default function Wiki() {
           if (profileData) {
             setProfile(profileData); // 프로필 상태 업데이트
           } else {
-            setIsError(true);
+            setIsMyWikiBlank(true);
           }
         } catch (error) {
           setIsError(true);
@@ -42,34 +44,47 @@ export default function Wiki() {
     fetchProfile();
   }, [code]);
 
-  return (
-    <>
-      {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" />
+  if (isError) {
+    return (
+      <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>
+            <ErrorMessage title="데이터를 가져오는데 문제가 있어요." code="500">
+              서버에서 전송한 데이터를 가져오는데 문제가 발생했습니다.
+              <br />
+              다시 한 번 시도해주세요.
+            </ErrorMessage>
           </div>
         </div>
-      ) : profile ? (
-        <div className="mt-[120px] flex justify-center pc:mx-[100px]">
-          <Contents key={profile.code} profile={profile} />
-        </div>
-      ) : (
-        <div className="flex h-[calc(100vh-120px)] items-center justify-center">
-          <Spinner size={10} />
+      </div>
+    );
+  }
+
+  if (isMyWikiBlank) {
+    return (
+      <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">
+          <MyWikiError title="내 위키가 비어있어요">
+            마이페이지에서 내 위키를 생성해주세요.
+          </MyWikiError>
         </div>
-      )}
-    </>
+      </div>
+    );
+  }
+
+  if (profile) {
+    return (
+      <div className="mt-[120px] flex justify-center pc:mx-[100px]">
+        <Contents key={profile.code} profile={profile} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-[calc(100vh-120px)] items-center justify-center">
+      <Spinner size={10} />
+    </div>
   );
 }