Feat: 자잘한 변경사항 수정 (2)

src/App.tsx

@@ -90,7 +90,15 @@ function App() {
                   }
                 />
                 <Route
-                  path="chat/:id"
+                  path="chat/auto/:id"
+                  element={
+                    <ProtectRoute isPrivate>
+                      <ChatPage />
+                    </ProtectRoute>
+                  }
+                />
+                <Route
+                  path="chat/manual/:id"
                   element={
                     <ProtectRoute isPrivate>
                       <ChatPage />

src/components/chat/bottomMenu/index.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import SendAccountModal from '../modal/sendAccountModal';
 import CallTaxiModal from '@/components/modal/CallTaxiModal';
 import { useModal } from '@/contexts/ModalContext';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useToast } from '@/contexts/ToastContext';
 import useWebSocket from '@/hooks/useWebSocket';
 import CancelTaxiModal from '@/components/modal/CancelTaxiModal';
@@ -16,6 +16,7 @@ import useSSEStore from '@/store/useSSEStore';
 import useUserStore from '@/store/useUserStore';
 import useChattingRoomIdStore from '@/store/useChattingRoomId';
 import { MessagesArray } from 'gachTaxi-types';
+import exitManualMatchingRoom from '@/libs/apis/manual/exitManualMatchingRoom.api';
 //import exitManualMatchingRoom from '@/libs/apis/manual/exitManualMatchingRoom.api';
 
 const BottomMenu = ({
@@ -31,14 +32,15 @@ const BottomMenu = ({
   const { openToast } = useToast();
   const [showAccountModal, setShowAccountModal] = useState(false);
   const nav = useNavigate();
-  const { messages } = useSSEStore();
+  const { messages, closeSSE } = useSSEStore();
   const [isOwner, setIsOwner] = useState(false);
   const { user } = useUserStore();
   const { setChattingRoomId } = useChattingRoomIdStore();
   const accountNumber = user?.accountNumber || '계좌번호 없음';
-  const { reset } = useTimerStore.getState();
-  console.log(user?.userId);
-  console.log(isOwner);
+  const { reset } = useTimerStore();
+  const { pathname } = useLocation();
+
+  const isAutoMatchingChat = pathname.includes('auto');
 
   useEffect(() => {
     if (messages) {
@@ -69,12 +71,35 @@ const BottomMenu = ({
     openModal(<CallTaxiModal />);
   };
 
-  const handleExitClick = async () => {
+  const handleExitClickFromManual = async () => {
+    try {
+      const [res1, res2] = await Promise.all([
+        getExitChatRoom(roomId),
+        exitManualMatchingRoom(roomId),
+      ]);
+      if (
+        res1.code >= 200 &&
+        res1.code < 300 &&
+        res2.code >= 200 &&
+        res2.code < 300
+      ) {
+        closeModal();
+        reset();
+        nav('/home');
+        handleDisconnect();
+        setChattingRoomId('');
+        openToast('채팅방을 나가고 매칭을 종료했습니다.', 'success');
+      }
+    } catch (error) {
+      console.error('채팅방 퇴장 중 오류 발생:', error);
+    }
+  };
+
+  const handleExitClickFromAuto = async () => {
     try {
       const [res1, res2] = await Promise.all([
         getExitChatRoom(roomId),
         getCloseMatching(roomId),
-        // exitManualMatchingRoom(roomId),
       ]);
       if (
         res1.code >= 200 &&
@@ -84,6 +109,7 @@ const BottomMenu = ({
       ) {
         closeModal();
         reset();
+        closeSSE();
         nav('/home');
         handleDisconnect();
         setChattingRoomId('');
@@ -95,7 +121,15 @@ const BottomMenu = ({
   };
 
   const handleExitModal = () => {
-    openModal(<CancelTaxiModal onConfirm={handleExitClick} />);
+    openModal(
+      <CancelTaxiModal
+        onConfirm={
+          isAutoMatchingChat
+            ? handleExitClickFromAuto
+            : handleExitClickFromManual
+        }
+      />,
+    );
   };
 
   const handleCloseClick = async () => {

src/components/home/FriendList/FriendListPage.tsx

@@ -30,7 +30,7 @@ const FriendListPage = ({ isOpen, setCurrentPage }: FriendListPageProps) => {
             {friendList.map((friend) => {
               return (
                 <FriendInfoItem
-                  key={friend.friendId}
+                  key={friend.friendsId}
                   setCurrentPage={setCurrentPage}
                   friend={friend}
                 />

src/components/home/autoMatching/RouteSetting.tsx

@@ -16,55 +16,55 @@ const RouteSetting = <T extends MatchingSchema>({
     <Controller
       control={control}
       name={'startName' as Path<T>}
-      render={({
-        field: { value: startName, onChange: onChangeStartName },
-      }) => (
-        <Controller
-          control={control}
-          name={'destinationName' as Path<T>}
-          render={({
-            field: {
-              value: destinationName,
-              onChange: onChangeDestinationName,
-            },
-          }) => (
-            <div className="h-[101px] w-full flex-shrink-0 bg-secondary rounded-box p-vertical gap-3 flex items-center justify-between">
-              <div className="flex-shrink-0">
-                <RouteSettingIcon />
-              </div>
-              <div className="flex-1 flex flex-col justify-between h-full w-full">
-                <input
-                  className="font-medium text-captionHeader bg-transparent outline-none w-full"
-                  value={startName}
-                  onChange={(e) => onChangeStartName(e.target.value)}
-                  readOnly
-                />
-                <div className="border border-matchLine w-full rounded-full"></div>
-                <input
-                  className="font-medium text-captionHeader bg-transparent outline-none w-full"
-                  value={destinationName}
-                  onChange={(e) => onChangeDestinationName(e.target.value)}
-                  readOnly
-                />
-              </div>
-              <div className="flex-shrink-0">
-                <Button
-                  variant="icon"
-                  onClick={() => {
-                    const tempStart = startName;
-                    const tempDestination = destinationName;
+      render={({ field: { value, onChange: onChangeStartName } }) => {
+        const startName = typeof value === 'string' ? value : '';
 
-                    onChangeStartName(tempDestination);
-                    onChangeDestinationName(tempStart);
-                  }}
-                >
-                  <RouteChangeIcon />
-                </Button>
-              </div>
-            </div>
-          )}
-        />
-      )}
+        return (
+          <Controller
+            control={control}
+            name={'destinationName' as Path<T>}
+            render={({
+              field: { value, onChange: onChangeDestinationName },
+            }) => {
+              const destinationName = typeof value === 'string' ? value : '';
+
+              return (
+                <div className="h-[101px] w-full flex-shrink-0 bg-secondary rounded-box p-vertical gap-3 flex items-center justify-between">
+                  <div className="flex-shrink-0">
+                    <RouteSettingIcon />
+                  </div>
+                  <div className="flex-1 flex flex-col justify-between h-full w-full">
+                    <input
+                      className="font-medium text-captionHeader bg-transparent outline-none w-full"
+                      value={startName}
+                      onChange={(e) => onChangeStartName(e.target.value)}
+                      readOnly
+                    />
+                    <div className="border border-matchLine w-full rounded-full"></div>
+                    <input
+                      className="font-medium text-captionHeader bg-transparent outline-none w-full"
+                      value={destinationName}
+                      onChange={(e) => onChangeDestinationName(e.target.value)}
+                      readOnly
+                    />
+                  </div>
+                  <div className="flex-shrink-0">
+                    <Button
+                      variant="icon"
+                      onClick={() => {
+                        onChangeStartName(destinationName);
+                        onChangeDestinationName(startName);
+                      }}
+                    >
+                      <RouteChangeIcon />
+                    </Button>
+                  </div>
+                </div>
+              );
+            }}
+          />
+        );
+      }}
     />
   );
 };

src/components/home/autoMatching/index.tsx

@@ -19,6 +19,7 @@ import useSSEStore from '@/store/useSSEStore';
 import SpinnerIcon from '@/assets/icon/spinnerIcon.svg?react';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
+import useRequestStatus from '@/hooks/useRequestStatus';
 
 const AutoMatching = ({ isOpen }: { isOpen: boolean }) => {
   const {
@@ -55,6 +56,7 @@ const AutoMatching = ({ isOpen }: { isOpen: boolean }) => {
     name: 'destinationName',
   });
   const navigate = useNavigate();
+  const { status, setPending, setSuccess, setError } = useRequestStatus();
 
   const updateDestinationCoordinates = useCallback(async () => {
     try {
@@ -131,9 +133,11 @@ const AutoMatching = ({ isOpen }: { isOpen: boolean }) => {
   const handleSubmitToAutoMatching: SubmitHandler<AutoMatchingTypes> = async (
     data,
   ) => {
+    setPending();
     try {
       const res = await startAutoMatching(data);
       if (res?.code && res.code >= 200 && res.code < 300) {
+        setSuccess();
         openToast(res.message, 'success');
         navigate('/matching');
       }
@@ -144,6 +148,8 @@ const AutoMatching = ({ isOpen }: { isOpen: boolean }) => {
 
         openToast(errorMessage, 'error');
         if (errorCode === 409) {
+          openToast('이미 매칭에 참가한 멤버에요!', 'error');
+          setError();
           navigate('/matching');
         }
       }
@@ -198,7 +204,12 @@ const AutoMatching = ({ isOpen }: { isOpen: boolean }) => {
         )}
 
         <div className="w-full">
-          <Button variant="primary" className="w-full mt-[16px]" type="submit">
+          <Button
+            variant="primary"
+            className="w-full mt-[16px]"
+            type="submit"
+            isLoading={status === 'pending'}
+          >
             매칭 시작
           </Button>
         </div>

src/components/home/autoMatching/inviteMembers/index.tsx

@@ -21,13 +21,10 @@ const InviteMembers = <T extends MatchingSchema>({
   }
 
   // safeValue 친구 리스트에 선택된 값이 포함되어 있는지 검사하고 업데이트시키는 함수
-  const handleUpdateMembers = (
-    safeValue: string[],
-    selectedMembers: string,
-  ) => {
-    const updatedMembers = safeValue.includes(selectedMembers)
-      ? safeValue.filter((member) => member !== selectedMembers)
-      : [...safeValue, selectedMembers];
+  const handleUpdateMembers = (safeValue: number[], selectedId: number) => {
+    const updatedMembers = safeValue.includes(selectedId)
+      ? safeValue.filter((member) => member !== selectedId)
+      : [...safeValue, selectedId];
 
     return updatedMembers;
   };
@@ -37,7 +34,9 @@ const InviteMembers = <T extends MatchingSchema>({
       control={control}
       name={'members' as Path<T>}
       render={({ field: { value = [], onChange } }) => {
-        const safeValue: string[] = Array.isArray(value) ? value : [];
+        const safeValue: number[] = Array.isArray(value)
+          ? (value as number[])
+          : [];
 
         return (
           <div className="h-[101px] flex-shrink-0 bg-secondary rounded-box p-vertical flex flex-col justify-between">
@@ -49,11 +48,11 @@ const InviteMembers = <T extends MatchingSchema>({
                     <MemberItem
                       key={member.friendsId}
                       tag={member.friendsNickName}
-                      isSelected={safeValue.includes(member.friendsNickName)}
-                      onClick={(selectedMembers) => {
+                      isSelected={safeValue.includes(member.friendsId)}
+                      onClick={() => {
                         const updatedMembers = handleUpdateMembers(
                           safeValue,
-                          selectedMembers,
+                          member.friendsId,
                         );
                         onChange(updatedMembers);
                       }}

src/components/home/autoMatching/selectTags/index.tsx

@@ -24,7 +24,9 @@ const SelectTags = <T extends MatchingSchema>({
       control={control}
       name={'criteria' as Path<T>}
       render={({ field: { value = [], onChange } }) => {
-        const safeValue: string[] = Array.isArray(value) ? value : [];
+        const safeValue: string[] = Array.isArray(value)
+          ? value.filter((v): v is string => typeof v === 'string')
+          : [];
 
         return (
           <div className="h-[101px] flex-shrink-0 bg-secondary rounded-box p-vertical flex flex-col justify-between">

src/components/home/manualMatching/matchingInfoItem/index.tsx

@@ -48,7 +48,7 @@ const MatchingInfoItem = ({
   };
 
   const handleJoinChatting = () => {
-    navigate(`/chat/${manualInfo.chattingRoomId}`);
+    navigate(`/chat/manual/${manualInfo.chattingRoomId}`);
   };
 
   return (

src/components/manual-register/AddContent.tsx

@@ -11,7 +11,7 @@ const AddContent = <T extends MatchingSchema>({
   return (
     <Controller
       control={control}
-      name={'content' as Path<T>}
+      name={'description' as Path<T>}
       render={({ field: { onChange } }) => (
         <div className="h-[312px] flex-shrink-0 bg-secondary rounded-box p-vertical gap-3 flex flex-col justify-between">
           <p className="font-medium text-captionHeader">추가 내용</p>