#128 feat: 공지사항 페이지 생성

AJD-Archive · Jan 2, 2025 · 602e4f6 · 602e4f6
1 parent b050d50
commit 602e4f6
Show file tree

Hide file tree

Showing 6 changed files with 381 additions and 0 deletions.
diff --git a/src/App.tsx b/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} />

diff --git a/src/api/NoticeApi.tsx b/src/api/NoticeApi.tsx
@@ -0,0 +1,19 @@
+import { axiosInstance } from '../utils/apiConfig';
+
+interface NoticeListResDto {
+  id?: string;
+  version?: string;
+  title?: string;
+  content?: string;
+  createdAt?: string;
+}
+
+export const getNotice = async (): Promise<NoticeListResDto[] | null> => {
+  try {
+    const response = await axiosInstance.get(`/admin/notices`, {});
+    return response.data.data.noticeListResDto;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return null;
+  }
+};
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -78,6 +78,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>
   );
 };

diff --git a/src/pages/NoticePage/NoticePage.tsx b/src/pages/NoticePage/NoticePage.tsx
@@ -0,0 +1,167 @@
+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';
+import { useQuery } from '@tanstack/react-query';
+import { getNotice } from '../../api/NoticeApi';
+import { BlockNoteView } from '@blocknote/mantine';
+import { useCreateBlockNote } from '@blocknote/react';
+
+const NoticePage = () => {
+  const navigate = useNavigate();
+  const editor = useCreateBlockNote();
+
+  const { data } = useQuery({
+    queryKey: ['notices'],
+    queryFn: getNotice,
+  });
+
+  console.log(data);
+
+  const renderEditor = async (content: string) => {
+    const blocks = await editor.tryParseMarkdownToBlocks(content);
+    editor.replaceBlocks(editor.document, blocks);
+
+    return (
+      // <S.StyledEditorWrapper>
+      <BlockNoteView editor={editor} editable={false} theme="light" />
+      // </S.StyledEditorWrapper>
+    );
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>끄적끄적 | 공지사항</title>
+      </Helmet>
+      <S.MainDashBoardLayout>
+        <Navbar />
+        <S.MainDashBoardContainer>
+          <S.NoticeModal>
+            <S.Header>
+              {/* <img src={leftarrow} onClick={() => navigate(-1)} />  */}
+              <S.Title>공지사항</S.Title>
+            </S.Header>
+
+            <S.NoticeContainer>
+              {data?.map((item, index) => (
+                <details key={item.id || index}>
+                  <summary>
+                    <p className="version">{item.version}</p>
+                    <p className="title">{item.title}</p>
+                    <p className="date">{item.createdAt}</p>
+                  </summary>
+                  {item.content}
+                </details>
+              ))}
+              <details>
+                <summary>
+                  <p className="version">[v1.3.2]</p>
+                  <p className="title">제목</p>
+                  <p className="date">2024.12.12</p>
+                </summary>
+              </details>
+
+              <details>
+                <summary>
+                  <p className="version">[v1.3.2]</p>
+                  <p className="title">제목</p>
+                  <p className="date">2024.12.12</p>
+                </summary>
+                여기에 자세한 내용을 작성합니다.
+              </details>
+
+              <details>
+                <summary>
+                  <p className="version">[v1.3.2]</p>
+                  <p className="title">제목</p>
+                  <p className="date">2024.12.12</p>
+                </summary>
+                여기에 자세한 내용을 작성합니다.
+              </details>
+
+              <details>
+                <summary>
+                  <p className="version">[v1.3.2]</p>
+                  <p className="title">제목</p>
+                  <p className="date">2024.12.12</p>
+                </summary>
+                여기에 자세한 내용을 작성합니다.
+              </details>
+
+              <details>
+                <summary>
+                  <p className="version">[v1.3.2]</p>
+                  <p className="title">제목</p>
+                  <p className="date">2024.12.12</p>
+                </summary>
+                여기에 자세한 내용을 작성합니다. 여기에 자세한 내용을 작성합니다. 여기에 자세한
+                내용을 작성합니다. 여기에 자세한 내용을 작성합니다. 여기에 자세한 내용을 작성합니다.
+                여기에 자세한 내용을 작성합니다. 여기에 자세한 내용을 작성합니다. 여기에 자세한
+                내용을 작성합니다. 여기에 자세한 내용을 작성합니다. 여기에 자세한 내용을 작성합니다.
+                여기에 자세한 내용을 작성합니다. 여기에 자세한 내용을 작성합니다. 여기에 자세한
+                내용을 작성합니다. 여기에 자세한 내용을 작성합니다. 여기에 자세한 내용을 작성합니다.
+                여기에 자세한 내용을 작성합니다. 여기에 자세한 내용을 작성합니다. 여기에 자세한
+                내용을 작성합니다. 여기에 자세한 내용을 작성합니다. 여기에 자세한 내용을 작성합니다.
+                여기에 자세한 내용을 작성합니다. 여기에 자세한 내용을 작성합니다. 여기에 자세한
+                내용을 작성합니다. 여기에 자세한 내용을 작성합니다. 여기에 자세한 내용을 작성합니다.
+                여기에 자세한 내용을 작성합니다. 여기에 자세한 내용을 작성합니다. 여기에 자세한
+                내용을 작성합니다. 여기에 자세한 내용을 작성합니다. 여기에 자세한 내용을 작성합니다.
+              </details>
+
+              <details>
+                <summary>
+                  <p className="version">[v1.3.2]</p>
+                  <p className="title">제목</p>
+                  <p className="date">2024.12.12</p>
+                </summary>
+                여기에 자세한 내용을 작성합니다.
+              </details>
+
+              <details>
+                <summary>
+                  <p className="version">[v1.3.2]</p>
+                  <p className="title">제목</p>
+                  <p className="date">2024.12.12</p>
+                </summary>
+                여기에 자세한 내용을 작성합니다.
+              </details>
+
+              <details>
+                <summary>
+                  <p className="version">[v1.3.2]</p>
+                  <p className="title">제목</p>
+                  <p className="date">2024.12.12</p>
+                </summary>
+                여기에 자세한 내용을 작성합니다.
+              </details>
+
+              <details>
+                <summary>
+                  <p className="version">[v1.3.2]</p>
+                  <p className="title">제목</p>
+                  <p className="date">2024.12.12</p>
+                </summary>
+                여기에 자세한 내용을 작성합니다.
+              </details>
+            </S.NoticeContainer>
+
+            <S.ContactContainer>
+              <p>Copyright © KKEUJEOK. All rights reserved.</p>
+              <p>[email protected]</p>
+            </S.ContactContainer>
+          </S.NoticeModal>
+        </S.MainDashBoardContainer>
+      </S.MainDashBoardLayout>
+    </>
+  );
+};
+
+export default NoticePage;
diff --git a/src/pages/NoticePage/NoticePageStyled.tsx b/src/pages/NoticePage/NoticePageStyled.tsx
@@ -0,0 +1,138 @@
+import { styled } from 'styled-components';
+import theme from '../../styles/Theme/Theme';
+import rightArrowImg from '../../img/rightarrow.png';
+
+export const MainDashBoardLayout = styled.div`
+  width: 100vw;
+  min-width: 100vw;
+  height: 100vh;
+  display: flex;
+`;
+
+export const MainDashBoardContainer = styled.section`
+  width: 100%;
+  height: 100vh;
+  padding: 4.3125rem 2.5rem;
+  overflow: hidden;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  hr {
+    border: 1px solid #f4f4f4;
+  }
+`;
+
+export const NoticeModal = styled.div`
+  width: 50vw;
+  height: fit-content;
+  max-height: 80vh;
+  padding: 3.5rem 3rem;
+  /* padding-top: 40vh; */
+  border-radius: 1rem;
+  border: 1px solid ${theme.color.stroke2};
+  box-shadow: ${theme.boxShadow.default};
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  overflow: auto;
+`;
+
+export const Header = styled.div`
+  width: 100%;
+  padding-bottom: 13px;
+  border-bottom: 1px solid #f4f4f4;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  img {
+    width: 1.5rem;
+    cursor: pointer;
+  }
+`;
+
+export const Title = styled.p`
+  font-size: 1.5rem;
+  font-weight: ${theme.font.weight.bold};
+  margin-right: 13px;
+`;
+
+export const NoticeContainer = styled.div`
+  margin-top: 1rem;
+
+  width: 100%;
+
+  p {
+    display: inline-block;
+  }
+
+  .version {
+    font-weight: ${theme.font.weight.bold};
+    width: 10%;
+    margin-left: 0.3rem;
+  }
+
+  .title {
+    width: calc(100% - 10% - 15% - 6%);
+  }
+
+  .date {
+    width: 15%;
+    text-align: right;
+    color: ${theme.color.gray};
+  }
+
+  details {
+    /* margin-top: 1rem 0; */
+    margin: 1rem 0;
+  }
+
+  details:last-child {
+    margin-bottom: 1rem;
+  }
+
+  summary {
+    margin-bottom: 1rem;
+    cursor: pointer;
+    list-style: none; /* 기본 아이콘 제거 */
+  }
+
+  summary::-webkit-details-marker {
+    display: none; /* 크롬/사파리 등의 브라우저에서 기본 아이콘 숨기기 */
+  }
+
+  summary::before {
+    content: '';
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+    background-image: url(${rightArrowImg});
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: transform 0.3s ease;
+  }
+
+  details[open] summary::before {
+    transform: rotate(90deg); /* 열리면 아이콘 회전 */
+  }
+`;
+
+export const StyledEditorWrapper = styled.div``;
+
+export const ContactContainer = styled.div`
+  width: 100%;
+  border-top: 1px solid #f4f4f4;
+  padding-top: 0.5rem;
+
+  p {
+    color: ${theme.color.gray};
+    margin-top: 0.5rem;
+    font-size: 0.8rem;
+  }
+`;