codeitFE11-part3-team7 · junghwaYang · Dec 30, 2024 · Dec 28, 2024 · Dec 28, 2024 · Dec 28, 2024
diff --git a/components/Dropdown.tsx b/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`}

diff --git a/components/boards.page/BoardDetailCard.tsx b/components/boards.page/BoardDetailCard.tsx
@@ -107,6 +107,8 @@ export default function BoardDetailCard({
     }
   };
 
+  const buttonStyled = 'px-[45.5px] py-[10.5px] ta:px-[35.5px]';
+
   return (
     <div className="rounded-custom bg-background px-[30px] py-10 shadow-custom dark:shadow-custom-dark mo:p-5 mo:pb-[14px]">
       <header className="mb-[38px] mo:mb-[15px] mo:pb-[11px] ta:mb-[30px] ta:pb-2 tamo:border-b">
@@ -118,8 +120,14 @@ export default function BoardDetailCard({
             <div className="flex items-center gap-[14px] tamo:gap-3">
               {!isMobile ? (
                 <>
-                  <Button onClick={handleUpdateClick}>수정하기</Button>
-                  <Button onClick={handleDeleteClick} variant="danger">
+                  <Button onClick={handleUpdateClick} className={buttonStyled}>
+                    수정하기
+                  </Button>
+                  <Button
+                    onClick={handleDeleteClick}
+                    variant="danger"
+                    className={buttonStyled}
+                  >
                     삭제하기
                   </Button>
                 </>
@@ -154,7 +162,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} />

diff --git a/components/boards.page/Comment.tsx b/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">

diff --git a/components/boards.page/CommentForm.tsx b/components/boards.page/CommentForm.tsx
@@ -62,6 +62,7 @@ export default function CommentForm({
         )}
         <Button
           type="submit"
+          className={!update ? 'px-[34px] py-[10.5px]' : ''}
           disabled={value.length === 0}
           size={isMobile && update ? 'small' : 'normal'}
         >

diff --git 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<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>
   );

diff --git 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}`}
         >
           <h1 className="text-32sb mo:text-24sb">베스트 게시글</h1>
-          <Button onClick={handleCreateClick}>게시물 등록하기</Button>
+          <Button
+            onClick={handleCreateClick}
+            className="px-[35.5px] py-[10.5px] mo:px-[20.5px]"
+          >
+            게시물 등록하기
+          </Button>
         </header>
 
         {/* 베스트 게시글 */}
@@ -195,32 +196,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} />