diff --git a/components/MyWikiError.tsx b/components/MyWikiError.tsx new file mode 100644 index 0000000..499d866 --- /dev/null +++ b/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 ( +
+
+ + {title} + +
+ +

{children}

+ +
+ + +
+
+ ); +} diff --git a/pages/wiki/[code].tsx b/pages/wiki/[code].tsx index 70be1ff..0ed04f8 100644 --- a/pages/wiki/[code].tsx +++ b/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 => { try { @@ -20,6 +21,7 @@ const getProfileData = async (code: string): Promise => { export default function Wiki() { const [profile, setProfile] = useState(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 ? ( -
-
-
- + if (isError) { + return ( +
+
+
+ - - 서버에서 전송한 데이터를 가져오는데 문제가 발생했습니다. -
- 다시 한 번 시도해주세요. -
-
+ + 서버에서 전송한 데이터를 가져오는데 문제가 발생했습니다. +
+ 다시 한 번 시도해주세요. +
- ) : profile ? ( -
- -
- ) : ( -
- +
+ ); + } + + if (isMyWikiBlank) { + return ( +
+
+ + 마이페이지에서 내 위키를 생성해주세요. +
- )} - +
+ ); + } + + if (profile) { + return ( +
+ +
+ ); + } + + return ( +
+ +
); }