[Fix] 게시판 레이아웃 깨짐현상 해결

- 게시판 관련하여 글 작성 컴포넌트 렌더링 시 레이아웃 깨짐 현상 수정 - 추가적으로 창닫기 버튼 디자인 수정 Issues #122
codestates-seb · Sep 19, 2023 · ac803c5 · ac803c5
1 parent 38b6f2a
commit ac803c5
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 87 deletions.
diff --git a/client/src/components/communityComponents/Comments.tsx b/client/src/components/communityComponents/Comments.tsx
@@ -13,9 +13,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,15 +41,11 @@ 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();
@@ -66,21 +60,16 @@ const Comments = ({ boardId }: { boardId: number }) => {
 
   const handleDeleteComment = async () => {
     try {
-      const response = await axios.delete(
-        `http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/api/boards/${boardId}/comments`,
-        {
-          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`, {
+        headers: {
+          Authorization: accessToken,
+        },
+      });
       if (response.status === 200) {
         // 삭제 성공 처리
         alert("댓글이 삭제되었습니다");
 
-        const updatedCommentData = commentData.filter(
-          (el: CommentContent) => el.id !== el.commentId
-        );
+        const updatedCommentData = commentData.filter((el: CommentContent) => el.id !== el.commentId);
         setCommentData(updatedCommentData);
       } else {
         alert("댓글 삭제 실패");
@@ -101,11 +90,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 +110,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 +122,7 @@ const Comments = ({ boardId }: { boardId: number }) => {
               <CommentDate>{getTimeAgoString(el.createdAt)}</CommentDate>
             </div>
             <CommentTextDiv>{el.content}</CommentTextDiv>
-            <CommentDeleteButton onClick={() => handleDeleteComment()}>
-              삭제
-            </CommentDeleteButton>
+            <CommentDeleteButton onClick={() => handleDeleteComment()}>삭제</CommentDeleteButton>
           </CommentsDiv>
         ))}
       </div>

diff --git a/client/src/components/communityComponents/index.tsx b/client/src/components/communityComponents/index.tsx
@@ -4,8 +4,7 @@ import Comments from "./Comments";
 import { DotIcon } from "./IconComponent/Icon";
 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[]>([]);
@@ -111,9 +110,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,40 +125,26 @@ 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 && (
         <>
-          <DropDownClose onClick={handleSetOpenDropDown}>
-            <p>{timeLineText.close}</p>
-          </DropDownClose>
-          <DropdownInput
-            type="text"
-            placeholder="이곳에 작성해 주세요"
-            value={inputValue}
-            onChange={handleOnChange}
-          ></DropdownInput>
-
-          <SubmitButton onClick={handleClickSubmit}>Submit</SubmitButton>
+          <DropdownInput type="text" placeholder="이곳에 작성해 주세요" value={inputValue} onChange={handleOnChange}></DropdownInput>
+
+          <ButtonContainer>
+            <SubmitButton onClick={handleClickSubmit}>Submit</SubmitButton>
+            <CloseButton onClick={handleSetOpenDropDown}>Cancle</CloseButton>
+          </ButtonContainer>
         </>
       )}
       <DevideLine></DevideLine>
-      <BoardArea>
+      <BoardArea dropDown={openDropDown}>
         {boardData.length === 0 ? (
-          <BoardTextAreaNoText>
-            {timeLineText.notYetWriting}
-          </BoardTextAreaNoText>
+          <BoardTextAreaNoText>{timeLineText.notYetWriting}</BoardTextAreaNoText>
         ) : (
           boardData
             .slice()
@@ -172,27 +155,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>
@@ -290,15 +263,26 @@ const DevideLine = styled.div`
 `;
 //글 업로드 버튼 및 게시글 영역
 
+const ButtonContainer = styled.div`
+  padding-top: 12px;
+  padding-left: 10px;
+  padding-right: 10px;
+
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
 const SubmitButton = styled.button`
   display: block;
-  width: 60px;
-  height: 30px;
+  width: 43.8%;
+  height: 33px;
   color: #fff;
   border: none;
   background-color: #40797c;
   cursor: pointer;
-  border-radius: 10px;
+  border-radius: 0.3rem;
   margin: 5px auto;
   &:hover {
     background-color: #2d4f51;
@@ -309,11 +293,12 @@ const SubmitButton = styled.button`
   }
 `;
 
+const CloseButton = styled(SubmitButton)``;
+
 //게시판 전체 영역
-const BoardArea = styled.div`
+const BoardArea = styled.div<{ dropDown: boolean }>`
   text-align: center;
-
-  height: calc(100vh - 194px);
+  height: ${(props) => (props.dropDown ? "calc(100vh - 290px)" : "calc(100vh - 200px)")};
   margin-top: 25px;
   width: 100%;
   overflow-y: auto; // 스크롤 설정