From 6d1981c0293592f67585bcb9819af0fa546fd427 Mon Sep 17 00:00:00 2001 From: teawon Date: Mon, 16 Oct 2023 02:33:41 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20ag-grid=20=EC=84=A4=EC=B9=98=20,=20L?= =?UTF-8?q?istModal,=20PostModal=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Mindspace_front_next/app/api/post.ts | 4 +- Mindspace_front_next/app/constants/types.ts | 4 +- .../app/hooks/queries/board.ts | 12 +- .../ListModal/ListModal.module.scss | 117 ++++++++++++++ .../app/map/components/ListModal/index.tsx | 152 ++++++++++++++++++ .../app/map/components/Modal/index.tsx | 6 +- .../app/map/components/PostTable/index.tsx | 68 ++++++++ .../app/map/components/WriteModal/index.tsx | 12 -- Mindspace_front_next/app/map/map.tsx | 2 +- Mindspace_front_next/package.json | 1 + Mindspace_front_next/yarn.lock | 5 + 11 files changed, 359 insertions(+), 24 deletions(-) create mode 100644 Mindspace_front_next/app/map/components/ListModal/ListModal.module.scss create mode 100644 Mindspace_front_next/app/map/components/ListModal/index.tsx create mode 100644 Mindspace_front_next/app/map/components/PostTable/index.tsx diff --git a/Mindspace_front_next/app/api/post.ts b/Mindspace_front_next/app/api/post.ts index 04f5024..9223146 100644 --- a/Mindspace_front_next/app/api/post.ts +++ b/Mindspace_front_next/app/api/post.ts @@ -50,7 +50,7 @@ export const updatePost = async ({ id, title, content }: PostParams) => { }); }; -export const getPostListData = async (id: number) => { +export const getPostListData = async (id?: number) => { const endpoint = `boards/all?node_id=${id}`; const data = await csrFetch(endpoint, { @@ -60,7 +60,7 @@ export const getPostListData = async (id: number) => { return data; }; -export const getPostData = async (id: number) => { +export const getPostData = async (id?: number) => { if (id !== null) { const endpoint = `boards/${id}`; diff --git a/Mindspace_front_next/app/constants/types.ts b/Mindspace_front_next/app/constants/types.ts index 299f45a..22fe6fb 100644 --- a/Mindspace_front_next/app/constants/types.ts +++ b/Mindspace_front_next/app/constants/types.ts @@ -66,7 +66,7 @@ export type Context = CanvasRenderingContext2D; export interface ModalProps { isOpen: boolean; onRequestClose: () => void; - updateNodeInfo: (id: number | string, isWritten: boolean) => void; + updateNodeInfo: (id: number | undefined, isWritten: boolean) => void; } // CustomModal @@ -84,7 +84,7 @@ export interface CustomModalProps { export interface WriteModalProps { isOpen: boolean; onRequestClose: () => void; - updateNodeInfo: (id: number | string, isWritten: boolean) => void; + updateNodeInfo: (id: number | undefined, isWritten: boolean) => void; } export interface BoardResponseDto { diff --git a/Mindspace_front_next/app/hooks/queries/board.ts b/Mindspace_front_next/app/hooks/queries/board.ts index 43d8a90..a9a6e46 100644 --- a/Mindspace_front_next/app/hooks/queries/board.ts +++ b/Mindspace_front_next/app/hooks/queries/board.ts @@ -62,10 +62,14 @@ export const useUpdatePostMutation = (successAction: () => void) => { }); }; -export const usePostListGetQuery = (id: number) => { - return useQuery(["postList", id], () => getPostListData(id)); +export const usePostListGetQuery = (id?: number) => { + return useQuery(["postList", id], () => getPostListData(id), { + enabled: id !== null, + }); }; -export const usePostGetQuery = (id: number) => { - return useQuery(["postData", id], () => getPostData(id)); +export const usePostGetQuery = (id?: number) => { + return useQuery(["postData", id], () => getPostData(id), { + enabled: id !== null, + }); }; diff --git a/Mindspace_front_next/app/map/components/ListModal/ListModal.module.scss b/Mindspace_front_next/app/map/components/ListModal/ListModal.module.scss new file mode 100644 index 0000000..603defe --- /dev/null +++ b/Mindspace_front_next/app/map/components/ListModal/ListModal.module.scss @@ -0,0 +1,117 @@ +.header { + &__button { + border: none; + background-color: transparent; + margin-left: 0.1rem; + cursor: pointer; + } + + &__span { + color: white; + font-size: 2rem; + } +} + +.post { + &__button { + font-size: 1.5rem; + color: white; + } + + &__wrapper { + display: flex; + width: 100%; + height: 90%; + + &__content { + padding: 2.5rem 2rem 0 2rem; + display: flex; + flex: 2; + background-color: white; + border-radius: 10px; + + &__wrapper { + display: flex; + flex-direction: column; + width: 100%; + + &__header { + display: flex; + flex-direction: row; + + &__text { + display: flex; + flex-direction: column; + margin: 1rem; + + &__title { + font-size: 1.7rem; + } + } + } + + &__info { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0 0 0 auto; + padding-right: 1rem; + height: 1rem; + width: 8rem; + + &__box { + margin: 0 0 0.5rem 0; + align-self: flex-end; + + &__button { + padding: 5px 10px; + font-size: 15px; + border: none; + border-radius: 4px; + background-color: navy; + color: white; + cursor: pointer; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.2s ease; + + &:hover { + transform: translateY(-2px); + } + + &:active { + transform: translateY(1px); + } + } + } + + &__date { + margin-right: 0; + align-self: flex-end; + } + + &__name { + margin-right: 0; + align-self: flex-end; + } + } + + &__content { + &__span { + font-size: 1rem; + margin: 1rem; + } + } + } + } + + &__viewer { + overflow-y: auto; + position: relative; + border-top: 1px #ebedf2 solid; + padding: 5px 0 0 10px; + background: white; + margin: 0.5rem; + } + } +} \ No newline at end of file diff --git a/Mindspace_front_next/app/map/components/ListModal/index.tsx b/Mindspace_front_next/app/map/components/ListModal/index.tsx new file mode 100644 index 0000000..05c0aa9 --- /dev/null +++ b/Mindspace_front_next/app/map/components/ListModal/index.tsx @@ -0,0 +1,152 @@ +import { useState, useEffect, useRef } from "react"; +import PostTable from "../PostTable"; +import styles from "./ListModal.module.scss"; +import { ListModalProps } from "@/constants/types"; +import { Viewer } from "@toast-ui/react-editor"; +import CustomModal from "@/components/CustomModal"; +import { usePostGetQuery } from "@/hooks/queries/board"; + +import { formatDateTime, DateTimeFormat } from "@/utils/dateTime"; +// import CommentModal from "@/pages/NodeMap/components/CommentModal"; + +function ListModal({ listModalOpen, onListRequestClose }: ListModalProps) { + const [isSelectedTable, setIsSelectedTable] = useState(); + const viewerRef = useRef(null); + const { data: postData, isLoading } = usePostGetQuery(isSelectedTable); + // const [commentModalOpen, setCommentModalOpen] = useState(false); + // const commentData = [ + // { + // id: 1, + // nickname: "작성자1", + // content: "댓글 내용1", + // date: "5분전", + // }, + // { + // id: 2, + // nickname: "작성자2", + // content: "댓글 내용2", + // date: "10분전", + // }, + // ]; + // const toggleCommentModal = () => { + // setCommentModalOpen((prev) => !prev); + // }; + + const handleSelectBoard = (id: number) => { + setIsSelectedTable(id); + // setCommentModalOpen(false); + }; + + useEffect(() => { + if (viewerRef.current) { + viewerRef.current.getInstance().setMarkdown(postData?.content); + } + }, [postData?.content]); + + return ( + + {!isSelectedTable ? ( + <> + + + + ) : ( + !isLoading && ( + <> + +
+
+
+
+
+ + {postData?.title} + +
+
+
+ +
+ + {postData.userNickname} + + + {formatDateTime( + postData.updatedAt, + DateTimeFormat.Date, + )} + +
+
+
+ +
+
+
+ {/* */} +
+ + ) + )} + + ); +} + +export default ListModal; diff --git a/Mindspace_front_next/app/map/components/Modal/index.tsx b/Mindspace_front_next/app/map/components/Modal/index.tsx index a31dbd5..5085fbc 100644 --- a/Mindspace_front_next/app/map/components/Modal/index.tsx +++ b/Mindspace_front_next/app/map/components/Modal/index.tsx @@ -3,7 +3,7 @@ import styles from "./Modal.module.scss"; import CustomModal from "@/components/CustomModal"; import WriteModal from "../WriteModal"; import { ModalProps } from "@/constants/types"; -//import ListModal from '../ListModal'; +import ListModal from "../ListModal"; import { useRecoilValue } from "recoil"; import { nodeAtom } from "@/recoil/state/nodeAtom"; @@ -55,10 +55,10 @@ function NodeModal({ isOpen, onRequestClose, updateNodeInfo }: ModalProps) { onRequestClose={() => setWriteModalIsOpen(false)} /> {/* 글 목록 리스트 모달 */} - {/* setListModalIsOpen(false)} - /> */} + /> ); } diff --git a/Mindspace_front_next/app/map/components/PostTable/index.tsx b/Mindspace_front_next/app/map/components/PostTable/index.tsx new file mode 100644 index 0000000..69c0263 --- /dev/null +++ b/Mindspace_front_next/app/map/components/PostTable/index.tsx @@ -0,0 +1,68 @@ +import "ag-grid-community/styles/ag-grid.css"; +import "ag-grid-community/styles/ag-theme-alpine.css"; +import { AgGridReact } from "ag-grid-react"; +import { CellClickedEvent } from "ag-grid-community"; +import { useState } from "react"; +import { useRecoilValue } from "recoil"; +import { ModalWidthAtom, ModalHeightAtom } from "@/recoil/state/resizeAtom"; +import { nodeAtom } from "@/recoil/state/nodeAtom"; +import { usePostListGetQuery } from "@/hooks/queries/board"; + +import { formatDateTime, DateTimeFormat } from "@/utils/dateTime"; +import { BoardResponseDto } from "@/constants/types"; +interface PostTableProps { + onClickedId: (id: number) => void; +} + +function PostTable({ onClickedId }: PostTableProps) { + const selectedNodeInfo = useRecoilValue(nodeAtom); + + const { data: postListData } = usePostListGetQuery(selectedNodeInfo.id); + + const formatPostListData = (dataList: BoardResponseDto[]) => { + return dataList?.map((data: BoardResponseDto) => ({ + ...data, + updatedAt: formatDateTime(data.updatedAt, DateTimeFormat.Date), + })); + }; + + const [columnDefs] = useState([ + { field: "title" }, + { field: "userNickname" }, + { field: "updatedAt" }, + ]); + + const onRowDataClicked = (params: CellClickedEvent) => { + onClickedId(params.data.id); + }; + + const modalWidth = useRecoilValue(ModalWidthAtom); + const modalHeight = useRecoilValue(ModalHeightAtom); + + return ( +
+ +
+ ); +} + +export default PostTable; diff --git a/Mindspace_front_next/app/map/components/WriteModal/index.tsx b/Mindspace_front_next/app/map/components/WriteModal/index.tsx index 2470776..19635d6 100644 --- a/Mindspace_front_next/app/map/components/WriteModal/index.tsx +++ b/Mindspace_front_next/app/map/components/WriteModal/index.tsx @@ -40,25 +40,13 @@ const WriteModal = ({ const { data: postData, isLoading, - isError, - error, isInitialLoading, - isSuccess, } = useUserPostGetQuery( nodeInfo.id as number, isOpen, nodeInfo.isWritten ?? false, ); - console.log("Query status: ", { - postData, - isLoading, - isError, - error, - isInitialLoading, - isSuccess, - }); - const handleClose = () => { setIsEditing(false); onRequestClose(); diff --git a/Mindspace_front_next/app/map/map.tsx b/Mindspace_front_next/app/map/map.tsx index 6010c8e..a25d350 100644 --- a/Mindspace_front_next/app/map/map.tsx +++ b/Mindspace_front_next/app/map/map.tsx @@ -134,7 +134,7 @@ export default function MapPage() { ctx.fillText(node.name, node.x, node.y + nodeSize + 12); }; - const handleNodeInfoUpdate = (id: number | string, isWritten: boolean) => { + const handleNodeInfoUpdate = (id: number | undefined, isWritten: boolean) => { const updatedNodeData = { nodes: nodeData.nodes.map((node: Node) => node.id === id ? { ...node, isWritten: isWritten } : node, diff --git a/Mindspace_front_next/package.json b/Mindspace_front_next/package.json index 56a71b1..93e3fd8 100644 --- a/Mindspace_front_next/package.json +++ b/Mindspace_front_next/package.json @@ -14,6 +14,7 @@ "@types/js-cookie": "^3.0.4", "@types/react-lottie": "^1.2.7", "@types/react-modal": "^3.16.1", + "ag-grid-community": "^30.2.0", "ag-grid-react": "^30.2.0", "js-cookie": "^3.0.5", "next": "latest", diff --git a/Mindspace_front_next/yarn.lock b/Mindspace_front_next/yarn.lock index 1f082e5..7f15dd7 100644 --- a/Mindspace_front_next/yarn.lock +++ b/Mindspace_front_next/yarn.lock @@ -386,6 +386,11 @@ aframe@^1.4: three-bmfont-text dmarcos/three-bmfont-text#21d017046216e318362c48abd1a48bddfb6e0733 webvr-polyfill "^0.10.12" +ag-grid-community@^30.2.0: + version "30.2.0" + resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-30.2.0.tgz#b831fc99df1bfee6f73669fd8b7d3e9bd4012e22" + integrity sha512-Gd6GXmtzEQSCDloBdRxxCDqnjTBRAOf/zzlaxxyyVBJgc+cePuNgGdplRUhT/rwIiDwvyuoynvxelVE/iYdXsA== + ag-grid-react@^30.2.0: version "30.2.0" resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-30.2.0.tgz#3130baaf7a7e6c743bb06d9c7ce4f06ad48a10c1"