Merge pull request #229 from DevKor-github/feat/#228/unread-chat

fix(mod): provider 로직 이주

Author: halionaz

src/App.tsx

@@ -3,10 +3,10 @@ import routes from '@/pages/routes';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import 'react-time-picker-typescript/dist/style.css';
 
-import SocketProvider from './common/components/SocketProvider';
-import { OverlayProvider } from '@/common/components/OverlayProvider';
-import NotificationProvider from '@/common/components/NotificationProvider';
 import AmplitudeProvider from '@/common/utils/AmplitudeProvider';
+import SocketProvider from '@/common/utils/SocketProvider';
+import NotificationProvider from '@/common/utils/NotificationProvider';
+import { OverlayProvider } from '@/common/utils/OverlayProvider';
 
 const queryClient = new QueryClient({
   defaultOptions: {

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/components/SocketProvider/index.tsx

@@ -1,6 +1,6 @@
+import { OverlayContext } from '@/common/utils/OverlayProvider/OverlayContext';
+import { OverlayController, type OverlayControlRef } from '@/common/utils/OverlayProvider/OverlayController';
 import { useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-import { OverlayContext } from '@/common/components/OverlayProvider/OverlayContext';
-import { OverlayController, type OverlayControlRef } from '@/common/components/OverlayProvider/OverlayController';
 
 export type CreateOverlayElement = (props: { isOpen: boolean; close: () => void; exit: () => void }) => ReactNode;
 

src/common/hooks/useOverlay.tsx

@@ -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/store/UnreadChatStore.ts

@@ -1,4 +1,4 @@
-import { OverlayContext } from '@/common/components/OverlayProvider/OverlayContext';
+import { OverlayContext } from '@/common/utils/OverlayProvider/OverlayContext';
 import React, { useCallback, useMemo, useState, type PropsWithChildren, type ReactNode } from 'react';
 
 export function OverlayProvider({ children }: PropsWithChildren) {