From d6d361a81bc2e7d8f9e68bce18f8d6684bdf037a Mon Sep 17 00:00:00 2001 From: Lee sang Yeop Date: Fri, 22 Sep 2023 16:18:30 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Feat:=20=EB=B3=B4=EB=93=9C=20=EB=93=9C?= =?UTF-8?q?=EB=9E=98=EA=B7=B8=EC=95=A4=EB=93=9C=EB=9E=8D=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EB=A5=BC=20=EC=9C=84=ED=95=B4=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EC=BD=94=EB=93=9C=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __mocks__/handlers/boardHandlers.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/__mocks__/handlers/boardHandlers.ts b/__mocks__/handlers/boardHandlers.ts index 61651fe..9251848 100644 --- a/__mocks__/handlers/boardHandlers.ts +++ b/__mocks__/handlers/boardHandlers.ts @@ -44,6 +44,16 @@ const boardsInfo: BoardsInfo = { boardTitle: '공지사항', boardIndex: 0, }, + { + boardId: 'bbb', + boardTitle: '게임 룰', + boardIndex: 1, + }, + { + boardId: 'ccc', + boardTitle: '커뮤니티', + boardIndex: 2, + }, ], '234': [ { From 83f93257fac6c79b5ce20279da9367a64a100dfb Mon Sep 17 00:00:00 2001 From: Lee sang Yeop Date: Fri, 22 Sep 2023 16:19:43 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Feat:=20=EB=B3=B4=EB=93=9C=20=EB=93=9C?= =?UTF-8?q?=EB=9E=98=EA=B7=B8=EC=95=A4=20=EB=93=9C=EB=9E=8D=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Sidebar/BoardBar/BoardBody.tsx | 64 ++++++++++++++----- 1 file changed, 48 insertions(+), 16 deletions(-) diff --git a/src/components/Sidebar/BoardBar/BoardBody.tsx b/src/components/Sidebar/BoardBar/BoardBody.tsx index 7407678..7fc9247 100644 --- a/src/components/Sidebar/BoardBar/BoardBody.tsx +++ b/src/components/Sidebar/BoardBar/BoardBody.tsx @@ -1,3 +1,4 @@ +import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd'; import { MouseEventHandler, useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import { useRouter } from 'next/router'; @@ -87,6 +88,13 @@ const BoardBody = ({ channelLink }: Props) => { setSelected(boardId); }; + const dragEnd = ({ source, destination }: DropResult) => { + if (!destination) return; + if (source.index === destination.index) return; + + console.log(source, destination); + }; + useEffect(() => { const lastVisitBoardId = lastVisitedBoardIdLists[channelLink]?.boardId; @@ -102,29 +110,52 @@ const BoardBody = ({ channelLink }: Props) => { }, [channelLink, isSuccess]); return ( - - {isSuccess && - data.map((board) => ( - - {board.boardTitle} - - - ))} + + + {(provided) => ( + + {isSuccess && + data.map((board, index) => + channelPermission === 0 ? ( + + {(provided) => ( + + {board.boardTitle} + + + )} + + ) : ( + + {board.boardTitle} + + ), + )} + + )} + {channelPermission === 0 && ( 공지 추가하기 )} - - + ); }; @@ -144,6 +175,7 @@ const Wrapper = styled.li<{ isSelected: boolean }>` &:hover { background-color: #39587e; } + color: white; ${({ isSelected }) => isSelected && `background-color: #39587E`}; `; From 6e090dca5f882338048a8f362925d44e87c503d0 Mon Sep 17 00:00:00 2001 From: Lee sang Yeop Date: Fri, 22 Sep 2023 17:14:53 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Feat:=20=EB=93=9C=EB=9E=98=EA=B7=B8?= =?UTF-8?q?=EC=95=A4=20=EB=93=9C=EB=9E=8D=20=EC=8B=9C=20=ED=81=B4=EB=9D=BC?= =?UTF-8?q?=EC=9D=B4=EC=96=B8=ED=8A=B8=EC=9D=98=20=ED=99=94=EB=A9=B4?= =?UTF-8?q?=EC=97=90=20=EB=B0=94=EB=80=90=20=EB=B3=B4=EB=93=9C=EA=B0=80=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Sidebar/BoardBar/BoardBody.tsx | 103 ++++++++++-------- 1 file changed, 56 insertions(+), 47 deletions(-) diff --git a/src/components/Sidebar/BoardBar/BoardBody.tsx b/src/components/Sidebar/BoardBar/BoardBody.tsx index 7fc9247..fdabe88 100644 --- a/src/components/Sidebar/BoardBar/BoardBody.tsx +++ b/src/components/Sidebar/BoardBar/BoardBody.tsx @@ -45,6 +45,7 @@ const postData = async (channelLink: string) => { const BoardBody = ({ channelLink }: Props) => { const [selected, setSelected] = useState(''); + const [boards, setBoards] = useState(); const router = useRouter(); const { data, isSuccess } = useQuery(['getBoardLists', channelLink], () => @@ -72,13 +73,14 @@ const BoardBody = ({ channelLink }: Props) => { }; const onClickNewBoard: MouseEventHandler = async () => { + if (boards === undefined) return; const res = await postData(channelLink); const newBoard: Channels = { boardId: res.boardId.toString(), boardTitle: res.boardTitle, boardIndex: res.boardIndex, }; - data?.push(newBoard); + setBoards([...boards, newBoard]); selectBoardId(newBoard.boardId); handleBoard(channelLink, newBoard.boardId, res.boardTitle); }; @@ -89,14 +91,19 @@ const BoardBody = ({ channelLink }: Props) => { }; const dragEnd = ({ source, destination }: DropResult) => { - if (!destination) return; + if (!destination || !boards) return; if (source.index === destination.index) return; - console.log(source, destination); + const newBoards = [...boards]; + const [removed] = newBoards.splice(source.index, 1); + newBoards.splice(destination.index, 0, removed); + + setBoards(newBoards); }; useEffect(() => { const lastVisitBoardId = lastVisitedBoardIdLists[channelLink]?.boardId; + if (isSuccess) setBoards(data); if (lastVisitBoardId) { selectBoardId(lastVisitBoardId); @@ -110,52 +117,54 @@ const BoardBody = ({ channelLink }: Props) => { }, [channelLink, isSuccess]); return ( - - - {(provided) => ( - - {isSuccess && - data.map((board, index) => - channelPermission === 0 ? ( - - {(provided) => ( - - {board.boardTitle} - - - )} - - ) : ( - - {board.boardTitle} - - ), + + + + {(provided) => ( +
+ {boards && + boards.map((board, index) => + channelPermission === 0 ? ( + + {(provided) => ( + + {board.boardTitle} + + + )} + + ) : ( + + {board.boardTitle} + + ), + )} + {channelPermission === 0 && ( + + 공지 추가하기 + + )} - - )} - - {channelPermission === 0 && ( - - 공지 추가하기 - - - )} +
+ )} + + - + ); }; From 632e569275d1ef85ca2cc08f516d976a5f8ab4aa Mon Sep 17 00:00:00 2001 From: Lee sang Yeop Date: Fri, 22 Sep 2023 17:36:53 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Feat:=20=EB=B3=B4=EB=93=9C=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD=ED=95=98=EB=8A=94=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20=EC=84=9C=EB=B2=84=EC=97=90=20post=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD=EC=9D=84=20=EB=B3=B4=EB=82=B4=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Sidebar/BoardBar/BoardBody.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/Sidebar/BoardBar/BoardBody.tsx b/src/components/Sidebar/BoardBar/BoardBody.tsx index fdabe88..dc6a8c0 100644 --- a/src/components/Sidebar/BoardBar/BoardBody.tsx +++ b/src/components/Sidebar/BoardBar/BoardBody.tsx @@ -85,6 +85,18 @@ const BoardBody = ({ channelLink }: Props) => { handleBoard(channelLink, newBoard.boardId, res.boardTitle); }; + const postCustomBoard = async (customedBoards: Channels[]) => { + const res = await authAPI({ + method: 'post', + url: `/api/channel/${channelLink}/order`, + data: { + channelBoardLoadDtoList: boards, + }, + }); + + if (res.status === 200) setBoards(customedBoards); + }; + const selectBoardId = (boardId: string) => { router.push(`/contents/${channelLink}/${boardId}`); setSelected(boardId); @@ -97,8 +109,10 @@ const BoardBody = ({ channelLink }: Props) => { const newBoards = [...boards]; const [removed] = newBoards.splice(source.index, 1); newBoards.splice(destination.index, 0, removed); - - setBoards(newBoards); + for (let i = 0; i < newBoards.length; i++) { + newBoards[i].boardIndex = i; + } + postCustomBoard(newBoards); }; useEffect(() => {