Merge pull request #103 from KUIT-Space/feat#51-chat_detail

Fix: 정산 탭뷰일때 초기 멤버 목록 표시 안되는 문제 해결
KUIT-Space · Aug 19, 2024 · 8084dc1 · 8084dc1
2 parents 7ca9fe1 + 5af6b09
commit 8084dc1
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 163 deletions.
diff --git a/src/apis/Pay/PayPageAPI.ts b/src/apis/Pay/PayPageAPI.ts
@@ -1,13 +1,14 @@
-import { DetailPayData, PayReceiveInfo, PayRequestInfo } from "@/pages/PayPage/PayPage";
+import { useNavigate } from "react-router-dom";
+
 import {
   createRequestOptionsJSON,
-  RequestOptions,
   createRequestOptionsJSON_AUTH,
   fetchApi,
+  RequestOptions,
 } from "@/apis/_createRequestOptions";
-import { BankInfo, ChatUserInfoInSpace } from "@/pages/PayPage/CreateRequestPage";
-import { useNavigate } from "react-router-dom";
 import { UserInfoInSpace } from "@/apis/Space/SpaceSearchAllUserApi";
+import { BankInfo, ChatUserInfoInSpace } from "@/pages/PayPage/CreateRequestPage";
+import { DetailPayData, PayReceiveInfo, PayRequestInfo } from "@/pages/PayPage/PayPage";
 
 interface SpaceSearchAllUserApiResponseType {
   code: number;
@@ -203,24 +204,27 @@ export const getAllChatMemberApi = async (
   if (response) {
     response.json().then((data) => {
       const _temp: chatRoomList[] = data.result.chatRoomList;
-      let _temp2: ChatUserInfoInSpace[] = new Array();
-      _temp.map(async (value, index) => {
-        let _temp3: ChatUserInfoInSpace = {
-          chatRoomId: -1,
-          chatRoomName: "",
-          userList: [],
-          imgUrl: "",
-        };
-        _temp3.chatRoomId = value.id;
-        _temp3.chatRoomName = value.name;
-        _temp3.imgUrl = value.imgUrl;
-        getChatRoomMemberApi(spaceID, value.id).then((res) => {
-          res ? (_temp3.userList = res.result.userList) : (_temp3.userList = []);
-          _temp2.push(_temp3);
-        });
+      const _temp2: ChatUserInfoInSpace[] = [];
+      Promise.all(
+        _temp.map((value) => {
+          const _temp3: ChatUserInfoInSpace = {
+            chatRoomId: value.id,
+            chatRoomName: value.name,
+            userList: [],
+            imgUrl: value.imgUrl,
+          };
+
+          return getChatRoomMemberApi(spaceID, value.id).then((res) => {
+            if (res) {
+              _temp3.userList = res.result.userList;
+              _temp2.push(_temp3);
+              return _temp3;
+            }
+          });
+        }),
+      ).then((res) => {
+        setChatUserInfoData(_temp2);
       });
-
-      setChatUserInfoData(_temp2);
     });
   }
 };

diff --git a/src/components/TopBarText.tsx b/src/components/TopBarText.tsx
@@ -16,17 +16,30 @@ interface topbarProps {
   center: string | React.ReactNode;
   right: string | React.ReactNode;
   rightHandler?: () => void;
+  backHandler?: () => void;
+  logoHandler?: () => void;
 }
 
-const TopBarText: FC<topbarProps> = ({ left, center, right, rightHandler }) => {
+const TopBarText: FC<topbarProps> = ({
+  left,
+  center,
+  right,
+  rightHandler,
+  backHandler,
+  logoHandler,
+}) => {
   const navigate = useNavigate();
   switch (left) {
     case "logo":
       return (
         <sty.StyledTopBarDiv>
           <sty.StyledLeftDiv
             onClick={() => {
-              navigate("/");
+              if (logoHandler) {
+                logoHandler();
+              } else {
+                navigate("/");
+              }
             }}
           >
             <img src={logo}></img>
@@ -49,7 +62,11 @@ const TopBarText: FC<topbarProps> = ({ left, center, right, rightHandler }) => {
         <sty.StyledTopBarDiv>
           <sty.StyledLeftDiv
             onClick={() => {
-              navigate(-1);
+              if (backHandler) {
+                backHandler();
+              } else {
+                navigate(-1);
+              }
             }}
           >
             <img src={back}></img>

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
diff --git a/src/pages/PayPage/CreatePayComponents.tsx b/src/pages/PayPage/CreatePayComponents.tsx
@@ -1,61 +1,54 @@
-import CheckBox from "@/components/CheckBox";
-import { Member } from "@/pages/ChatPage/ChatCreatePage/ChatCreatePage.styled";
-import ReactImg from "@/assets/react.svg";
 import { useState } from "react";
 
+import { UserInfoInSpace } from "@/apis/Space/SpaceSearchAllUserApi";
+import CheckBox from "@/components/CheckBox";
+import { Member } from "@/pages/ChatPage/ChatCreatePage/ChatCreatePage.styled";
 import * as s from "@/pages/PayPage/PayPage.styled";
+import { getUserDefaultImageURL } from "@/utils/getUserDefaultImageURL";
+
 import { ChatUserInfoInSpace } from "./CreateRequestPage";
-import { UserInfoInSpace } from "@/apis/Space/SpaceSearchAllUserApi";
-interface payChatDivtype {
-  img: string;
-  name: string;
-  cnt: number;
-}
+// interface payChatDivtype {
+//   img: string;
+//   name: string;
+//   cnt: number;
+// }
 
-const PayChatMemberDiv = ({ props }: { props: UserInfoInSpace }) => {
-  const imgUrl = props.profileImgUrl === null ? undefined : props.profileImgUrl;
+const PayChatMemberDiv = ({ info }: { info: UserInfoInSpace }) => {
   return (
     <s.RowFlexDiv style={{ alignItems: "center" }}>
-      <img style={{ width: "2.5rem", height: "2.5rem", marginLeft: "1.875rem" }} src={imgUrl} />
+      <img
+        style={{ width: "2.5rem", height: "2.5rem", marginLeft: "1.875rem" }}
+        src={info.profileImgUrl ?? getUserDefaultImageURL(info.userId)}
+      />
       <span className="name" style={{ marginLeft: "0.75rem" }}>
-        {props.userName}
+        {info.userName}
       </span>
       <CheckBox></CheckBox>
     </s.RowFlexDiv>
   );
 };
-export const PayChatDiv = ({ props }: { props: ChatUserInfoInSpace }) => {
-  console.log(props);
+export const PayChatDiv = ({ info }: { info: ChatUserInfoInSpace }) => {
   const [flag, setFlag] = useState(false);
   const controlFlag = () => {
     setFlag(!flag);
   };
+
   return (
     <s.ColumnFlexDiv>
       <Member>
         <section>
-          <img src={props.imgUrl} />
-          <span className="name">{props.chatRoomName}</span>
-          <s.CountText className="count">{props.userList?.length}</s.CountText>
+          <img src={info.imgUrl} />
+          <span className="name">{info.chatRoomName}</span>
+          <s.CountText className="count">{info.userList?.length}</s.CountText>
         </section>
         {flag ? (
-          <CheckBox
-            checked={true}
-            onClick={() => {
-              controlFlag();
-            }}
-          ></CheckBox>
+          <CheckBox checked={true} onClick={controlFlag}></CheckBox>
         ) : (
-          <CheckBox
-            checked={false}
-            onClick={() => {
-              controlFlag();
-            }}
-          ></CheckBox>
+          <CheckBox checked={false} onClick={controlFlag}></CheckBox>
         )}
       </Member>
-      {props.userList?.map((value, index) => {
-        return <PayChatMemberDiv props={value}></PayChatMemberDiv>;
+      {info.userList?.map((value, index) => {
+        return <PayChatMemberDiv key={index} info={value}></PayChatMemberDiv>;
       })}
     </s.ColumnFlexDiv>
   );