Skip to content

Commit

Permalink
[Feat] 댓글 관련 알림메세지 및 현금 충전안내 화면 구현
Browse files Browse the repository at this point in the history 
- 게시판 글 작성 시 토스트 메시지 뜨도록 구현 (기존 alert 메시지 대체)
- 최초 회원가입 후 현금 미충전 시 현금 충전알림 화면 구현

Issues #122
  • Loading branch information
@novice1993
novice1993 committed Sep 19, 2023
2 parents 41b6e3b + bf6093b commit 473322b
Show file tree
Hide file tree
Showing 5 changed files with 193 additions and 54 deletions.
6 changes: 3 additions & 3 deletions client/src/components/CentralChartMenu/ExpandScreenBtn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ const ExpandScreenBtn = (props: OwnProps) => {
const leftExpandState = expandState.left;
const rightExpandState = expandState.right;

const expandLeft: string = leftExpandState ? "축소" : "확장";
const expandRight: string = rightExpandState ? "축소" : "확장";
const expandLeft: string = leftExpandState ? ">" : "<";
const expandRight: string = rightExpandState ? "<" : ">";

const dispatch = useDispatch();
const [leftBtnHover, setLetfBtnHover] = useState(false);
Expand Down Expand Up @@ -86,7 +86,7 @@ const Button = styled.div<OwnProps>`
}
.text {
font-size: ${(props) => (props.buttonHover ? "15px" : "1px")};
font-size: ${(props) => (props.buttonHover ? "30px" : "1px")};
color: ${(props) => (props.buttonHover ? "black" : "#dce9fc")};
transition: color 1s ease, font-size 1s ease;
}
Expand Down
26 changes: 25 additions & 1 deletion client/src/components/StockOrderSection/Index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ const errorMessage: string = "정보를 불러올 수 없습니다";
const errorButtonText: string = "닫기";
const loginRequiredText: string = "로그인이 필요한 서비스입니다";
const loginBtnText: string = "StockHolm 로그인";
const moneyRequireText: string = "현금 충전이 필요한 서비스입니다";
const moenyRequireBtnText: string = "현금 충전하러 가기";
const upperbarTitle: string = "주식주문";
const marketType: string = "코스피";

Expand Down Expand Up @@ -86,7 +88,17 @@ const StockOrderSection = () => {
}

if (cashError) {
return <p>현금충전 필요</p>;
return (
<Container orderSet={stockOrderSet}>
<UpperBar>
<h2 className="Title">{upperbarTitle}</h2>
<button className="CloseButton" onClick={handleStockOrderClose}>
&#10005;
</button>
</UpperBar>
<MoneyReqireIndicator />
</Container>
);
}

// 3) 데이터 받아오기 성공
Expand Down Expand Up @@ -155,6 +167,16 @@ const LoginRequestIndicator = () => {
);
};

// 현금 충전요청 화면
const MoneyReqireIndicator = () => {
return (
<MoneyRequireContainer>
<div className="Notification">{moneyRequireText}</div>
<button className="LoginButton">{moenyRequireBtnText}</button>
</MoneyRequireContainer>
);
};

// component 생성
const Container = styled.aside<{ orderSet: boolean }>`
position: fixed;
Expand Down Expand Up @@ -251,6 +273,8 @@ const LoginRequestContainer = styled.div`
}
`;

const MoneyRequireContainer = styled(LoginRequestContainer)``;

const StockName = styled.section`
width: 100%;
height: 64px;
Expand Down
105 changes: 79 additions & 26 deletions client/src/components/communityComponents/Comments.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { toast } from "react-toastify";
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 @@ -67,11 +67,15 @@ const Comments = ({ boardId }: { boardId: number }) => {

const handleDeleteComment = async (commentId: 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,
},
});
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,
},
}
);
if (response.status === 200) {
// 삭제 성공 처리
toast.success("댓글이 삭제 되었습니다", {
Expand All @@ -82,10 +86,7 @@ const Comments = ({ boardId }: { boardId: number }) => {
const updatedCommentData = commentData.filter((el: CommentContent) => el.id !== commentId);
setCommentData(updatedCommentData);
} else {
toast.error("댓글 삭제 실패", {
autoClose: 1000,
});
// alert("댓글 삭제 실패");
alert("댓글 삭제 실패");
}
} catch (error) {
console.error("댓글 삭제 중 오류 발생:", error);
Expand Down Expand Up @@ -129,17 +130,23 @@ const Comments = ({ boardId }: { boardId: number }) => {
<CommentInput type="text" value={commentsValue} onChange={handleOnChange} />
<CommentInputSubmit onClick={handleClickSubmit}>{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 @@ -162,8 +169,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 @@ -177,26 +194,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 @@ -206,6 +255,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 @@ -218,14 +269,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
Loading

0 comments on commit 473322b

Please sign in to comment.