워크스페이스 구현하기

src/frontend/apps/web/app/api/auth/token/route.ts

@@ -0,0 +1,31 @@
+import { cookies, headers } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+const allowedOrigins = [
+  'https://jootalkpia.netlify.app',
+  'http://localhost:3000',
+];
+
+export async function GET() {
+  const cookieStore = cookies();
+  const token = cookieStore.get('accessToken')?.value || '';
+
+  const origin = allowedOrigins.includes(headers().get('origin') || '')
+    ? headers().get('origin')
+    : allowedOrigins[0];
+
+  const response = NextResponse.json({ token });
+
+  response.headers.set('Access-Control-Allow-Origin', origin || '');
+  response.headers.set('Access-Control-Allow-Credentials', 'true');
+  response.headers.set(
+    'Access-Control-Allow-Methods',
+    'GET, POST, PATCH, DELETE',
+  );
+  response.headers.set(
+    'Access-Control-Allow-Headers',
+    'Content-Type, Authorization',
+  );
+
+  return response;
+}

src/frontend/apps/web/app/stock/[stockSlug]/page.tsx

@@ -1,7 +1,10 @@
+import Link from 'next/link';
+
+import { ChevronLeft } from 'lucide-react';
+
 import { ChatContainer } from '@/src/features/chat';
 import { StockDetailLayout } from '@/src/features/stock';
-import { ChevronLeft } from 'lucide-react';
-import Link from 'next/link';
+import { ChatIdProvider } from '@/src/shared';
 
 export async function generateMetadata({ params }) {
   const { stockSlug } = params;
@@ -15,7 +18,6 @@ export async function generateMetadata({ params }) {
 
 export default function StockDetailsPage({ params }) {
   const { stockSlug } = params;
-  // console.log(1, stockSlug);
 
   return (
     <div className="flex py-6 px-[30px] h-full min-w-0 min-h-0">
@@ -30,7 +32,9 @@ export default function StockDetailsPage({ params }) {
       </div>
 
       <div className="pl-2 basis-[55%] flex-shrink-0 min-w-0">
-        <ChatContainer stockSlug={stockSlug} />
+        <ChatIdProvider stockSlug={stockSlug}>
+          <ChatContainer stockSlug={stockSlug} />
+        </ChatIdProvider>
       </div>
     </div>
   );

src/frontend/apps/web/package.json

@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^4.1.2",
     "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^5.64.2",
     "@tanstack/react-table": "^8.20.6",
@@ -18,9 +19,11 @@
     "lucide-react": "0.473.0",
     "next": "^14.2.23",
     "next-themes": "^0.4.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
     "sockjs-client": "^1.6.1",
+    "zod": "^3.24.1",
     "zustand": "^5.0.3"
   },
   "devDependencies": {

src/frontend/apps/web/src/features/auth/model/use-logout.ts

@@ -9,6 +9,7 @@ export const useLogout = () => {
 
   return () => {
     localStorage.removeItem('user');
+    localStorage.removeItem('chat');
     setUser(null);
     document.cookie =
       'accessToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

src/frontend/apps/web/src/features/chat/api/get-history-chat.api.ts

@@ -1,4 +1,4 @@
-import { clientFetchInstance } from '@/src/shared/services';
+import { clientFetchInstance, TAG_KEYS } from '@/src/shared/services';
 
 import type { HistoryResponse } from '../model';
 
@@ -20,6 +20,9 @@ export const getHistoryChat = async (
     {
       params,
       includeAuthToken: true,
+      cache: 'force-cache',
+      revalidate: 300,
+      tags: [`${TAG_KEYS.CHAT_HISTORY(channelId)}`],
     },
   );
 };

src/frontend/apps/web/src/features/chat/api/upload-chunk-retry-api.ts

@@ -1,6 +1,7 @@
-import { ResponseChunkFileData } from '../model';
 import { uploadFiles } from './upload-file.api';
 
+import { ResponseChunkFileData } from '../model';
+
 export const uploadChunkWithRetry = async (
   chunk: Blob,
   channelId: number,

src/frontend/apps/web/src/features/chat/api/upload-file.api.ts

@@ -1,6 +1,7 @@
-import { ResponseChunkFileData } from '../model';
 import { clientFetchInstance } from '@/src/shared/services/apis';
 
+import { ResponseChunkFileData } from '../model';
+
 /**
  * 각 청크 데이터를 개별적으로 업로드하는 함수.
  * 이 함수는 하나의 청크(ChunkInfo 객체)를 API로 전송합니다.

src/frontend/apps/web/src/features/chat/api/upload-smallfile.api.ts

@@ -1,5 +1,6 @@
+import { serverFetchInstance } from '@/src/shared/services/apis';
+
 import { type ResponseChunkFileData } from '../model';
-import { clientFetchInstance } from '@/src/shared/services/apis';
 
 /**
  * 각 청크 데이터를 개별적으로 업로드하는 함수.
@@ -22,11 +23,13 @@ export async function uploadSmallFiles({
   // }
 
   try {
-    const response = await clientFetchInstance<ResponseChunkFileData, FormData>(
+    console.log('start upload');
+    const response = await serverFetchInstance<ResponseChunkFileData, FormData>(
       '/api/v1/files/small',
       'POST',
       {
         body: formData,
+        includeAuthToken: true,
       },
     );
     console.log('[uploadFiles] Response =>', response);

src/frontend/apps/web/src/features/chat/api/upload-thumbnail.api.ts

@@ -1,5 +1,6 @@
+import { serverFetchInstance } from '@/src/shared/services/apis';
+
 import type { FileResponse } from '../model';
-import { postRequest } from '@/src/shared/services/apis';
 
 type ThumbnailData = {
   fileId: number;
@@ -25,9 +26,13 @@ export async function uploadThumbnail({
   // }
 
   try {
-    const response = await postRequest<FileResponse, FormData>(
+    const response = await serverFetchInstance<FileResponse, FormData>(
       '/api/v1/files/thumbnail',
-      formData,
+      'POST',
+      {
+        body: formData,
+        includeAuthToken: true,
+      },
     );
     console.log('[uploadFiles] Response =>', response);
     return response;

src/frontend/apps/web/src/features/chat/lib/validate-filesize.util.ts

@@ -2,7 +2,7 @@ export const MAX_IMAGE_SIZE = 20 * 1024 * 1024;
 export const MAX_VIDEO_SIZE = 200 * 1024 * 1024;
 
 export const validateFileSize = (file: File) => {
-  console.log('File type:', file.type);
+  // console.log('File type:', file.type);
 
   if (!file.type.startsWith('image/') && !file.type.startsWith('video/')) {
     alert('Only image and video files are supported');

src/frontend/apps/web/src/features/chat/model/index.ts

@@ -12,8 +12,8 @@ export type {
   SendMessagePayload,
   WebSocketResponsePayload,
 } from './websocket.type';
-export { useMessages } from './use-messages';
-export { useWebSocketClient } from './use-websocket-client';
+export { useChatMessages } from './use-chat-messages';
+export { useChatSubscribe } from './use-chat-subscribe';
 export { useChatAutoScroll } from './use-chat-autoscroll';
 export { useSendMessage } from './send-message';
 export { useReverseInfiniteHistory } from './use-reverse-infinite-history';

src/frontend/apps/web/src/features/chat/model/send-message.ts

@@ -1,10 +1,10 @@
-import { useWebSocketClient } from '@/src/features/chat/model';
+import { useChatSubscribe } from '@/src/features/chat/model';
 
 export const useSendMessage = (
   channelId: number,
   currentUser: { userId: number; nickname: string; profileImage: string },
 ) => {
-  const { publishMessage } = useWebSocketClient(channelId);
+  const { publishMessage } = useChatSubscribe(channelId);
 
   return (content: string, attachmentList: number[]) => {
     if (!content.trim() && attachmentList.length === 0) return;

src/frontend/apps/web/src/features/chat/model/use-messages.ts → src/frontend/apps/web/src/features/chat/model/use-chat-messages.ts

@@ -1,7 +1,7 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import type { WebSocketResponsePayload } from '@/src/features/chat/model';
 
-export const useMessages = (topic: string) => {
+export const useChatMessages = (topic: string) => {
   const queryClient = useQueryClient();
   const queryKey = ['messages', topic];
 

src/frontend/apps/web/src/features/chat/model/use-websocket-client.ts → src/frontend/apps/web/src/features/chat/model/use-chat-subscribe.ts

@@ -9,7 +9,7 @@ import type {
 import { useStompWebSocket } from '@/src/shared/providers';
 import { QUERY_KEYS } from '@/src/shared/services';
 
-export const useWebSocketClient = (channelId: number) => {
+export const useChatSubscribe = (channelId: number) => {
   const queryClient = useQueryClient();
   const { client } = useStompWebSocket();
   const [isConnected, setIsConnected] = useState(false);
@@ -33,7 +33,7 @@ export const useWebSocketClient = (channelId: number) => {
       return;
     }
 
-    console.log(`📡 Subscribing to /subscribe/chat.${channelId}`);
+    // console.log(`📡 Subscribing to /subscribe/chat.${channelId}`);
     const subscription = client.subscribe(
       `/subscribe/chat.${channelId}`,
       (message) => {

src/frontend/apps/web/src/features/chat/model/use-forward-infinite-history.ts

@@ -5,19 +5,23 @@ import { QUERY_KEYS } from '@/src/shared/services';
 import { getHistoryChat } from '../api';
 import type { HistoryResponse } from '../model';
 
-export function useForwardInfiniteHistory(
-  channelId: number,
-  initialCursor?: number,
-) {
+export function useForwardInfiniteHistory(channelId: number) {
+  const queryKey = QUERY_KEYS.forwardHistory(channelId);
+
   return useInfiniteQuery<HistoryResponse>({
-    queryKey: QUERY_KEYS.forwardHistory(channelId),
+    queryKey,
     queryFn: async ({ pageParam }: { pageParam?: unknown }) => {
+      if (pageParam === undefined) {
+        return getHistoryChat(channelId, 'forward', undefined, 5);
+      }
       return getHistoryChat(channelId, 'forward', pageParam as number, 5);
     },
     getNextPageParam: (lastPage: HistoryResponse): number | undefined =>
       lastPage.hasNext && lastPage.lastCursorId !== null
         ? lastPage.lastCursorId
         : undefined,
-    initialPageParam: initialCursor,
+    initialPageParam: undefined,
+    staleTime: Infinity,
+    gcTime: Infinity,
   });
 }

src/frontend/apps/web/src/features/chat/model/use-reverse-infinite-history.ts

@@ -5,19 +5,31 @@ import { QUERY_KEYS } from '@/src/shared/services';
 import { getHistoryChat } from '../api';
 import type { HistoryResponse } from '../model';
 
-export function useReverseInfiniteHistory(
-  channelId: number,
-  initialCursor?: number,
-) {
+export function useReverseInfiniteHistory(channelId: number) {
+  const queryKey = QUERY_KEYS.reverseHistory(channelId);
+
   return useInfiniteQuery<HistoryResponse>({
-    queryKey: QUERY_KEYS.reverseHistory(channelId),
-    queryFn: async ({ pageParam }: { pageParam: unknown }) => {
-      return getHistoryChat(channelId, 'backward', pageParam as number, 30);
+    queryKey,
+    queryFn: async ({ pageParam }: { pageParam?: unknown }) => {
+      if (pageParam === undefined) {
+        const data = getHistoryChat(channelId, 'backward', undefined, 30);
+        return data;
+      }
+      const data = getHistoryChat(
+        channelId,
+        'backward',
+        pageParam as number,
+        30,
+      );
+      return data;
     },
     getNextPageParam: (lastPage: HistoryResponse): number | undefined =>
       lastPage.hasNext && lastPage.lastCursorId !== null
         ? lastPage.lastCursorId
         : undefined,
-    initialPageParam: initialCursor,
+    initialPageParam: undefined,
+
+    staleTime: Infinity,
+    gcTime: Infinity,
   });
 }

src/frontend/apps/web/src/features/chat/ui/chat-container.tsx

@@ -5,16 +5,17 @@ import { SidebarContainer } from '@/src/features/workspace';
 
 import ChatHeader from './chat-header';
 import ChatSection from './chat-section';
-import { useWebSocketClient } from '../model';
+import { useChatSubscribe } from '../model';
 import { useEffect } from 'react';
+import { useChatId } from '@/src/shared';
 
 type ChatContainerProps = {
   stockSlug: string;
 };
 
 const ChatContainer = ({ stockSlug }: ChatContainerProps) => {
-  const channelId = 1;
-  const { subscribe, isConnected } = useWebSocketClient(channelId);
+  const { channelId } = useChatId();
+  const { subscribe, isConnected } = useChatSubscribe(channelId);
 
   useEffect(() => {
     if (!isConnected) return;
@@ -30,7 +31,7 @@ const ChatContainer = ({ stockSlug }: ChatContainerProps) => {
       <SidebarContainer stockSlug={stockSlug} />
       <SidebarInset className="flex flex-col min-w-0 min-h-0 w-full h-full">
         <ChatHeader stockSlug={stockSlug} />
-        <ChatSection />
+        <ChatSection stockSlug={stockSlug} />
       </SidebarInset>
     </SidebarProvider>
   );