diff --git a/components/ErrorMessage.tsx b/components/ErrorMessage.tsx index c20be77..90a38fd 100644 --- a/components/ErrorMessage.tsx +++ b/components/ErrorMessage.tsx @@ -6,12 +6,20 @@ import { SITE_NAME } from 'constants/terms'; interface Props { code?: string; title: string; + buttonPosition?: 'left' | 'right'; children: ReactNode; } -export default function ErrorMessage({ code, title, children }: Props) { +export default function ErrorMessage({ + code, + title, + buttonPosition = 'left', + children, +}: Props) { const router = useRouter(); + const buttonRightStyle = buttonPosition === 'right' && 'justify-end'; + return (
{code?.trim() && ( @@ -24,7 +32,9 @@ export default function ErrorMessage({ code, title, children }: Props) {

{children}

-
+
diff --git a/pages/addboard/index.tsx b/pages/addboard/index.tsx index 06a0a17..aea77af 100644 --- a/pages/addboard/index.tsx +++ b/pages/addboard/index.tsx @@ -11,6 +11,8 @@ import ImageUploadModal from '@/components/Modal/ImageUploadModal'; import TextEditor from '@/components/TextEditor'; import { useMutation } from '@tanstack/react-query'; import { useSnackbar } from 'context/SnackBarContext'; +import ErrorMessage from '@/components/ErrorMessage'; +import Modal from '@/components/Modal/Modal'; // 제목 글자수 제한 const MAX_TITLE = 30; @@ -21,7 +23,8 @@ const MAX_TITLE = 30; export default function Addboard() { const [title, setTitle] = useState(''); const [content, setContent] = useState(''); - const [isModalOpen, setIsModalOpen] = useState(false); + const [isThumbnailOpen, setIsThumbnailOpen] = useState(false); + const [isErrorOpen, setIsErrorOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); const [imageFile, setImageFile] = useState(null); const { showSnackbar } = useSnackbar(); @@ -45,6 +48,7 @@ export default function Addboard() { }, onError: (err) => { console.error('--- 썸네일 업로드 에러:', err); + showSnackbar('썸네일 등록에 실패하였습니다.', 'fail'); }, }); // 글작성 tanstack @@ -54,11 +58,12 @@ export default function Addboard() { return res; }, onSuccess: (data) => { - router.push('/boards/' + data.id); showSnackbar('게시물이 등록되었습니다.', 'success'); + router.push('/boards/' + data.id); }, onError: (err) => { console.error('--- 게시물 등록 에러:', err); + showSnackbar('게시물 등록에 실패하였습니다.', 'fail'); }, }); @@ -68,11 +73,14 @@ export default function Addboard() { }; // 썸네일 이미지 클릭 콜백 함수 const handleAddThumbnail = () => { - setIsModalOpen(true); + setIsThumbnailOpen(true); }; // 이미지 모달 닫기 const handleImageModalClose = () => { - setIsModalOpen(false); + setIsThumbnailOpen(false); + }; + const handleErrorModalClose = () => { + setIsErrorOpen(false); }; // 이미지 파일 가져오기 const getImageFile = (file: File | null) => { @@ -174,10 +182,34 @@ export default function Addboard() { + + + + 이용에 불편을 드려 죄송합니다. 잠시 후 다시 시도해 주십시오. +
+ 오류 현상이 반복되면 코드잇 서버 개발 부서에 연락 부탁 드립니다. +
+ · 11-7팀에는 아무 잘못이 없습니다. +
+ + 📧 support@codeit.kr + +
+
); } diff --git a/pages/wikilist/index.tsx b/pages/wikilist/index.tsx index 2b6aa83..bbf4616 100644 --- a/pages/wikilist/index.tsx +++ b/pages/wikilist/index.tsx @@ -11,6 +11,7 @@ import Pagination from '@/components/Pagination/Pagination'; import SearchInput from '@/components/SearchInput'; import FullCoverSpinner from '@/components/FullCoverSpinner'; import { useSnackbar } from 'context/SnackBarContext'; +import ErrorMessage from '@/components/ErrorMessage'; // 위키 목록 페이지 프로필 데이터 타입 export interface ProfileProps { @@ -114,8 +115,26 @@ export default function WikiList() { if (isPending) return 위키 목록 가져오는 중...; - // TODO: 에러 컴포넌트 추가 - if (error) return
Error: {error.message}
; + if (error) { + console.error('--- 위키 목록 에러:', error.name, error.message); + const errorTitle = error.message || '서버 에러가 발생하였습니다.'; + + return ( +
+ + 위키 목록 - {errorTitle} | wikied + + +
+ + 위키 목록을 가져오는 중 서버 에러가 발생하였습니다. +
+ 이용에 불편을 드려 죄송합니다. 잠시 후 다시 시도해 주십시오. +
+
+
+ ); + } return (