알림기능ui수정/마이페이지 알림센터추가/커뮤니티 쪽이동수정

Author: Danto7632

src/App.js

@@ -17,6 +17,7 @@ import Settings from "./components/mypage/Settings";
 import Shared from "./components/mypage/Shared";
 import MyProject from "./components/mypage/MyProject";
 import MyCommunity from "./components/mypage/MyCommunity";
+import Notifications from "./components/mypage/Notifications";
 import ScrollToTop from "./components/common/ScrollToTop";
 import CommunityWrite from "./components/community/CommunityWrite";
 import PostDetail from "./components/community/PostDetail";
@@ -129,6 +130,7 @@ function AppContent() {
                     <Route path="community" element={<MyCommunity nickname={nickname} />} />
                     <Route path="setting" element={<Settings nickname={nickname} />} />
                     <Route path="shared" element={<Shared />} />
+                    <Route path="notifications" element={<Notifications />} />
                 </Route>
                 <Route path="*" element={<Navigate to="/" replace />} />
             </Routes>

src/components/community/Community.jsx

@@ -51,6 +51,7 @@ export default function Community() {
     const [searchOperator, setSearchOperator] = useState(DEFAULT_OPERATOR);
 
     const PAGE_SIZE = 10;
+    const PAGE_BUTTON_LIMIT = 5;
 
     useEffect(() => {
         let ignore = false;
@@ -332,9 +333,16 @@ export default function Community() {
         setLastKnownPage(currentPage);
     }, [currentPage, totalPages]);
 
-    const pageNumbers = useMemo(() => (
-        Array.from({ length: totalPages }, (_, index) => index + 1)
-    ), [totalPages]);
+    const pageNumbers = useMemo(() => {
+        if (totalPages <= 0) return [];
+        if (totalPages <= PAGE_BUTTON_LIMIT) {
+            return Array.from({ length: totalPages }, (_, index) => index + 1);
+        }
+        const chunkIndex = Math.floor((currentPage - 1) / PAGE_BUTTON_LIMIT);
+        const start = chunkIndex * PAGE_BUTTON_LIMIT + 1;
+        const end = Math.min(start + PAGE_BUTTON_LIMIT - 1, totalPages);
+        return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+    }, [currentPage, totalPages]);
 
     const paginatedPosts = useMemo(() => {
         const start = (currentPage - 1) * PAGE_SIZE;
@@ -421,21 +429,22 @@ export default function Community() {
             .slice(0, 5);
     }, [posts]);
 
-    const jumpBy = 5;
     const goToPage = (page) => {
         if (page < 1 || page > totalPages) return;
         setCurrentPage(page);
     };
 
-    const handleChunkMove = (direction) => {
-        const target = currentPage + direction * jumpBy;
-        if (target < 1) {
-            setCurrentPage(1);
-        } else if (target > totalPages) {
-            setCurrentPage(totalPages);
-        } else {
-            setCurrentPage(target);
-        }
+    const canGoPrev = currentPage > 1;
+    const canGoNext = currentPage < totalPages;
+
+    const handlePrevPage = () => {
+        if (!canGoPrev) return;
+        goToPage(currentPage - 1);
+    };
+
+    const handleNextPage = () => {
+        if (!canGoNext) return;
+        goToPage(currentPage + 1);
     };
 
     return (
@@ -649,17 +658,17 @@ export default function Community() {
                                     type="button"
                                     className="page-button"
                                     onClick={() => goToPage(1)}
-                                    disabled={currentPage === 1}
+                                    disabled={!canGoPrev}
                                 >
-                                    처음
+                                    &lt;&lt;
                                 </button>
                                 <button
                                     type="button"
                                     className="page-button"
-                                    onClick={() => handleChunkMove(-1)}
-                                    disabled={currentPage === 1}
+                                    onClick={handlePrevPage}
+                                    disabled={!canGoPrev}
                                 >
-                                    -5쪽
+                                    &lt;
                                 </button>
                                 {pageNumbers.map((page) => (
                                     <button
@@ -674,18 +683,18 @@ export default function Community() {
                                 <button
                                     type="button"
                                     className="page-button"
-                                    onClick={() => handleChunkMove(1)}
-                                    disabled={currentPage === totalPages}
+                                    onClick={handleNextPage}
+                                    disabled={!canGoNext}
                                 >
-                                    +5쪽
+                                    &gt;
                                 </button>
                                 <button
                                     type="button"
                                     className="page-button"
                                     onClick={() => goToPage(totalPages)}
-                                    disabled={currentPage === totalPages}
+                                    disabled={!canGoNext}
                                 >
-                                    마지막
+                                    &gt;&gt;
                                 </button>
                             </div>
                         </div>

src/components/header/Header.css

@@ -282,81 +282,85 @@
     margin-top: 8px;
     background-color: var(--surface-popover);
     border: 1px solid var(--border-subtle);
-    border-radius: 6px;
-    min-width: 250px;
-    max-height: 300px;
-    overflow-y: auto;
-    box-shadow: 0 14px 28px rgba(24, 20, 56, 0.14);
+    border-radius: 12px;
+    min-width: 320px;
+    box-shadow: 0 16px 32px rgba(24, 20, 56, 0.16);
     z-index: 100;
     display: flex;
     flex-direction: column;
-    transition: all 0.3s ease;
+    gap: 14px;
+    padding: 16px;
+    transition: transform 0.2s ease, opacity 0.2s ease;
     color: var(--text-primary);
 }
 
-.notification-dropdown.expanded-dropdown {
-    width: 600px;
-    max-height: 80vh;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    box-shadow: 0 24px 48px rgba(24, 20, 56, 0.18);
-    padding-top: 30px;
+.notification-dropdown__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
 }
 
-.close-btn {
-    position: absolute;
-    top: 5px;
-    right: 10px;
-    background: none;
-    border: none;
-    color: #888;
-    font-size: 1.5rem;
-    cursor: pointer;
-    z-index: 101;
-    padding: 0;
-    line-height: 1;
+.notification-dropdown__title {
+    font-weight: 700;
+    font-size: 15px;
 }
 
-.close-btn:hover {
-    color: #333;
+.notification-dropdown__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: rgba(139, 112, 255, 0.15);
+    color: var(--accent-primary);
+    font-size: 12px;
+    font-weight: 600;
 }
 
-.notification-item {
-    padding: 10px 15px;
-    border-bottom: 1px solid var(--border-subtle);
-    transition: background-color 0.2s;
-    font-size: 14px;
-    line-height: 1.4;
-    color: var(--text-primary);
+.notification-dropdown__list {
     display: flex;
-    align-items: center;
-    gap: 10px;
-    font-weight: bold;
+    flex-direction: column;
+    gap: 8px;
+    max-height: 360px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+    padding-right: 4px;
 }
 
-.notification-item:last-child {
-    border-bottom: none;
+.notification-item {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 14px;
+    border-radius: 10px;
+    border: 1px solid transparent;
+    background-color: transparent;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    color: var(--text-primary);
 }
 
 .notification-item:hover {
     background-color: var(--surface-hover);
+    border-color: var(--border-subtle);
 }
 
 .notification-item.unread {
-    color: var(--text-primary);
-    font-weight: bold;
+    border-color: rgba(139, 112, 255, 0.45);
+    background-color: rgba(139, 112, 255, 0.12);
 }
 
 .notification-item.read {
     color: var(--text-muted);
-    font-weight: normal;
 }
 
 .notification-message {
-    flex-grow: 1;
-    margin-right: 10px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
     background: none;
     border: none;
     text-align: left;
@@ -366,15 +370,45 @@
     padding: 0;
 }
 
+.notification-text {
+    font-size: 14px;
+    line-height: 1.4;
+    font-weight: 600;
+}
+
+.notification-item.read .notification-text {
+    font-weight: 500;
+    color: var(--text-muted);
+}
+
+.notification-meta {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+.notification-meta__dot {
+    font-size: 10px;
+    line-height: 1;
+}
+
+.notification-meta time {
+    color: inherit;
+}
+
 .notification-read-btn {
     background: none;
     border: 1px solid var(--border-subtle);
-    border-radius: 4px;
-    padding: 4px 8px;
+    border-radius: 8px;
+    padding: 6px 12px;
     font-size: 12px;
+    font-weight: 600;
     cursor: pointer;
     color: var(--text-muted);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+    align-self: flex-start;
 }
 
 .notification-read-btn:hover {
@@ -392,44 +426,39 @@
 }
 
 .no-notifications {
-    padding: 20px 15px;
+    padding: 28px 18px;
     text-align: center;
     color: var(--text-muted);
+    border: 1px dashed var(--border-subtle);
+    border-radius: 12px;
 }
 
 .notification-footer {
-    padding: 10px;
-    text-align: center;
+    padding: 12px;
     border-top: 1px solid var(--border-subtle);
 }
 
-.pagination {
-    display: flex;
+.notification-view-all {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
     justify-content: center;
-    padding: 10px 0;
-    border-top: 1px solid var(--border-subtle);
-}
-
-.pagination button {
-    background: none;
-    border: 1px solid var(--border-subtle);
-    padding: 5px 10px;
-    margin: 0 4px;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
-    color: var(--text-muted);
-}
-
-.pagination button.active {
-    background-color: var(--accent-secondary);
+    gap: 10px;
+    padding: 10px 16px;
+    border-radius: 8px;
+    border: none;
+    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
     color: #ffffff;
-    border-color: var(--accent-secondary);
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.18s ease, box-shadow 0.18s ease;
+    box-shadow: 0 12px 24px -16px rgba(139, 112, 255, 0.7);
 }
 
-.pagination button:hover:not(.active) {
-    background-color: var(--surface-hover);
-    color: var(--text-primary);
+.notification-view-all:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 18px 30px -18px rgba(139, 112, 255, 0.8);
 }
 
 .notification-item.unread {
@@ -441,10 +470,6 @@
     color: var(--accent-primary);
 }
 
-.dark-mode .pagination button:hover:not(.active) {
-    background-color: var(--surface-hover);
-    color: var(--text-primary);
-}
 .dark-mode .user-nickname {
     color: var(--accent-primary);
 }
@@ -453,4 +478,8 @@
 .dark-mode .user-nickname:hover {
     color: #ffffff;             /* hover 시 흰색 */
     text-decoration: underline; /* 밑줄 유지 */
+}
+
+.dark-mode .notification-view-all {
+    box-shadow: 0 18px 32px -18px rgba(24, 20, 56, 0.6);
 }