✨ Feat: 임시 공지사항 게시물 추가 (#346)

Co-authored-by: geumbin <[email protected]>

src/App.tsx

@@ -6,6 +6,7 @@ import { RecoilRoot } from 'recoil';
 import AcceptInvite from './components/inviteTeam/AcceptInvite';
 import RetroRevisePage from './pages/RevisePage';
 import RetroTeamPage from './pages/SectionPage';
+import { FakeNoticeShowPageFirst, FakeNoticeShowPageSecond } from './pages/notice/FakeNoticeShowPage';
 import MainLayout from '@/components/layout/MainLayout';
 import ProfileLayout from '@/components/layout/ProfileLayout';
 // import AcceptInvitePage from '@/pages/AccpetInvitePage';
@@ -163,6 +164,24 @@ const App = () => {
                 </PrivateRoute>
               }
             />
+
+            {/* 가짜 게시물 페이지 */}
+            <Route
+              path="/noticeShowFirst"
+              element={
+                <PrivateRoute>
+                  <FakeNoticeShowPageFirst />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/noticeShowSecond"
+              element={
+                <PrivateRoute>
+                  <FakeNoticeShowPageSecond />
+                </PrivateRoute>
+              }
+            />
             {/* 발급 될 초대 링크 */}
             <Route path="/invitations" Component={AcceptInvite} />
           </Routes>

src/components/notice/FakeNotice/FakeNoticeBoardContents.tsx

@@ -0,0 +1,42 @@
+import { useNavigate } from 'react-router-dom';
+import * as S from '@/styles/notice/noticeBoard.style';
+
+interface FakeNoticeBoardContentsProps {
+  index: number;
+  title: string;
+  date: string;
+  view: number;
+  move: string;
+}
+
+// 가짜 게시물(1)
+export const FakeNoticeBoardContents = ({ index, title, date, view, move }: FakeNoticeBoardContentsProps) => {
+  const navigate = useNavigate();
+
+  // 개별 게시글 페이지로 이동
+  const handleMoveNoticeShow = () => {
+    navigate(`/${move}`);
+  };
+  return (
+    <>
+      <S.NoticeBoardContentsStyle>
+        {/* 번호 */}
+        <p className="NoticeBoardContentsText">{index}</p>
+
+        {/* 제목 */}
+        <div style={{ textAlign: 'left' }} onClick={handleMoveNoticeShow}>
+          <p className="NoticeBoardContentsText" style={{ textAlign: 'left', cursor: 'pointer', margin: '10px 0px' }}>
+            {title}
+          </p>
+        </div>
+
+        {/* 작성일 */}
+        <p className="NoticeBoardContentsText">{date}</p>
+
+        {/* 조회수 */}
+        <p className="NoticeBoardContentsText">{view}</p>
+      </S.NoticeBoardContentsStyle>
+      <S.NoticeBoardContentsLine></S.NoticeBoardContentsLine>
+    </>
+  );
+};

src/components/notice/FakeNotice/FakeNoticeShowFooter.tsx

@@ -0,0 +1,60 @@
+import { IoIosArrowDown } from 'react-icons/io';
+import { IoIosArrowUp } from 'react-icons/io';
+import { useNavigate } from 'react-router-dom';
+import * as S from '@/styles/notice/noticeShow.style';
+
+interface NoticeShowFooterProps {
+  direction: string;
+}
+
+interface NoticeShowMoveProps {
+  direction: string;
+}
+
+export const FakeNoticeShowMove = ({ direction }: NoticeShowMoveProps) => {
+  const navigate = useNavigate();
+
+  const { move, icon, title } =
+    direction === 'First'
+      ? {
+          move: 'noticeShowSecond',
+          icon: <IoIosArrowDown size={29} color="#8A95B7" />,
+          title: '왜, 회고가 중요한가?',
+        }
+      : {
+          move: 'noticeShowFirst',
+          icon: <IoIosArrowUp size={29} color="#8A95B7" />,
+          title: '회고 어떻게 해야 잘할 수 있을까?',
+        };
+
+  const handleNoticeShowMove = () => {
+    navigate(`/${move}`);
+  };
+
+  return (
+    <>
+      <S.NoticeShowMoveStyle>
+        {/* 게시물 이동 화살표 */}
+        <S.NoticeMoveArrow onClick={handleNoticeShowMove}>{icon}</S.NoticeMoveArrow>
+
+        {/* 이동할 게시물의 제목 */}
+        <S.NoticeMoveTitle onClick={handleNoticeShowMove}>{title}</S.NoticeMoveTitle>
+      </S.NoticeShowMoveStyle>
+      <S.NoticeShowFooterLine></S.NoticeShowFooterLine>
+    </>
+  );
+};
+
+export const FakeNoticeShowFooter = ({ direction }: NoticeShowFooterProps) => {
+  return (
+    <>
+      <div style={{ marginTop: '50px' }}>
+        <S.NoticeShowFooterLine></S.NoticeShowFooterLine>
+        <S.NoticeShowFooterStyle>
+          {/* 글 이동 */}
+          <FakeNoticeShowMove direction={direction}></FakeNoticeShowMove>
+        </S.NoticeShowFooterStyle>
+      </div>
+    </>
+  );
+};

src/components/notice/FakeNotice/FakeNoticeShowHeader.tsx

@@ -0,0 +1,26 @@
+import * as S from '@/styles/notice/noticeShow.style';
+
+interface NoticeShowHeaderProps {
+  title: string;
+  date: string;
+  view: number;
+}
+
+export const FakeNoticeShowHeader = ({ title, date, view }: NoticeShowHeaderProps) => {
+  const NoticeWriter = '관리자';
+
+  return (
+    <>
+      <S.NoticeShowHeaderStyle>
+        <p style={{ fontSize: '40px', fontWeight: '800', color: '#25213B', margin: '20px' }}>공지사항</p>
+        {/* 게시물 제목 */}
+        <S.NoticeShowTitle>{title}</S.NoticeShowTitle>
+        {/* 게시물 정보 */}
+        <S.NoticeShowInformation>
+          <span>{`${NoticeWriter} | ${date} | 조회수  ${view}`}</span>
+        </S.NoticeShowInformation>
+      </S.NoticeShowHeaderStyle>
+      <S.NoticeShowHeaderLine></S.NoticeShowHeaderLine>
+    </>
+  );
+};

src/components/notice/FakeNotice/FakeNoticeShowMain.tsx

@@ -0,0 +1,68 @@
+import FakeNoticeImgFirst from '@/assets/FakeNoticeImgFirst.png';
+import FakeNoticeImgSecond from '@/assets/FakeNoticeImgSecond.png';
+import * as S from '@/styles/notice/noticeShow.style';
+
+export const FakeNoticeShowMainFirst = () => {
+  return (
+    <>
+      <S.NoticeShowMainStyle>
+        <div style={{ gridColumn: '2' }}>
+          {/* 게시물 텍스트 */}
+          <S.NoticeShowText>
+            <p style={{ fontSize: '20px', fontWeight: '600' }}>
+              # 순간을 있는 그대로 기록하는 방법 - 회고를 진행하는 사람의 회고에 대한 고찰
+            </p>
+            <img style={{ width: '70%', borderRadius: '5px', margin: '30px 0px' }} src={FakeNoticeImgFirst}></img>
+            프로젝트 단위의 업무가 종료되면 각 DRI 별로 회고를 하게 된다. 아니, 해야한다. <br />
+            DRI : 직접 책임자의 약자로, 어떤 과제와 관련해 문제가 생겼을 때 최종적으로 책임지는 사람 <br />
+            <br />
+            처음 프로젝트 단위로 일하고 나서 ‘회고’란 걸 하게 되었을 때 미팅 내내 땀만 줄줄 흘렸던 기억이 난다. 잘한
+            점은 한 두줄, 개선해야 할 점은 수두룩하게 리스팀 되었고, 기획자인 내가 모든 매를 두드려 맞는 기분이었다.{' '}
+            <br />
+            그래서일까? 가끔은 그 매를 맞기 싫어서 회고를 건너뛴 적도 있고, 스프린트가 쉴 새 없이 바쁘게 돌아갈 때는
+            회고가 사치처럼 느껴졌다. 이 역시도 지금 돌아보니 참 바보같이 비효율적으로 일했던 꼬꼬마 시절이였다. 회고
+            없이 성장하는 건 거의 불가능하기 때문이다. 피한다고 될 일이 아니었다. <br />
+            <br />
+            회고란 무엇인가? <br />
+            단순히 ‘돌아보는 게’ 회고가 아니다. 무엇을 잘했고 잘못했고 에서 끝나는게 아니다. ‘앞으로 더 잘 하기 위해서’
+            돌아보는 과정이다. 이후에 어떻게 더 잘 실행할 수 있을지 액션 플랜이 나오지 않는 회고는 시간낭비일 뿐이다.
+          </S.NoticeShowText>
+        </div>
+      </S.NoticeShowMainStyle>
+    </>
+  );
+};
+
+export const FakeNoticeShowMainSecond = () => {
+  return (
+    <>
+      <S.NoticeShowMainStyle>
+        <div style={{ gridColumn: '2' }}>
+          {/* 게시물 텍스트 */}
+          <S.NoticeShowText>
+            <p style={{ fontSize: '20px', fontWeight: '600' }}>회고의 필요성</p>
+            <br />
+            프로젝트 회고는 프로젝트 완료 후 팀이 경험을 되돌하보고, 향후 프로젝트의 효율성을 높이기 위해 중요한
+            과정입니다.
+            <br /> <br />
+            <br />
+            <p style={{ fontSize: '20px', fontWeight: '600' }}>학습과 성장의 기회 제공</p>
+            프로젝트 회고는 팀 구성원들이 프로젝트 동안 배운 점을 공유하고, 성과와 실수를 분석하는 과정을 통해 학습과
+            성장을 도모합니다. <br />
+            이를 통해 성공 사례를 반복하고, 실패로부터 교훈을 얻어 미래의 프로젝트에서 유사한 실수를 피할 수 있습니다.
+            <br /> <br />
+            <br />
+            <p style={{ fontSize: '20px', fontWeight: '600' }}>팀의 협력과 소통 강화</p>
+            회고 과정에서 팀원들은 서로의 의견을 듣고 문제 해결 방안을 모색하며, 협력과 소통을 강화합니다. 이는 팀 내
+            소통을 촉진하고, 협력 관계를 강화하여 팀의 결속력을 높이는 데 기여합니다.
+            <br /> <br />
+            <br />
+            결론적으로, 프로젝트 회고는 팀의 지속적인 성장과 발전을 위한 중요한 단계이며, 이를 통해 팀은 더 나은 성과를
+            달성하고 성공적인 프로젝트를 반복적으로 완수할 수 있게 됩니다.
+            <img style={{ width: '70%', borderRadius: '5px', margin: '30px 0px' }} src={FakeNoticeImgSecond}></img>
+          </S.NoticeShowText>
+        </div>
+      </S.NoticeShowMainStyle>
+    </>
+  );
+};

src/components/notice/NoticeBoard.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { NoticeBoardContents } from './NoticeBoardContents';
+// import { NoticeBoardContents } from './NoticeBoardContents';
+import { FakeNoticeBoardContents } from './FakeNotice/FakeNoticeBoardContents';
 import { NoticePagination } from './NoticePagination';
 import { GetNoticeListPosts } from '@/api/@types/NoticeBoard';
 import { UserData } from '@/api/@types/Users';
@@ -69,7 +70,7 @@ export const NoticeBoard = () => {
 
   const navigate = useNavigate();
   const [user, setUser] = useState<UserData>();
-  const publishedList = usePublishedNotice();
+  // const publishedList = usePublishedNotice();
   // const tempList = useTempNotice();
 
   // 유저 정보 조회
@@ -113,9 +114,25 @@ export const NoticeBoard = () => {
           <S.NoticeBoardContentsBox>
             <div style={{ height: 'auto', display: 'flex', flexDirection: 'column-reverse' }}>
               {/* 게시판 내용*/}
-              {publishedList.map((posts, index) => (
+              {/* {publishedList.map((posts, index) => (
                 <NoticeBoardContents posts={posts} key={posts.id} index={index}></NoticeBoardContents>
-              ))}
+              ))} */}
+
+              {/* 가짜 게시물 내용 */}
+              <FakeNoticeBoardContents
+                index={1}
+                title="회고 어떻게 해야 잘할 수 있을까?"
+                date="2024.03.09"
+                view={78}
+                move="noticeShowFirst"
+              ></FakeNoticeBoardContents>
+              <FakeNoticeBoardContents
+                index={2}
+                title="왜, 회고가 중요한가?"
+                date="2024.03.09"
+                view={78}
+                move="noticeShowSecond"
+              ></FakeNoticeBoardContents>
             </div>
           </S.NoticeBoardContentsBox>
         </S.NoticeBoardBox>

src/pages/notice/FakeNoticeShowPage.tsx

@@ -0,0 +1,42 @@
+import { FakeNoticeShowFooter } from '@/components/notice/FakeNotice/FakeNoticeShowFooter';
+import { FakeNoticeShowHeader } from '@/components/notice/FakeNotice/FakeNoticeShowHeader';
+import { FakeNoticeShowMainFirst, FakeNoticeShowMainSecond } from '@/components/notice/FakeNotice/FakeNoticeShowMain';
+import * as S from '@/styles/notice/noticeShow.style';
+
+export const FakeNoticeShowPageFirst = () => {
+  return (
+    <>
+      <S.NoticeShowContainer>
+        <div style={{ gridColumn: '2' }}>
+          {/* 게시물 헤더 */}
+          <FakeNoticeShowHeader title="회고 어떻게 해야 잘할 수 있을까?" date="2024.03.09" view={78} />
+
+          {/* 게시물 내용 */}
+          <FakeNoticeShowMainFirst />
+
+          {/* 다른 게시물로 이동 */}
+          <FakeNoticeShowFooter direction="First" />
+        </div>
+      </S.NoticeShowContainer>
+    </>
+  );
+};
+
+export const FakeNoticeShowPageSecond = () => {
+  return (
+    <>
+      <S.NoticeShowContainer>
+        <div style={{ gridColumn: '2' }}>
+          {/* 게시물 헤더 */}
+          <FakeNoticeShowHeader title="왜, 회고가 중요한가?" date="2024.03.09" view={78} />
+
+          {/* 게시물 내용 */}
+          <FakeNoticeShowMainSecond />
+
+          {/* 다른 게시물로 이동 */}
+          <FakeNoticeShowFooter direction="Second" />
+        </div>
+      </S.NoticeShowContainer>
+    </>
+  );
+};

src/styles/notice/noticeShow.style.ts

@@ -63,6 +63,7 @@ export const NoticeShowText = styled.div`
   width: 100%;
   height: auto;
   margin-top: 30px;
+  word-break: keep-all;
 `;
 
 export const NoticeShowImgContainer = styled.div`