Design:공지사항 페이지 퍼블리싱(#13)

src/api/board.ts

@@ -0,0 +1,16 @@
+import { instance } from 'api';
+import { ApiResponse } from 'types/api';
+
+// 게시판 리스트
+export const getToggleRequestList = async ({
+  page = 0,
+  size = 10,
+  title = '',
+  content = '',
+  createdDate = '',
+}): Promise<ApiResponse> => {
+  const response = await instance.get(
+    `/api/notice?page=${page}&size=${size}&title=${title}&content=${content}&createdDate=${createdDate}`,
+  );
+  return response.data;
+};

src/components/commons/ContentBodyWrapper/index.tsx

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import * as Styled from './style';
+
+interface ContentBodyWrapper {
+  blue?: boolean;
+}
+
+const ContentBodyWrapper = ({
+  children,
+  blue,
+}: PropsWithChildren<ContentBodyWrapper>) => {
+  return <Styled.Body>{children}</Styled.Body>;
+};
+
+export default ContentBodyWrapper;

src/components/commons/ContentBodyWrapper/style.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Body = styled.div`
+  padding: 3rem 5rem;
+  margin-top: 3rem;
+  border-radius: 1.2rem;
+`;

src/components/commons/ContentContainer/index.tsx

@@ -0,0 +1,7 @@
+import * as Styled from './style';
+
+const ContentContainer = ({ children }: React.PropsWithChildren) => {
+  return <Styled.Wrapper>{children}</Styled.Wrapper>;
+};
+
+export default ContentContainer;

src/components/commons/ContentContainer/style.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  padding: 8rem 0 12rem;
+`;

src/components/unit/Board/index.tsx

@@ -1,32 +1,22 @@
-import Container from 'components/commons/Container';
-import Modal from 'components/unit/Modal';
-import useModal from 'hooks/useModal';
-import SignModal from 'components/commons/Modal/SignModal';
-import ConfirmModal from 'components/commons/Modal/ConfirmModal';
+import { Link } from 'react-router-dom';
+import * as S from './style';
 
 const BoardList = () => {
-  const { modalIsOpen, toggleModal } = useModal();
-
-  const openModal = () => {
-    toggleModal();
-  };
-
   return (
-    <>
-      {modalIsOpen && (
-        <Modal toggleModal={toggleModal}>
-          <SignModal toggleModal={toggleModal}>
-            <div>test</div>
-          </SignModal>
-        </Modal>
-      )}
-      <Container>
-        <div>
-          <button onClick={openModal}>SignModal</button>
-          <p>보드 게시판</p>
-        </div>
-      </Container>
-    </>
+    <S.Container>
+      <Link to={`/notice/`}>
+        <S.Article>
+          <S.ContentgitWrapper>
+            <S.Content>
+              <S.Title>타이틀</S.Title>
+              <S.Detail>
+                <p>내용 미리보기</p>·<span>2023-06-03</span>
+              </S.Detail>
+            </S.Content>
+          </S.ContentgitWrapper>
+        </S.Article>
+      </Link>
+    </S.Container>
   );
 };
 

src/components/unit/Board/style.ts

@@ -1,20 +1,68 @@
-import { styled } from 'styled-components';
+import styled from 'styled-components';
+import { COLOR } from 'constants/Color';
+import { FONT } from 'constants/Font';
 
-export const Modal = styled.div`
+// export const Modal = styled.div`
+//   display: flex;
+//   justify-content: space-between;
+// `;
+
+// export const ModalTest = styled.div`
+//   position: fixed;
+//   top: 25vh;
+//   left: 25%;
+//   width: 50%;
+//   height: 30%;
+//   background-color: white;
+//   padding: 1rem;
+//   border-radius: 14px;
+//   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+//   z-index: 120;
+//   animation: slide-down 300ms ease-out forwards;
+// `;
+
+export const Container = styled.div`
+  &:hover {
+    background-color: ${COLOR.GRAY_50};
+  }
+`;
+
+export const Article = styled.article`
+  border-bottom: 0.1rem solid ${COLOR.GRAY_100};
+  padding: 2.5rem;
+`;
+
+export const ArticleHeader = styled.div`
   display: flex;
-  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Title = styled.p`
+  display: block;
+  ${FONT.BOLD_20};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const ContentWrapper = styled.ul`
+  margin-top: 1rem;
+  font-size: ${FONT.REGULAR_16};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const Content = styled.li`
+  padding: 22px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  width: 100%;
+  flex-basis: 100%;
+  box-sizing: border-box;
 `;
 
-export const ModalTest = styled.div`
-  position: fixed;
-  top: 25vh;
-  left: 25%;
-  width: 50%;
-  height: 30%;
-  background-color: white;
-  padding: 1rem;
-  border-radius: 14px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-  z-index: 120;
-  animation: slide-down 300ms ease-out forwards;
+export const Detail = styled.div`
+  font-size: ${FONT.REGULAR_14};
+  color: ${COLOR.GRAY_200};
+  margin-top: 1.2rem;
 `;

src/hooks/@query/board/useGetBoardList.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+import { getToggleRequestList } from 'api/board';
+
+interface GetRequestList {
+  page: number;
+  query?: string;
+}
+
+const useGetToggleRequestList = ({ page }: GetRequestList) => {
+  const { data: requestList } = useQuery(
+    ['boardList', { page }],
+    () => getToggleRequestList({ page }),
+    { keepPreviousData: true },
+  );
+  return requestList;
+};
+
+export default useGetToggleRequestList;

src/hooks/Board/useBoardFilter.ts

@@ -0,0 +1,40 @@
+// import { ROUTE } from 'constants/Route';
+
+// import { useCallback } from 'react';
+
+// interface BoardFilterType {
+//   boardFilter: BoardFilterStoreType;
+//   handlePage: (page: number) => void;
+//   handleToggle: () => void;
+//   isActive: string;
+// }
+
+// const useBoardFilter = (): BoardFilterType => {
+//   //현재 페이지 추적
+//   const boardFilter = useBoardFilterStore();
+//   const isActive = boardFilter.query === ROUTE.BOARD_MY_LIST ? 'active' : '';
+
+//   const handlePage = useCallback(
+//     (page: number) => {
+//       boardFilter.setPageNumber(page);
+//     },
+//     [boardFilter],
+//   );
+
+// //   const handleToggle = useCallback(() => {
+// //     boardFilter.reset();
+// //     boardFilter.setQuery(
+// //       boardFilter.query === ROUTE.BOARD_LIST
+// //         ? ROUTE.BOARD_MY_LIST
+// //         : ROUTE.BOARD_LIST,
+// //     );
+// //   }, [boardFilter]);
+//   return {
+//     boardFilter,
+//     handlePage,
+//     // handleToggle,
+//     isActive,
+//   };
+// };
+
+// export default useBoardFilter;

src/pages/Board/index.tsx

@@ -1,9 +1,19 @@
+import ContentBodyWrapper from 'components/commons/ContentBodyWrapper';
+import ContentContainer from 'components/commons/ContentContainer';
 import BoardList from 'components/unit/Board';
+import useGetToggleRequestList from 'hooks/@query/board/useGetBoardList';
 
 const Board = () => {
+  const requestList = useGetToggleRequestList({ page: 0 });
+
   return (
     <>
-      <BoardList />
+      <ContentContainer>
+        <ContentBodyWrapper>
+          <BoardList></BoardList>
+        </ContentBodyWrapper>
+      </ContentContainer>
+      ;
     </>
   );
 };

src/types/api.ts

@@ -18,6 +18,43 @@ export type RequestContent = {
   createAt: string;
   flag: boolean;
 };
+
+/* hsw 임시 타입 설정*/
+export interface ApiResponse {
+  totalPages: number;
+  totalElements: bigint;
+  size: number;
+  content: ContentItem[];
+  number: number;
+  sort: {
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
+  };
+  first: boolean;
+  last: boolean;
+  numberOfElements: number;
+  pageable: {
+    offset: bigint;
+    sort: {
+      empty: boolean;
+      sorted: boolean;
+      unsorted: boolean;
+    };
+    paged: boolean;
+    pageSize: number;
+    pageNumber: number;
+    unpaged: boolean;
+  };
+  empty: boolean;
+}
+
+interface ContentItem {
+  id: bigint;
+  title: string;
+  content: string;
+  createdDate: string;
+}
 // export interface ToggleRequestList extends Omit<ContestList, 'content'> {
 //   content: RequestContent[];
 // }