diff --git a/client/src/components/communityComponents/Comments.tsx b/client/src/components/communityComponents/Comments.tsx index 1e290ba1..2dd70e1b 100644 --- a/client/src/components/communityComponents/Comments.tsx +++ b/client/src/components/communityComponents/Comments.tsx @@ -1,42 +1,62 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import styled from "styled-components"; +import axios from "axios"; -const Comments = ({ postId }: { postId: number }) => { +const Comments = ({ boardId }: { boardId: number }) => { + ///api/boards/{boardId}/comment/ interface CommentData { id: number; comments: string; } - const [commentData, setCommentData] = useState(() => { - // 게시물별로 로컬 스토리지에서 댓글 데이터를 가져옵니다. - const storedData = localStorage.getItem(`commentData_${postId}`); - return storedData ? JSON.parse(storedData) : []; - }); - + const [commentData, setCommentData] = useState([]); const [commentsValue, setCommentsValue] = useState(""); + useEffect(() => { + // 게시물 ID를 기반으로 서버에서 댓글 데이터를 가져옵니다. + fetchCommentsFromServer(); + }, [boardId]); + + const fetchCommentsFromServer = async () => { + try { + const response = await axios.get(`/api/boards/${boardId}/comment`); + setCommentData(response.data); + } catch (error) { + console.error("댓글 데이터를 가져오는 중 오류 발생:", error); + } + }; const handleOnChange = (e: React.ChangeEvent) => { setCommentsValue(e.target.value); }; - - const handleClickSubmit = () => { + const authToken = localStorage.getItem("authToken"); // 로컬스토리지 토큰 가져오기 + const handleClickSubmit = async () => { if (commentsValue) { const newCommentData: CommentData = { id: new Date().getTime(), - comments: commentsValue, }; - // 댓글 데이터를 업데이트합니다. - setCommentData((prevCommentData) => [...prevCommentData, newCommentData]); - - // 게시물 ID에 따라 로컬 스토리지에 댓글 데이터를 저장합니다. - localStorage.setItem( - `commentData_${postId}`, - JSON.stringify([...commentData, newCommentData]) - ); - - // 댓글 입력창 초기화 - setCommentsValue(""); + try { + // 서버에 댓글 데이터를 POST합니다. + const response = await axios.post( + `/api/boards/${boardId}/comment`, + newCommentData, + { + headers: { + Authorization: authToken, // 토큰을 헤더에 추가 + }, + } + ); + if (response.status === 201) { + // 서버에 성공적으로 데이터를 업로드한 경우 + setCommentsValue(""); + // 서버에서 업데이트된 댓글 목록을 다시 가져오기 + fetchCommentsFromServer(); + } else { + console.log("댓글 작성 실패:", response.data); + } + } catch (error) { + console.error("댓글 작성 중 오류 발생:", error); + } } }; // 보여지는 댓글 수 제한 및 더보기 버튼 클릭시 모든댓글이 보이도록 설정 diff --git a/client/src/components/communityComponents/StockDisscussion.tsx b/client/src/components/communityComponents/StockDisscussion.tsx index 951e4b6d..aa154f22 100644 --- a/client/src/components/communityComponents/StockDisscussion.tsx +++ b/client/src/components/communityComponents/StockDisscussion.tsx @@ -23,11 +23,11 @@ const StockDisscussion: React.FC = () => { } }; return ( -
+ {StockDisscussions.map((el) => ( {el.korName} ))} -
+ ); }; export default StockDisscussion; @@ -35,8 +35,12 @@ interface StockDiscussion { id: number; korName: string; } +const DisscussionContainer = styled.div` + max-height: 600px; +`; const DisscussionList = styled.div` display: flex; + justify-content: space-around; margin: 0 auto; margin-top: 20px; diff --git a/client/src/components/communityComponents/index.tsx b/client/src/components/communityComponents/index.tsx index d5c2f02d..5f7e430b 100644 --- a/client/src/components/communityComponents/index.tsx +++ b/client/src/components/communityComponents/index.tsx @@ -5,7 +5,7 @@ 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"; + "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/api/boards"; const TimeLineComponent = () => { const navigate = useNavigate(); @@ -39,7 +39,7 @@ const TimeLineComponent = () => { setinputValue(e.target.value); console.log(inputValue); }; - + const authToken = localStorage.getItem("authToken"); // 로컬스토리지 토큰 가져오기 // 서브밋 버튼 클릭 const handleClickSubmit = async () => { if (inputValue.length !== 0) { @@ -54,7 +54,11 @@ const TimeLineComponent = () => { }; try { - const response = await axios.post(`${serverUrl}`, newBoardData); + const response = await axios.post(`${serverUrl}`, newBoardData, { + headers: { + Authorization: authToken, // 토큰을 요청 헤더에 추가 + }, + }); if (response.status === 201) { // 서버에 성공적으로 데이터를 업로드한 경우 alert("작성완료"); @@ -90,7 +94,11 @@ const TimeLineComponent = () => { const handleDeleteClick = async (boardId: number) => { // boardId로 수정 try { - const response = await axios.delete(`${serverUrl}/${boardId}`); // URL에 boardId 추가 + const response = await axios.delete(`${serverUrl}/${boardId}`, { + headers: { + Authorization: `Bearer ${authToken}`, // 토큰을 헤더에 추가 + }, + }); // URL에 boardId 추가 if (response.status === 200) { // 삭제 성공 처리 alert("삭제되었습니다"); @@ -132,12 +140,16 @@ const TimeLineComponent = () => {

{timeLineText.close}

- + {authToken === null || undefined ? ( +
로그인해주세요
+ ) : ( + + )} Submit @@ -169,7 +181,7 @@ const TimeLineComponent = () => {
{el.content} - + )) )} @@ -276,7 +288,7 @@ const SubmitButton = styled.button` //게시판 전체 영역 const BoardArea = styled.div` text-align: center; - + max-height: 600px; margin-top: 25px; width: 90%; `; @@ -293,6 +305,7 @@ const BoardTextAreaNoText = styled.div` `; const BoardTextArea = styled.div` width: 80%; + padding-bottom: 10px; border-radius: 20px 20px; border: 1px solid#40797c; @@ -312,7 +325,6 @@ const TimeLine = styled.div` flex-direction: column; align-content: space-around; flex-wrap: wrap; - max-height:600px; `; //게시글 삭제 const Delete = styled.div` diff --git a/client/src/models/stateProps.ts b/client/src/models/stateProps.ts index f9f72121..c3fcc3ea 100644 --- a/client/src/models/stateProps.ts +++ b/client/src/models/stateProps.ts @@ -7,4 +7,5 @@ export interface StateProps { companyId: number; stockOrderVolume: number; decisionWindow: boolean; + login: number; } diff --git a/client/src/page/TabPages/MarketInfoPage.tsx b/client/src/page/TabPages/MarketInfoPage.tsx index ea313e1c..5dd09c49 100644 --- a/client/src/page/TabPages/MarketInfoPage.tsx +++ b/client/src/page/TabPages/MarketInfoPage.tsx @@ -14,7 +14,7 @@ const MarketInfo: React.FC = () => { setTabStyle(number); }; return ( -
+