Skip to content

#262 패칭에러 및 콘솔로그 제거 후 snackbar교체 #272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
junghwaYang merged 2 commits into from
Dec 28, 2024
Merged

#262 패칭에러 및 콘솔로그 제거 후 snackbar교체 #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
832b47c
🔨 패칭에러 및 콘솔로그 제거 후 snackbar교체
junghwaYang Dec 28, 2024
f8410e3
🔨 데이터패칭 에러 추가
junghwaYang Dec 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 36 additions & 8 deletions pages/boards/[articleId].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ import { CommentsData, CommentType } from 'types/board';
import ModalDefault from '@/components/Modal/ModalDefault';
import { useSnackbar } from 'context/SnackBarContext';
import CommentEmpty from '@/components/boards.page/CommentEmpty';
import Spinner from '@/components/Spinner';
import ErrorMessage from '@/components/ErrorMessage';

export default function BoardsDetails() {
const [boardData, setBoardData] = useState<ArticleData | null>(null);
Expand All @@ -37,6 +39,7 @@ export default function BoardsDetails() {

const [isModal, setIsModal] = useState(false);
const [commentToDelete, setCommentToDelete] = useState<number | null>(null);
const [dataError, setDataError] = useState(false);
const router = useRouter();
const { articleId } = router.query;
const { isAuthenticated } = useProfileContext();
Expand All @@ -51,7 +54,9 @@ export default function BoardsDetails() {
if (res) {
setUserId(res.id);
}
setDataError(false);
} catch (error) {
setDataError(true);
console.log('유저 정보를 불러오지 못했습니다.', error);
}
};
Expand All @@ -67,7 +72,9 @@ export default function BoardsDetails() {
try {
const res = await getBoardDetail(articleId);
setBoardData(res);
setDataError(false);
} catch (error) {
setDataError(true);
console.error('게시글 데이터를 불러오지 못했습니다.', error);
}
};
Expand Down Expand Up @@ -156,7 +163,7 @@ export default function BoardsDetails() {
showSnackbar('로그인이 필요한 서비스입니다.', 'fail');
}
} catch (error) {
console.error('댓글을 등록하지 못했습니다.', error);
showSnackbar('댓글을 등록하지 못했습니다.', 'fail');
}
};

Expand All @@ -165,7 +172,7 @@ export default function BoardsDetails() {
try {
await updateCommentMutation.mutateAsync({ id, newContent });
} catch (error) {
console.error('댓글을 수정하지 못했습니다.', error);
showSnackbar('댓글을 수정하지 못했습니다.', 'fail');
}
};

Expand All @@ -177,7 +184,7 @@ export default function BoardsDetails() {
setIsModal(false);
setCommentToDelete(null);
} catch (error) {
console.error('댓글을 삭제하지 못했습니다.', error);
showSnackbar('댓글을 삭제하지 못했습니다.', 'fail');
}
}
};
Expand All @@ -194,13 +201,26 @@ export default function BoardsDetails() {

// 게시글 데이터 로딩 상태
if (!boardData) {
return <div>게시글을 불러오는 중입니다...</div>;
return (
<div className="flex h-[540px] items-center justify-center">
<Spinner />
</div>
);
}

// 댓글 페칭 에러 처리
if (commentsError) {
if (commentsError || dataError) {
return (
<div>댓글을 불러오지 못했습니다: {(commentsError as Error).message}</div>
<div className="container flex min-h-screen items-center justify-center pb-5">
<ErrorMessage
title="데이터를 가져오는데 문제가 발생했습니다."
code="500"
>
서버에서 전송한 데이터를 가져오는데 문제가 발생했습니다.
<br />
다시 한 번 시도해주세요.
</ErrorMessage>
</div>
);
}

Expand Down Expand Up @@ -272,11 +292,19 @@ export default function BoardsDetails() {

{/* 무한 스크롤 로더 */}
<div ref={ref} className="h-10">
{isFetchingNextPage && <p>로딩 중...</p>}
{isFetchingNextPage && (
<div className="flex h-[540px] items-center justify-center">
<Spinner />
</div>
)}
</div>

{/* 일반 로딩 표시기 */}
{isFetching && !isFetchingNextPage && <p>로딩 중...</p>}
{isFetching && !isFetchingNextPage && (
<div className="flex h-[540px] items-center justify-center">
<Spinner />
</div>
)}
</div>
</div>
<ModalDefault
Expand Down
24 changes: 24 additions & 0 deletions pages/boards/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import Router from 'next/router';
import EmptyList from '@/components/EmptyList';
import { useSnackbar } from 'context/SnackBarContext';
import Spinner from '@/components/Spinner';
import ErrorMessage from '@/components/ErrorMessage';

const BoardCardList_Swiper = dynamic(
() => import('@/components/boards.page/BoardCardList.swiper'),
Expand All @@ -31,6 +32,7 @@ interface BoardsProps {
initialBoards: Board[];
initialLikeBoards: Board[];
totalCount: number;
hasError: boolean;
}

// SSR 데이터 패칭
Expand All @@ -52,6 +54,7 @@ export const getServerSideProps: GetServerSideProps = async () => {
initialLikeBoards,
initialBoards,
totalCount,
hasError: false,
},
};
} catch (error) {
Expand All @@ -61,6 +64,7 @@ export const getServerSideProps: GetServerSideProps = async () => {
initialLikeBoards: [],
initialBoards: [],
totalCount: 0,
hasError: true,
},
};
}
Expand All @@ -70,13 +74,15 @@ export default function Boards({
initialBoards,
initialLikeBoards,
totalCount,
hasError,
}: BoardsProps) {
const [boards, setBoards] = useState<Board[]>(initialBoards);
const [likeBoards] = useState<Board[]>(initialLikeBoards);
const [currentPage, setCurrentPage] = useState(1);
const [value, setValue] = useState('');
const [searchValue, setSearchValue] = useState('');
const [selectedOption, setSelectedOption] = useState('최신순');
const [isError, setIsError] = useState(false);
const { showSnackbar } = useSnackbar();

const [isLoading, setIsLoading] = useState(false);
Expand All @@ -91,6 +97,7 @@ export default function Boards({
const orderBy = selectedOption === '최신순' ? 'recent' : 'like';
try {
setIsLoading(true);
setIsError(false);
const res = await getBoards({
orderBy,
pageSize: PAGE_SIZE,
Expand All @@ -100,8 +107,10 @@ export default function Boards({
setBoards(res.list);
} catch {
setBoards([]);
setIsError(true);
} finally {
setIsLoading(false);
setIsError(false);
}
};

Expand Down Expand Up @@ -135,6 +144,21 @@ export default function Boards({

const pxTablet = 'ta:px-[60px]';

if (hasError || isError) {
return (
<div className="container flex min-h-screen items-center justify-center pb-5">
<ErrorMessage
title="데이터를 가져오는데 문제가 발생했습니다."
code="500"
>
서버에서 전송한 데이터를 가져오는데 문제가 발생했습니다.
<br />
다시 한 번 시도해주세요.
</ErrorMessage>
</div>
);
}

return (
<main className="pt-[80px] tamo:pt-[60px]">
<div className="flex flex-col gap-[60px] py-[60px] mo:gap-10 mo:py-10">
Expand Down
Loading