diff --git a/src/components/Content/ContentModify.tsx b/src/components/Content/ContentModify.tsx index ffe9aa9..e397ffa 100644 --- a/src/components/Content/ContentModify.tsx +++ b/src/components/Content/ContentModify.tsx @@ -48,9 +48,6 @@ const ContentModify = ({ title, content, onUpdateContent }: ContentModifyProps) <> - - 삭제하기 - { const newBoards = [...boards]; const [removed] = newBoards.splice(source.index, 1); newBoards.splice(destination.index, 0, removed); - console.log(newBoards); for (let i = 0; i < newBoards.length; i++) { newBoards[i].boardIndex = i + 1; } @@ -146,13 +145,13 @@ const BoardBody = ({ channelLink }: Props) => { if (JSON.stringify(boards) === JSON.stringify(data.channelBoardLoadDtoList)) return; setBoards(data.channelBoardLoadDtoList); }, [data?.channelBoardLoadDtoList]); - + useEffect(() => { setBoards((prevBoards) => { return prevBoards.map((board) => { - if (board.boardId === selected) { + if (board.boardId.toString() === selected) return { ...board, boardTitle: lastVisitedBoardIdLists[channelLink].boardTitle }; - } + return board; }); }); diff --git a/src/pages/contents/[channelLink]/[boardId].tsx b/src/pages/contents/[channelLink]/[boardId].tsx index 6c0472a..1cab4c6 100644 --- a/src/pages/contents/[channelLink]/[boardId].tsx +++ b/src/pages/contents/[channelLink]/[boardId].tsx @@ -12,6 +12,11 @@ export interface Content { title: string; content: string; } +interface ContentButtonProps { + onClick?: () => void; + right?: string; + backgroundColor?: string; +} const updateData = async (channelLink: string, boardId: string, updatedContent: Content) => { const res = await authAPI({ @@ -22,6 +27,7 @@ const updateData = async (channelLink: string, boardId: string, updatedContent: content: updatedContent.content, }, }); + return res; }; @@ -39,7 +45,9 @@ const boardContents = () => { method: 'get', url: `/api/channel/${channelLink}/${boardId}`, }); + if (res.status !== 200) return router.push('/'); + setContents(res.data); }; @@ -49,16 +57,32 @@ const boardContents = () => { content, }; if (!channelLink) return; + const res = await updateData(channelLink as string, boardId as string, updatedContent); if (res.status !== 200) { alert('요청실패'); return; } + setContents(updatedContent); setIsModify(false); handleBoard(channelLink as string, boardId as string, title); }; + const deleteBoard = async () => { + if (!confirm('공지를 삭제하시겠습니까?')) return; + const res = await authAPI({ method: 'delete', url: `/api/channel/${channelLink}/${boardId}` }); + + if (res.status !== 200) { + alert('서버 에러가 발생했습니다.'); + return; + } + + handleBoard(channelLink as string, '', ''); + + alert('정상적으로 처리되었습니다.'); + }; + useEffect(() => { setIsModify(false); if (!channelLink || !boardId) { @@ -90,8 +114,12 @@ const boardContents = () => { {channelPermission === 0 && ( <> - 공지 삭제 - setIsModify(true)}>내용 수정 + deleteBoard()}> + 공지 삭제 + + setIsModify(true)}> + 내용 수정 + )} @@ -117,16 +145,17 @@ const Title = styled.div` border-bottom: 1px solid #d3d3d3; `; -const ModifyButton = styled.button` +const ModifyButton = styled.button` font-size: 2rem; color: white; - background-color: #0067a3; position: fixed; bottom: 3rem; right: 5rem; border: none; padding: 1rem; border-radius: 1rem; + right: ${(props) => props.right + 'rem'}; + background-color: ${(props) => props.backgroundColor}; &:hover { cursor: pointer;