Merge pull request #146 from Gamegoo-repo/fix/#139

[Fix] Q&A 수정
Gamegoo-repo · Oct 27, 2024 · db79113 · db79113
2 parents d5304f5 + 8b2767a
commit db79113
Show file tree

Hide file tree

Showing 19 changed files with 420 additions and 295 deletions.
diff --git a/src/components/board/Table.tsx b/src/components/board/Table.tsx
@@ -192,8 +192,8 @@ const Table = (props: TableProps) => {
                         !data.tier
                           ? "/assets/images/tier/unranked.svg"
                           : `/assets/images/tier/${toLowerCaseString(
-                              data.tier
-                            )}.svg`
+                            data.tier
+                          )}.svg`
                       }
                       width={28}
                       height={26}

diff --git a/src/components/chat/ChatLayout.tsx b/src/components/chat/ChatLayout.tsx
@@ -46,6 +46,7 @@ import {
   rejectFriendReq,
   reqFriend,
 } from "@/api/friends";
+import { notify } from "@/hooks/notify";
 
 interface System {
   flag: number;
@@ -231,7 +232,8 @@ const ChatLayout = (props: ChatLayoutProps) => {
     };
 
     try {
-      await postMannerValue(params);
+      await postMannerValue(params)
+      await notify({ text: "매너 평가가 완료되었습니다", icon: '👌🏼', type: 'success' });
       await handleModalClose();
       setIsEditMode(false);
     } catch (error) {
@@ -250,34 +252,29 @@ const ChatLayout = (props: ChatLayoutProps) => {
     };
 
     try {
-      await postBadMannerValue(params);
+      await postBadMannerValue(params)
+      await notify({ text: "비매너 평가가 완료되었습니다", icon: '👌🏼', type: 'success' });
       await handleModalClose();
       setIsEditMode(false);
     } catch (error) {
       console.error(error);
     }
   };
 
+
   /* 매너, 비매너 평가 수정 */
   const handleMannerEdit = async (type: string) => {
     const params = {
-      mannerRatingKeywordList:
-        type === "manner" ? checkedMannerItems : checkedBadMannerItems,
+      mannerRatingKeywordList: type === 'manner' ? checkedMannerItems : checkedBadMannerItems,
     };
 
     try {
-      if (
-        type === "manner" &&
-        isMannerValue &&
-        isMannerValue.mannerId !== null
-      ) {
+      if (type === 'manner' && isMannerValue && isMannerValue.mannerId !== null) {
         await editManners(isMannerValue.mannerId, params);
-      } else if (
-        type === "badManner" &&
-        isBadMannerValue &&
-        isBadMannerValue.mannerId !== null
-      ) {
+        await notify({ text: "매너 평가 수정이 완료되었습니다", icon: '👌🏼', type: 'success' });
+      } else if (type === 'badManner' && isBadMannerValue && isBadMannerValue.mannerId !== null) {
         await editManners(isBadMannerValue.mannerId, params);
+        await notify({ text: "비매너 평가 수정이 완료되었습니다", icon: '👌🏼', type: 'success' });
       }
       await handleModalClose();
       setIsEditMode(false);
@@ -406,6 +403,7 @@ const ChatLayout = (props: ChatLayoutProps) => {
     );
   };
 
+
   /* 비매너 평가 체크박스 */
   const handleBadMannerCheckboxChange = (checked: number) => {
     setCheckedBadMannerItems((prev) =>
@@ -426,6 +424,7 @@ const ChatLayout = (props: ChatLayoutProps) => {
     }
   };
 
+
   /* 친구 요청 취소 */
   const handleCancelFriendReq = async () => {
     if (!chatEnterData) return;
@@ -508,55 +507,55 @@ const ChatLayout = (props: ChatLayoutProps) => {
   /* 더보기 버튼 */
   const menuItems: MoreBoxMenuItems[] = chatEnterData?.blind
     ? [
-        {
-          text: "채팅방 나가기",
-          onClick: (e: React.MouseEvent) => handleModalChange(e, "leave"),
-        },
-      ]
+      {
+        text: "채팅방 나가기",
+        onClick: (e: React.MouseEvent) => handleModalChange(e, "leave"),
+      },
+    ]
     : ([
-        {
-          text: "채팅방 나가기",
-          onClick: (e: React.MouseEvent) => handleModalChange(e, "leave"),
-        },
-        // 친구 추가 조건: 친구가 아니고, 친구 요청도 하지 않은 경우
-        !chatEnterData?.friend &&
-          chatEnterData?.friendRequestMemberId === null && {
-            text: "친구 추가",
-            onClick: handleFriendAdd,
-          },
-        // 친구 취소 조건: 친구인 경우
-        chatEnterData?.friend && {
-          text: "친구 삭제",
-          onClick: handleFriendDelete,
-        },
-        // 친구 요청 취소 조건: 친구가 아니고, 친구 요청을 이미 한 경우
-        !chatEnterData?.friend &&
-          chatEnterData?.friendRequestMemberId === isUser.id && {
-            text: "친구 요청 취소",
-            onClick: handleCancelFriendReq,
-          },
-        // 친구 요청 수정 및 거절 조건: 친구가 아니고, 친구 요청을 받은 경우
-        !chatEnterData?.friend &&
-          chatEnterData?.friendRequestMemberId !== null &&
-          chatEnterData?.friendRequestMemberId !== isUser.id && {
-            text: "친구 요청 수락",
-            onClick: handleAcceptFriendReq,
-          },
-        !chatEnterData?.friend &&
-          chatEnterData?.friendRequestMemberId !== null &&
-          chatEnterData?.friendRequestMemberId !== isUser.id && {
-            text: "친구 요청 거절",
-            onClick: handleRejectFriendReq,
-          },
-
-        {
-          text: "차단하기",
-          onClick: (e: React.MouseEvent) => handleModalChange(e, "block"),
-        },
-        { text: "신고하기", onClick: handleReportClick },
-        { text: "매너 평가", onClick: handleMannerClick },
-        { text: "비매너 평가", onClick: handleBadMannerClick },
-      ].filter((item) => item) as MoreBoxMenuItems[]);
+      {
+        text: "채팅방 나가기",
+        onClick: (e: React.MouseEvent) => handleModalChange(e, "leave"),
+      },
+      // 친구 추가 조건: 친구가 아니고, 친구 요청도 하지 않은 경우
+      !chatEnterData?.friend &&
+      chatEnterData?.friendRequestMemberId === null && {
+        text: "친구 추가",
+        onClick: handleFriendAdd,
+      },
+      // 친구 취소 조건: 친구인 경우
+      chatEnterData?.friend && {
+        text: "친구 삭제",
+        onClick: handleFriendDelete,
+      },
+      // 친구 요청 취소 조건: 친구가 아니고, 친구 요청을 이미 한 경우
+      !chatEnterData?.friend &&
+      chatEnterData?.friendRequestMemberId === isUser.id && {
+        text: "친구 요청 취소",
+        onClick: handleCancelFriendReq,
+      },
+      // 친구 요청 수정 및 거절 조건: 친구가 아니고, 친구 요청을 받은 경우
+      !chatEnterData?.friend &&
+      chatEnterData?.friendRequestMemberId !== null &&
+      chatEnterData?.friendRequestMemberId !== isUser.id && {
+        text: "친구 요청 수락",
+        onClick: handleAcceptFriendReq,
+      },
+      !chatEnterData?.friend &&
+      chatEnterData?.friendRequestMemberId !== null &&
+      chatEnterData?.friendRequestMemberId !== isUser.id && {
+        text: "친구 요청 거절",
+        onClick: handleRejectFriendReq,
+      },
+
+      {
+        text: "차단하기",
+        onClick: (e: React.MouseEvent) => handleModalChange(e, "block"),
+      },
+      { text: "신고하기", onClick: handleReportClick },
+      { text: "매너 평가", onClick: handleMannerClick },
+      { text: "비매너 평가", onClick: handleBadMannerClick },
+    ].filter((item) => item) as MoreBoxMenuItems[]);
 
   /* 더보기 버튼 외부 클릭 시 닫힘 */
   const handleOutsideModalClick = (event: React.MouseEvent<HTMLDivElement>) => {

diff --git a/src/components/chat/ChatRoomList.tsx b/src/components/chat/ChatRoomList.tsx
@@ -74,9 +74,9 @@ const ChatRoomList = (props: ChatRoomListProps) => {
     }
   };
 
-  useEffect(() => {
-    handleFetchChatrooms();
-  }, [isModalType, reloadChatrooms, activeTab, mannerSystemMessage]);
+    useEffect(() => {
+        handleFetchChatrooms();
+    }, [isModalType, reloadChatrooms, activeTab, mannerSystemMessage, newMessage]);
 
   /* 대화 목록 페이지 - 스크롤이 끝에 도달하면 다음 페이지 가져오기 */
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {

diff --git a/src/components/chat/Layout.tsx b/src/components/chat/Layout.tsx
@@ -26,6 +26,7 @@ import Checkbox from "../common/Checkbox";
 import Input from "../common/Input";
 import { REPORT_REASON } from "@/data/report";
 import { blockMember, reportMember } from "@/api/member";
+import { notify } from "@/hooks/notify";
 
 const Layout = () => {
     const dispatch = useDispatch();
@@ -35,7 +36,7 @@ const Layout = () => {
     const [favoriteFriends, setFavoriteFriends] = useState<FriendListInterface[]>([]);
     const [isSearching, setIsSearching] = useState(false);
     const tabs = ['친구 목록', '대화방'];
-    const [isMoreBoxOpen, setIsMoreBoxOpen] = useState<number | null>(null); // MoreBox 열림 상태
+    const [isMoreBoxOpen, setIsMoreBoxOpen] = useState<number | null>(null);
     const [isUuid, setIsUuid] = useState("");
     const [selectedChatroom, setSelectedChatroom] = useState<ChatroomList | null>(null);
     const [checkedReportItems, setCheckedReportItems] = useState<number[]>([]);
@@ -291,6 +292,7 @@ const Layout = () => {
 
         try {
             await postMannerValue(params)
+            await notify({ text: "매너 평가가 완료되었습니다", icon: '👌🏼', type: 'success' });
             await handleModalClose();
             setIsEditMode(false);
         } catch (error) {
@@ -310,6 +312,7 @@ const Layout = () => {
 
         try {
             await postBadMannerValue(params)
+            await notify({ text: "비매너 평가가 완료되었습니다", icon: '👌🏼', type: 'success' });
             await handleModalClose();
             setIsEditMode(false);
         } catch (error) {
@@ -340,8 +343,10 @@ const Layout = () => {
         try {
             if (type === 'manner' && isMannerValue && isMannerValue.mannerId !== null) {
                 await editManners(isMannerValue.mannerId, params);
+                await notify({ text: "매너 평가 수정이 완료되었습니다", icon: '👌🏼', type: 'success' });
             } else if (type === 'badManner' && isBadMannerValue && isBadMannerValue.mannerId !== null) {
                 await editManners(isBadMannerValue.mannerId, params);
+                await notify({ text: "비매너 평가 수정이 완료되었습니다", icon: '👌🏼', type: 'success' });
             }
             await handleModalClose();
             setIsEditMode(false);

diff --git a/src/components/chat/MessageList.tsx b/src/components/chat/MessageList.tsx
@@ -613,7 +613,7 @@ const ErrorBox = styled.div`
   ${(props) => props.theme.fonts.regular14};
   background: ${theme.colors.white};
   color: rgba(45, 45, 45, 1);
-  box-shadow: 0px 0px 25.3px 0px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0 25.3px 0 rgba(0, 0, 0, 0.15);
   border-radius: 10px;
   white-space: nowrap;
 `;
diff --git a/src/components/common/Alert.tsx b/src/components/common/Alert.tsx
@@ -35,6 +35,10 @@ const Overlay = styled.div`
   background:#0000009C;
   inset: 0;
   z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 `;
 
 const Wrapper = styled.div`

diff --git a/src/components/common/Box.tsx b/src/components/common/Box.tsx
@@ -51,7 +51,7 @@ const StyledBox = styled.div<{ $shape: ShapeType; $profiletype?: profileType }>`
       ${(props) => props.theme.fonts.bold12}
     `}
 
-${(props) =>
+  ${(props) =>
     (props.$profiletype === "square" || props.$profiletype === "none") &&
     css`
       height: 34px;

diff --git a/src/components/crBoard/CRModal.tsx b/src/components/crBoard/CRModal.tsx
@@ -5,18 +5,19 @@ import { createPortal } from "react-dom";
 
 interface BoardModalProps {
   type: "posting" | "reading";
+  hideContent?: boolean;
   onClose: () => void;
   children: string | React.ReactNode;
 }
 
 const CRModal = (props: BoardModalProps) => {
-  const { type, children, onClose } = props;
+  const { type, hideContent, children, onClose } = props;
 
   const modalRoot = document.getElementById("modal-root") as HTMLElement;
 
   return createPortal(
-    <Overlay>
-      <Wrapper $type={type}>
+    <Overlay $hideContent={hideContent}>
+      <Wrapper $type={type} $hideContent={hideContent}>
         <Header $type={type}>
           <CloseButton $type={type}>
             <CloseImage
@@ -39,16 +40,16 @@ const CRModal = (props: BoardModalProps) => {
 
 export default CRModal;
 
-const Overlay = styled.div`
+const Overlay = styled.div<{ $hideContent: boolean | undefined }>`
   display: flex;
   justify-content: center;
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 100;
-  background: #0000009c;
-  inset: 0;
-  overflow-y: scroll;
+  background: ${({ $hideContent }) => ($hideContent ? "unset" : '#0000009c')};
+  overflow-y: ${({ $hideContent }) => ($hideContent ? "unset" : 'scroll')};
+  inset: ${({ $hideContent }) => ($hideContent ? "unset" : 0)};
 
   /* 스크롤바 */
   &::-webkit-scrollbar {
@@ -66,10 +67,8 @@ const Overlay = styled.div`
   }
 `;
 
-const Wrapper = styled.div<{ $type: string }>`
-  background: ${theme.colors.white};
+const Wrapper = styled.div<{ $type: string; $hideContent: boolean | undefined }>`
   border-radius: 20px;
-  box-shadow: 0 4px 96.4px 0 #00000040;
   max-width: 555px;
   width: 100%;
   position: relative;
@@ -78,6 +77,8 @@ const Wrapper = styled.div<{ $type: string }>`
   height: auto;
   margin: 50px;
   padding: 0 20px;
+  background:  ${({ $hideContent }) => ($hideContent ? "unset" : `${theme.colors.white}`)};
+  box-shadow:  ${({ $hideContent }) => ($hideContent ? "unset" : "0 4px 96.4px 0 #00000040")};
 
   /* 스크롤바 */
   &::-webkit-scrollbar {

diff --git a/src/components/createBoard/PostBoard.tsx b/src/components/createBoard/PostBoard.tsx
@@ -91,15 +91,14 @@ const PostBoard = (props: PostBoardProps) => {
     }
   };
 
-  useEffect(() => {
-    fetchProfile();
-  }, []);
 
-  useEffect(() => {
-    return () => {
-      dispatch(setClosePostingModal());
-    }
-  }, [])
+useEffect(() => {
+  fetchProfile();
+
+  return () => {
+    dispatch(setClosePostingModal());
+  };
+}, []);
 
   /* 유저가 게시판에 올린 글에 대한 데이터 */
   useEffect(() => {