Merge branch 'develop'

# Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.
donga-it-club · Jul 26, 2024 · 1e058c1 · 1e058c1
2 parents c414a27 + 47259a1
commit 1e058c1
Show file tree

Hide file tree

Showing 12 changed files with 392 additions and 137 deletions.
diff --git a/src/api/@types/NoticeBoard.ts b/src/api/@types/NoticeBoard.ts
@@ -20,10 +20,11 @@ export interface GetNoticeListPosts {
   id: number;
   title: string;
   content: string;
-  status: 'PUBLISHED';
+  status: 'PUBLISHED' | 'TEMP';
   createdDate: string;
   modifiedDate: string;
   views: number;
+  thumbnail: string;
 }
 
 // 개별 게시글 조회
@@ -44,13 +45,15 @@ export interface GetNoticePostsData {
   createdDate: string;
   modifiedDate: string;
   views: number;
+  thumbnail: string;
 }
 
 //post
 export interface PostNoticeRequest {
   title: string;
   content: string;
   status: 'PUBLISHED' | 'TEMP';
+  thumbnail: string;
 }
 
 export interface PostNoticeResponse {
@@ -66,11 +69,14 @@ export interface PostNoticeData {
   createdDate: string;
   modifiedDate: string;
   views: number;
+  thumbnail: string;
 }
 
 export interface PostNoticeTempPostsRequest {
   title: string;
   content: string;
+  status: 'PUBLISHED' | 'TEMP';
+  thumbnail: string;
 }
 
 export interface PostNoticeTempPostsResponse {
@@ -86,6 +92,7 @@ export interface PostNoticeTempPostsData {
   createdDate: string;
   modifiedDate: string;
   views: number;
+  thumbnail: string;
 }
 
 export interface PostNoticePresignedURLRequest {
@@ -110,6 +117,7 @@ export interface PutNoticeRequest {
   title: string;
   content: string;
   status: string;
+  thumbnail: string;
 }
 
 export interface PutNoticeResponse {
@@ -125,6 +133,7 @@ export interface PutNoticeData {
   createdDate: string;
   modifiedDate: string;
   views: number;
+  thumbnail: string;
 }
 
 // delete

diff --git a/src/components/createRetro/modal/TemplateSelect.tsx b/src/components/createRetro/modal/TemplateSelect.tsx
@@ -28,6 +28,7 @@ const TemplateSelect: React.FC<TemplateSelectProps> = ({ onChange, defaultTempla
   return (
     <>
       <div>Template</div>
+      <p style={{ fontSize: '10px', fontWeight: '400', color: '#898ea9' }}>템플릿 설정 안할 시, KPT(default)</p>
       <Select
         placeholder="Select option"
         onChange={e => onChange(Number(e.target.value))}

diff --git a/src/components/notice/NoticeBoard.tsx b/src/components/notice/NoticeBoard.tsx
@@ -1,6 +1,4 @@
 import { useEffect, useState } from 'react';
-// import getUser from '@/api/imageApi/getUser';
-// import { GetUsersResponse } from '@/api/@types/User';
 import { useNavigate } from 'react-router-dom';
 import { NoticeBoardContents } from './NoticeBoardContents';
 import { NoticePagination } from './NoticePagination';
@@ -11,12 +9,51 @@ import { UserServices } from '@/api/services/User';
 import { useCustomToast } from '@/hooks/useCustomToast';
 import * as S from '@/styles/notice/noticeBoard.style';
 
-export const NoticeBoard = () => {
+// 발행한 게시물 조회
+export const usePublishedNotice = () => {
+  const [PublishedNoticeList, setPublishedNoticeList] = useState<GetNoticeListPosts[]>([]);
   const toast = useCustomToast();
-  const navigate = useNavigate();
-  const [user, setUser] = useState<UserData>();
-  const [NoticeList, setNoticeList] = useState<GetNoticeListPosts[]>([]);
 
+  // 게시글 목록 조회 api
+  const fetchNotice = async () => {
+    try {
+      const data = await NoticeServices.listGet({ page: 1, size: 10 });
+      setPublishedNoticeList(data.data.posts.filter(post => post.status === 'PUBLISHED'));
+    } catch (error) {
+      toast.error(error);
+    }
+  };
+
+  useEffect(() => {
+    fetchNotice();
+  }, []);
+
+  return PublishedNoticeList;
+};
+
+// 임시저장한 게시물 조회
+export const useTempNotice = () => {
+  const [TempNoticeList, setTempNoticeList] = useState<GetNoticeListPosts[]>([]);
+  const toast = useCustomToast();
+
+  // 게시글 목록 조회 api
+  const fetchNotice = async () => {
+    try {
+      const data = await NoticeServices.listGet({ page: 1, size: 10 });
+      setTempNoticeList(data.data.posts.filter(post => post.status === 'TEMP'));
+    } catch (error) {
+      toast.error(error);
+    }
+  };
+
+  useEffect(() => {
+    fetchNotice();
+  }, []);
+
+  return TempNoticeList;
+};
+
+export const NoticeBoard = () => {
   // 관리자 권한 부여 api
   // import { UserServices } from '@/api/services/User';
   // const handleNoticeAdmin = async () => {
@@ -31,17 +68,13 @@ export const NoticeBoard = () => {
   //   }
   // };
 
+  const toast = useCustomToast();
+  const navigate = useNavigate();
+  const [user, setUser] = useState<UserData>();
+  const publishedList = usePublishedNotice();
+  // const tempList = useTempNotice();
+
   // 유저 정보 조회
-  // const fetchUserData = async () => {
-  //   try {
-  //     const response = await getUser();
-  //     console.log('유저 정보', response);
-  //     setUserData(response);
-  //   } catch (error) {
-  //     console.error('에러', error);
-  //     toast.error(error);
-  //   }
-  // };
   const fetchUser = async () => {
     try {
       const data = await UserServices.get();
@@ -52,21 +85,8 @@ export const NoticeBoard = () => {
     }
   };
 
-  // 게시글 목록 조회 api
-  // const [page, setPage] = useState<number>(1);
-  // const [size, setSize] = useState<number>(10);
-  const fetchNotice = async () => {
-    try {
-      const data = await NoticeServices.listGet({ page: 1, size: 10 });
-      setNoticeList(data.data.posts);
-    } catch (error) {
-      toast.error(error);
-    }
-  };
-
   useEffect(() => {
     fetchUser();
-    fetchNotice();
   }, []);
   if (!user) return;
 
@@ -95,18 +115,20 @@ export const NoticeBoard = () => {
 
           <S.NoticeBoardContentsBox>
             <div style={{ height: 'auto', display: 'flex', flexDirection: 'column-reverse' }}>
-              {/* 게시판 내용: NoticeList ExData.data.posts*/}
-              {NoticeList.map((posts, index) => (
-                <NoticeBoardContents posts={posts} key={posts.id} index={index + 1}></NoticeBoardContents>
+              {/* 게시판 내용*/}
+              {publishedList.map((posts, index) => (
+                <NoticeBoardContents posts={posts} key={posts.id} index={index}></NoticeBoardContents>
               ))}
             </div>
           </S.NoticeBoardContentsBox>
         </S.NoticeBoardBox>
 
         {/* 글쓰기 버튼 */}
-        <div style={{ textAlign: 'right' }}>
-          <S.NoticeWriteButton onClick={handleNoticeWriteButton}>글쓰기</S.NoticeWriteButton>
-        </div>
+        {user.administrator && (
+          <div style={{ textAlign: 'right' }}>
+            <S.NoticeWriteButton onClick={handleNoticeWriteButton}>글쓰기</S.NoticeWriteButton>
+          </div>
+        )}
 
         {/* 게시판 목록 리모컨 */}
         <NoticePagination></NoticePagination>

diff --git a/src/components/notice/NoticeBoardContents.tsx b/src/components/notice/NoticeBoardContents.tsx
@@ -24,17 +24,17 @@ export const NoticeBoardContents = ({ posts, index }: NoticeBoardContentsProps)
 
   // 개별 게시글 페이지로 이동
   const handleMoveNoticeShow = () => {
-    navigate(`/noticeShow?id=${posts.id}`);
+    navigate(`/noticeShow?id=${posts.id}&index=${index}`);
   };
   return (
     <>
       <S.NoticeBoardContentsStyle>
         {/* 번호 */}
-        <p className="NoticeBoardContentsText">{index}</p>
+        <p className="NoticeBoardContentsText">{index + 1}</p>
 
         {/* 제목 */}
         <div style={{ textAlign: 'left' }} onClick={handleMoveNoticeShow}>
-          <p className="NoticeBoardContentsText" style={{ textAlign: 'left', cursor: 'pointer' }}>
+          <p className="NoticeBoardContentsText" style={{ textAlign: 'left', cursor: 'pointer', margin: '10px 0px' }}>
             {posts.title}
           </p>
         </div>

diff --git a/src/components/notice/NoticeMenuBar.tsx b/src/components/notice/NoticeMenuBar.tsx
@@ -21,13 +21,29 @@ export const NoticeMenuBar = ({ title, content }: NoticeMenuBarProps) => {
   const query = search.split(/[=,&]/);
   const NoticeShowId = Number(query[1]);
 
+  // 임시 게시글 작성 api 연결
+  const handleNoticeWriteTemp = async () => {
+    try {
+      await NoticeServices.tempSave({
+        title: title,
+        content: content,
+        status: 'TEMP',
+        thumbnail: '',
+      });
+      toast.success('게시글이 임시저장 되었습니다.');
+    } catch (e) {
+      toast.error(e);
+    }
+  };
+
   // 게시글 작성 api 연결
   const handleNoticeWrite = async () => {
     try {
       await NoticeServices.create({
         title: title,
         content: content,
         status: 'PUBLISHED',
+        thumbnail: '',
       });
       toast.success('공지사항이 추가되었습니다.');
       navigate('/');
@@ -44,6 +60,7 @@ export const NoticeMenuBar = ({ title, content }: NoticeMenuBarProps) => {
         title: title,
         content: content,
         status: 'PUBLISHED',
+        thumbnail: '',
       });
       toast.success('공지사항이 수정되었습니다.');
       navigate(`/noticeShow?id=${NoticeShowId}`);
@@ -72,7 +89,9 @@ export const NoticeMenuBar = ({ title, content }: NoticeMenuBarProps) => {
           {isNaN(NoticeShowId) ? (
             <>
               {/* 게시물 임시저장 */}
-              <S.NoticeTempSaveButton>{`저장 | ${TemporarySaveCount}`}</S.NoticeTempSaveButton>
+              <S.NoticeTempSaveButton
+                onClick={handleNoticeWriteTemp}
+              >{`저장 | ${TemporarySaveCount}`}</S.NoticeTempSaveButton>
 
               {/* 게시물 저장 */}
               <S.NoticeSaveButton onClick={handleNoticeWrite}>저장</S.NoticeSaveButton>

diff --git a/src/components/notice/NoticePagination.tsx b/src/components/notice/NoticePagination.tsx
@@ -3,7 +3,7 @@ import { IoIosArrowForward } from 'react-icons/io';
 import * as S from '@/styles/notice/noticeBoard.style';
 
 export const NoticePagination = () => {
-  const NoticePageNumber = [1, 2, 3];
+  const NoticePageNumber = [1];
   return (
     <>
       <S.NoticePaginationContainer>

diff --git a/src/components/notice/NoticeShowFooter.tsx b/src/components/notice/NoticeShowFooter.tsx
@@ -1,44 +1,55 @@
 import { IoIosArrowDown } from 'react-icons/io';
 import { IoIosArrowUp } from 'react-icons/io';
 import { useNavigate } from 'react-router-dom';
+// import { GetNoticePostsData } from '@/api/@types/NoticeBoard';
+import { usePublishedNotice } from './NoticeBoard';
+import { GetNoticeListPosts } from '@/api/@types/NoticeBoard';
 import * as S from '@/styles/notice/noticeShow.style';
 
 interface NoticeShowFooterProps {
   id: number;
 }
 
-export const NoticeShowFooter = ({ id }: NoticeShowFooterProps) => {
-  return (
-    <>
-      <S.NoticeShowFooterLine></S.NoticeShowFooterLine>
-      <S.NoticeShowFooterStyle>
-        {/* 이전 글 */}
-        <NoticeShowMove direction="up" id={id}></NoticeShowMove>
-        {/* 다음 글 */}
-        <NoticeShowMove direction="down" id={id}></NoticeShowMove>
-      </S.NoticeShowFooterStyle>
-    </>
-  );
-};
-
 interface NoticeShowMoveProps {
   direction: 'up' | 'down';
   id: number;
+  notice: GetNoticeListPosts[];
 }
 
-export const NoticeShowMove = ({ direction, id }: NoticeShowMoveProps) => {
+export const NoticeShowMove = ({ direction, id, notice }: NoticeShowMoveProps) => {
   const navigate = useNavigate();
+  const index = notice.findIndex(post => post.id === id);
 
-  const { icon, title } =
+  const { move, icon, title } =
     direction === 'up'
-      ? { icon: <IoIosArrowUp size={29} color="#8A95B7" />, title: '이전 글' }
-      : { icon: <IoIosArrowDown size={29} color="#8A95B7" />, title: '다음 글' };
+      ? {
+          move: index - 1,
+          icon: <IoIosArrowUp size={29} color="#8A95B7" />,
+          title: index > 0 ? notice[index - 1]?.title ?? 'No more posts' : 'No more posts',
+        }
+      : {
+          move: index + 1,
+          icon: <IoIosArrowDown size={29} color="#8A95B7" />,
+          title: index < notice.length - 1 ? notice[index + 1]?.title ?? 'No more posts' : 'No more posts',
+        };
 
-  // 게시물로 이동하기
-  const noticeMove = direction === 'up' ? id - 1 : id + 1;
   const handleNoticeShowMove = () => {
-    navigate(`/noticeShow?id=${noticeMove}`);
+    if (move >= 0 && move < notice.length) {
+      navigate(`/noticeShow?id=${notice[move].id}&index=${move}`);
+    }
   };
+
+  // 게시물로 이동하기
+  // const noticeMove = direction === 'up' ? 1 : 1;
+  // const handleNoticeShowMove = () => {
+  //   navigate(`/noticeShow?id=${notice[move].id}&index=${move}`);
+  //   console.log(id);
+  //   console.log(index);
+  //   console.log(notice);
+  //   console.log(move);
+  //   console.log(notice[move].id);
+  //   console.log(notice[move].title);
+  // };
   return (
     <>
       <S.NoticeShowMoveStyle>
@@ -52,3 +63,19 @@ export const NoticeShowMove = ({ direction, id }: NoticeShowMoveProps) => {
     </>
   );
 };
+
+export const NoticeShowFooter = ({ id }: NoticeShowFooterProps) => {
+  const publishedList = usePublishedNotice();
+
+  return (
+    <>
+      <S.NoticeShowFooterLine></S.NoticeShowFooterLine>
+      <S.NoticeShowFooterStyle>
+        {/* 이전 글 */}
+        <NoticeShowMove direction="up" id={id} notice={publishedList}></NoticeShowMove>
+        {/* 다음 글 */}
+        <NoticeShowMove direction="down" id={id} notice={publishedList}></NoticeShowMove>
+      </S.NoticeShowFooterStyle>
+    </>
+  );
+};