diff --git a/src/frontend/apps/web/src/features/chat/model/index.ts b/src/frontend/apps/web/src/features/chat/model/index.ts index 1e03c632..cdf8bfc6 100644 --- a/src/frontend/apps/web/src/features/chat/model/index.ts +++ b/src/frontend/apps/web/src/features/chat/model/index.ts @@ -19,3 +19,4 @@ export { useSendMessage } from './send-message'; export { useReverseInfiniteHistory } from './use-reverse-infinite-history'; export { useForwardInfiniteHistory } from './use-forward-infinite-history'; export type { HistoryResponse, MessageItem } from './chat-data.type'; +export { useInvalidateChatHistory } from './use-invalidate-chat-history'; diff --git a/src/frontend/apps/web/src/features/chat/model/use-forward-infinite-history.ts b/src/frontend/apps/web/src/features/chat/model/use-forward-infinite-history.ts index 5f8b9ceb..acf1e2a7 100644 --- a/src/frontend/apps/web/src/features/chat/model/use-forward-infinite-history.ts +++ b/src/frontend/apps/web/src/features/chat/model/use-forward-infinite-history.ts @@ -23,5 +23,6 @@ export function useForwardInfiniteHistory(channelId: number) { initialPageParam: undefined, staleTime: Infinity, gcTime: Infinity, + enabled: !!channelId, }); } diff --git a/src/frontend/apps/web/src/features/chat/model/use-invalidate-chat-history.ts b/src/frontend/apps/web/src/features/chat/model/use-invalidate-chat-history.ts new file mode 100644 index 00000000..c80c53f4 --- /dev/null +++ b/src/frontend/apps/web/src/features/chat/model/use-invalidate-chat-history.ts @@ -0,0 +1,21 @@ +import { QUERY_KEYS } from '@/src/shared'; +import { useQueryClient } from '@tanstack/react-query'; +import { useEffect } from 'react'; + +export function useInvalidateChatHistory(channelId: number) { + const queryClient = useQueryClient(); + + useEffect(() => { + if (!channelId) return; + + console.log(`๐Ÿ”„ ์ฑ„๋„ ๋ณ€๊ฒฝ ๊ฐ์ง€: ${channelId} -> ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™” ์ค‘...`); + + // ๊ธฐ์กด ์ฑ„๋„์˜ ์บ์‹œ ๋ฌดํšจํ™” + queryClient.invalidateQueries({ + queryKey: QUERY_KEYS.forwardHistory(channelId), + }); + queryClient.invalidateQueries({ + queryKey: QUERY_KEYS.reverseHistory(channelId), + }); + }, [channelId, queryClient]); // โœ… ์ฑ„๋„ ID๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ ์‹คํ–‰ +} diff --git a/src/frontend/apps/web/src/features/chat/model/use-reverse-infinite-history.ts b/src/frontend/apps/web/src/features/chat/model/use-reverse-infinite-history.ts index 625189b4..a781b37e 100644 --- a/src/frontend/apps/web/src/features/chat/model/use-reverse-infinite-history.ts +++ b/src/frontend/apps/web/src/features/chat/model/use-reverse-infinite-history.ts @@ -31,5 +31,6 @@ export function useReverseInfiniteHistory(channelId: number) { staleTime: Infinity, gcTime: Infinity, + enabled: !!channelId, }); } diff --git a/src/frontend/apps/web/src/features/chat/ui/chat-message-list.tsx b/src/frontend/apps/web/src/features/chat/ui/chat-message-list.tsx index 172cbed0..0b022d76 100644 --- a/src/frontend/apps/web/src/features/chat/ui/chat-message-list.tsx +++ b/src/frontend/apps/web/src/features/chat/ui/chat-message-list.tsx @@ -2,9 +2,14 @@ import ChatMessageItem from './chat-message-item'; import ChatReverseHistory from './chat-history-reverse'; import ChatForwardHistory from './chat-history-forward'; -import { useChatAutoScroll, type WebSocketResponsePayload } from '../model'; +import { + useChatAutoScroll, + useInvalidateChatHistory, + type WebSocketResponsePayload, +} from '../model'; import { processMessages } from '../lib'; import { Toaster } from '@workspace/ui/components'; +import { useChatId } from '@/src/shared'; export type ChatContentProps = { type?: 'default' | 'live'; @@ -16,6 +21,8 @@ const ChatMessageList = ({ messages = [], }: ChatContentProps) => { const { bottomRef, containerRef } = useChatAutoScroll(messages); + const { channelId } = useChatId(); + useInvalidateChatHistory(channelId); // if (!messages || messages.length === 0) return null; // console.log('๐Ÿ”— ChatContent:', { messages }); diff --git a/src/frontend/apps/web/src/features/stock/ui/stocks-list-table.tsx b/src/frontend/apps/web/src/features/stock/ui/stocks-list-table.tsx index 5a4efeea..a2ef9fc8 100644 --- a/src/frontend/apps/web/src/features/stock/ui/stocks-list-table.tsx +++ b/src/frontend/apps/web/src/features/stock/ui/stocks-list-table.tsx @@ -31,7 +31,7 @@ import { ChevronDown } from 'lucide-react'; import { RealTimeStock } from '../model/stock.types'; export const RealTimeDummy: RealTimeStock[] = [ { - slug: 'samsung', + slug: 'samsung-electronics', name: '์‚ผ์„ฑ์ „์ž', businessDate: '2025-02-27', code: '005930', diff --git a/src/frontend/apps/web/src/features/workspace/model/use-workspace-channels.tsx b/src/frontend/apps/web/src/features/workspace/model/use-workspace-channels.ts similarity index 93% rename from src/frontend/apps/web/src/features/workspace/model/use-workspace-channels.tsx rename to src/frontend/apps/web/src/features/workspace/model/use-workspace-channels.ts index 07a9d66e..c8709b9b 100644 --- a/src/frontend/apps/web/src/features/workspace/model/use-workspace-channels.tsx +++ b/src/frontend/apps/web/src/features/workspace/model/use-workspace-channels.ts @@ -1,6 +1,6 @@ import { useEffect, useReducer } from 'react'; -import { useQuery } from '@tanstack/react-query'; +import { useQuery, QueryClient, useQueryClient } from '@tanstack/react-query'; import { QUERY_KEYS } from '@/src/shared'; @@ -55,6 +55,7 @@ const workspaceReducer = (state: State, action: Action): State => { export const useWorkspaceChannels = (workspaceId: number) => { const { subscribe } = useWorkspaceSubscription(workspaceId); const { data: workspaceSocketMessage } = useWorkspaceMessages(workspaceId); + const queryClient = useQueryClient(); const [state, dispatch] = useReducer(workspaceReducer, initialState); @@ -113,7 +114,9 @@ export const useWorkspaceChannels = (workspaceId: number) => { try { console.log('์ฑ„๋„ ๋ชฉ๋ก ์ƒˆ๋กœ๊ณ ์นจ ์ค‘...'); const result = await refetch(); - console.log('์ฑ„๋„ ๋ชฉ๋ก ์ƒˆ๋กœ๊ณ ์นจ ์™„๋ฃŒ:', result.data); + await queryClient.invalidateQueries({ + queryKey: QUERY_KEYS.workspaceList(workspaceId), + }); return result; } catch (error) { console.error('์ฑ„๋„ ๋ชฉ๋ก ์ƒˆ๋กœ๊ณ ์นจ ์‹คํŒจ:', error); diff --git a/src/frontend/apps/web/src/features/workspace/ui/sidebar-container.tsx b/src/frontend/apps/web/src/features/workspace/ui/sidebar-container.tsx index 30140356..f489ac59 100644 --- a/src/frontend/apps/web/src/features/workspace/ui/sidebar-container.tsx +++ b/src/frontend/apps/web/src/features/workspace/ui/sidebar-container.tsx @@ -26,7 +26,7 @@ import { useUnreadMessages, useUnreadSubscription, } from '../model'; -import { createWorkspace, getWorkspaceList, joinChannel } from '../api'; // joinChannel ์ถ”๊ฐ€ +import { createWorkspace, joinChannel } from '../api'; // joinChannel ์ถ”๊ฐ€ import { getWorkspaceId } from '../lib'; // ์ฑ„๋„ ๋ Œ๋”๋ง ํ•จ์ˆ˜๋ฅผ ๋ถ„๋ฆฌ (joinedChannels์™€ unjoinedChannels๋ฅผ ๋ณ„๋„๋กœ ์ฒ˜๋ฆฌ) @@ -170,7 +170,7 @@ const SidebarContainer = ({ stockSlug }: { stockSlug: string }) => { if (window.confirm(`'${channel.channelName}' ์ฑ„๋„์— ๊ฐ€์ž…ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?`)) { try { await joinChannel(workspaceId, channel.channelId); - getWorkspaceList(workspaceId); + refetch(); handleChannelClick(channel.channelId); } catch (error) { console.error('์ฑ„๋„ ๊ฐ€์ž… ์‹คํŒจ:', error); diff --git a/src/frontend/packages/ui/src/components/Modal/modal.tsx b/src/frontend/packages/ui/src/components/Modal/modal.tsx index 3b4274c5..af1398d5 100644 --- a/src/frontend/packages/ui/src/components/Modal/modal.tsx +++ b/src/frontend/packages/ui/src/components/Modal/modal.tsx @@ -87,7 +87,7 @@ const Modal = React.forwardRef( ); - createPortal(modalContent, document.body); + return createPortal(modalContent, document.body); }, ); Modal.displayName = 'Modal';