From c923a5f10b47d35a122bf7f2780b92514ced4909 Mon Sep 17 00:00:00 2001 From: sinjw Date: Tue, 19 Sep 2023 17:23:00 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[Feat]=EC=BB=A4=EB=AE=A4=EB=8B=88=ED=8B=B0?= =?UTF-8?q?=20=EC=82=AD=EC=A0=9C=EA=B8=B0=EB=8A=A5=20=EC=99=84=EC=84=B1=20?= =?UTF-8?q?-=EC=BB=A4=EB=AE=A4=EB=8B=88=ED=8B=B0=EB=B6=80=EB=B6=84=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= =?UTF-8?q?=EC=99=84=EB=A3=8C=20=EC=84=9C=EB=B2=84=EC=99=80=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=20=EC=84=B1=EA=B3=B5=20-=EB=B6=80=EB=B6=84=EC=A0=81?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=8C=93=EA=B8=80=EB=8B=AC=EB=A6=B4?= =?UTF-8?q?=EB=95=8C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=95=BD=EA=B0=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20Issues=20#10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../communityComponents/Comments.tsx | 76 +++++++++++++------ .../IconComponent/Icon.tsx | 30 ++++++++ .../components/communityComponents/index.tsx | 6 +- 3 files changed, 87 insertions(+), 25 deletions(-) diff --git a/client/src/components/communityComponents/Comments.tsx b/client/src/components/communityComponents/Comments.tsx index 461d875a..541edbe9 100644 --- a/client/src/components/communityComponents/Comments.tsx +++ b/client/src/components/communityComponents/Comments.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import styled from "styled-components"; import axios from "axios"; - +import { ProFileImage } from "./IconComponent/Icon.tsx"; const Comments = ({ boardId }: { boardId: number }) => { const [commentData, setCommentData] = useState([]); const [commentsValue, setCommentsValue] = useState(""); @@ -68,6 +68,7 @@ const Comments = ({ boardId }: { boardId: number }) => { try { const response = await axios.delete( `http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/api/boards/${boardId}/comments/${commentId}`, + { headers: { Authorization: accessToken, @@ -78,16 +79,17 @@ const Comments = ({ boardId }: { boardId: number }) => { // 삭제 성공 처리 alert("댓글이 삭제되었습니다"); - const updatedCommentData = commentData.filter( - (el: CommentContent) => el.id !== commentId - ); - setCommentData(updatedCommentData); + // const updatedCommentData = commentData.filter( + // (el: CommentContent) => el.commentId !== commentId + // ); + // setCommentData(updatedCommentData); } else { - alert("댓글 삭제 실패"); + alert("삭제되었습니다"); + window.location.href = "/community"; } } catch (error) { - console.error("댓글 삭제 중 오류 발생:", error); - alert("댓글 삭제 실패"); + console.error("작성자만 삭제 할 수 있습니다:", error); + alert("작성자만 삭제 할 수 있습니다"); } }; @@ -133,19 +135,27 @@ const Comments = ({ boardId }: { boardId: number }) => { {CommentText.write} - {CommentText.replyCount} {commentData.length} {CommentText.replyText} + {CommentText.replyCount} {commentData.length} + {CommentText.replyText} {commentData.slice(0, visibleComments).map((el: CommentContent) => ( - -
- » {el.member} - {getTimeAgoString(el.createdAt)} -
- {el.content} - handleDeleteComment(el.id)}> - 삭제 - - + + +
+ + {el.member} + {getTimeAgoString(el.createdAt)} +
+ + + {el.content} + handleDeleteComment(el.commentId)} + > + {CommentText.delete} + + + ))} @@ -168,8 +178,14 @@ const CommentText = { replyCount: "댓글", replyText: "개 모두보기", replyHide: "개 숨기기", + delete: "삭제", }; - +const CommentArea = styled.div` + box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); + width: 350px; + padding-top: 10px; + padding-bottom: 10px; +`; const CommentInput = styled.input` border: none; outline: none; @@ -196,7 +212,19 @@ const CommentInputSubmit = styled.button` background-color: #f2f2f2; } `; -const CommentDeleteButton = styled.div``; +const CommentDeleteButton = styled.div` + font-size: 12px; + margin-top: -20px; + cursor: pointer; + color: #939393; + font-weight: bold; + width: 20%; + text-align: right; + + &:hover { + color: #333; + } +`; const CommentContainer = styled.div` display: flex; justify-content: space-around; @@ -212,6 +240,8 @@ const CommentsDiv = styled.div` padding: 0px 10px; border-radius: 5px; margin-bottom: 5px; + display: flex; + flex-direction: row; `; const CommentCount = styled.div` @@ -233,5 +263,7 @@ const CommentDate = styled.span` `; const CommentTextDiv = styled.div` - margin-top: 5px; + margin-top: 0px; + margin-left: 50px; + width: 80%; `; diff --git a/client/src/components/communityComponents/IconComponent/Icon.tsx b/client/src/components/communityComponents/IconComponent/Icon.tsx index f7759478..224e3aee 100644 --- a/client/src/components/communityComponents/IconComponent/Icon.tsx +++ b/client/src/components/communityComponents/IconComponent/Icon.tsx @@ -56,6 +56,36 @@ export const InvestImage = () => { ); }; + +export const ProFileImage = () => { + return ( + <> + + + + + ); +}; + +const ProFileImages = styled.i` + font-size: 20px; + position: relative; + margin-left: 6px; + + width: 45px; + top: 10px; + &:after { + content: "StockHolm"; + font-size: 8px; + position: absolute; + top: 23px; + left: -13px; + } + color: rgba(205, 140, 150, 0.4); +`; const InvestImages = styled.i` font-size: 18px; color: #2d4f51; diff --git a/client/src/components/communityComponents/index.tsx b/client/src/components/communityComponents/index.tsx index 27c4b9c4..74e3a8fd 100644 --- a/client/src/components/communityComponents/index.tsx +++ b/client/src/components/communityComponents/index.tsx @@ -117,11 +117,11 @@ const TimeLineComponent = () => { setBoardData(updatedBoardData); } else { alert("삭제 되었습니다"); - window.location.href = "http://localhost:5173/community"; + window.location.href = "/community"; } } catch (error) { - console.error("데이터 삭제 중 오류 발생:", error); - alert("삭제 되었습니다"); + console.error("작성자만 삭제 할 수 있습니다:", error); + alert("작성자만 삭제 할 수 있습니다"); console.log(boardData); } }; From 8b1bcb244bd94703c5292de8fc5aa482c836fa2f Mon Sep 17 00:00:00 2001 From: sinjw Date: Tue, 19 Sep 2023 17:27:17 +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=EC=82=AD=EC=A0=9C=EA=B8=B0=EB=8A=A5=20=EC=99=84=EC=84=B1=20?= =?UTF-8?q?-=EC=BB=A4=EB=AE=A4=EB=8B=88=ED=8B=B0=EB=B6=80=EB=B6=84=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= =?UTF-8?q?=EC=99=84=EB=A3=8C=20=EC=84=9C=EB=B2=84=EC=99=80=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=20=EC=84=B1=EA=B3=B5=20-=EB=B6=80=EB=B6=84=EC=A0=81?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=8C=93=EA=B8=80=EB=8B=AC=EB=A6=B4?= =?UTF-8?q?=EB=95=8C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=95=BD=EA=B0=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20Issues=20#10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/communityComponents/Comments.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/components/communityComponents/Comments.tsx b/client/src/components/communityComponents/Comments.tsx index 541edbe9..d032fc35 100644 --- a/client/src/components/communityComponents/Comments.tsx +++ b/client/src/components/communityComponents/Comments.tsx @@ -181,10 +181,11 @@ const CommentText = { delete: "삭제", }; const CommentArea = styled.div` - box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); width: 350px; padding-top: 10px; padding-bottom: 10px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(0, 0, 0, 0.1); `; const CommentInput = styled.input` border: none; From 61527029260be4c24289b75959d02369cf58a19e Mon Sep 17 00:00:00 2001 From: sinjw Date: Tue, 19 Sep 2023 17:45:17 +0900 Subject: [PATCH 3/4] =?UTF-8?q?[Design]=EB=8C=93=EA=B8=80=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=B6=94=EA=B0=80=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../communityComponents/Comments.tsx | 14 +++- .../components/communityComponents/index.tsx | 64 +++++++++++++------ 2 files changed, 58 insertions(+), 20 deletions(-) diff --git a/client/src/components/communityComponents/Comments.tsx b/client/src/components/communityComponents/Comments.tsx index d032fc35..ef9284e0 100644 --- a/client/src/components/communityComponents/Comments.tsx +++ b/client/src/components/communityComponents/Comments.tsx @@ -200,9 +200,14 @@ const CommentInput = styled.input` const CommentInputSubmit = styled.button` outline: none; - border: 1px solid black; + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.7); + border-right: 1px solid rgba(0, 0, 0, 0.7); + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-left: 1px solid rgba(0, 0, 0, 0.1); + background-color: white; - color: black; + color: #939393; padding: 10px 15px; border-radius: 5px; margin-left: 10px; @@ -210,7 +215,12 @@ const CommentInputSubmit = styled.button` transition: background-color 0.3s; &:hover { + color: #333; background-color: #f2f2f2; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(0, 0, 0, 0.1); + border-top: 1px solid rgba(0, 0, 0, 0); + border-left: 1px solid rgba(0, 0, 0, 0); } `; const CommentDeleteButton = styled.div` diff --git a/client/src/components/communityComponents/index.tsx b/client/src/components/communityComponents/index.tsx index acfd8468..8339110c 100644 --- a/client/src/components/communityComponents/index.tsx +++ b/client/src/components/communityComponents/index.tsx @@ -23,21 +23,29 @@ const TimeLineComponent = () => { console.error("데이터 가져오기 중 오류 발생:", error); } }; - // 작성 시각을 원하는 형식으로 변환하는 유틸리티 함수 - // const formatDate = (isoString: string): string => { - // const date = new Date(isoString); - // const year = date.getFullYear(); - // const month = date.getMonth() + 1; - // const day = date.getDate(); - // const hours = date.getHours(); - // const minutes = date.getMinutes(); - - // const formattedHours = hours > 12 ? hours - 12 : hours; - // const ampm = hours >= 12 ? "오후" : "오전"; - // const formattedMinutes = minutes < 10 ? "0" + minutes : minutes; - - // return `${year}년 ${month}월 ${day}일 ${ampm} ${formattedHours}:${formattedMinutes}`; - // }; + const getTimeAgoString = (createdAt: string): string => { + const currentTime: Date = new Date(); + const createdAtTime: Date = new Date(createdAt); + + const timeDifferenceInMilliseconds: number = + currentTime.getTime() - createdAtTime.getTime(); + const timeDifferenceInSeconds = Math.floor( + timeDifferenceInMilliseconds / 1000 + ); + + if (timeDifferenceInSeconds < 60) { + return "방금 전"; + } else if (timeDifferenceInSeconds < 3600) { + const minutesAgo = Math.floor(timeDifferenceInSeconds / 60); + return `${minutesAgo}분 전`; + } else if (timeDifferenceInSeconds < 86400) { + const hoursAgo = Math.floor(timeDifferenceInSeconds / 3600); + return `${hoursAgo}시간 전`; + } else { + const daysAgo = Math.floor(timeDifferenceInSeconds / 86400); + return `${daysAgo}일 전`; + } + }; //드롭다운 버튼 텍스트 작성창 열기 const [openDropDown, setOpenDropDown] = useState(false); @@ -178,7 +186,11 @@ const TimeLineComponent = () => { )} - {el.member} + + {el.member} +
{getTimeAgoString(el.createdAt)}
+ + {expandedPosts.includes(el.boardId) ? ( el.content ) : ( @@ -221,7 +233,23 @@ const timeLineText = { delete: "삭제하기", }; -//드롭다운 글작성 스타일 및 닫기버튼 스타일 +//드롭다운 글작성 스타일 및 닫기버튼 스타일. +const MemberInfo = styled.div` + display: flex; + :nth-child(1) { + width: 80%; + } + :nth-child(2) { + font-size: 12px; + margin-top: 1px; + margin-left: 10px; + + color: rgba(0, 0, 0, 0.7); + } +`; +const MemberName = styled.div` + margin-bottom: 15px; +`; const DropdownInput = styled.input` text-align: center; border: 0.1px solid#40797c; @@ -238,7 +266,7 @@ const DropdownInput = styled.input` const Button = styled.button` background-color: white; color: darkslategray; - border: 1px solid darkslategray; + border: 1px solid rgba(0, 0, 0, 0.5); width: 300px; height: 30px; From 0cb0e640ef1c159a0e318b538bf25760e79212a4 Mon Sep 17 00:00:00 2001 From: sinjw Date: Tue, 19 Sep 2023 18:06:03 +0900 Subject: [PATCH 4/4] =?UTF-8?q?[Design]=EB=8C=93=EA=B8=80=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=B6=94=EA=B0=80=EC=88=98=EC=A0=95=20-?= =?UTF-8?q?=EB=8C=93=EA=B8=80=EB=B6=80=EB=B6=84=20=EC=98=81=EC=97=AD=20?= =?UTF-8?q?=EA=B5=AC=EB=B6=84=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=EC=88=98=EC=A0=95=20Issues=20#10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../communityComponents/Comments.tsx | 21 +++++++++++++++---- .../components/communityComponents/index.tsx | 10 ++++++--- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/client/src/components/communityComponents/Comments.tsx b/client/src/components/communityComponents/Comments.tsx index ef9284e0..c58a709f 100644 --- a/client/src/components/communityComponents/Comments.tsx +++ b/client/src/components/communityComponents/Comments.tsx @@ -184,8 +184,11 @@ const CommentArea = styled.div` width: 350px; padding-top: 10px; padding-bottom: 10px; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - border-right: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + border-right: 1px solid rgba(0, 0, 0, 0.2); + border-top: 1px solid rgba(0, 0, 0, 0.03); + border-left: 1px solid rgba(0, 0, 0, 0.03); + margin-bottom: 5px; `; const CommentInput = styled.input` border: none; @@ -242,6 +245,16 @@ const CommentContainer = styled.div` text-align: left; padding: 0px; border-radius: 5px; + position: relative; + padding-top: 20px; + &:before { + content: ""; + border-top: 1px solid rgba(0, 0, 0, 0.1); + position: absolute; + height: 10px; + width: 80%; + top: -10px; + } `; const CommentsDiv = styled.div` @@ -265,12 +278,12 @@ const CommentCount = styled.div` const CommentAuthor = styled.span` font-weight: bold; margin-right: 10px; + font-size: 13px; `; const CommentDate = styled.span` color: #888; - font-size: 12px; - margin-bottom: 5px; + font-size: 11px; `; const CommentTextDiv = styled.div` diff --git a/client/src/components/communityComponents/index.tsx b/client/src/components/communityComponents/index.tsx index 8339110c..e51a5802 100644 --- a/client/src/components/communityComponents/index.tsx +++ b/client/src/components/communityComponents/index.tsx @@ -365,21 +365,25 @@ const BoardTextAreaNoText = styled.div` `; const BoardTextArea = styled.div` - box-shadow: 1px 0px 7px 0px rgba(0, 0, 0, 0.3); width: 98%; - border: 1px solid#f3f3f3; + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(0, 0, 0, 0.4); + border-left: 1px solid rgba(0, 0, 0, 0.03); + border-bottom: 1px solid rgba(0, 0, 0, 0.6); margin: 0 auto; padding-bottom: 10px; padding-top: 10px; color: #333; + margin-bottom: 5px; `; const BoardText = styled.div` margin-top: 10px; - margin-left: 25px; + margin-left: 55px; max-width: 300px; min-height: 100px; height: 150px; max-height: 250px; + text-align: left; // 왼쪽 정렬 .memberName {