Skip to content

Commit

Permalink
Merge pull request #141 from codestates-seb/dev-client#10/marketTab
Browse files Browse the repository at this point in the history 
[FE]커뮤니티 댓글기능 완성 및 일부 디자인
  • Loading branch information
@sinjw
sinjw authored Sep 19, 2023
2 parents 3bd2910 + 0cb0e64 commit bf6093b
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 50 deletions.
108 changes: 82 additions & 26 deletions client/src/components/communityComponents/Comments.tsx
View file
Original file line number Diff line number Diff line change
@@ -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("");
Expand Down Expand Up @@ -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,
Expand All @@ -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("작성자만 삭제 할 수 있습니다");
}
};

Expand Down Expand Up @@ -133,19 +135,27 @@ const Comments = ({ boardId }: { boardId: number }) => {
{CommentText.write}
</CommentInputSubmit>
<CommentCount onClick={handleShowMoreComments}>
{CommentText.replyCount} {commentData.length} {CommentText.replyText}
{CommentText.replyCount} {commentData.length}
{CommentText.replyText}
</CommentCount>
{commentData.slice(0, visibleComments).map((el: CommentContent) => (
<CommentsDiv key={el.id}>
<div>
&#187; <CommentAuthor>{el.member}</CommentAuthor>
<CommentDate>{getTimeAgoString(el.createdAt)}</CommentDate>
</div>
<CommentTextDiv>{el.content}</CommentTextDiv>
<CommentDeleteButton onClick={() => handleDeleteComment(el.id)}>
삭제
</CommentDeleteButton>
</CommentsDiv>
<CommentArea>
<CommentsDiv key={el.id}>
<div>
<ProFileImage />
<CommentAuthor>{el.member}</CommentAuthor>
<CommentDate>{getTimeAgoString(el.createdAt)}</CommentDate>
</div>
</CommentsDiv>
<CommentsDiv key={el.id}>
<CommentTextDiv>{el.content}</CommentTextDiv>
<CommentDeleteButton
onClick={() => handleDeleteComment(el.commentId)}
>
{CommentText.delete}
</CommentDeleteButton>
</CommentsDiv>
</CommentArea>
))}
</div>
</CommentContainer>
Expand All @@ -168,8 +178,18 @@ const CommentText = {
replyCount: "댓글",
replyText: "개 모두보기",
replyHide: "개 숨기기",
delete: "삭제",
};

const CommentArea = styled.div`
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
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;
outline: none;
Expand All @@ -183,26 +203,58 @@ 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;
cursor: pointer;
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`
font-size: 12px;
margin-top: -20px;
cursor: pointer;
color: #939393;
font-weight: bold;
width: 20%;
text-align: right;
&:hover {
color: #333;
}
`;
const CommentDeleteButton = styled.div``;
const CommentContainer = styled.div`
display: flex;
justify-content: space-around;
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`
Expand All @@ -212,6 +264,8 @@ const CommentsDiv = styled.div`
padding: 0px 10px;
border-radius: 5px;
margin-bottom: 5px;
display: flex;
flex-direction: row;
`;

const CommentCount = styled.div`
Expand All @@ -224,14 +278,16 @@ 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`
margin-top: 5px;
margin-top: 0px;
margin-left: 50px;
width: 80%;
`;
30 changes: 30 additions & 0 deletions client/src/components/communityComponents/IconComponent/Icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,36 @@ export const InvestImage = () => {
</>
);
};

export const ProFileImage = () => {
return (
<>
<link
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>

<ProFileImages className="bx bxs-doughnut-chart"></ProFileImages>
</>
);
};

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;
Expand Down
80 changes: 56 additions & 24 deletions client/src/components/communityComponents/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -117,11 +125,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);
}
};
Expand Down Expand Up @@ -178,7 +186,11 @@ const TimeLineComponent = () => {
)}
</Delete>
<BoardText>
{el.member}
<MemberInfo>
<MemberName>{el.member}</MemberName>
<div>{getTimeAgoString(el.createdAt)}</div>
</MemberInfo>

{expandedPosts.includes(el.boardId) ? (
el.content
) : (
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -337,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 {
Expand Down

0 comments on commit bf6093b

Please sign in to comment.