Merge pull request #160 from prgrms-web-devcourse-final-project/feat/159-chat-request-and-cancel

denshou · web-flow · commit b24b885223ff · 2025-03-04T14:08:36.000+09:00
[feat] 채팅 요청, 채팅 요청 취소 구현 + 유저 페이지 이동시 자연스럽게 수정
diff --git a/src/App.tsx b/src/App.tsx
@@ -25,13 +25,15 @@ import YouTubeAudioPlayer from './components/YouTubeAudioPlayer';
 import TestLoginModal from '@/components/testLogin/TestLoginModal';
 import { AnimatePresence, motion } from 'framer-motion';
 import { twMerge } from 'tailwind-merge';
+import { useSheetStore } from './store/sheetStore';
 
 function App() {
   const location = useLocation();
   // 실제 로그인 여부를 체크하는 함수 (임시로 false, 실제 인증 로직 적용 필요)
   // const isAuthenticated = true;
   const { isAuthenticated } = useAuthStore();
   const spotifyAuth = useSpotifyAuth();
+  const { isChatLoadingSheetOpen } = useSheetStore();
   // soundlink 로그인한 경우에만 spotify 로그인 후 토큰 가져오기
   useEffect(() => {
     if (isAuthenticated) {
@@ -54,7 +56,8 @@ function App() {
       location.pathname === '/signup' ||
       location.pathname === '/post' ||
       location.pathname === '/mypage/edit' ||
-      location.pathname === '/mypage/blocklist'
+      location.pathname === '/mypage/blocklist' ||
+      location.pathname.includes('user')
     ) {
       return {
         initial: { x: '100%' },
@@ -128,7 +131,7 @@ function App() {
         <div className="w-full h-full bg-white z-50"></div>
       </div>
       <Modal />
-      <ChatConnectLoadingSheet />
+      {isChatLoadingSheetOpen && <ChatConnectLoadingSheet />}
       <YouTubeAudioPlayer playerId="1" />
       <YouTubeAudioPlayer playerId="2" />
       <YouTubeAudioPlayer playerId="3" />
diff --git a/src/apis/chat.ts b/src/apis/chat.ts
@@ -12,11 +12,35 @@ export const loadChatMessages = async (roomId: number) => {
   const { data } = await axiosInstance.get(`/chat/messages/${roomId}`);
   return data;
 };
-
 //채팅 요청
-export const requestChat = async (tag: string) => {
-  const { data } = await axiosInstance.post(`/chat/chatroom`, {
-    participantTag: tag,
+export const requestChat = async (emotionRecordId: number) => {
+  const { data } = await axiosInstance.post(`/chat/request`, emotionRecordId, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return data;
+};
+//채팅 요청 취소
+export const cancelChatRequest = async (emotionRecordId: number) => {
+  const { data } = await axiosInstance.delete(`/chat/request`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: JSON.stringify(emotionRecordId),
   });
   return data;
 };
+//채팅방 생성
+export const createChatroom = async (emotionRecordId: number) => {
+  const { data } = await axiosInstance.post(
+    `/chat/chatroom/create?recordId=${emotionRecordId}`,
+    {},
+  );
+  return data;
+};
+//채팅방 닫기
+export const closeChatroom = async (chatRoomId: number) => {
+  const { data } = await axiosInstance.post(`/chat/chatroom/close?chatRoomId=${chatRoomId}`, {});
+  return data;
+};
diff --git a/src/components/ChatConnectLoadingSheet.tsx b/src/components/ChatConnectLoadingSheet.tsx
@@ -2,22 +2,80 @@ import logo from '@/assets/icons/logo.svg';
 import sad from '@/assets/icons/sad-icon.svg';
 import MusicAnimation from './MusicAnimation';
 import Button from './Button';
+import { useSheetStore } from '@/store/sheetStore';
+import { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { cancelChatRequest } from '@/apis/chat';
+import { useNavigate } from 'react-router';
+dayjs.extend(duration);
 
 export default function ChatConnectLoadingSheet() {
+  const navigate = useNavigate();
   //zustand로 관리
   //거절, 취소하거나 홈으로 가기 누르면 false로
-  const isConnecting = false;
+  const { currentRecord, closeAllSheets, closeSheet } = useSheetStore();
 
-  const isFail = false;
-  const isReceiver = true;
-  if (!isConnecting) return null;
-  if (isFail) {
+  const [timeLeft, setTimeLeft] = useState(60);
+
+  const [connetFail, setConnectFail] = useState(false);
+
+  const handleClickToHome = () => {
+    closeAllSheets();
+    navigate('/home');
+  };
+
+  useEffect(() => {
+    const endTime = new Date().getTime() + 60 * 1000; // 현재 시간 + 60초
+
+    const interval = setInterval(() => {
+      const diff = Math.max(0, Math.ceil((endTime - new Date().getTime()) / 1000)); // 남은 초 계산
+
+      setTimeLeft(diff);
+
+      if (diff <= 0) {
+        clearInterval(interval);
+        setTimeLeft(0); // 0초로 고정
+      }
+    }, 1000);
+
+    return () => clearInterval(interval); //interval 정리
+  }, []);
+
+  useEffect(() => {
+    if (timeLeft === 0) {
+      setConnectFail(true);
+    }
+  }, [timeLeft]);
+
+  const formattedTime = dayjs.duration(timeLeft, 'seconds').format('mm:ss');
+
+  //채팅 요청 취소
+  const cancel = async () => {
+    console.log(currentRecord);
+    if (!currentRecord) {
+      console.log('record가 존재하지 않습니다');
+      return;
+    }
+    try {
+      await cancelChatRequest(currentRecord.recordId);
+      console.log('채팅 취소');
+
+      closeSheet('isChatLoadingSheetOpen');
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const isReceiver = false;
+
+  if (connetFail) {
     return (
       <div className="fixed inset-0 flex justify-center items-center z-50">
         <div className="relative w-full max-w-[600px] h-screen px-3 bg-background flex flex-col justify-center items-center">
           <img src={logo} className="w-[186px] h-[40px] mb-5" alt="로고" />
           <p className="h4-b text-center text-gray-50 mb-2">
-            <span className="text-primary-normal">하입뽀이일곱자</span>
+            <span className="text-primary-normal">{currentRecord?.nickName}</span>
             <span>님과 연결되지 않았어요</span>
           </p>
 
@@ -27,7 +85,9 @@ export default function ChatConnectLoadingSheet() {
           <img src={sad} alt="연결실패" />
 
           <div className="absolute bottom-10 flex gap-[6px] px-3 w-full">
-            <Button variant="primary">홈으로 가기</Button>
+            <Button onClick={handleClickToHome} variant="primary">
+              홈으로 가기
+            </Button>
           </div>
         </div>
       </div>
@@ -38,9 +98,15 @@ export default function ChatConnectLoadingSheet() {
       <div className="relative w-full max-w-[600px] h-screen px-3 bg-background flex flex-col justify-center items-center">
         <img src={logo} className="w-[186px] h-[40px] mb-5" alt="로고" />
         <p className="h4-b text-center text-gray-50 mb-2">
-          <span className="text-primary-normal">하입뽀이일곱자</span>
           {/* 요청하는 사람일 결우 */}
-          {!isReceiver && <span>님에게 대화 요청 중...</span>}
+          {!isReceiver && (
+            <span>
+              <span className="text-primary-normal">{currentRecord?.nickName}</span>님에게 대화 요청
+              중...
+            </span>
+          )}
+          {/* 받는 사람일 경우 */}
+          {isReceiver && <span className="text-primary-normal">보내는 사람</span>}
         </p>
         {/* 요청하는 사람일 결우 */}
         {!isReceiver && (
@@ -51,15 +117,18 @@ export default function ChatConnectLoadingSheet() {
         {/* 받는 사람일 경우 */}
         {isReceiver && (
           <p className="caption-r text-center text-gray-60 mb-5">
-            <span>하입뽀이일곱자</span> 님이 대화를 요청했어요 <br /> 함께 이야기해 볼까요?
+            <span>보내는 사람</span> 님이 대화를 요청했어요 <br /> 함께 이야기해 볼까요?
           </p>
         )}
 
         <MusicAnimation />
-        <p className="body-large-b text-primary-normal mt-[120px] mb-2">03:00</p>
+        <p className="body-large-b text-primary-normal mt-[120px] mb-2">{formattedTime}</p>
         {/* 요청하는 사람일 결우 */}
         {!isReceiver && (
-          <button className="caption-r text-gray-50 cursor-pointer border-b border-gray-50">
+          <button
+            onClick={cancel}
+            className="caption-r text-gray-50 cursor-pointer border-b border-gray-50"
+          >
             취소하기
           </button>
         )}
diff --git a/src/components/modalSheet/CardDetailModal.tsx b/src/components/modalSheet/CardDetailModal.tsx
@@ -38,7 +38,7 @@ function CardDetailModal({
   handleDelete,
   handleEdit,
 }: CardDetailModalProps) {
-  const { isCardSheetOpen } = useSheetStore();
+  const { isCardSheetOpen, setCurrentRecord } = useSheetStore();
   const { setVideoId, players, setIsPlaying } = useYouTubeStore();
   const isPlaying = players['3']?.isPlaying || false;
 
@@ -49,6 +49,9 @@ function CardDetailModal({
 
   useEffect(() => {
     if (!data?.data?.spotifyMusic) return; // 데이터가 없으면 실행하지 않음
+    console.log(data?.data);
+
+    setCurrentRecord(data.data);
 
     const artistName = data.data.spotifyMusic.artist;
     const songTitle = data.data.spotifyMusic.title;
@@ -58,6 +61,10 @@ function CardDetailModal({
       setVideoId('3', id);
     };
     getVideoId();
+
+    return () => {
+      setCurrentRecord(null);
+    };
   }, [data]);
 
   //sheet open 시 스크롤 제거
@@ -122,6 +129,7 @@ function CardDetailModal({
               </div>
               <div className="flex gap-10">
                 <ChatActionButtons
+                  recordId={recordId}
                   isChatting={isChatting}
                   isPlaying={isPlaying}
                   isOwnPost={!data?.data?.disable}
diff --git a/src/components/modalSheet/ChatActionButtons.tsx b/src/components/modalSheet/ChatActionButtons.tsx
@@ -6,8 +6,10 @@ import playIcon from '@assets/icons/play/play-icon-gray.svg';
 import pauseIcon from '@assets/icons/pause-icon-gray.svg';
 import { useNavigate } from 'react-router';
 import { useSheetStore } from '@/store/sheetStore';
+import { requestChat } from '@/apis/chat';
 
 interface ChatActionButtonsProps {
+  recordId: number;
   isChatting: boolean;
   isPlaying: boolean;
   isOwnPost: boolean; // 본인 글 여부(임시)
@@ -17,6 +19,7 @@ interface ChatActionButtonsProps {
 
 // 카드상세 모달에서 채팅중인지에 따라서 버튼 속성 결정
 function ChatActionButtons({
+  recordId,
   isChatting,
   isPlaying,
   isOwnPost,
@@ -25,17 +28,37 @@ function ChatActionButtons({
 }: ChatActionButtonsProps) {
   const navigate = useNavigate();
 
-  const { closeAllSheets } = useSheetStore(); // 모달 시트
+  const { openSheet, closeAllSheets } = useSheetStore(); // 모달 시트
 
   const handleGoToUserPage = () => {
-    closeAllSheets(); // 모든 시트를 닫아야할지 카드모달시트만 닫으면 될지 고민중
+    // closeAllSheets(); // 모든 시트를 닫아야할지 카드모달시트만 닫으면 될지 고민중
     navigate(`/user/${authorId}`); // 유저 페이지로 이동
   };
 
+  //채팅 요청
+  const request = async () => {
+    if (!recordId) {
+      console.log('recordId가 존재하지 않습니다.');
+      return;
+    }
+    try {
+      const data = await requestChat(recordId);
+      console.log(data);
+      if (data.code === 200) {
+        console.log('채팅 요청 성공');
+  
+        openSheet('isChatLoadingSheetOpen');
+      } else {
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   // 채팅 유무에 따라서 props다르게
   const chatButtonProps = isChatting
     ? { icon: headsetIcon, label: '대화 중...' }
-    : { icon: commentIcon, label: '대화하기' };
+    : { icon: commentIcon, label: '대화하기', onClick: request };
 
   // 노래 재생 유무에 따라서 다르게
   const playButtonProps = isPlaying
diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx
@@ -26,9 +26,9 @@ function Layout() {
   };
 
   const headerConfig: { [key: string]: React.ReactNode } = {
-    '/home': <Header showPostButton />,
-    '/chat': <Header showPostButton />,
-    '/mypage': <Header showMoreOptions showPostButton />,
+    '/home': <Header />,
+    '/chat': <Header />,
+    '/mypage': <Header showMoreOptions />,
     '/post': <HeaderWithBack text="글 등록" />,
     '/signup': <HeaderWithBack text="회원가입" />,
     '/mypage/blocklist': <HeaderWithBack text="차단 목록" />,
diff --git a/src/layouts/ModalSheetLayout.tsx b/src/layouts/ModalSheetLayout.tsx
@@ -33,6 +33,7 @@ function ModalSheetLayout({
   const modalVariants = {
     hidden: { opacity: 0, y: -200 }, // 모달이 화면 밖에 위치하도록
     visible: { opacity: 1, y: 0 }, // 화면 안으로 날아오는 효과
+    exit: { opacity: 0, y: -200 },
   };
 
   useEffect(() => {
@@ -51,14 +52,15 @@ function ModalSheetLayout({
   }, []);
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <motion.div
-        className="max-w-[600px] w-full h-screen flex flex-col bg-white rounded-[8px] card-shadow border border-gray-5 overflow-y-auto scroll"
-        initial="hidden"
-        animate="visible"
-        variants={modalVariants}
-        transition={{ duration: 0.3 }}
-      >
+    <motion.div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      variants={modalVariants}
+      transition={{ duration: 0.3 }}
+    >
+      <div className="max-w-[600px] w-full h-screen flex flex-col bg-white rounded-[8px] card-shadow border border-gray-5 overflow-y-auto scroll">
         {/* 헤더 */}
         <div className="sticky top-0 flex min-h-[60px] h-[60px] items-center px-4 justify-between bg-white ">
           <button
@@ -77,8 +79,8 @@ function ModalSheetLayout({
           )}
         </div>
         {children}
-      </motion.div>
-    </div>
+      </div>
+    </motion.div>
   );
 }
 
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
@@ -156,10 +156,7 @@ function Home() {
         )}
       </div>
       {selectedRecordId !== null && (
-        <CardDetailModal recordId={selectedRecordId} isChatting={true} />
-      )}
-      {selectedRecordId !== null && (
-        <CardDetailModal recordId={selectedRecordId} isChatting={true} />
+        <CardDetailModal recordId={selectedRecordId} isChatting={false} />
       )}
       {isLoading && <Loading />}
       {isMusicSheetOpen && <MusicSearchSheet />}
diff --git a/src/store/sheetStore.ts b/src/store/sheetStore.ts
