From 6d233724091ecfff1b4411e85279a3386f056a10 Mon Sep 17 00:00:00 2001 From: sinjw Date: Tue, 5 Sep 2023 13:27:39 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[Feat]=EA=B2=8C=EC=8B=9C=ED=8C=90=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=84=9C=EB=B2=84=EC=97=B0=EA=B2=B0=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=ED=8C=90=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=EB=A7=8C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../communityComponents/TimeLineComponent.tsx | 89 ++++++++++++++----- client/src/data/globalAxios.tsx | 0 client/src/main.tsx | 2 +- 3 files changed, 66 insertions(+), 25 deletions(-) delete mode 100644 client/src/data/globalAxios.tsx diff --git a/client/src/components/communityComponents/TimeLineComponent.tsx b/client/src/components/communityComponents/TimeLineComponent.tsx index 139e1e10..622c87cf 100644 --- a/client/src/components/communityComponents/TimeLineComponent.tsx +++ b/client/src/components/communityComponents/TimeLineComponent.tsx @@ -2,19 +2,30 @@ import { useState, useEffect } from "react"; import styled from "styled-components"; import Comments from "./Comments"; import { DotIcon } from "./IconComponent/Icon"; +import axios from "axios"; + +const serverUrl = + "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/boards"; const TimeLineComponent = () => { //로컬스토리지 생성 - const [data, setData] = useState(""); + + const [boardData, setBoardData] = useState([]); + useEffect(() => { - localStorage.setItem("boradData", data); - setData(""); + fetchBoardDataFromServer(); }, []); - const [boardData, setBoardData] = useState(() => { - const storedData = localStorage.getItem("boardData"); - return storedData ? JSON.parse(storedData) : []; - }); + const fetchBoardDataFromServer = async () => { + try { + const response = await axios.get(serverUrl); + const boardData = response.data; + + setBoardData(boardData); + } catch (error) { + console.error("데이터 가져오기 중 오류 발생:", error); + } + }; //드롭다운 버튼 텍스트 작성창 열기 const [openDropDown, setOpenDropDown] = useState(false); @@ -31,27 +42,41 @@ const TimeLineComponent = () => { console.log(inputValue); }; - // 서브밋 버튼 클릭시 로컬스토리지에 작성된 텍스트 저장 - const handleClickSubmit = () => { + // 서브밋 버튼 클릭 + const handleClickSubmit = async () => { if (inputValue.length !== 0) { //if 문의 조건식에 inputValue만 사용해도 정상 작동하는 //이유는 JavaScript와 TypeScript의 "Truthy"와 "Falsy" 값 변환 규칙때문 const newBoardData: BoardData = { id: new Date().getTime(), - boardText: inputValue, + content: inputValue, comments: "", nickname: `user${UserId}`, }; - setBoardData((prevBoardData) => [...prevBoardData, newBoardData]); + try { + const response = await axios.post(`${serverUrl}`, newBoardData); + if (response.status === 201) { + // 서버에 성공적으로 데이터를 업로드한 경우 + alert("작성완료"); + setinputValue(""); // 입력 필드 초기화 + // 서버에서 업데이트된 게시물 목록을 다시 가져오기 + fetchBoardDataFromServer(); + } else { + alert("작성실패"); + } + } catch (error) { + console.log("데이터 추가 중 오류 발생:", error); + alert("작성실패"); + } } else { - return alert("내용이 없습니다"); + alert("내용이 없습니다"); + window.location.href = "http://localhost:5173/community"; } - alert("작성완료"); - window.location.href = "http://localhost:5173/community"; }; //닷버튼 클릭 및 삭제하기 기능 + // const [dotMenuOpen, setDotMenuOpen] = useState(false); const [dotMenuOpenMap, setDotMenuOpenMap] = useState<{ [key: number]: boolean; @@ -64,11 +89,26 @@ const TimeLineComponent = () => { // setDotMenuOpen(!dotMenuOpen); }; - const handleDeleteClick = (id: number) => { - // ID를 사용하여 해당 게시물을 식별하고 삭제 - const deleteData = boardData.filter((el) => el.id !== id); - localStorage.setItem("boardData", JSON.stringify(deleteData)); - window.location.href = "http://localhost:5173/community"; + const handleDeleteClick = async (boardId: number) => { + // boardId로 수정 + try { + const response = await axios.delete(`${serverUrl}/${boardId}`); // URL에 boardId 추가 + if (response.status === 200) { + // 삭제 성공 처리 + alert("삭제되었습니다"); + // 삭제한 게시물을 클라이언트 데이터에서도 제거 + const updatedBoardData = boardData.filter( + (el) => el.boardId !== boardId + ); // boardId로 수정 + setBoardData(updatedBoardData); + } else { + alert("삭제 실패"); + } + } catch (error) { + console.error("데이터 삭제 중 오류 발생:", error); + alert("삭제 실패"); + console.log(boardData); + } }; //유저 아이디 랜덤 설정 const getRandomFourDigitNumber = () => { @@ -79,9 +119,9 @@ const TimeLineComponent = () => { const UserId = getRandomFourDigitNumber(); //boardData업데이트될때 마다 로컬스토리지 데이터 저장 - useEffect(() => { - localStorage.setItem("boardData", JSON.stringify(boardData)); - }, [boardData]); + // useEffect(() => { + // localStorage.setItem("boardData", JSON.stringify(boardData)); + // }, [boardData]); return ( @@ -129,7 +169,7 @@ const TimeLineComponent = () => { {el.nickname}
- {el.boardText} + {el.content} @@ -143,7 +183,7 @@ export default TimeLineComponent; interface BoardData { id: number; - boardText: string; + content: string; comments: string; nickname: string; } @@ -232,6 +272,7 @@ const SubmitButton = styled.button` //게시판 전체 영역 const BoardArea = styled.div` text-align: center; + margin-top: 25px; width: 90%; `; diff --git a/client/src/data/globalAxios.tsx b/client/src/data/globalAxios.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/client/src/main.tsx b/client/src/main.tsx index 3d19ea5c..9b42d6a1 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -5,7 +5,7 @@ import { QueryClientProvider, QueryClient } from "react-query"; import { Provider } from "react-redux"; import store from "./store/config.ts"; -const queryClient = new QueryClient(); +export const queryClient = new QueryClient(); ReactDOM.createRoot(document.getElementById("root")!).render( From c54db3c8ddd06f2bfa167c23bf881c5756bdc2d4 Mon Sep 17 00:00:00 2001 From: sinjw Date: Tue, 5 Sep 2023 13:41:30 +0900 Subject: [PATCH 2/4] =?UTF-8?q?[Feat]=EC=BB=A4=EB=AE=A4=EB=8B=88=ED=8B=B0?= =?UTF-8?q?=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EC=97=85=EB=A1=9C=EB=93=9C=20?= =?UTF-8?q?=EC=84=9C=EB=B2=84=EB=9E=91=EC=97=B0=EA=B2=B0=20=EA=B5=AC?= =?UTF-8?q?=EC=B6=95=20>=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EA=B8=80=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EB=B0=8F=20=EC=97=85=EB=A1=9C=EB=93=9C?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=84=9C=EB=B2=84=EC=99=80=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=20>=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=20=ED=95=84=EC=9A=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/communityComponents/TimeLineComponent.tsx | 2 -- client/src/main.tsx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/client/src/components/communityComponents/TimeLineComponent.tsx b/client/src/components/communityComponents/TimeLineComponent.tsx index 622c87cf..f0e9ce38 100644 --- a/client/src/components/communityComponents/TimeLineComponent.tsx +++ b/client/src/components/communityComponents/TimeLineComponent.tsx @@ -8,8 +8,6 @@ const serverUrl = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/boards"; const TimeLineComponent = () => { - //로컬스토리지 생성 - const [boardData, setBoardData] = useState([]); useEffect(() => { diff --git a/client/src/main.tsx b/client/src/main.tsx index 9b42d6a1..3d19ea5c 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -5,7 +5,7 @@ import { QueryClientProvider, QueryClient } from "react-query"; import { Provider } from "react-redux"; import store from "./store/config.ts"; -export const queryClient = new QueryClient(); +const queryClient = new QueryClient(); ReactDOM.createRoot(document.getElementById("root")!).render( From 952d9e00ad9436f85ae6c29a55bf521372d2b852 Mon Sep 17 00:00:00 2001 From: sinjw Date: Tue, 5 Sep 2023 14:20:09 +0900 Subject: [PATCH 3/4] =?UTF-8?q?[Feat]=EC=BB=A4=EB=AE=A4=EB=8B=88=ED=8B=B0?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=84=9C=EB=B2=84=EC=99=80=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=9E=91=EC=84=B1=20?= =?UTF-8?q?=EB=B0=8F=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=84=9C=EB=B2=84=EC=99=80=20=EC=97=B0=EA=B2=B0=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=EA=B8=80=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=84=9C=EB=B2=84=EC=99=80=EC=97=B0=EA=B2=B0=20=EC=84=9C?= =?UTF-8?q?=EB=B2=84=EC=B8=A1=EC=97=90=EC=84=9C=20=EC=95=BD=EA=B0=84?= =?UTF-8?q?=EC=9D=98=20=EC=88=98=EC=A0=95=20=ED=95=84=EC=9A=94issue#7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../communityComponents/TimeLineComponent.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/client/src/components/communityComponents/TimeLineComponent.tsx b/client/src/components/communityComponents/TimeLineComponent.tsx index f0e9ce38..fe3c7bea 100644 --- a/client/src/components/communityComponents/TimeLineComponent.tsx +++ b/client/src/components/communityComponents/TimeLineComponent.tsx @@ -18,7 +18,6 @@ const TimeLineComponent = () => { try { const response = await axios.get(serverUrl); const boardData = response.data; - setBoardData(boardData); } catch (error) { console.error("데이터 가져오기 중 오류 발생:", error); @@ -49,7 +48,8 @@ const TimeLineComponent = () => { id: new Date().getTime(), content: inputValue, comments: "", - nickname: `user${UserId}`, + title: `user${UserId}`, + boardId: 0, }; try { @@ -155,21 +155,21 @@ const TimeLineComponent = () => { .map((el) => ( -
handleDotOpen(el.id)}> +
handleDotOpen(el.boardId)}>
- {dotMenuOpenMap[el.id] && ( - handleDeleteClick(el.id)}> + {dotMenuOpenMap[el.boardId] && ( + handleDeleteClick(el.boardId)}> 삭제하기 )} - {el.nickname} + {el.title}
{el.content} - + )) )} @@ -180,10 +180,11 @@ const TimeLineComponent = () => { export default TimeLineComponent; interface BoardData { + boardId: number; id: number; content: string; comments: string; - nickname: string; + title: string; } //드롭다운 글작성 스타일 및 닫기버튼 스타일 From 82dd1494510e6a7155f1d451f39424d61c3559c0 Mon Sep 17 00:00:00 2001 From: sinjw Date: Tue, 5 Sep 2023 14:33:30 +0900 Subject: [PATCH 4/4] =?UTF-8?q?[Feat]=EC=BB=A4=EB=AE=A4=EB=8B=88=ED=8B=B0?= =?UTF-8?q?=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EC=84=9C=EB=B2=84=EC=99=80=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=20-window.=EC=9D=84=20=ED=86=B5=ED=95=B4=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B3=80=EA=B2=BD=ED=95=98?= =?UTF-8?q?=EB=8D=98=20=EB=B6=80=EB=B6=84=EC=9D=84=20useNavigate=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20issue#7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/communityComponents/TimeLineComponent.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/src/components/communityComponents/TimeLineComponent.tsx b/client/src/components/communityComponents/TimeLineComponent.tsx index fe3c7bea..9a676275 100644 --- a/client/src/components/communityComponents/TimeLineComponent.tsx +++ b/client/src/components/communityComponents/TimeLineComponent.tsx @@ -3,11 +3,12 @@ import styled from "styled-components"; import Comments from "./Comments"; import { DotIcon } from "./IconComponent/Icon"; import axios from "axios"; - +import { useNavigate } from "react-router-dom"; const serverUrl = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/boards"; const TimeLineComponent = () => { + const navigate = useNavigate(); const [boardData, setBoardData] = useState([]); useEffect(() => { @@ -69,7 +70,8 @@ const TimeLineComponent = () => { } } else { alert("내용이 없습니다"); - window.location.href = "http://localhost:5173/community"; + // window.location.href = "http://localhost:5173/community";. + navigate("/community"); } };