HOTFIX! workspace list

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';

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,
   });
 }

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가 변경될 때 실행
+}

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,
   });
 }

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 });

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',

src/frontend/apps/web/src/features/workspace/model/use-workspace-channels.tsx → 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);

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);

src/frontend/packages/ui/src/components/Modal/modal.tsx

@@ -87,7 +87,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       </Comp>
     );
 
-    createPortal(modalContent, document.body);
+    return createPortal(modalContent, document.body);
   },
 );
 Modal.displayName = 'Modal';