Feat: 자잘한 변경 사항 수정 (1) (#120)

* feat: 변동사항 수정 * feat: 변경된 타입 수정 및 친구 리스트 반영 * design: 프로필 이미지 둥글게 변경 * feat: 채팅방 링크버튼 추가 * feat: 수동매칭 로직 수정 * fix: 경로 수정 * fix: 못알아먹는 파일 수정 * fix: 이번에는? * Trigger Vercel redeploy * fix: 아예 다른 경로로 재작성
Leets-Official · Feb 5, 2025 · 37fce87 · 37fce87
1 parent 1aebe9b
commit 37fce87
Show file tree

Hide file tree

Showing 49 changed files with 469 additions and 163 deletions.
diff --git a/index.html b/index.html
@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gachi Taxi</title>
-    <script
+    <!-- <script
       type="text/javascript"
       src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=d858f2cf89c907a66f9d4a396414f18f&libraries=services&autoload=false"
-    ></script>
+    ></script> -->
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/assets/icon/chattingRoomIcon.svg b/src/assets/icon/chattingRoomIcon.svg
diff --git a/src/components/chat/bottomMenu/index.tsx b/src/components/chat/bottomMenu/index.tsx
@@ -14,6 +14,8 @@ import { getCloseMatching } from '@/libs/apis/getCloseMatching.api';
 import getExitChatRoom from '@/libs/apis/getExitChatRoom';
 import useSSEStore from '@/store/useSSEStore';
 import useUserStore from '@/store/useUserStore';
+import useChattingRoomIdStore from '@/store/useChattingRoomId';
+import exitManualMatchingRoom from '@/libs/apis/manual/exitManualMatchingRoom.api';
 
 const BottomMenu = ({
   onSendAccount,
@@ -31,6 +33,7 @@ const BottomMenu = ({
   const { messages } = useSSEStore();
   const [isOwner, setIsOwner] = useState(false);
   const { user } = useUserStore();
+  const { setChattingRoomId } = useChattingRoomIdStore();
   const accountNumber = user?.accountNumber || '계좌번호 없음';
 
   messages.forEach((eventMessage) => {
@@ -55,15 +58,21 @@ const BottomMenu = ({
   const handleExitClick = async () => {
     try {
       const { reset } = useTimerStore.getState();
-      const [res, closeRes] = await Promise.all([
+      const [res, closeRes, closeManual] = await Promise.all([
         getExitChatRoom(roomId),
         getCloseMatching(roomId),
+        exitManualMatchingRoom(roomId),
       ]);
-      if (res.chatExit.code === 200 && closeRes.matchingExit.code === 200) {
+      if (
+        res.chatExit.code === 200 &&
+        closeRes.matchingExit.code === 200 &&
+        closeManual.code === 200
+      ) {
         closeModal();
         reset();
         nav('/home');
         handleDisconnect();
+        setChattingRoomId('');
         openToast('채팅방을 나가고 매칭을 종료했습니다.', 'success');
       }
     } catch (error) {

diff --git a/src/components/commons/Button.tsx b/src/components/commons/Button.tsx
@@ -27,7 +27,7 @@ const Button = ({
     variantStyle = `${isDisabled || isLoading ? 'bg-matchLine' : 'bg-primary'} h-[50px] rounded-modal font-semibold text-neutral outline-none text-center`;
   } else if (variant === 'secondary') {
     variantStyle =
-      'bg-transparent h-[50px] rounded-modal font-semibold text-button text-textLightGray outline-none border-2 border-primary text-center';
+      'bg-transparent h-[50px] rounded-modal font-semibold text-button outline-none border-2 border-primary text-center';
   } else if (variant === 'icon') {
     variantStyle = 'bg-transparent outline-none w-fit h-fit';
   }

diff --git a/src/components/home/FriendList/BlackListPage.tsx b/src/components/home/FriendList/BlackListPage.tsx
@@ -11,7 +11,7 @@ interface BlackListPageProps {
 const BlackListPage = ({ isOpen }: BlackListPageProps) => {
   const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
     useBlackList();
-  const blackList = data.pages.flatMap((page) => page.response || []);
+  const blackList = data.pages.flatMap((page) => page.blacklists || []);
   const { isIntersecting, ref } = useIntersectionObserver({ threshold: 0.5 });
 
   if (isIntersecting && hasNextPage && !isFetchingNextPage) {
@@ -24,22 +24,24 @@ const BlackListPage = ({ isOpen }: BlackListPageProps) => {
         className={`flex flex-col gap-[16px] ${isOpen ? '' : 'pb-[calc(100dvh-430px)]'} h-[calc(100dvh-225px)] max-h-[calc(100dvh-225px)] overflow-y-scroll scroll-hidden`}
       >
         {blackList.length > 0 ? (
-          blackList.map((blackMember) => {
-            return (
-              <BlackInfoItem
-                key={blackMember.receiverId}
-                blackMember={blackMember}
-              />
-            );
-          })
+          <>
+            {blackList.map((blackMember) => {
+              return (
+                <BlackInfoItem
+                  key={blackMember.receiverId}
+                  blackMember={blackMember}
+                />
+              );
+            })}
+            <div ref={ref}></div>
+          </>
         ) : (
           <EmptyView>블랙리스트에 추가한 사람이 없어요!</EmptyView>
         )}
       </div>
       {isFetchingNextPage && (
         <SpinnerIcon width={36} height={36} className="mx-auto spinner mt-5" />
       )}
-      <div ref={ref}></div>
     </>
   );
 };

diff --git a/src/components/home/FriendList/FriendInfoItem.tsx b/src/components/home/FriendList/FriendInfoItem.tsx
@@ -18,7 +18,7 @@ const FriendInfoItem = ({ friend, setCurrentPage }: FriendInfoItemProps) => {
     if (setCurrentPage) {
       openModal(
         <FriendDeleteOrBlack
-          id={friend.friendId}
+          id={friend.friendsId}
           setCurrentPage={setCurrentPage}
         />,
       );
@@ -31,10 +31,10 @@ const FriendInfoItem = ({ friend, setCurrentPage }: FriendInfoItemProps) => {
     <div className="bg-toastColor rounded-box p-vertical flex items-center justify-between h-[101px]">
       <div className="flex-1 flex items-center gap-4">
         <div className="flex items-center gap-[10px] cursor-pointer relative rounded-full bg-textDarkGray">
-          {friend.friendProfileUrl ? (
+          {friend.friendsProfileUrl ? (
             <img
               className="w-[48px] h-[48px] rounded-full object-cover"
-              src={friend.friendProfileUrl}
+              src={friend.friendsProfileUrl}
               alt="친구 프로필 이미지"
             />
           ) : (
@@ -43,7 +43,7 @@ const FriendInfoItem = ({ friend, setCurrentPage }: FriendInfoItemProps) => {
         </div>
         <div className="flex flex-col gap-[8px]">
           <p className="font-semibold text-captionHeader">
-            {friend.friendNickName}
+            {friend.friendsNickName}
           </p>
           <span className="font-medium text-body text-textDarkGray">
             {friend.gender === 'MALE' ? '남자' : '여자'}

diff --git a/src/components/home/FriendList/FriendListPage.tsx b/src/components/home/FriendList/FriendListPage.tsx
@@ -23,28 +23,30 @@ const FriendListPage = ({ isOpen, setCurrentPage }: FriendListPageProps) => {
   return (
     <>
       <div
-        className={`flex flex-col gap-[16px] ${isOpen ? '' : 'pb-[calc(100dvh-430px)]'} h-[calc(100dvh-225px)] max-h-[calc(100dvh-225px)] overflow-y-scroll scroll-hidden`}
+        className={`flex flex-col gap-4 ${isOpen ? '' : 'pb-[calc(100dvh-430px)]'} h-[calc(100dvh-225px)] max-h-[calc(100dvh-225px)] overflow-y-scroll scroll-hidden`}
       >
         {friendList.length > 0 ? (
-          friendList.map((friend) => {
-            return (
-              <FriendInfoItem
-                key={friend.friendId}
-                setCurrentPage={setCurrentPage}
-                friend={friend}
-              />
-            );
-          })
+          <>
+            {friendList.map((friend) => {
+              return (
+                <FriendInfoItem
+                  key={friend.friendId}
+                  setCurrentPage={setCurrentPage}
+                  friend={friend}
+                />
+              );
+            })}
+            <div ref={ref}></div>
+          </>
         ) : (
           <EmptyView>친구를 추가해보세요!</EmptyView>
         )}
       </div>
       {isFetchingNextPage && (
         <SpinnerIcon width={36} height={36} className="mx-auto spinner mt-5" />
       )}
-      <div ref={ref}></div>
       {isOpen && (
-        <div className="w-full flex absolute bottom-10">
+        <div className="w-full flex absolute bottom-2">
           <Link to="/home/friend-request" className="ml-auto button-shadow">
             <LargePlusIcon />
           </Link>

diff --git a/src/components/home/FriendList/index.tsx b/src/components/home/FriendList/index.tsx
@@ -45,7 +45,7 @@ const FriendList = ({ isOpen }: { isOpen: boolean }) => {
 
   return (
     <div className="flex flex-col gap-[32px] justify-between relative">
-      <div className="flex items-center justify-start gap-3">
+      <div className="flex items-center justify-start gap-3 ">
         <h2 className="text-header font-bold">
           {currentPage === 'FRIEND_LIST' ? '친구 목록' : '블랙리스트'}
         </h2>

diff --git a/src/components/home/Navbar.tsx b/src/components/home/Navbar.tsx
@@ -116,7 +116,7 @@ const Navbar = ({ modalContent }: NavbarProps) => {
             <img
               src={user.profilePicture}
               alt="네비바 유저 프로필 이미지"
-              className="w-full h-full object-cover"
+              className="w-full h-full object-cover rounded-full"
             />
           ) : (
             <BasicProfileIcon className="text-[#AEAEAE]" />

diff --git a/src/components/home/autoMatching/index.tsx b/src/components/home/autoMatching/index.tsx
@@ -11,11 +11,12 @@ import { autoMatchingSchema } from '@/libs/schemas/match';
 import InviteMembers from '@/components/home/autoMatching/inviteMembers';
 import useGeoLocation from '@/hooks/useGeoLocation';
 import getCoordinateByAddress from '@/libs/apis/getCoordinateByAddress';
-import { useCallback, useEffect } from 'react';
+import { Suspense, useCallback, useEffect } from 'react';
 import { useToast } from '@/contexts/ToastContext';
 import useLocationStore from '@/store/useLocationStore';
 import startAutoMatching from '@/libs/apis/matching/startAutoMatching.api';
 import useSSEStore from '@/store/useSSEStore';
+import SpinnerIcon from '@/assets/icon/spinnerIcon.svg?react';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 
@@ -32,7 +33,8 @@ const AutoMatching = ({ isOpen }: { isOpen: boolean }) => {
     defaultValues: {
       startPoint: '',
       startName: '가천대 반도체대학',
-      destinationPoint: autoDestinationPoint || '',
+      destinationPoint:
+        autoDestinationPoint || '127.134247729944,37.45524157529484',
       destinationName: '가천대 AI 공학관',
       members: [],
       criteria: [],
@@ -172,7 +174,19 @@ const AutoMatching = ({ isOpen }: { isOpen: boolean }) => {
         <RouteSetting control={autoMatchingForm.control} />
         {isOpen && (
           <>
-            <InviteMembers control={autoMatchingForm.control} />
+            <Suspense
+              fallback={
+                <div className="h-[150px] w-full flex items-center justify-center">
+                  <SpinnerIcon
+                    width={36}
+                    height={36}
+                    className="mx-auto spinner"
+                  />
+                </div>
+              }
+            >
+              <InviteMembers control={autoMatchingForm.control} />
+            </Suspense>
             <SelectTags control={autoMatchingForm.control} />
           </>
         )}

diff --git a/src/components/home/autoMatching/inviteMembers/index.tsx b/src/components/home/autoMatching/inviteMembers/index.tsx
@@ -1,6 +1,9 @@
 import { Controller, Control, Path } from 'react-hook-form';
 import { MatchingSchema } from 'gachTaxi-types';
 import MemberItem from '@/components/home/autoMatching/inviteMembers/MemberItem';
+import useFriends from '@/hooks/queries/useFriends';
+import { useIntersectionObserver } from '@/store/useIntersectionObserver';
+import { Link } from 'react-router-dom';
 
 interface InviteMembersProps<T extends MatchingSchema> {
   control: Control<T>;
@@ -9,16 +12,22 @@ interface InviteMembersProps<T extends MatchingSchema> {
 const InviteMembers = <T extends MatchingSchema>({
   control,
 }: InviteMembersProps<T>) => {
-  const members: string[] = ['친구 1', '친구 2', '친구 3'];
+  const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = useFriends();
+  const members = data.pages.flatMap((page) => page.response || []);
+  const { isIntersecting, ref } = useIntersectionObserver();
+
+  if (isIntersecting && hasNextPage && !isFetchingNextPage) {
+    fetchNextPage();
+  }
 
   // safeValue 친구 리스트에 선택된 값이 포함되어 있는지 검사하고 업데이트시키는 함수
   const handleUpdateMembers = (
     safeValue: string[],
-    selectedMemnbers: string,
+    selectedMembers: string,
   ) => {
-    const updatedMembers = safeValue.includes(selectedMemnbers)
-      ? safeValue.filter((member) => member !== selectedMemnbers)
-      : [...safeValue, selectedMemnbers];
+    const updatedMembers = safeValue.includes(selectedMembers)
+      ? safeValue.filter((member) => member !== selectedMembers)
+      : [...safeValue, selectedMembers];
 
     return updatedMembers;
   };
@@ -34,20 +43,32 @@ const InviteMembers = <T extends MatchingSchema>({
           <div className="h-[101px] flex-shrink-0 bg-secondary rounded-box p-vertical flex flex-col justify-between">
             <p className="font-medium text-captionHeader">친구 초대</p>
             <div className="flex overflow-x-scroll scroll-hidden gap-2">
-              {members.map((member) => (
-                <MemberItem
-                  key={member}
-                  tag={member}
-                  isSelected={safeValue.includes(member)}
-                  onClick={(selectedMemnbers) => {
-                    const updatedMembers = handleUpdateMembers(
-                      safeValue,
-                      selectedMemnbers,
-                    );
-                    onChange(updatedMembers);
-                  }}
-                />
-              ))}
+              {members.length > 0 ? (
+                <>
+                  {members.map((member) => (
+                    <MemberItem
+                      key={member.friendsId}
+                      tag={member.friendsNickName}
+                      isSelected={safeValue.includes(member.friendsNickName)}
+                      onClick={(selectedMembers) => {
+                        const updatedMembers = handleUpdateMembers(
+                          safeValue,
+                          selectedMembers,
+                        );
+                        onChange(updatedMembers);
+                      }}
+                    />
+                  ))}
+                  <div ref={ref}></div>
+                </>
+              ) : (
+                <Link
+                  to="/home/friend-request"
+                  className="font-medium text-textDarkGray text-captionHeader"
+                >
+                  친구를 추가해보세요!
+                </Link>
+              )}
             </div>
           </div>
         );

diff --git a/src/components/home/chatLink/index.tsx b/src/components/home/chatLink/index.tsx
@@ -0,0 +1,18 @@
+import { Link } from 'react-router-dom';
+import ChatIcon from '@/assets/icon/chattingRoomIcon.svg?react';
+
+const ChatLinkButton = ({ chattingRoomId }: { chattingRoomId: string }) => {
+  return (
+    <Link
+      className="px-4 py-3 flex items-center justify-center rounded-full bg-black text-white"
+      to={`/chat/${chattingRoomId}`}
+    >
+      <ChatIcon className="mr-5" />
+      <p className="mr-5 font-medium text-captionHeader">
+        진행중인 매칭 채팅방 들어가기
+      </p>
+    </Link>
+  );
+};
+
+export default ChatLinkButton;
diff --git a/src/components/home/manualMatching/MatchingPage.tsx b/src/components/home/manualMatching/MatchingPage.tsx
@@ -32,26 +32,26 @@ const MatchingPage = ({
         className={`flex flex-col gap-4 ${isOpen ? '' : 'pb-[calc(100dvh-430px)]'} h-[calc(100dvh-225px)] max-h-[calc(100dvh-225px)] overflow-y-scroll scroll-hidden`}
       >
         {manualMatchingList.length > 0 ? (
-          manualMatchingList.map((manualInfo) => {
-            return (
+          <>
+            {manualMatchingList.map((manualInfo) => (
               <MatchingInfoItem
                 key={manualInfo.roomId}
                 setCurrentPage={setCurrentPage}
                 manualInfo={manualInfo}
                 currentPage={currentPage}
               />
-            );
-          })
+            ))}
+            <div ref={ref} className="h-0" />
+          </>
         ) : (
           <EmptyView>현재 등록된 매칭이 없어요!</EmptyView>
         )}
       </div>
       {isFetchingNextPage && (
         <SpinnerIcon width={36} height={36} className="mx-auto spinner mt-5" />
       )}
-      <div ref={ref}></div>
       {isOpen && (
-        <div className="w-full flex absolute bottom-10">
+        <div className="w-full flex absolute bottom-2">
           <Link to="/home/manual-register" className="ml-auto button-shadow">
             <LargePlusIcon />
           </Link>