Merge pull request #142 from codestates-seb/dev-client#122/detailFix

[FE] 게시판 알림 메세지 및 현금충전 알림 화면 구현
codestates-seb · Sep 19, 2023 · ba69ae7 · ba69ae7
2 parents bf6093b + 473322b
commit ba69ae7
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 94 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -24,6 +24,7 @@
     "react-query": "^3.39.3",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
+    "react-spinners": "^0.13.8",
     "react-toastify": "^9.1.3",
     "redux-persist": "^6.0.0",
     "styled-components": "^6.0.7"

diff --git a/client/src/components/CentralChart/CompareList.tsx b/client/src/components/CentralChart/CompareList.tsx
@@ -27,7 +27,7 @@ interface OwnProps {
 
 const Contianer = styled.div`
   &:hover {
-    color: black;
+    color: #19488a;
     transition: color 0.3s ease;
     cursor: pointer;
   }

diff --git a/client/src/components/CentralChartMenu/ExpandScreenBtn.tsx b/client/src/components/CentralChartMenu/ExpandScreenBtn.tsx
@@ -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);
@@ -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;
   }

diff --git a/client/src/components/Signups/Guide.tsx b/client/src/components/Signups/Guide.tsx
@@ -3,18 +3,17 @@ import styled from "styled-components";
 
 const STRINGS = {
   GUIDE_TITLE: "StockHolm 가이드",
-  LOGIN_GUIDE: "로그인을 하면 다양한 기능을 활용할 수 있습니다.",
-  CASH_GUIDE: "프로필 버튼 - 현금 탭을 으로 이동하면 현금을 충전할 수 있습니다.",
+  LOGIN_GUIDE: "☑️ 로그인을 하면 다양한 기능을 활용할 수 있습니다",
+  CASH_GUIDE: "☑️ 현금은 프로필 현금 충천 탭에서 충전할 수 있습니다",
 };
 
-
 const GuideModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       onClose();
     }
   };
-  
+
   return (
     <ModalBackground onKeyDown={handleKeyDown} tabIndex={0}>
       <ModalContainer>
@@ -59,7 +58,7 @@ const ModalContainer = styled.div`
 const Title = styled.h2`
   margin-bottom: 20px;
   font-size: 1.6rem;
-  font-weight: 400;
+  font-weight: 550;
 `;
 
 const CloseButton = styled.button`
@@ -74,9 +73,10 @@ const CloseButton = styled.button`
 `;
 
 const Content = styled.p`
-  margin: 15px 0; // 간격 조정
-  font-size: 1.1rem; // 폰트 크기 증가
-  line-height: 1.5;
+  margin: 15px; // 간격 조정
+  font-size: 0.95rem; // 폰트 크기 증가
+  font-weight: 500;
+  line-height: 70%;
   color: #555; // 색상 변경
   text-align: center; // 텍스트 중앙 정렬
 `;
diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx
@@ -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 = "코스피";
 
@@ -53,7 +55,7 @@ const StockOrderSection = () => {
 
   // fetching 데이터 loading, error 여부
   const isLoading = stockInfoLoading || stockPriceLoading || cashLoading || orderRecordLoading || holdingStockLoading || compnayListLoading;
-  const isError = stockInfoError || stockPriceError || cashError || orderRecordError || holdingStockError || companyListError;
+  const isError = stockInfoError || stockPriceError || orderRecordError || holdingStockError || companyListError;
 
   // 1) 데이터 로딩 중
   if (isLoading) {
@@ -85,6 +87,20 @@ const StockOrderSection = () => {
     );
   }
 
+  if (cashError) {
+    return (
+      <Container orderSet={stockOrderSet}>
+        <UpperBar>
+          <h2 className="Title">{upperbarTitle}</h2>
+          <button className="CloseButton" onClick={handleStockOrderClose}>
+            &#10005;
+          </button>
+        </UpperBar>
+        <MoneyReqireIndicator />
+      </Container>
+    );
+  }
+
   // 3) 데이터 받아오기 성공
   const corpName = stockInfo.korName;
   const stockCode = stockInfo.code;
@@ -151,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;
@@ -247,6 +273,8 @@ const LoginRequestContainer = styled.div`
   }
 `;
 
+const MoneyRequireContainer = styled(LoginRequestContainer)``;
+
 const StockName = styled.section`
   width: 100%;
   height: 64px;

diff --git a/client/src/components/communityComponents/Comments.tsx b/client/src/components/communityComponents/Comments.tsx
@@ -1,5 +1,6 @@
 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 }) => {
@@ -13,9 +14,7 @@ const Comments = ({ boardId }: { boardId: number }) => {
 
   const fetchCommentsFromServer = async () => {
     try {
-      const response = await axios.get(
-        `http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/api/boards/${boardId}`
-      );
+      const response = await axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/api/boards/${boardId}`);
 
       // 게시판 데이터에서 댓글 부분을 추출합니다.
       const comments = response.data.comments || [];
@@ -43,22 +42,24 @@ const Comments = ({ boardId }: { boardId: number }) => {
       };
 
       try {
-        const response = await axios.post(
-          `http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/api/boards/${boardId}/comments`,
-          newCommentData,
-          {
-            headers: {
-              Authorization: accessToken,
-            },
-          }
-        );
+        const response = await axios.post(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/api/boards/${boardId}/comments`, newCommentData, {
+          headers: {
+            Authorization: accessToken,
+          },
+        });
         if (response.status === 201) {
           setCommentsValue("");
           fetchCommentsFromServer();
         } else {
+          toast.error("댓글 작성 실패", {
+            autoClose: 1000,
+          });
           console.log("댓글 작성 실패:", response.data);
         }
       } catch (error) {
+        toast.error("댓글 작성 실패", {
+          autoClose: 1000,
+        });
         console.error("댓글 작성 중 오류 발생:", error);
       }
     }
@@ -77,19 +78,22 @@ const Comments = ({ boardId }: { boardId: number }) => {
       );
       if (response.status === 200) {
         // 삭제 성공 처리
-        alert("댓글이 삭제되었습니다");
+        toast.success("댓글이 삭제 되었습니다", {
+          autoClose: 1000,
+        });
+        // alert("댓글이 삭제되었습니다");
 
-        // const updatedCommentData = commentData.filter(
-        //   (el: CommentContent) => el.commentId !== commentId
-        // );
-        // setCommentData(updatedCommentData);
+        const updatedCommentData = commentData.filter((el: CommentContent) => el.id !== commentId);
+        setCommentData(updatedCommentData);
       } else {
-        alert("삭제되었습니다");
-        window.location.href = "/community";
+        alert("댓글 삭제 실패");
       }
     } catch (error) {
-      console.error("작성자만 삭제 할 수 있습니다:", error);
-      alert("작성자만 삭제 할 수 있습니다");
+      console.error("댓글 삭제 중 오류 발생:", error);
+      toast.error("댓글 삭제 실패", {
+        autoClose: 1000,
+      });
+      // alert("댓글 삭제 실패");
     }
   };
 
@@ -103,11 +107,8 @@ const Comments = ({ boardId }: { boardId: number }) => {
     const currentTime: Date = new Date();
     const createdAtTime: Date = new Date(createdAt);
 
-    const timeDifferenceInMilliseconds: number =
-      currentTime.getTime() - createdAtTime.getTime();
-    const timeDifferenceInSeconds = Math.floor(
-      timeDifferenceInMilliseconds / 1000
-    );
+    const timeDifferenceInMilliseconds: number = currentTime.getTime() - createdAtTime.getTime();
+    const timeDifferenceInSeconds = Math.floor(timeDifferenceInMilliseconds / 1000);
 
     if (timeDifferenceInSeconds < 60) {
       return "방금 전";
@@ -126,14 +127,8 @@ const Comments = ({ boardId }: { boardId: number }) => {
   return (
     <CommentContainer>
       <div>
-        <CommentInput
-          type="text"
-          value={commentsValue}
-          onChange={handleOnChange}
-        />
-        <CommentInputSubmit onClick={handleClickSubmit}>
-          {CommentText.write}
-        </CommentInputSubmit>
+        <CommentInput type="text" value={commentsValue} onChange={handleOnChange} />
+        <CommentInputSubmit onClick={handleClickSubmit}>{CommentText.write}</CommentInputSubmit>
         <CommentCount onClick={handleShowMoreComments}>
           {CommentText.replyCount} {commentData.length}
           {CommentText.replyText}
@@ -149,11 +144,7 @@ const Comments = ({ boardId }: { boardId: number }) => {
             </CommentsDiv>
             <CommentsDiv key={el.id}>
               <CommentTextDiv>{el.content}</CommentTextDiv>
-              <CommentDeleteButton
-                onClick={() => handleDeleteComment(el.commentId)}
-              >
-                {CommentText.delete}
-              </CommentDeleteButton>
+              <CommentDeleteButton onClick={() => handleDeleteComment(el.commentId)}>{CommentText.delete}</CommentDeleteButton>
             </CommentsDiv>
           </CommentArea>
         ))}