Feature/#278 qa 반영

components/Dropdown.tsx

@@ -37,7 +37,7 @@ export default function Dropdown({
   useOutsideClick(dropdownRef, () => setIsOpen(false));
 
   return (
-    <div className="relative" ref={dropdownRef}>
+    <div className="relative mo:w-full" ref={dropdownRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={`${dropdownSize} flex h-[45px] items-center justify-between text-nowrap rounded-xl bg-gray-100 px-5 py-3.5 text-14 leading-none text-gray-400 hover:border-green-200 focus:ring-1 focus:ring-green-200`}

components/boards.page/BoardDetailCard.tsx

@@ -154,7 +154,7 @@ export default function BoardDetailCard({
           width={500}
           height={300}
           priority
-          className="h-[300px]] mb-5 w-auto mo:mb-[15px] mo:h-[177px]"
+          className="mb-5 h-[300px] w-auto mo:mb-[15px] mo:h-[177px]"
           sizes="(max-width: 743px) 295px, 500px"
         />
         <EditorViewer content={content} />

components/boards.page/Comment.tsx

@@ -69,7 +69,7 @@ export default function Comment({
           alt="user profile"
           width={50}
           height={50}
-          className="object-cover"
+          className="size-full object-cover"
         />
       </div>
       <div className="flex-1">

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<SnackbarContextProps | undefined>(
 );
 
 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 (
     <SnackbarContext.Provider value={{ showSnackbar }}>
       {children}
       <SnackBar
-        open={snackbarState.open}
+        open={currentSnackbar.open}
         onClose={handleClose}
-        severity={snackbarState.severity}
-        autoHideDuration={snackbarState.autoHideDuration}
+        severity={currentSnackbar.severity}
+        autoHideDuration={currentSnackbar.autoHideDuration}
       >
-        {snackbarState.message}
+        {currentSnackbar.message}
       </SnackBar>
     </SnackbarContext.Provider>
   );

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);
       }
     };
@@ -195,32 +191,24 @@ export default function Boards({
             <Dropdown
               options={['최신순', '인기순']}
               onSelect={handleOptionSelect}
-              dropdownSize="w-[140px] ta:w-[120px] mo:w-[89.337vw]"
+              dropdownSize="w-[140px] ta:w-[120px] mo:w-full"
             />
           </div>
 
           {/* 게시글 목록 */}
           {boards.length > 0 ? (
             <>
-              {isLoading ? (
-                <div className="flex h-[540px] items-center justify-center">
-                  <Spinner />
-                </div>
-              ) : (
-                <>
-                  <BoardList data={boards} />
-
-                  {/* 페이지네이션 */}
-                  <div className="mt-[60px] mo:mt-8">
-                    <Pagination
-                      totalCount={totalCount}
-                      currentPage={currentPage}
-                      pageSize={PAGE_SIZE}
-                      onPageChange={(page) => setCurrentPage(page)}
-                    />
-                  </div>
-                </>
-              )}
+              <BoardList data={boards} />
+
+              {/* 페이지네이션 */}
+              <div className="mt-[60px] mo:mt-8">
+                <Pagination
+                  totalCount={totalCount}
+                  currentPage={currentPage}
+                  pageSize={PAGE_SIZE}
+                  onPageChange={(page) => setCurrentPage(page)}
+                />
+              </div>
             </>
           ) : (
             <EmptyList classNames="mt-[60px] mo:mt-10" text={emptyListText} />