@@ -118,8 +120,14 @@ export default function BoardDetailCard({
{!isMobile ? (
<>
-
-
diff --git a/components/boards.page/CommentForm.tsx b/components/boards.page/CommentForm.tsx
index b1db812..bcbc84e 100644
--- a/components/boards.page/CommentForm.tsx
+++ b/components/boards.page/CommentForm.tsx
@@ -62,6 +62,7 @@ export default function CommentForm({
)}
diff --git a/context/SnackBarContext.tsx b/context/SnackBarContext.tsx
index 5e127e5..abdc611 100644
--- a/context/SnackBarContext.tsx
+++ b/context/SnackBarContext.tsx
@@ -4,6 +4,7 @@ import {
useState,
ReactNode,
useCallback,
+ useEffect,
} from 'react';
import SnackBar, { SnackBarProps } from '@/components/SnackBar';
@@ -20,7 +21,14 @@ const SnackbarContext = createContext(
);
export const SnackbarProvider = ({ children }: { children: ReactNode }) => {
- const [snackbarState, setSnackbarState] = useState<{
+ const [queue, setQueue] = useState<
+ {
+ message: string;
+ severity: SnackBarProps['severity'];
+ autoHideDuration?: number;
+ }[]
+ >([]);
+ const [currentSnackbar, setCurrentSnackbar] = useState<{
open: boolean;
message: string;
severity: SnackBarProps['severity'];
@@ -44,30 +52,41 @@ export const SnackbarProvider = ({ children }: { children: ReactNode }) => {
severity: SnackBarProps['severity'] = 'info',
autoHideDuration = 2000
) => {
- setSnackbarState({
- open: true,
- message,
- severity,
- autoHideDuration,
- });
+ setQueue((prev) => [...prev, { message, severity, autoHideDuration }]);
},
[]
);
- const handleClose = () => {
- setSnackbarState((prev) => ({ ...prev, open: false }));
- };
+ const handleClose = useCallback(() => {
+ setCurrentSnackbar((prev) => ({ ...prev, open: false }));
+ }, []);
+
+ useEffect(() => {
+ // 현재 스낵바가 닫히고 대기열에 항목이 남아 있다면 다음 스낵바를 표시
+ if (!currentSnackbar.open && queue.length > 0) {
+ const [nextSnackbar, ...remainingQueue] = queue;
+ setQueue(remainingQueue);
+ if (nextSnackbar) {
+ setCurrentSnackbar({
+ ...nextSnackbar,
+ message: nextSnackbar.message || '',
+ severity: nextSnackbar.severity || 'info',
+ open: true,
+ });
+ }
+ }
+ }, [queue, currentSnackbar.open]);
return (
{children}
- {snackbarState.message}
+ {currentSnackbar.message}
);
diff --git a/pages/boards/index.tsx b/pages/boards/index.tsx
index 86324e9..07672bb 100644
--- a/pages/boards/index.tsx
+++ b/pages/boards/index.tsx
@@ -18,7 +18,6 @@ import { useProfileContext } from '@/hooks/useProfileContext';
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(
@@ -85,7 +84,6 @@ export default function Boards({
const [isError, setIsError] = useState(false);
const { showSnackbar } = useSnackbar();
- const [isLoading, setIsLoading] = useState(false);
const isMobile = useCheckMobile();
const PAGE_SIZE = 10;
@@ -96,7 +94,6 @@ export default function Boards({
const fetchBoards = async () => {
const orderBy = selectedOption === '최신순' ? 'recent' : 'like';
try {
- setIsLoading(true);
setIsError(false);
const res = await getBoards({
orderBy,
@@ -109,7 +106,6 @@ export default function Boards({
setBoards([]);
setIsError(true);
} finally {
- setIsLoading(false);
setIsError(false);
}
};
@@ -166,7 +162,12 @@ export default function Boards({
className={`container flex items-center justify-between ${pxTablet}`}
>
베스트 게시글
- 게시물 등록하기
+
+ 게시물 등록하기
+
{/* 베스트 게시글 */}
@@ -195,32 +196,24 @@ export default function Boards({
{/* 게시글 목록 */}
{boards.length > 0 ? (
<>
- {isLoading ? (
-
-
-
- ) : (
- <>
-
-
- {/* 페이지네이션 */}
-
-
setCurrentPage(page)}
- />
-
- >
- )}
+
+
+ {/* 페이지네이션 */}
+
+
setCurrentPage(page)}
+ />
+
>
) : (