From 47c71acfbd0739b31ddfdcb0e89dfc561f6b6b5f Mon Sep 17 00:00:00 2001 From: cleooo5857 Date: Sun, 17 Sep 2023 17:39:00 +0900 Subject: [PATCH] =?UTF-8?q?Design:=EA=B3=B5=EC=A7=80=EC=82=AC=ED=95=AD=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=8D=BC=EB=B8=94=EB=A6=AC?= =?UTF-8?q?=EC=8B=B1(#13)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/1.ts | 1 - src/api/board.ts | 16 ++++ .../commons/ContentBodyWrapper/index.tsx | 15 ++++ .../commons/ContentBodyWrapper/style.ts | 7 ++ .../commons/ContentContainer/index.tsx | 7 ++ .../commons/ContentContainer/style.ts | 5 ++ src/components/unit/Board/index.tsx | 42 ++++------ src/components/unit/Board/style.ts | 78 +++++++++++++++---- src/hooks/@query/board/useGetBoardList.ts | 18 +++++ src/hooks/Board/useBoardFilter.ts | 40 ++++++++++ src/pages/Board/index.tsx | 12 ++- src/pages/Board/style.ts | 1 - src/types/api.ts | 37 +++++++++ 13 files changed, 235 insertions(+), 44 deletions(-) delete mode 100644 src/api/1.ts create mode 100644 src/api/board.ts create mode 100644 src/components/commons/ContentBodyWrapper/index.tsx create mode 100644 src/components/commons/ContentBodyWrapper/style.ts create mode 100644 src/components/commons/ContentContainer/index.tsx create mode 100644 src/components/commons/ContentContainer/style.ts create mode 100644 src/hooks/@query/board/useGetBoardList.ts create mode 100644 src/hooks/Board/useBoardFilter.ts delete mode 100644 src/pages/Board/style.ts diff --git a/src/api/1.ts b/src/api/1.ts deleted file mode 100644 index cb0ff5c3..00000000 --- a/src/api/1.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/src/api/board.ts b/src/api/board.ts new file mode 100644 index 00000000..274d3851 --- /dev/null +++ b/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 => { + const response = await instance.get( + `/api/notice?page=${page}&size=${size}&title=${title}&content=${content}&createdDate=${createdDate}`, + ); + return response.data; +}; diff --git a/src/components/commons/ContentBodyWrapper/index.tsx b/src/components/commons/ContentBodyWrapper/index.tsx new file mode 100644 index 00000000..f9d55c7c --- /dev/null +++ b/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) => { + return {children}; +}; + +export default ContentBodyWrapper; diff --git a/src/components/commons/ContentBodyWrapper/style.ts b/src/components/commons/ContentBodyWrapper/style.ts new file mode 100644 index 00000000..c81c31f2 --- /dev/null +++ b/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; +`; diff --git a/src/components/commons/ContentContainer/index.tsx b/src/components/commons/ContentContainer/index.tsx new file mode 100644 index 00000000..9c57846d --- /dev/null +++ b/src/components/commons/ContentContainer/index.tsx @@ -0,0 +1,7 @@ +import * as Styled from './style'; + +const ContentContainer = ({ children }: React.PropsWithChildren) => { + return {children}; +}; + +export default ContentContainer; diff --git a/src/components/commons/ContentContainer/style.ts b/src/components/commons/ContentContainer/style.ts new file mode 100644 index 00000000..937776c0 --- /dev/null +++ b/src/components/commons/ContentContainer/style.ts @@ -0,0 +1,5 @@ +import styled from 'styled-components'; + +export const Wrapper = styled.div` + padding: 8rem 0 12rem; +`; diff --git a/src/components/unit/Board/index.tsx b/src/components/unit/Board/index.tsx index 5ef7ded9..f6bd458a 100644 --- a/src/components/unit/Board/index.tsx +++ b/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 && ( - - -
test
- - - )} - -
- -

보드 게시판

-
- - + + + + + + 타이틀 + +

내용 미리보기

·2023-06-03 + + + + + + ); }; diff --git a/src/components/unit/Board/style.ts b/src/components/unit/Board/style.ts index c4cc10e8..beb2bf11 100644 --- a/src/components/unit/Board/style.ts +++ b/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; `; diff --git a/src/hooks/@query/board/useGetBoardList.ts b/src/hooks/@query/board/useGetBoardList.ts new file mode 100644 index 00000000..7982a984 --- /dev/null +++ b/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; diff --git a/src/hooks/Board/useBoardFilter.ts b/src/hooks/Board/useBoardFilter.ts new file mode 100644 index 00000000..0ab7cb7b --- /dev/null +++ b/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; diff --git a/src/pages/Board/index.tsx b/src/pages/Board/index.tsx index 7efa8645..72093a6c 100644 --- a/src/pages/Board/index.tsx +++ b/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 ( <> - + + + + + + ; ); }; diff --git a/src/pages/Board/style.ts b/src/pages/Board/style.ts deleted file mode 100644 index cb0ff5c3..00000000 --- a/src/pages/Board/style.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/src/types/api.ts b/src/types/api.ts index 2b26a75b..022cbe36 100644 --- a/src/types/api.ts +++ b/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 { // content: RequestContent[]; // }