Merge pull request #232 from DevKor-github/dev

[배포] 인앱 채팅 알림 구현

Author: halionaz

src/App.tsx

@@ -8,6 +8,7 @@ import SocketProvider from '@/common/utils/SocketProvider';
 import NotificationProvider from '@/common/utils/NotificationProvider';
 import { OverlayProvider } from '@/common/utils/OverlayProvider';
 import useVersionName from '@/common/hooks/useVersionName';
+import InAppNotification from './common/components/InAppNotification';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -29,12 +30,12 @@ function App() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <SocketProvider>
-        <OverlayProvider>
+      <OverlayProvider>
+        <SocketProvider>
           <AmplitudeProvider />
           <NotificationProvider>{router}</NotificationProvider>
-        </OverlayProvider>
-      </SocketProvider>
+        </SocketProvider>
+      </OverlayProvider>
     </QueryClientProvider>
   );
 }

src/common/components/InAppNotification/index.tsx

@@ -0,0 +1,63 @@
+import { UserProfileImage } from '../UserProfileImage';
+import { motion } from 'motion/react';
+import * as s from './style.css';
+import getImageUrl from '@/common/utils/getImageUrl';
+import { useNavigate } from 'react-router';
+
+interface Props {
+  isOpen: boolean;
+  nickname: string | null;
+  profileImage: string | null;
+  content: string | null;
+  chatRoomId: number;
+}
+
+const InAppNotification = ({ isOpen, nickname, profileImage, content, chatRoomId }: Props) => {
+  const navigate = useNavigate();
+
+  return (
+    <motion.div
+      className={s.Container}
+      onClick={() => {
+        navigate(`/chat/${chatRoomId}`);
+      }}
+      initial={{ opacity: 0, translateX: '-50%' }}
+      animate={isOpen ? { opacity: 0.84, translateX: '-50%', translateY: '50%' } : { opacity: 0, translateX: '-50%' }}
+    >
+      <UserProfileImage nickname={nickname ?? ''} src={getImageUrl(profileImage ?? '')} />
+      <div className={s.Content}>
+        <div className={s.Title}>{nickname}</div>
+        <div className={s.Disc}>{content}</div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default InAppNotification;
+
+// import { motion } from 'motion/react';
+
+// import * as s from './style.css';
+
+// import { TOAST_ANIMATION_DURATION } from '@/common/hooks/useToast';
+
+// interface ToastProps {
+//   isOpen: boolean;
+//   message: string;
+// }
+// const Toast = ({ isOpen, message }: ToastProps) => {
+//   return (
+//     <div className={s.Layout}>
+//       <motion.div
+//         className={s.Container}
+//         initial={{ opacity: 0, translateY: 66 }}
+//         animate={isOpen ? { opacity: 1, translateY: 0 } : { opacity: 0, translateY: 66 }}
+//         transition={{ duration: TOAST_ANIMATION_DURATION / 1000, type: 'spring' }}
+//       >
+//         {message}
+//       </motion.div>
+//     </div>
+//   );
+// };
+
+// export default Toast;

src/common/components/InAppNotification/style.css.ts

@@ -0,0 +1,43 @@
+import { css } from '@styled-system/css';
+
+export const Container = css({
+  display: 'flex',
+  flex: 1,
+  position: 'absolute',
+  padding: '0.875rem',
+  w: '90%',
+
+  left: '50%',
+  alignItems: 'flex-start',
+  gap: '0.625rem',
+
+  borderRadius: '0.625rem',
+  background: '100',
+  boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.10)',
+  opacity: 0.84,
+});
+
+export const Content = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.25rem',
+  flex: '1 0 0',
+});
+
+export const Title = css({
+  color: 'black',
+  fontFamily: 'Pretendard',
+  fontSize: '0.75rem',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  lineHeight: 'normal',
+});
+
+export const Disc = css({
+  color: 'black',
+  fontFamily: 'Pretendard',
+  fontSize: '0.75rem',
+  fontStyle: 'normal',
+  fontWeight: 400,
+  lineHeight: 'normal',
+});

src/common/hooks/useInAppNotification.tsx

@@ -0,0 +1,50 @@
+import { useCallback, useRef } from 'react';
+import { useOverlay } from '@/common/hooks/useOverlay';
+import InAppNotification from '../components/InAppNotification';
+
+export const TOAST_ANIMATION_DURATION = 300;
+export const TOAST_DISPLAY_DURATION = 1000 + TOAST_ANIMATION_DURATION;
+
+interface OpenInAppNotificationOption {
+  nickname: string | null;
+  content: string | null;
+  profileImage: string | null;
+  chatRoomId: number;
+}
+export function useInAppNotificaiton() {
+  const overlay = useOverlay({ exitOnUnmount: false });
+  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const exitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const initTimeout = useCallback(() => {
+    // 각종 타이머들을 초기화 합니다
+    if (closeTimeoutRef.current !== null) {
+      clearTimeout(closeTimeoutRef.current);
+    }
+
+    if (exitTimeoutRef.current !== null) {
+      clearTimeout(exitTimeoutRef.current);
+    }
+  }, []);
+
+  const handleClose = useCallback(() => {
+    overlay.close();
+    exitTimeoutRef.current = setTimeout(overlay.exit, TOAST_ANIMATION_DURATION);
+  }, [overlay]);
+
+  const openNotification = ({ content, profileImage, nickname, chatRoomId }: OpenInAppNotificationOption) => {
+    initTimeout();
+    closeTimeoutRef.current = setTimeout(handleClose, TOAST_DISPLAY_DURATION);
+    overlay.open(({ isOpen }) => (
+      <InAppNotification
+        isOpen={isOpen}
+        content={content}
+        nickname={nickname}
+        profileImage={profileImage}
+        chatRoomId={chatRoomId}
+      />
+    ));
+  };
+
+  return { openNotification };
+}

src/common/utils/SocketProvider/index.tsx

@@ -3,6 +3,8 @@ import { connectSocket, subChatListSocket } from '@/common/utils/wsClient';
 import { useQueryClient } from '@tanstack/react-query';
 import { QUERY_KEYS } from '@/libs/queryKeys';
 import { useUnreadChatStore } from '@/common/store/UnreadChatStore';
+import { useInAppNotificaiton } from '@/common/hooks/useInAppNotification';
+import { useLocation } from 'react-router';
 
 interface Props {
   children: React.ReactNode;
@@ -11,6 +13,9 @@ interface Props {
 const SocketProvider = ({ children }: Props) => {
   const queryClient = useQueryClient();
   const setUnreadChatCount = useUnreadChatStore(state => state.setUnreadChatCount);
+  const { openNotification } = useInAppNotificaiton();
+  const location = useLocation();
+  console.log(location.pathname);
 
   useEffect(() => {
     let unsubscribe: (() => void) | undefined;
@@ -21,6 +26,18 @@ const SocketProvider = ({ children }: Props) => {
         unsubscribe = subChatListSocket(data => {
           queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.CHAT_LIST] });
           if (data.type === 'UNREAD_CHAT_COUNT') setUnreadChatCount(data.message.unreadChatCount);
+          if (data.type === 'CHAT') {
+            if (location.pathname.startsWith('/chat')) {
+              return;
+            }
+
+            const content = data.message.mostRecentChatContent;
+            const nickname = data.message.mostRecentChatNickname;
+            const profileImage = data.message.opponentProfileImageUrl;
+            const chatRoomId = data.message.chatRoomId;
+
+            openNotification({ content, nickname, profileImage, chatRoomId });
+          }
         });
       })
       .catch(err => {
@@ -30,7 +47,7 @@ const SocketProvider = ({ children }: Props) => {
     return () => {
       unsubscribe?.();
     };
-  }, [queryClient, setUnreadChatCount]);
+  }, [queryClient, setUnreadChatCount, location.pathname]);
 
   return <>{children}</>;
 };

src/features/chatList/components/ChatList/index.tsx

@@ -73,7 +73,7 @@ const ChatList = ({ data }: Props) => {
 
   return (
     <>
-      <Link className={s.List} to={`/chatroom/${data.chatRoomId}`} {...bind()}>
+      <Link className={s.List} to={`/chat/${data.chatRoomId}`} {...bind()}>
         <div className={s.Img}>
           <img className={s.Thumbnail} src={thumbnail} />
           <UserProfileImage nickname={data.opponentNickname} src={data.opponentProfileImageUrl} />

src/features/detail/components/BottomActions/index.tsx

@@ -38,13 +38,13 @@ const BottomActions = ({ itemId, itemInfo }: Props) => {
     }
 
     if (itemStatusData.chatRoomId) {
-      navigate(`/chatroom/${itemStatusData.chatRoomId}`);
+      navigate(`/chat/${itemStatusData.chatRoomId}`);
       return;
     }
 
     createChatroom(itemId, {
       onSuccess: data => {
-        navigate(`/chatroom/${data.data.chatRoom.chatRoomId}`);
+        navigate(`/chat/${data.data.chatRoom.chatRoomId}`);
       },
     });
   };

src/features/detail/components/ImageContainer/index.tsx

@@ -13,7 +13,6 @@ const ImageContainer = ({ images }: Props) => {
   const totalIndex = images.length;
   const [currentIndex, setCurrentIndex] = useState(0);
 
-  // TODO: 모바일에서 줌 되는지 확인하기
   return (
     <div className={s.Container}>
       <Swiper

src/features/pick/components/DetailBottom/index.tsx

@@ -51,8 +51,7 @@ const DetailBottom = ({ id, itemId, isCreator, pickState, chatRoomId }: Props) =
   const confirmPick = () => {
     confirm(id, {
       onSuccess: () => {
-        // TODO: 채팅방 이동
-        navigate(`/chatroom/${chatRoomId}`, { replace: true });
+        navigate(`/chat/${chatRoomId}`, { replace: true });
         openToast({ message: 'PICK이 확정되었어요' });
       },
     });

src/features/pick/components/TimeDrawer/index.tsx

@@ -23,7 +23,6 @@ const TimeDrawer = ({ dateTime, setDateTime, transactionText, next, prev }: Prop
       <div className={s.TimePickerWrapper}>
         <label>{transactionText} 시간</label>
         <input type="time" value={value} onChange={e => setValue(e.target.value)} />
-        {/* TODO: TimePicker 컴포넌트 사용 */}
       </div>
       <div className={s.ButtonWrapper}>
         <button className={s.DateDrawerButton({ type: 'prev' })} onClick={prev}>