공지사항 페이지

src/App.tsx

@@ -36,6 +36,7 @@ import FriendsPage from './pages/FriendsPage/FriendsPage';
 import FriendsSearchPage from './pages/FriendsSearchPage/FriendsSearchPage';
 import RecommendedFriendsPage from './pages/RecommendedFriendsPage/RecommendedFriendsPage';
 import FriendPage from './pages/FriendPage';
+import NoticePage from './pages/NoticePage/NoticePage';
 
 const queryClient = new QueryClient();
 
@@ -298,6 +299,15 @@ const App = () => {
               </ProtectedRoute>
             }
           />
+
+          <Route
+            path="/notice"
+            element={
+              <ProtectedRoute>
+                <NoticePage />
+              </ProtectedRoute>
+            }
+          />
         </Routes>
       </AuthProvider>
       <ReactQueryDevtools initialIsOpen={false} />

src/components/Navbar.tsx

@@ -67,6 +67,35 @@ const Navbar = () => {
         <Dashboard text="개인" dashboard={dashboard?.data.personalDashboardListResDto} />
         <Dashboard text="팀" dashboard={teamDashboard?.data.teamDashboardInfoResDto} />
       </S.DashboardsContainer>
+
+      <S.NoticeContainer>
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18 8C18.7956 8 19.5587 8.31607 20.1213 8.87868C20.6839 9.44129 21 10.2044 21 11C21 11.7956 20.6839 12.5587 20.1213 13.1213C19.5587 13.6839 18.7956 14 18 14M10 8V19C10 19.2652 9.89464 19.5196 9.70711 19.7071C9.51957 19.8946 9.26522 20 9 20H8C7.73478 20 7.48043 19.8946 7.29289 19.7071C7.10536 19.5196 7 19.2652 7 19V14"
+            stroke="#D1D1D1"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M12 7.99995L16.524 4.22995C16.6555 4.12046 16.8154 4.0507 16.9851 4.02885C17.1548 4.00701 17.3271 4.03398 17.482 4.1066C17.6369 4.17922 17.7679 4.29449 17.8597 4.4389C17.9514 4.5833 18.0001 4.75087 18 4.92195V17.0779C18.0001 17.249 17.9514 17.4166 17.8597 17.561C17.7679 17.7054 17.6369 17.8207 17.482 17.8933C17.3271 17.9659 17.1548 17.9929 16.9851 17.971C16.8154 17.9492 16.6555 17.8794 16.524 17.7699L12 13.9999H4C3.73478 13.9999 3.48043 13.8946 3.29289 13.7071C3.10536 13.5195 3 13.2652 3 12.9999V8.99995C3 8.73473 3.10536 8.48038 3.29289 8.29284C3.48043 8.1053 3.73478 7.99995 4 7.99995H12Z"
+            stroke="#D1D1D1"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+
+        <Link to="/notice">
+          <p>공지사항</p>
+        </Link>
+      </S.NoticeContainer>
     </S.NavBarLayout>
   );
 };

src/pages/NoticePage/NoticePage.tsx

@@ -0,0 +1,27 @@
+import { Helmet } from 'react-helmet-async';
+import Flex from '../../components/Flex';
+import Navbar from '../../components/Navbar';
+import * as S from './NoticePageStyled';
+import leftarrow from '../../img/leftarrow.png';
+import Friend from '../../components/Friend/Friend';
+import Pagination from '../../components/CustomPagination';
+import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import { useSearchFriendsList } from '../../hooks/useFollowersList';
+import { useDebounce } from '../../hooks/useDebounce';
+
+const NoticePage = () => {
+  return (
+    <>
+      <Helmet>
+        <title>끄적끄적 | 공지사항</title>
+      </Helmet>
+      <S.MainDashBoardLayout>
+        <Navbar />
+        <S.MainDashBoardContainer></S.MainDashBoardContainer>
+      </S.MainDashBoardLayout>
+    </>
+  );
+};
+
+export default NoticePage;

src/pages/NoticePage/NoticePageStyled.tsx

@@ -0,0 +1,18 @@
+import { styled } from 'styled-components';
+import theme from '../../styles/Theme/Theme';
+
+export const MainDashBoardLayout = styled.div`
+  width: 100vw;
+  min-width: 100vw;
+  height: 100vh;
+  display: flex;
+`;
+
+export const MainDashBoardContainer = styled.section`
+  width: 100%;
+  padding: 4.3125rem 2.5rem;
+  overflow: hidden;
+  hr {
+    border: 1px solid #f4f4f4;
+  }
+`;

src/styles/NavBarStyled.tsx

@@ -9,7 +9,7 @@ export const NavBarLayout = styled.nav`
   display: flex;
   flex-direction: column;
   background: ${theme.color.navbar};
-  padding: 2.5625rem 1.625rem;
+  padding: 2.4rem 1.625rem 1.5rem;
   z-index: 10;
 `;
 
@@ -50,6 +50,21 @@ export const DashboardsContainer = styled.div`
   overflow-y: auto;
 `;
 
+export const NoticeContainer = styled.div`
+  padding-top: 1rem;
+
+  display: flex;
+  align-items: center;
+
+  cursor: pointer;
+
+  p {
+    margin-left: 0.3rem;
+    font-size: ${theme.font.size.caption};
+    color: ${theme.color.gray};
+  }
+`;
+
 export const NavButton = styled.button<{ variant: 'primary' | 'secondary' }>`
   width: 9.3rem;
   padding: 0.75rem 1rem;