#784 송금하지 않은 방이 있는 경우 추가 방 참여 제한

packages/web/src/components/ModalPopup/Body/BodyRoomSelection.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 
@@ -124,6 +124,17 @@ const BodyRoomSelection = ({ roomInfo }: BodyRoomSelectionProps) => {
     isLogin && myRooms && myRooms.ongoing.length >= MAX_PARTICIPATION; // 최대 참여 가능한 방 개수를 초과했는지 여부
   const isDepart = useIsTimeOver(dayServerToClient(roomInfo.time)); // 방 출발 여부
 
+  const notPaid = useMemo(() => {
+    const myOngoingRoom = myRooms?.ongoing.slice() ?? [];
+    const notPaid = myOngoingRoom.find(
+      (room) =>
+        room.part.find((item: any) => item._id === loginInfo?.oid)
+          .isSettlement === "send-required" && room.isDeparted
+    ); // 다른 사람이 정산을 올렸으나 내가 아직 송금하지 않은 방이 있는지 여부 (추가 입장 제한에 사용)
+    return notPaid;
+  }, [myRooms]); // myOngoingRoom은 infoSection의 sortedMyRoom에서 정렬만 뺀 코드입니다. useMemo로 감싼 형태입니다.
+  // item : any 가 좋은 방법인지 모르겠습니다
+
   const requestJoin = useCallback(async () => {
     if (isAlreadyPart) {
       // 이미 참여 중인 방에서 버튼을 누르면 API 호출 관련 로직을 건너뛰고 해당 방으로 이동합니다.
@@ -210,18 +221,22 @@ const BodyRoomSelection = ({ roomInfo }: BodyRoomSelectionProps) => {
       {isLogin || isRoomFull || isDepart ? (
         <Button
           type="purple"
-          disabled={(isRoomFull || isDepart || isMaxPart) && !isAlreadyPart}
+          disabled={
+            (notPaid || isRoomFull || isDepart || isMaxPart) && !isAlreadyPart
+          }
           css={{
             padding: "10px 0 9px",
             borderRadius: "8px",
             ...theme.font14_bold,
           }}
           onClick={requestJoin}
         >
-          {isDepart && !isAlreadyPart
-            ? "출발 시각이 현재 이전인 방은 참여할 수 없습니다"
-            : isAlreadyPart
+          {isAlreadyPart
             ? "이미 참여 중입니다 : 바로가기"
+            : notPaid
+            ? "결제자에게 송금이 완료되지 않은 방이 있습니다"
+            : isDepart
+            ? "출발 시각이 현재 이전인 방은 참여할 수 없습니다"
             : isRoomFull
             ? "남은 인원이 0명인 방은 참여할 수 없습니다"
             : isMaxPart

packages/web/src/pages/Addroom/index.tsx

@@ -40,6 +40,7 @@ const AddRoom = () => {
   const [cookies, setCookies] = useCookies(["defaultFromTo"]);
 
   const onCall = useRef(false);
+  const loginInfo = useValueRecoilState("loginInfo");
   const today = getToday();
   const today10 = getToday10();
   const [valueName, setName] = useState("");
@@ -68,6 +69,17 @@ const AddRoom = () => {
     useState<boolean>(false);
   //#endregion
 
+  const notPaid = useMemo(() => {
+    const myOngoingRoom = myRooms?.ongoing.slice() ?? [];
+    const notPaid = myOngoingRoom.find(
+      (room) =>
+        room.part.find((item: any) => item._id === loginInfo?.oid)
+          .isSettlement === "send-required" && room.isDeparted
+    ); // 다른 사람이 정산을 올렸으나 내가 아직 송금하지 않은 방이 있는지 여부 (추가 입장 제한에 사용)
+    return notPaid;
+  }, [myRooms]); // myOngoingRoom은 infoSection의 sortedMyRoom에서 정렬만 뺀 코드입니다. useMemo로 감싼 형태입니다.
+  // item : any 가 좋은 방법인지 모르겠습니다
+
   useEffect(() => {
     const expirationDate = new Date();
     expirationDate.setFullYear(expirationDate.getFullYear() + 10);
@@ -91,7 +103,9 @@ const AddRoom = () => {
   }, [valueDate, valueTime]);
 
   let validatedMsg = null;
-  if (!valuePlace.every((x: Nullable<string>) => !!x)) {
+  if (notPaid) {
+    validatedMsg = "결제자에게 송금이 완료되지 않은 방이 있습니다";
+  } else if (!valuePlace.every((x: Nullable<string>) => !!x)) {
     validatedMsg = "출발지와 도착지를 선택해 주세요";
   } else if (valuePlace[0] === valuePlace[1]) {
     validatedMsg = "출발지와 도착지는 달라야 합니다";