feat: unread chat count badge

Author: halionaz

src/common/components/Navigator/index.tsx

@@ -1,19 +1,23 @@
 import { Link, useLocation } from 'react-router';
 import * as s from './style.css';
 import { NAVIGATION_MENU_LIST } from '@/pages/routes';
+import { useUnreadChatStore } from '@/common/store/UnreadChatStore';
 
 // TODO: 아이콘에도 Transition Animation 추가
 const Navigator = () => {
   const { pathname } = useLocation();
+  const unreadChatCount = useUnreadChatStore(state => state.unreadChatCount);
 
   return (
     <nav className={s.Container}>
       {NAVIGATION_MENU_LIST.map(({ label, path, selectedClassName, unSelectedClassName }) => {
         const selected = pathname === path;
+        const viewUnreadChatCount = label === '채팅' && unreadChatCount > 0;
         return (
           <Link key={path} className={s.Menu({ selected })} to={path}>
             <span className={selected ? selectedClassName : unSelectedClassName} />
             <p>{label}</p>
+            {viewUnreadChatCount && <div className={s.UnreadChatCount}>{unreadChatCount}</div>}
           </Link>
         );
       })}

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

@@ -31,6 +31,7 @@ export const Menu = cva({
     lineHeight: 1.2,
     letterSpacing: '-0.0175rem',
     cursor: 'pointer',
+    position: 'relative',
     '& p': {
       lineClamp: 1,
       whiteSpace: 'nowrap',
@@ -61,3 +62,17 @@ export const Menu = cva({
     selected: false,
   },
 });
+
+export const UnreadChatCount = css({
+  position: 'absolute',
+  bgColor: 'main',
+  color: '100',
+  p: '0.0625rem 0.375rem',
+  rounded: 'full',
+  right: '0.25rem',
+  top: '-0.25rem',
+  textAlign: 'center',
+  fontSize: '0.75rem',
+  fontWeight: 400,
+  lineHeight: '1.4',
+});

src/common/store/UnreadChatStore.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface UnreadChatStore {
+  unreadChatCount: number;
+  setUnreadChatCount: (unreadChatCount: number) => void;
+}
+
+export const useUnreadChatStore = create<UnreadChatStore>()(set => ({
+  unreadChatCount: 0,
+  setUnreadChatCount: unreadChatCount => set({ unreadChatCount }),
+}));

src/common/utils/SocketProvider/index.tsx

@@ -2,22 +2,25 @@ import { useEffect } from 'react';
 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';
 
 interface Props {
   children: React.ReactNode;
 }
 
 const SocketProvider = ({ children }: Props) => {
   const queryClient = useQueryClient();
+  const setUnreadChatCount = useUnreadChatStore(state => state.setUnreadChatCount);
 
   useEffect(() => {
     let unsubscribe: (() => void) | undefined;
 
     connectSocket()
       .then(() => {
         console.log('앱 시작 시 WebSocket 연결 완료');
-        unsubscribe = subChatListSocket(() => {
+        unsubscribe = subChatListSocket(data => {
           queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.CHAT_LIST] });
+          setUnreadChatCount(data.message.unreadChatCount);
         });
       })
       .catch(err => {