Merge pull request #965 from sparcs-kaist/952-luggage-identifier

952 luggage identifier

Author: oRE-o

packages/web/src/components/Chat/Header/SideMenu.tsx

@@ -1,5 +1,6 @@
-import { memo, useCallback, useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 
+import { useValueRecoilState } from "@/hooks/useFetchRecoilState";
 import useIsTimeOver from "@/hooks/useIsTimeOver";
 import { useAxios } from "@/hooks/useTaxiAPI";
 
@@ -10,6 +11,7 @@ import {
   ModalChatReport,
   ModalRoomShare,
 } from "@/components/ModalPopup";
+import CarrierOptionRow from "@/components/ModalRoomOptions/CarrierOptionRow";
 import User from "@/components/User";
 
 import alertAtom from "@/atoms/alert";
@@ -77,13 +79,42 @@ const SideMenu = ({ roomInfo, isOpen, setIsOpen }: SideMenuProps) => {
   const axios = useAxios();
 
   const setAlert = useSetRecoilState(alertAtom);
+  const loginInfo = useValueRecoilState("loginInfo");
   const [isOpenShare, setIsOpenShare] = useState<boolean>(false);
   const [isOpenCallTaxi, setIsOpenCallTaxi] = useState<boolean>(false);
   const [isOpenReport, setIsOpenReport] = useState<boolean>(false);
   const [isOpenCancel, setIsOpenCancel] = useState<boolean>(false);
   const isDeparted = useIsTimeOver(dayServerToClient(roomInfo.time)); // 방 출발 여부
+  const [localPart, setLocalPart] = useState<User[]>(roomInfo.part);
 
-  const onClikcShare = useCallback(() => setIsOpenShare(true), []);
+  const myCarrierStatus = useMemo(() => {
+    return localPart.find((u) => u._id === loginInfo?.oid)?.hasCarrier || false;
+  }, [localPart, loginInfo]);
+
+  const handleToggleCarrier = async () => {
+    const nextStatus = !myCarrierStatus;
+
+    try {
+      await axios({
+        url: "/rooms/carrier/toggle",
+        method: "post",
+        data: {
+          roomId: roomInfo._id,
+          hasCarrier: nextStatus,
+        },
+        onSuccess: (data) => {
+          if (data && data.part) {
+            setLocalPart(data.part);
+          }
+        },
+        onError: () => setAlert("캐리어 상태 변경에 실패했습니다."),
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const onClickShare = useCallback(() => setIsOpenShare(true), []);
   const onClickCancel = useCallback(
     () =>
       isDeparted
@@ -200,17 +231,27 @@ const SideMenu = ({ roomInfo, isOpen, setIsOpen }: SideMenuProps) => {
               <PeopleAltRoundedIcon style={styleIcon} />
               <div css={{ ...styleInfo }}>
                 참여 / 최대 인원 :{" "}
-                <span css={theme.font14_bold}>{roomInfo.part.length}명</span>{" "}
+                <span css={theme.font14_bold}>{localPart.length}명</span>{" "}
                 <span css={{ color: theme.gray_text }}>
                   / {roomInfo.maxPartLength}명
                 </span>
               </div>
             </div>
+
             <div css={styleUsers}>
-              {roomInfo.part.map((item) => (
+              {localPart.map((item) => (
                 <User key={item._id} value={item} isDeparted={isDeparted} />
               ))}
             </div>
+
+            {!isDeparted && (
+              <div css={{ marginTop: "12px" }}>
+                <CarrierOptionRow
+                  value={myCarrierStatus}
+                  handler={handleToggleCarrier}
+                />
+              </div>
+            )}
           </div>
           <DottedLine />
           {taxiFare !== 0 ? (
@@ -226,7 +267,7 @@ const SideMenu = ({ roomInfo, isOpen, setIsOpen }: SideMenuProps) => {
               <DottedLine />
             </>
           ) : null}
-          <SideMenuButton type="share" onClick={onClikcShare} />
+          <SideMenuButton type="share" onClick={onClickShare} />
           <DottedLine />
           <SideMenuButton type="taxi" onClick={onClickCallTaxi} />
           {!isAlone && (

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

@@ -14,6 +14,7 @@ import Button from "@/components/Button";
 import DottedLine from "@/components/DottedLine";
 import LinkLogin from "@/components/Link/LinkLogin";
 import MiniCircle from "@/components/MiniCircle";
+import CarrierOptionRow from "@/components/ModalRoomOptions/CarrierOptionRow";
 import Users from "@/components/User/Users";
 import { MAX_PARTICIPATION } from "@/pages/Myroom";
 
@@ -37,8 +38,10 @@ type InfoSectionProps = {
   alignDirection: "left" | "right";
   children: React.ReactNode;
 };
+
 export type BodyRoomSelectionProps = {
   roomInfo: Room;
+  onToggleCarrier?: () => void;
   triggerTags?: string;
 };
 
@@ -116,44 +119,75 @@ const BodyRoomSelection = ({
   const fetchMyRooms = useFetchRecoilState("myRooms");
   const setAlert = useSetRecoilState(alertAtom);
 
-  const isLogin = useIsLogin() && !!loginInfo?.id; // 로그인 여부
-  const isRoomFull = roomInfo && roomInfo.part.length >= roomInfo.maxPartLength; // 방이 꽉 찼는지 여부
+  // 참여 시 캐리어 지참 여부 상태 (기본값 false)
+  const [joinWithCarrier, setJoinWithCarrier] = useState(false);
+
+  const isLogin = useIsLogin() && !!loginInfo?.id;
+  const isRoomFull = roomInfo && roomInfo.part.length >= roomInfo.maxPartLength;
+
   const isAlreadyPart =
     isLogin &&
     roomInfo &&
     (roomInfo.part.some(
       (user: Room["part"][number]) => user._id === loginInfo.oid
     ) ??
-      true); // 이미 참여 중인지 여부
+      true);
+
   const isMaxPart =
-    isLogin && myRooms && myRooms.ongoing.length >= MAX_PARTICIPATION; // 최대 참여 가능한 방 개수를 초과했는지 여부
-  const isDepart = useIsTimeOver(dayServerToClient(roomInfo.time)); // 방 출발 여부
+    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
-    ); // 다른 사람이 정산을 올렸으나 내가 아직 송금하지 않은 방이 있는지 여부 (추가 입장 제한에 사용)
+          ?.isSettlement === "send-required" && room.isDeparted
+    );
     return notPaid;
-  }, [myRooms]); // myOngoingRoom은 infoSection의 sortedMyRoom에서 정렬만 뺀 코드입니다. useMemo로 감싼 형태입니다.
-  // item : any 가 좋은 방법인지 모르겠습니다
+  }, [myRooms, loginInfo]);
+
+  const participantsWithCarrier = useMemo(() => {
+    if (!roomInfo?.part) return [];
+    return roomInfo.part.map((user: any) => ({
+      ...user,
+      withCarrier: user.hasCarrier || false,
+    }));
+  }, [roomInfo.part]);
 
   const requestJoin = useCallback(async () => {
+    // 이미 참여 중이면 이동만
     if (isAlreadyPart) {
-      // 이미 참여 중인 방에서 버튼을 누르면 API 호출 관련 로직을 건너뛰고 해당 방으로 이동합니다.
       history.push(`/myroom/${roomInfo._id}`);
       return;
     }
-    // 여기부터는 이미 참여 중인 방이 아닌 경우의 로직입니다.
+
     if (onCall.current) return;
     onCall.current = true;
+
     await axios({
       url: "/rooms/join",
       method: "post",
       data: { roomId: roomInfo._id },
-      onSuccess: () => {
+      onSuccess: async () => {
+        // 만약 캐리어를 들고 탄다고 체크했다면 토글 API 추가 호출
+        if (joinWithCarrier) {
+          try {
+            await axios({
+              url: "/rooms/carrier/toggle",
+              method: "post",
+              data: {
+                roomId: roomInfo._id,
+                hasCarrier: true,
+              },
+              // ...
+            });
+          } catch (e) {
+            console.error("캐리어 상태 반영 실패", e);
+          }
+        }
+
+        // 내 방 목록 갱신 및 페이지 이동
         fetchMyRooms();
         history.push(`/myroom/${roomInfo._id}`);
 
@@ -163,10 +197,12 @@ const BodyRoomSelection = ({
           }
         }
       },
+
       onError: () => setAlert("방 참여에 실패하였습니다."),
     });
+
     onCall.current = false;
-  }, [roomInfo?._id, history, triggerTags]);
+  }, [roomInfo?._id, history, joinWithCarrier, triggerTags]); // 의존성 유지
 
   const [taxiFare, setTaxiFare] = useState<number>(0);
   const getTaxiFare = async () => {
@@ -231,7 +267,7 @@ const BodyRoomSelection = ({
         <div css={styleMultipleInfo}>
           <div css={{ minWidth: 0 }}>
             <InfoSection title="탑승자" alignDirection="left">
-              <Users values={roomInfo.part} />
+              <Users values={participantsWithCarrier} />
             </InfoSection>
           </div>
           <div css={{ minWidth: "fit-content" }}>
@@ -266,6 +302,18 @@ const BodyRoomSelection = ({
           </InfoSection>
         ) : null}
       </div>
+
+      {!isAlreadyPart && !isRoomFull && !isDepart && isLogin && (
+        <div
+          css={{ marginTop: "-5px", marginBottom: "12px", padding: "0 10px" }}
+        >
+          <CarrierOptionRow
+            value={joinWithCarrier}
+            handler={setJoinWithCarrier}
+          />{" "}
+        </div>
+      )}
+
       {isLogin || isRoomFull || isDepart ? (
         <Button
           type="purple"

packages/web/src/components/ModalPopup/ModalRoomSelection.tsx

@@ -1,5 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 
+import { useValueRecoilState } from "@/hooks/useFetchRecoilState";
+import { useAxios } from "@/hooks/useTaxiAPI";
+
+// 추가: 토글 API 호출용
 import Modal from "@/components/Modal";
 import Navigation from "@/components/Navigation";
 
@@ -8,8 +12,13 @@ import BodyRoomSelection, {
 } from "./Body/BodyRoomSelection";
 import { BodyRoomShare } from "./ModalRoomShare";
 
+import alertAtom from "@/atoms/alert";
+import { useSetRecoilState } from "recoil";
+
 import theme from "@/tools/theme";
 
+// 추가
+
 type HeightFixWrapperProps = {
   children: React.ReactNode;
   onChangeHeight?: (height: number) => void;
@@ -44,24 +53,59 @@ const HeightFixWrapper = (
   );
 };
 
-const ModalRoomSelection = (
-  {
-    isOpen,
-    onChangeIsOpen,
-    roomInfo: _roomInfo,
-    triggerTags,
-  }: ModalRoomSelectionProps
-) => {
+const ModalRoomSelection = ({
+  isOpen,
+  onChangeIsOpen,
+  roomInfo: _roomInfo,
+  triggerTags,
+}: ModalRoomSelectionProps) => {
   const [roomInfo, setRoomInfo] = useState(_roomInfo);
   const [bodyHeight, setBodyHeight] = useState(0);
+
+  const axios = useAxios(); // 추가
+  const setAlert = useSetRecoilState(alertAtom); // 추가
+  const loginInfo = useValueRecoilState("loginInfo"); // 로그인된 내 정보
+
+  useEffect(() => {
+    if (_roomInfo) setRoomInfo(_roomInfo);
+  }, [_roomInfo]);
+
+  const handleToggleCarrier = () => {
+    if (!roomInfo) return;
+    axios({
+      url: "/rooms/carrier/toggle",
+      method: "post",
+      data: { roomId: roomInfo._id }, // 필요한 경우 roomId 전송
+      onSuccess: () => {
+        // 성공 시 로컬 state 즉시 업데이트 (낙관적 업데이트)
+        setRoomInfo((prev: any) => {
+          if (!prev) return null;
+          return {
+            ...prev,
+            part: prev.part.map((user: any) =>
+              user._id === loginInfo?.oid
+                ? { ...user, hasCarrier: !user.hasCarrier } // 내 상태 반전
+                : user
+            ),
+          };
+        });
+      },
+      onError: () => setAlert("캐리어 상태 변경에 실패했습니다."),
+    });
+  };
+
   const pages = useMemo(
     () =>
       roomInfo && [
         {
           key: "info",
           name: "방 정보",
           body: (
-            <BodyRoomSelection roomInfo={roomInfo} triggerTags={triggerTags} />
+            <BodyRoomSelection
+              roomInfo={roomInfo}
+              onToggleCarrier={handleToggleCarrier}
+              triggerTags={triggerTags}
+            />
           ),
         },
         {
@@ -70,13 +114,9 @@ const ModalRoomSelection = (
           body: <BodyRoomShare roomInfo={roomInfo} height={bodyHeight} />,
         },
       ],
-    [roomInfo, bodyHeight]
+    [roomInfo, bodyHeight, loginInfo] // 의존성 추가
   );
 
-  useEffect(() => {
-    if (_roomInfo) setRoomInfo(_roomInfo);
-  }, [_roomInfo]);
-
   const styleTitle = {
     ...theme.font18,
     padding: "10px 32px 12px 8px",
@@ -91,9 +131,15 @@ const ModalRoomSelection = (
       {roomInfo && (
         <>
           <div css={styleTitle}>{roomInfo.name}</div>
+
           {pages && <Navigation pages={pages} />}
+
+          {/* HeightFixWrapper에도 동일한 props를 넘겨야 높이 계산이 정확함 */}
           <HeightFixWrapper onChangeHeight={setBodyHeight}>
-            <BodyRoomSelection roomInfo={roomInfo} />
+            <BodyRoomSelection
+              roomInfo={roomInfo}
+              onToggleCarrier={handleToggleCarrier}
+            />
           </HeightFixWrapper>
         </>
       )}