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

[feat] 헤더 클릭 시 상단으로 스크롤, 채팅 수락 시 로직 구현

Author: kangsuyeong

src/apis/chat.ts

@@ -34,13 +34,13 @@ export const cancelChatRequest = async (emotionRecordId: number) => {
 //채팅방 생성
 export const createChatroom = async (emotionRecordId: number) => {
   const { data } = await axiosInstance.post(
-    `/chat/chatroom/create?recordId=${emotionRecordId}`,
+    `/chat/create?recordId=${emotionRecordId}`,
     {},
   );
   return data;
 };
 //채팅방 닫기
 export const closeChatroom = async (chatRoomId: number) => {
-  const { data } = await axiosInstance.post(`/chat/chatroom/close?chatRoomId=${chatRoomId}`, {});
+  const { data } = await axiosInstance.post(`/chat/close?chatRoomId=${chatRoomId}`, {});
   return data;
 };

src/components/ChatConnectLoadingSheet.tsx

@@ -6,14 +6,13 @@ 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 { cancelChatRequest, createChatroom } from '@/apis/chat';
 import { useNavigate } from 'react-router';
 dayjs.extend(duration);
 
 export default function ChatConnectLoadingSheet() {
   const navigate = useNavigate();
-  //zustand로 관리
-  //거절, 취소하거나 홈으로 가기 누르면 false로
+
   const { currentRecord, closeAllSheets, closeSheet } = useSheetStore();
 
   const [timeLeft, setTimeLeft] = useState(60);
@@ -25,6 +24,7 @@ export default function ChatConnectLoadingSheet() {
     navigate('/home');
   };
 
+  //타이머 60초
   useEffect(() => {
     const endTime = new Date().getTime() + 60 * 1000; // 현재 시간 + 60초
 
@@ -50,14 +50,14 @@ export default function ChatConnectLoadingSheet() {
 
   const formattedTime = dayjs.duration(timeLeft, 'seconds').format('mm:ss');
 
-  //채팅 요청 취소
+  //채팅 요청 취소(요청 보낸 사람)
   const cancel = async () => {
-    console.log(currentRecord);
     if (!currentRecord) {
       console.log('record가 존재하지 않습니다');
       return;
     }
     try {
+      console.log(currentRecord);
       await cancelChatRequest(currentRecord.recordId);
       console.log('채팅 취소');
 
@@ -67,7 +67,30 @@ export default function ChatConnectLoadingSheet() {
     }
   };
 
-  const isReceiver = false;
+  //채팅방 생성 (요청 받는 사람 입장에서 생성?)
+  const createChat = async () => {
+    try {
+      const data = await createChatroom(17);
+      console.log(data);
+
+      if (data.code === 200) {
+        navigate('/chatroom');
+        closeAllSheets();
+      }
+      //500 이면 이미 방 있음 => 기존 채팅방으로
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  //채팅 요정 거절
+  const refuseRequest = () => {
+    closeSheet('isChatLoadingSheetOpen');
+  };
+
+  //채팅 신청한 사람이 상대가 수락했다는 sse 받으면 closeAllSheet, chatroom으로 이동
+
+  const isReceiver = true;
 
   if (connetFail) {
     return (
@@ -135,8 +158,12 @@ export default function ChatConnectLoadingSheet() {
         {/* 받는 사람일 경우 */}
         {isReceiver && (
           <div className="absolute bottom-10 flex gap-[6px] px-3 w-full">
-            <Button variant="primary">수락하기</Button>
-            <Button variant="secondary">거절하기</Button>
+            <Button onClick={createChat} variant="primary">
+              수락하기
+            </Button>
+            <Button onClick={refuseRequest} variant="secondary">
+              거절하기
+            </Button>
           </div>
         )}
       </div>

src/components/Modal.tsx

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 // import { spawn } from 'child_process';
 
 export default function Modal() {
-  const { modal, closeModal } = useModalStore();
+  const { modal } = useModalStore();
   if (!modal.isOpen) return null;
   return createPortal(
     <div

src/components/MoreOptionsSelect.tsx

@@ -29,7 +29,10 @@ function MoreOptionsSelect({ items }: MoreOptionsSelectProps) {
     <div className="relative flex" ref={selectRef}>
       <button
         className="flex justify-center items-center cursor-pointer w-6 h-6"
-        onClick={() => setIsSelectOpen((prev) => !prev)}
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsSelectOpen((prev) => !prev);
+        }}
       >
         <img src={ellipsisIcon} alt="더보기" />
       </button>

src/components/modalSheet/ChatActionButtons.tsx

@@ -28,7 +28,7 @@ function ChatActionButtons({
 }: ChatActionButtonsProps) {
   const navigate = useNavigate();
 
-  const { openSheet, closeAllSheets } = useSheetStore(); // 모달 시트
+  const { openSheet } = useSheetStore(); // 모달 시트
 
   const handleGoToUserPage = () => {
     // closeAllSheets(); // 모든 시트를 닫아야할지 카드모달시트만 닫으면 될지 고민중

src/layouts/Layout.tsx

@@ -5,6 +5,7 @@ import HeaderWithBack from '@/layouts/header/HeaderWithBack';
 import HeaderChat from '@/layouts/header/HeaderChat';
 import { twMerge } from 'tailwind-merge';
 import PostButton from '@/components/PostButton';
+import { useRef } from 'react';
 
 function Layout() {
   const location = useLocation(); // 현재 URL 가져오기
@@ -47,16 +48,28 @@ function Layout() {
 
   const hasPostButton = location.pathname === '/home' || location.pathname === '/mypage';
 
+  //헤더 클릭 시 스크롤
+  const scrollContainerRef = useRef<HTMLDivElement>(null); // 스크롤 컨테이너 참조
+
+  const handleScrollToTop = () => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
   return (
-    <div className="relative max-w-[600px] min-w-[320px] w-full min-h-screen mx-auto bg-background flex flex-col">
+    <div
+      ref={scrollContainerRef}
+      className="relative max-w-[600px] min-w-[320px] w-full h-screen mx-auto bg-background flex flex-col overflow-y-auto scroll"
+    >
       {/* 헤더 */}
-      {renderHeader()}
+      <div onClick={handleScrollToTop}>{renderHeader()}</div>
 
       {/* 메인 컨텐츠 영역 */}
       <div
         className={twMerge(
           'pt-[44px] flex-1 flex justify-center w-full px-3',
-          // showNav && 'pb-[62px] ', // 하단 네비게이션 숨길때만 padding주기
+          showNav && 'pb-[62px] ', // 하단 네비게이션 숨길때만 padding주기
         )}
       >
         <Outlet />

src/layouts/header/HeaderChat.tsx

@@ -57,7 +57,9 @@ function HeaderChat({ showLogo = false, showNickname = false }: HeaderChatProps)
 
         {/* 나가기 버튼 */}
         <button
-          onClick={() =>
+          onClick={(e) => {
+            e.stopPropagation();
+
             openModal({
               title: '이 대화를 마무리할까요?',
               message: '채팅을 종료하면 다시 복구할 수 없습니다.',
@@ -69,8 +71,8 @@ function HeaderChat({ showLogo = false, showNickname = false }: HeaderChatProps)
                 console.log('취소');
                 closeModal();
               },
-            })
-          }
+            });
+          }}
           className="cursor-pointer"
         >
           <img src={exitIcon} alt="나가기" />

src/layouts/header/HeaderWithBack.tsx

@@ -1,6 +1,8 @@
 import { addBlockList } from '@/apis/blockList';
 import MoreOptionsSelect from '@/components/MoreOptionsSelect';
 import HedaerLayout from '@/layouts/header/HedaerLayout';
+import { useModalStore } from '@/store/modalStore';
+import { useSheetStore } from '@/store/sheetStore';
 import backIcon from '@assets/icons/back-icon.svg';
 import { useNavigate, useParams } from 'react-router';
 
@@ -13,21 +15,48 @@ interface HeaderWithBackProps {
 function HeaderWithBack({ showMoreOptions = false, text }: HeaderWithBackProps) {
   const navigate = useNavigate();
   const param = useParams();
+
+  const { openModal, closeModal } = useModalStore();
+  const { currentRecord } = useSheetStore();
   // 임시함수
   const handleBlockUser = async () => {
-    console.log(param.userId);
-    if (param.userId) {
-      const data = await addBlockList(param.userId);
-      console.log(data);
+    if (!param.userId || !currentRecord) {
+      console.log('차단 실패');
+      return;
     }
+
+    openModal({
+      title: `${currentRecord?.nickName}님을 차단할까요?`,
+      message: '차단된 사용자는 더이상 피드에 나타나지 않습니다',
+      onConfirm: async () => {
+        if (param.userId) {
+          try {
+            const data = await addBlockList(param.userId);
+            closeModal();
+            console.log(data);
+          } catch (error) {
+            console.log(error);
+          }
+        }
+      },
+      onCancel: () => {
+        closeModal();
+      },
+    });
   };
 
   return (
     <HedaerLayout>
       <div className="flex items-center justify-between w-full">
         {/* 뒤로가기 / 회원가입 */}
         <div className="gap-[10px] flex items-center">
-          <button onClick={() => navigate(-1)} className="px-2 py-3 cursor-pointer">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate(-1);
+            }}
+            className="px-2 py-3 cursor-pointer"
+          >
             <img src={backIcon} alt="뒤로가기 아이콘" />
           </button>
           {text && <span className="h4-b text-primary-normal">{text}</span>}

src/pages/chat/Chat.tsx

@@ -14,31 +14,31 @@ export default function Chat({}) {
     getChatList();
   }, []);
 
-  const mockData = [
-    {
-      chatroom_id: 3,
-      nickname: '길동이',
-      emotion: '행복한',
-      spotify_id: 33,
-      title: '라일락',
-      artist: '아이유',
-      album_image:
-        'https://i.namu.wiki/i/L4gbrOjwTsNcvpsCq8b4P-3eX9Cs0lrIvwHxtFE7S5jaeMsbdelvBqCLMwe6AJJw2zBQqSI4wE0_Qn-EwaeZdnLvseFvt1w9dg-xo9KrFF_GacO_R7BnHI6XRyDDXvr-PHMmSEnqgcrzLjdbQF9obA.webp',
-      created_at: '2025-02-19',
-      comment: '흠흠',
-    },
-    {
-      chatroom_id: 1,
-      nickname: '철수',
-      emotion: '우울한',
-      spotify_id: 88,
-      title: 'Blue Sky',
-      artist: 'Cool Band',
-      album_image: null,
-      created_at: '2025-02-10',
-      comment: '김밥',
-    },
-  ];
+  // const mockData = [
+  //   {
+  //     chatroom_id: 3,
+  //     nickname: '길동이',
+  //     emotion: '행복한',
+  //     spotify_id: 33,
+  //     title: '라일락',
+  //     artist: '아이유',
+  //     album_image:
+  //       'https://i.namu.wiki/i/L4gbrOjwTsNcvpsCq8b4P-3eX9Cs0lrIvwHxtFE7S5jaeMsbdelvBqCLMwe6AJJw2zBQqSI4wE0_Qn-EwaeZdnLvseFvt1w9dg-xo9KrFF_GacO_R7BnHI6XRyDDXvr-PHMmSEnqgcrzLjdbQF9obA.webp',
+  //     created_at: '2025-02-19',
+  //     comment: '흠흠',
+  //   },
+  //   {
+  //     chatroom_id: 1,
+  //     nickname: '철수',
+  //     emotion: '우울한',
+  //     spotify_id: 88,
+  //     title: 'Blue Sky',
+  //     artist: 'Cool Band',
+  //     album_image: null,
+  //     created_at: '2025-02-10',
+  //     comment: '김밥',
+  //   },
+  // ];
 
   if (!chatList.length) {
     return (

src/pages/home/Home.tsx

@@ -119,8 +119,9 @@ function Home() {
         </h2>
         <EmotionFilter onEmotionClick={onEmotionClick} selectedEmotion={selectedEmotion} />
       </div>
+
       {/* 메인카드 리스트 */}
-      <div className="h-[calc(100vh-334px-env(safe-area-inset-bottom,16px))] overflow-y-auto scroll">
+      <div className='flex-1'>
         {emotionRecords?.pages[0].records.length > 0 ? (
           <>
             <div className="flex flex-col items-center gap-2.5 pb-5 ">