[Feat] 게시판 글작성 관련 토스트 메시지 구현

- 게시판 글 작성 관련한 토스트 메시지 구현 (기존 alert 메세지 대체) Issues #122
codestates-seb · Sep 19, 2023 · f3a8c32 · f3a8c32
1 parent b7fb08f
commit f3a8c32
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 83 deletions.
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";
 
 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,51 +42,57 @@ 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);
       }
     }
   };
 
   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) {
         // 삭제 성공 처리
-        alert("댓글이 삭제되었습니다");
+        toast.success("댓글이 삭제 되었습니다", {
+          autoClose: 1000,
+        });
+        // alert("댓글이 삭제되었습니다");
 
-        const updatedCommentData = commentData.filter(
-          (el: CommentContent) => el.id !== commentId
-        );
+        const updatedCommentData = commentData.filter((el: CommentContent) => el.id !== commentId);
         setCommentData(updatedCommentData);
       } else {
-        alert("댓글 삭제 실패");
+        toast.error("댓글 삭제 실패", {
+          autoClose: 1000,
+        });
+        // alert("댓글 삭제 실패");
       }
     } catch (error) {
       console.error("댓글 삭제 중 오류 발생:", error);
-      alert("댓글 삭제 실패");
+      toast.error("댓글 삭제 실패", {
+        autoClose: 1000,
+      });
+      // alert("댓글 삭제 실패");
     }
   };
 
@@ -101,11 +106,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 "방금 전";
@@ -124,14 +126,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}
         </CommentCount>
@@ -142,9 +138,7 @@ const Comments = ({ boardId }: { boardId: number }) => {
               <CommentDate>{getTimeAgoString(el.createdAt)}</CommentDate>
             </div>
             <CommentTextDiv>{el.content}</CommentTextDiv>
-            <CommentDeleteButton onClick={() => handleDeleteComment(el.id)}>
-              삭제
-            </CommentDeleteButton>
+            <CommentDeleteButton onClick={() => handleDeleteComment(el.id)}>삭제</CommentDeleteButton>
           </CommentsDiv>
         ))}
       </div>

diff --git a/client/src/components/communityComponents/index.tsx b/client/src/components/communityComponents/index.tsx
@@ -2,10 +2,10 @@ import { useState, useEffect } from "react";
 import styled from "styled-components";
 import Comments from "./Comments";
 import { DotIcon } from "./IconComponent/Icon";
+import { toast } from "react-toastify";
 import axios from "axios";
 
-const serverUrl =
-  "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/api/boards";
+const serverUrl = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/api/boards";
 
 const TimeLineComponent = () => {
   const [boardData, setBoardData] = useState<BoardData[]>([]);
@@ -70,19 +70,27 @@ const TimeLineComponent = () => {
           },
         });
         if (response.status === 201) {
-          alert("작성 되었습니다");
+          toast.success("작성 되었습니다", {
+            autoClose: 1000,
+          });
           setinputValue(""); // 입력 필드 초기화
 
           fetchBoardDataFromServer();
         } else {
-          alert("작성실패");
+          toast.error("작성실패", {
+            autoClose: 1000,
+          });
         }
       } catch (error) {
         console.log("데이터 추가 중 오류 발생:", error);
-        alert("작성실패");
+        toast.error("작성실패", {
+          autoClose: 1000,
+        });
       }
     } else {
-      alert("내용이 없습니다");
+      toast.info("내용이 없습니다", {
+        autoClose: 1000,
+      });
     }
   };
 
@@ -111,9 +119,7 @@ const TimeLineComponent = () => {
         // 삭제 성공 처리
         alert("삭제되었습니다");
         // 삭제한 게시물을 클라이언트 데이터에서도 제거
-        const updatedBoardData = boardData.filter(
-          (el) => el.boardId !== boardId
-        ); // boardId로 수정
+        const updatedBoardData = boardData.filter((el) => el.boardId !== boardId); // boardId로 수정
         setBoardData(updatedBoardData);
       } else {
         alert("삭제 되었습니다");
@@ -128,26 +134,15 @@ const TimeLineComponent = () => {
 
   const [expandedPosts, setExpandedPosts] = useState<number[]>([]);
   const toggleExpandPost = (boardId: number) => {
-    setExpandedPosts((prevExpandedPosts) =>
-      prevExpandedPosts.includes(boardId)
-        ? prevExpandedPosts.filter((id) => id !== boardId)
-        : [...prevExpandedPosts, boardId]
-    );
+    setExpandedPosts((prevExpandedPosts) => (prevExpandedPosts.includes(boardId) ? prevExpandedPosts.filter((id) => id !== boardId) : [...prevExpandedPosts, boardId]));
   };
 
   return (
     <TimeLine>
-      {openDropDown === false && (
-        <Button onClick={handleSetOpenDropDown}></Button>
-      )}
+      {openDropDown === false && <Button onClick={handleSetOpenDropDown}></Button>}
       {openDropDown === true && (
         <>
-          <DropdownInput
-            type="text"
-            placeholder="이곳에 작성해 주세요"
-            value={inputValue}
-            onChange={handleOnChange}
-          ></DropdownInput>
+          <DropdownInput type="text" placeholder="이곳에 작성해 주세요" value={inputValue} onChange={handleOnChange}></DropdownInput>
 
           <ButtonContainer>
             <SubmitButton onClick={handleClickSubmit}>Submit</SubmitButton>
@@ -158,9 +153,7 @@ const TimeLineComponent = () => {
       <DevideLine></DevideLine>
       <BoardArea dropDown={openDropDown}>
         {boardData.length === 0 ? (
-          <BoardTextAreaNoText>
-            {timeLineText.notYetWriting}
-          </BoardTextAreaNoText>
+          <BoardTextAreaNoText>{timeLineText.notYetWriting}</BoardTextAreaNoText>
         ) : (
           boardData
             .slice()
@@ -171,27 +164,17 @@ const TimeLineComponent = () => {
                   <div onClick={() => handleDotOpen(el.boardId)}>
                     <DotIcon />
                   </div>
-                  {dotMenuOpenMap[el.boardId] && (
-                    <DeleteBoard onClick={() => handleDeleteClick(el.boardId)}>
-                      {timeLineText.delete}
-                    </DeleteBoard>
-                  )}
+                  {dotMenuOpenMap[el.boardId] && <DeleteBoard onClick={() => handleDeleteClick(el.boardId)}>{timeLineText.delete}</DeleteBoard>}
                 </Delete>
                 <BoardText>
                   {el.member}
                   {expandedPosts.includes(el.boardId) ? (
                     el.content
                   ) : (
                     <>
-                      {el.content.length > 50
-                        ? el.content.substring(0, 50) + "..."
-                        : el.content}
+                      {el.content.length > 50 ? el.content.substring(0, 50) + "..." : el.content}
                       <br />
-                      {el.content.length > 50 && (
-                        <div onClick={() => toggleExpandPost(el.boardId)}>
-                          더 보기
-                        </div>
-                      )}
+                      {el.content.length > 50 && <div onClick={() => toggleExpandPost(el.boardId)}>더 보기</div>}
                     </>
                   )}
                 </BoardText>
@@ -309,8 +292,7 @@ const CloseButton = styled(SubmitButton)``;
 //게시판 전체 영역
 const BoardArea = styled.div<{ dropDown: boolean }>`
   text-align: center;
-  height: ${(props) =>
-    props.dropDown ? "calc(100vh - 290px)" : "calc(100vh - 200px)"};
+  height: ${(props) => (props.dropDown ? "calc(100vh - 290px)" : "calc(100vh - 200px)")};
   margin-top: 25px;
   width: 100%;
   overflow-y: auto; // 스크롤 설정