diff --git a/src/app/workspaces/[workspaceId]/chat/page.tsx b/src/app/workspaces/[workspaceId]/chat/page.tsx
new file mode 100644
index 0000000..3cff06f
--- /dev/null
+++ b/src/app/workspaces/[workspaceId]/chat/page.tsx
@@ -0,0 +1,16 @@
+// 워크스페이스 채팅 페이지의 서버 진입점으로 초기 메시지를 조회해 클라이언트 화면에 전달합니다.
+import { getChatRoom } from '@/entities/chat';
+import { ChatView } from '@/views/chat';
+
+interface ChatPageProps {
+  params: Promise<{
+    workspaceId: string;
+  }>;
+}
+
+export default async function ChatPage({ params }: ChatPageProps) {
+  const { workspaceId } = await params;
+  const initialData = await getChatRoom(workspaceId);
+
+  return <ChatView workspaceId={workspaceId} initialData={initialData} />;
+}
diff --git a/src/entities/chat/api/chat-actions.ts b/src/entities/chat/api/chat-actions.ts
new file mode 100644
index 0000000..942f7c2
--- /dev/null
+++ b/src/entities/chat/api/chat-actions.ts
@@ -0,0 +1,90 @@
+'use server';
+
+// 채팅 메시지를 현재 로그인한 워크스페이스 멤버 명의로 저장합니다.
+import { z } from 'zod';
+import { getCurrentUserId } from '@/shared/api/supabase/current-user';
+import { createSupabaseServerClient } from '@/shared/api/supabase/server';
+import type { ChatMessage } from '../model/chat.types';
+
+const uuidSchema = z.guid();
+const chatMessageSchema = z.object({
+  // 낙관적 메시지와 DB·Realtime 메시지를 같은 행으로 식별하기 위한 클라이언트 생성 UUID입니다.
+  messageId: uuidSchema,
+  workspaceId: uuidSchema,
+  content: z.string().trim().min(1, '메시지를 입력해주세요.').max(2_000),
+});
+
+export type ChatActionResult<T> = { ok: true; data: T } | { ok: false; message: string };
+
+class ChatActionError extends Error {}
+
+function throwChatActionError(message: string): never {
+  throw new ChatActionError(message);
+}
+
+function toActionFailure(error: unknown, fallbackMessage: string): ChatActionResult<never> {
+  if (error instanceof ChatActionError) return { ok: false, message: error.message };
+
+  console.error('[chat action] 예상하지 못한 오류:', error);
+  return { ok: false, message: fallbackMessage };
+}
+
+async function getCurrentWorkspaceMember(workspaceId: string) {
+  const supabase = await createSupabaseServerClient();
+  const currentUserId = await getCurrentUserId();
+  const { data: member, error } = await supabase
+    .from('workspace_members')
+    .select('user_id, workspace_nickname')
+    .eq('workspace_id', workspaceId)
+    .eq('user_id', currentUserId)
+    .maybeSingle();
+
+  if (error) {
+    console.error('[chat action] 워크스페이스 멤버 확인 실패:', error);
+    throwChatActionError('워크스페이스 멤버 정보를 확인하지 못했습니다.');
+  }
+
+  if (!member) throwChatActionError('워크스페이스 멤버만 메시지를 보낼 수 있습니다.');
+
+  return { supabase, member };
+}
+
+export async function sendChatMessage(input: {
+  messageId: string;
+  workspaceId: string;
+  content: string;
+}): Promise<ChatActionResult<ChatMessage>> {
+  try {
+    const value = chatMessageSchema.parse(input);
+    const { supabase, member } = await getCurrentWorkspaceMember(value.workspaceId);
+    const { data, error } = await supabase
+      .from('chat_messages')
+      .insert({
+        id: value.messageId,
+        workspace_id: value.workspaceId,
+        sender_id: member.user_id,
+        content: value.content,
+      })
+      .select('id, workspace_id, sender_id, content, created_at')
+      .single();
+
+    if (error) {
+      console.error('[chat action] 메시지 저장 실패:', error);
+      throwChatActionError('메시지 전송에 실패했습니다. 잠시 후 다시 시도해주세요.');
+    }
+
+    return {
+      ok: true,
+      data: {
+        id: data.id,
+        workspaceId: data.workspace_id,
+        senderId: data.sender_id,
+        senderName: member.workspace_nickname || '사용자',
+        content: data.content,
+        createdAt: data.created_at,
+      },
+    };
+  } catch (error) {
+    return toActionFailure(error, '메시지 전송에 실패했습니다. 입력값을 확인해주세요.');
+  }
+}
diff --git a/src/entities/chat/api/get-chat-room.ts b/src/entities/chat/api/get-chat-room.ts
new file mode 100644
index 0000000..d7617ba
--- /dev/null
+++ b/src/entities/chat/api/get-chat-room.ts
@@ -0,0 +1,62 @@
+'use server';
+
+// 워크스페이스 채팅방의 최근 메시지와 참여자 정보를 서버에서 함께 조회합니다.
+import { z } from 'zod';
+import { getCurrentUserId } from '@/shared/api/supabase/current-user';
+import { createSupabaseServerClient } from '@/shared/api/supabase/server';
+import type { ChatMessage, ChatRoomData } from '../model/chat.types';
+
+// 초기 화면 부하를 제한하는 최근 메시지 조회 개수입니다. 이전 기록은 후속 페이지네이션으로 확장합니다.
+const CHAT_MESSAGE_PAGE_SIZE = 50;
+const workspaceIdSchema = z.guid();
+
+export async function getChatRoom(workspaceId: string): Promise<ChatRoomData> {
+  const parsedWorkspaceId = workspaceIdSchema.parse(workspaceId);
+  const supabase = await createSupabaseServerClient();
+  const currentUserId = await getCurrentUserId();
+
+  const [{ data: messages, error: messageError }, { data: members, error: memberError }] =
+    await Promise.all([
+      supabase
+        .from('chat_messages')
+        .select('id, workspace_id, sender_id, content, created_at')
+        .eq('workspace_id', parsedWorkspaceId)
+        .order('created_at', { ascending: false })
+        .limit(CHAT_MESSAGE_PAGE_SIZE),
+      supabase
+        .from('workspace_members')
+        .select('user_id, workspace_nickname, role')
+        .eq('workspace_id', parsedWorkspaceId)
+        .order('joined_at', { ascending: true }),
+    ]);
+
+  if (messageError) throw new Error(`채팅 메시지 조회에 실패했습니다: ${messageError.message}`);
+  if (memberError) throw new Error(`채팅 참여자 조회에 실패했습니다: ${memberError.message}`);
+
+  // Realtime INSERT 이벤트에도 동일한 표시 이름을 즉시 붙이기 위한 멤버 이름 맵입니다.
+  const participantNameById = new Map(
+    (members ?? []).map((member) => [member.user_id, member.workspace_nickname || '사용자']),
+  );
+  const sortedMessages = [...(messages ?? [])].reverse();
+
+  return {
+    messages: sortedMessages.map((message): ChatMessage => ({
+      id: message.id,
+      workspaceId: message.workspace_id,
+      senderId: message.sender_id,
+      senderName: message.sender_id
+        ? (participantNameById.get(message.sender_id) ?? '알 수 없음')
+        : '탈퇴한 사용자',
+      content: message.content,
+      createdAt: message.created_at,
+    })),
+    participants: (members ?? []).map((member) => ({
+      userId: member.user_id,
+      name: member.workspace_nickname || '사용자',
+    })),
+    viewer: (() => {
+      const currentMember = (members ?? []).find((member) => member.user_id === currentUserId);
+      return currentMember ? { userId: currentMember.user_id, role: currentMember.role } : null;
+    })(),
+  };
+}
diff --git a/src/entities/chat/index.ts b/src/entities/chat/index.ts
new file mode 100644
index 0000000..4df8cd2
--- /dev/null
+++ b/src/entities/chat/index.ts
@@ -0,0 +1,6 @@
+// 채팅 도메인이 상위 레이어에 제공하는 조회·저장 API와 타입 공개 진입점입니다.
+export { sendChatMessage } from './api/chat-actions';
+export { getChatRoom } from './api/get-chat-room';
+export type { ChatActionResult } from './api/chat-actions';
+export { chatRoomQueryKey } from './model/chat-query';
+export type { ChatMessage, ChatParticipant, ChatRoomData, ChatViewer } from './model/chat.types';
diff --git a/src/entities/chat/model/chat-query.ts b/src/entities/chat/model/chat-query.ts
new file mode 100644
index 0000000..84b1469
--- /dev/null
+++ b/src/entities/chat/model/chat-query.ts
@@ -0,0 +1,2 @@
+// 워크스페이스마다 독립적인 채팅 캐시와 Realtime 이벤트를 연결하는 Query Key입니다.
+export const chatRoomQueryKey = (workspaceId: string) => ['chat-room', workspaceId] as const;
diff --git a/src/entities/chat/model/chat.types.ts b/src/entities/chat/model/chat.types.ts
new file mode 100644
index 0000000..4b58dce
--- /dev/null
+++ b/src/entities/chat/model/chat.types.ts
@@ -0,0 +1,28 @@
+// 채팅 화면과 Realtime 구독에서 공통으로 사용하는 워크스페이스 메시지 형태입니다.
+export interface ChatMessage {
+  id: string;
+  workspaceId: string;
+  senderId: string | null;
+  senderName: string;
+  content: string;
+  createdAt: string;
+}
+
+// 채팅 보조 패널에 표시할 워크스페이스 참여자 정보입니다.
+export interface ChatParticipant {
+  userId: string;
+  name: string;
+}
+
+// 현재 사용자의 메시지 정렬과 전송 권한에 사용하는 최소 멤버 정보입니다.
+export interface ChatViewer {
+  userId: string;
+  role: 'owner' | 'member';
+}
+
+// 초기 조회와 TanStack Query 캐시에 저장할 채팅방 단위 데이터입니다.
+export interface ChatRoomData {
+  messages: ChatMessage[];
+  participants: ChatParticipant[];
+  viewer: ChatViewer | null;
+}
diff --git a/src/features/manage-chat/index.ts b/src/features/manage-chat/index.ts
new file mode 100644
index 0000000..11b3b0a
--- /dev/null
+++ b/src/features/manage-chat/index.ts
@@ -0,0 +1,4 @@
+// 채팅 화면에서 사용하는 상태 훅과 UI 컴포넌트의 공개 진입점입니다.
+export { useChatRoom } from './model/use-chat-room';
+export { ChatComposer } from './ui/ChatComposer';
+export { ChatMessageList } from './ui/ChatMessageList';
diff --git a/src/features/manage-chat/model/use-chat-room.ts b/src/features/manage-chat/model/use-chat-room.ts
new file mode 100644
index 0000000..eae291a
--- /dev/null
+++ b/src/features/manage-chat/model/use-chat-room.ts
@@ -0,0 +1,195 @@
+'use client';
+
+// TanStack Query 캐시와 Supabase Realtime 구독을 연결해 채팅방 상태를 관리합니다.
+import { useEffect, useRef, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import {
+  chatRoomQueryKey,
+  getChatRoom,
+  sendChatMessage,
+  type ChatMessage,
+  type ChatRoomData,
+} from '@/entities/chat';
+import { getSupabaseBrowserClient } from '@/shared/api/supabase/client';
+import type { GenericTables } from '@/shared/model/supabase.types';
+
+type ChatMessageRow = GenericTables<'chat_messages'>;
+const CHAT_MESSAGE_LIMIT = 50;
+
+function mergeMessage(
+  data: ChatRoomData | undefined,
+  message: ChatMessage,
+): ChatRoomData | undefined {
+  if (!data) return data;
+
+  // 같은 UUID의 낙관적 메시지는 실제 DB 행으로 교체하고, 캐시는 시간순 최근 50개만 유지합니다.
+  const messages = [...data.messages.filter((item) => item.id !== message.id), message]
+    .sort((left, right) => new Date(left.createdAt).getTime() - new Date(right.createdAt).getTime())
+    .slice(-CHAT_MESSAGE_LIMIT);
+
+  return { ...data, messages };
+}
+
+function toRealtimeMessage(row: ChatMessageRow, data: ChatRoomData): ChatMessage {
+  const participant = data.participants.find((item) => item.userId === row.sender_id);
+
+  return {
+    id: row.id,
+    workspaceId: row.workspace_id,
+    senderId: row.sender_id,
+    senderName: participant?.name ?? (row.sender_id ? '알 수 없음' : '탈퇴한 사용자'),
+    content: row.content,
+    createdAt: row.created_at,
+  };
+}
+
+interface UseChatRoomParams {
+  workspaceId: string;
+  initialData: ChatRoomData;
+}
+
+export function useChatRoom({ workspaceId, initialData }: UseChatRoomParams) {
+  // 같은 워크스페이스의 채팅 데이터만 갱신하기 위한 TanStack Query 클라이언트입니다.
+  const queryClient = useQueryClient();
+  // 최초 조회 실패와 백그라운드 갱신 실패를 한 번만 알리기 위한 참조값입니다.
+  const notifiedQueryError = useRef<Error | null>(null);
+  // 사용자가 입력 중인 메시지 내용입니다.
+  const [draft, setDraft] = useState('');
+  // 비동기 전송 중 새로 입력한 draft를 보존하기 위한 최신 입력값 참조입니다.
+  const draftRef = useRef('');
+  // Supabase Realtime 채널의 실제 구독 상태를 UI에 전달합니다.
+  const [connectionStatus, setConnectionStatus] = useState('CONNECTING');
+  // React 상태 갱신 전 연속 Enter·클릭 이벤트가 중복 전송되는 것을 즉시 막는 잠금값입니다.
+  const isSendingRef = useRef(false);
+  const {
+    data = initialData,
+    error,
+    isError,
+    isPending,
+    isRefetchError,
+  } = useQuery({
+    queryKey: chatRoomQueryKey(workspaceId),
+    queryFn: () => getChatRoom(workspaceId),
+    initialData,
+  });
+  const sendMutation = useMutation({ mutationFn: sendChatMessage });
+
+  const updateDraft = (value: string) => {
+    draftRef.current = value;
+    setDraft(value);
+  };
+
+  useEffect(() => {
+    if (!error || (!isError && !isRefetchError)) {
+      notifiedQueryError.current = null;
+      return;
+    }
+
+    if (notifiedQueryError.current === error) return;
+
+    notifiedQueryError.current = error;
+    toast.error('채팅 메시지를 새로고침하지 못했습니다. 잠시 후 다시 시도해주세요.');
+  }, [error, isError, isRefetchError]);
+
+  useEffect(() => {
+    // 워크스페이스 UUID를 채널명과 DB filter에 함께 사용해 다른 채팅방 이벤트를 분리한다.
+    const supabase = getSupabaseBrowserClient();
+    const channel = supabase
+      .channel(`workspace-chat:${workspaceId}`)
+      .on(
+        'postgres_changes',
+        {
+          event: 'INSERT',
+          schema: 'public',
+          table: 'chat_messages',
+          filter: `workspace_id=eq.${workspaceId}`,
+        },
+        (payload) => {
+          queryClient.setQueryData<ChatRoomData>(chatRoomQueryKey(workspaceId), (currentData) => {
+            if (!currentData) return currentData;
+            return mergeMessage(
+              currentData,
+              toRealtimeMessage(payload.new as ChatMessageRow, currentData),
+            );
+          });
+        },
+      )
+      .subscribe((status) => {
+        setConnectionStatus(status);
+      });
+
+    return () => {
+      void supabase.removeChannel(channel);
+    };
+  }, [queryClient, workspaceId]);
+
+  const sendMessage = async () => {
+    const content = draftRef.current.trim();
+    if (!content || isSendingRef.current) return;
+
+    isSendingRef.current = true;
+    // 서버·Realtime·낙관적 캐시가 같은 행으로 식별할 클라이언트 생성 UUID입니다.
+    const messageId = crypto.randomUUID();
+    const temporaryMessage: ChatMessage = {
+      id: messageId,
+      workspaceId,
+      senderId: data.viewer?.userId ?? null,
+      senderName:
+        data.participants.find((participant) => participant.userId === data.viewer?.userId)?.name ??
+        '나',
+      content,
+      createdAt: new Date().toISOString(),
+    };
+
+    queryClient.setQueryData<ChatRoomData>(chatRoomQueryKey(workspaceId), (currentData) =>
+      mergeMessage(currentData, temporaryMessage),
+    );
+    updateDraft('');
+
+    const removeOptimisticMessage = () => {
+      queryClient.setQueryData<ChatRoomData>(chatRoomQueryKey(workspaceId), (currentData) =>
+        currentData
+          ? {
+              ...currentData,
+              messages: currentData.messages.filter((item) => item.id !== messageId),
+            }
+          : currentData,
+      );
+
+      // 전송 뒤 새 입력이 없을 때만 실패한 내용을 복원해 사용자의 새 입력을 덮어쓰지 않습니다.
+      if (draftRef.current === '') updateDraft(content);
+    };
+
+    try {
+      const result = await sendMutation.mutateAsync({ messageId, workspaceId, content });
+      if (!result.ok) {
+        removeOptimisticMessage();
+        toast.error(result.message);
+        return;
+      }
+
+      // Realtime이 먼저 도착해도 같은 UUID의 낙관적 메시지를 실제 DB 행으로 교체합니다.
+      queryClient.setQueryData<ChatRoomData>(chatRoomQueryKey(workspaceId), (currentData) =>
+        mergeMessage(currentData, result.data),
+      );
+    } catch {
+      removeOptimisticMessage();
+      toast.error('메시지 전송에 실패했습니다. 잠시 후 다시 시도해주세요.');
+    } finally {
+      isSendingRef.current = false;
+    }
+  };
+
+  return {
+    messages: data.messages,
+    participants: data.participants,
+    viewer: data.viewer,
+    draft,
+    setDraft: updateDraft,
+    sendMessage,
+    isSending: sendMutation.isPending,
+    isLoading: isPending,
+    connectionStatus,
+  };
+}
diff --git a/src/features/manage-chat/ui/ChatComposer.tsx b/src/features/manage-chat/ui/ChatComposer.tsx
new file mode 100644
index 0000000..d2f20c0
--- /dev/null
+++ b/src/features/manage-chat/ui/ChatComposer.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+// 파일 첨부 없이 텍스트 메시지 작성과 전송만 제공하는 채팅 입력 영역입니다.
+import { Send } from 'lucide-react';
+
+interface ChatComposerProps {
+  draft: string;
+  isSending: boolean;
+  onDraftChange: (value: string) => void;
+  onSend: () => void;
+}
+
+export function ChatComposer({ draft, isSending, onDraftChange, onSend }: ChatComposerProps) {
+  // 공백만 있는 메시지와 전송 중 중복 요청을 막는 전송 가능 여부입니다.
+  const canSend = draft.trim().length > 0 && !isSending;
+
+  return (
+    <form
+      className="border-t border-slate-100 bg-white p-4 sm:p-5"
+      onSubmit={(event) => {
+        event.preventDefault();
+        onSend();
+      }}
+    >
+      <label className="sr-only" htmlFor="chat-message-input">
+        메시지 입력
+      </label>
+      <div className="flex items-end gap-3 rounded-2xl bg-slate-100 p-2 pl-4 focus-within:ring-2 focus-within:ring-indigo-300">
+        <textarea
+          id="chat-message-input"
+          value={draft}
+          onChange={(event) => onDraftChange(event.target.value)}
+          onKeyDown={(event) => {
+            // 한글 IME 조합 중 Enter는 마지막 음절을 확정하는 용도이므로 전송하면 안 됩니다.
+            if (event.nativeEvent.isComposing) return;
+
+            if (event.key === 'Enter' && !event.shiftKey) {
+              event.preventDefault();
+              if (canSend) onSend();
+            }
+          }}
+          placeholder="메시지를 입력하세요"
+          maxLength={2000}
+          rows={1}
+          className="max-h-28 min-h-10 flex-1 resize-none bg-transparent py-2 text-sm leading-5 text-slate-800 outline-none placeholder:text-slate-400"
+        />
+        <button
+          type="submit"
+          disabled={!canSend}
+          aria-label="메시지 전송"
+          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--color-brand)] text-white shadow-sm hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <Send className="h-5 w-5" aria-hidden="true" />
+        </button>
+      </div>
+      <p className="mt-2 px-1 text-xs text-slate-400">Enter로 전송 · Shift + Enter로 줄바꿈</p>
+    </form>
+  );
+}
diff --git a/src/features/manage-chat/ui/ChatMessageList.tsx b/src/features/manage-chat/ui/ChatMessageList.tsx
new file mode 100644
index 0000000..e7218b4
--- /dev/null
+++ b/src/features/manage-chat/ui/ChatMessageList.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+// 메시지를 발신자 기준 말풍선으로 렌더링하고 새 메시지 도착 시 하단으로 스크롤합니다.
+import { useEffect, useRef } from 'react';
+import type { ChatMessage } from '@/entities/chat';
+import { cn } from '@/shared/lib/utils';
+
+interface ChatMessageListProps {
+  messages: ChatMessage[];
+  viewerId: string | null;
+  isLoading: boolean;
+}
+
+function formatMessageTime(createdAt: string): string {
+  // DB의 UTC 시간을 한국 표준시로 고정 변환해 서버와 브라우저의 로케일 차이를 없앱니다.
+  const date = new Date(createdAt);
+  const koreaHour = (date.getUTCHours() + 9) % 24;
+  const minute = String(date.getUTCMinutes()).padStart(2, '0');
+  const period = koreaHour < 12 ? '오전' : '오후';
+  const displayHour = koreaHour % 12 || 12;
+
+  return `${period} ${displayHour}:${minute}`;
+}
+
+function getAvatarLabel(name: string): string {
+  return name.slice(0, 1) || '?';
+}
+
+export function ChatMessageList({ messages, viewerId, isLoading }: ChatMessageListProps) {
+  // 메시지 영역 자체의 스크롤 위치를 판단해 과거 메시지 열람 중 자동 이동을 막습니다.
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  // 새 메시지 전송·수신 뒤 최근 대화를 보이게 하는 스크롤 기준 요소입니다.
+  const bottomRef = useRef<HTMLDivElement>(null);
+  // 최초 진입 또는 하단 근처일 때만 자동 스크롤하도록 기억하는 상태입니다.
+  const shouldScrollToBottomRef = useRef(true);
+
+  useEffect(() => {
+    if (!shouldScrollToBottomRef.current) return;
+
+    bottomRef.current?.scrollIntoView({ block: 'end' });
+    shouldScrollToBottomRef.current = true;
+  }, [messages.length]);
+
+  const handleScroll = () => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    // 48px 이내면 사용자가 대화 하단을 보고 있다고 판단합니다.
+    const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+    shouldScrollToBottomRef.current = distanceFromBottom < 48;
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-1 items-center justify-center text-sm text-slate-400">
+        메시지를 불러오는 중입니다.
+      </div>
+    );
+  }
+
+  if (messages.length === 0) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center px-6 text-center">
+        <p className="text-base font-bold text-slate-700">아직 대화가 없습니다.</p>
+        <p className="mt-1 text-sm text-slate-400">첫 메시지로 워크스페이스 대화를 시작해보세요.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={scrollContainerRef}
+      onScroll={handleScroll}
+      className="min-h-0 flex-1 overflow-y-auto px-5 py-6 sm:px-7"
+    >
+      <div className="space-y-5">
+        {messages.map((message) => {
+          const isOwnMessage = message.senderId === viewerId;
+
+          return (
+            <div
+              key={message.id}
+              className={cn('flex items-end gap-3', isOwnMessage ? 'justify-end' : 'justify-start')}
+            >
+              {!isOwnMessage ? (
+                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-sm font-bold text-white">
+                  {getAvatarLabel(message.senderName)}
+                </div>
+              ) : null}
+              <div className={cn('max-w-[80%] sm:max-w-[70%]', isOwnMessage && 'items-end')}>
+                <div
+                  className={cn(
+                    'mb-1 flex items-center gap-2 text-xs font-medium text-slate-400',
+                    isOwnMessage && 'justify-end',
+                  )}
+                >
+                  <span>{message.senderName}</span>
+                  <time dateTime={message.createdAt}>{formatMessageTime(message.createdAt)}</time>
+                </div>
+                <p
+                  className={cn(
+                    'w-fit rounded-2xl px-4 py-3 text-sm leading-6 whitespace-pre-wrap',
+                    isOwnMessage
+                      ? 'ml-auto rounded-br-md bg-[var(--color-brand)] text-white'
+                      : 'rounded-bl-md bg-slate-100 text-slate-800',
+                  )}
+                >
+                  {message.content}
+                </p>
+              </div>
+              {isOwnMessage ? (
+                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-orange-400 text-sm font-bold text-white">
+                  {getAvatarLabel(message.senderName)}
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/views/chat/index.ts b/src/views/chat/index.ts
new file mode 100644
index 0000000..8e8f552
--- /dev/null
+++ b/src/views/chat/index.ts
@@ -0,0 +1,2 @@
+// 채팅 화면의 공개 진입점입니다.
+export { ChatView } from './ui/ChatView';
diff --git a/src/views/chat/ui/ChatView.tsx b/src/views/chat/ui/ChatView.tsx
new file mode 100644
index 0000000..d3f2063
--- /dev/null
+++ b/src/views/chat/ui/ChatView.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+// 넓은 채팅 영역과 워크스페이스 참여자 보조 패널을 조합하는 채팅 페이지 화면입니다.
+import { MessageCircleMore, UsersRound } from 'lucide-react';
+import type { ChatRoomData } from '@/entities/chat';
+import { ChatComposer, ChatMessageList, useChatRoom } from '@/features/manage-chat';
+
+interface ChatViewProps {
+  workspaceId: string;
+  initialData: ChatRoomData;
+}
+
+function getAvatarLabel(name: string): string {
+  return name.slice(0, 1) || '?';
+}
+
+function getConnectionLabel(status: string): { label: string; className: string } {
+  if (status === 'SUBSCRIBED') {
+    return { label: '실시간 연결', className: 'bg-emerald-50 text-emerald-600' };
+  }
+
+  if (status === 'CHANNEL_ERROR' || status === 'TIMED_OUT') {
+    return { label: '연결 재시도 중', className: 'bg-amber-50 text-amber-600' };
+  }
+
+  return { label: '연결 중', className: 'bg-slate-100 text-slate-500' };
+}
+
+export function ChatView({ workspaceId, initialData }: ChatViewProps) {
+  // 서버 초기 데이터와 Realtime INSERT 이벤트를 함께 관리하는 채팅방 상태입니다.
+  const {
+    messages,
+    participants,
+    viewer,
+    draft,
+    setDraft,
+    sendMessage,
+    isSending,
+    isLoading,
+    connectionStatus,
+  } = useChatRoom({ workspaceId, initialData });
+  // 실제 Realtime 채널 상태를 기반으로 한 상단 연결 상태 표시값입니다.
+  const connection = getConnectionLabel(connectionStatus);
+
+  return (
+    <section className="mx-auto w-full min-w-0 max-w-[1180px]">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-slate-950">채팅</h1>
+        <p className="mt-1 text-sm text-slate-500">
+          워크스페이스 구성원과 실시간으로 대화할 수 있습니다.
+        </p>
+      </div>
+
+      <div className="grid min-h-[calc(100vh-230px)] min-w-0 gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(220px,0.32fr)]">
+        <div className="flex h-[min(720px,calc(100dvh-230px))] min-h-[480px] min-w-0 flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
+          <div className="flex items-center justify-between border-b border-slate-100 px-5 py-4 sm:px-7">
+            <div className="flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-100 text-[var(--color-brand)]">
+                <MessageCircleMore className="h-5 w-5" aria-hidden="true" />
+              </div>
+              <div>
+                <h2 className="font-bold text-slate-900">전체 대화</h2>
+                <p className="text-xs text-slate-400">최근 메시지 {messages.length}개</p>
+              </div>
+            </div>
+            <span className={`rounded-full px-3 py-1 text-xs font-bold ${connection.className}`}>
+              {connection.label}
+            </span>
+          </div>
+
+          <ChatMessageList
+            messages={messages}
+            viewerId={viewer?.userId ?? null}
+            isLoading={isLoading}
+          />
+          <ChatComposer
+            draft={draft}
+            isSending={isSending}
+            onDraftChange={setDraft}
+            onSend={() => void sendMessage()}
+          />
+        </div>
+
+        <aside className="flex min-w-0 flex-col gap-4">
+          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+            <div className="flex items-center gap-2">
+              <UsersRound className="h-5 w-5 text-[var(--color-brand)]" aria-hidden="true" />
+              <h2 className="font-bold text-slate-900">참여 멤버</h2>
+              <span className="ml-auto text-sm font-bold text-indigo-500">
+                {participants.length}
+              </span>
+            </div>
+            <div className="mt-4 space-y-3">
+              {participants.slice(0, 8).map((participant) => (
+                <div key={participant.userId} className="flex items-center gap-3">
+                  <div className="flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-sm font-bold text-slate-600">
+                    {getAvatarLabel(participant.name)}
+                  </div>
+                  <p className="truncate text-sm font-medium text-slate-700">{participant.name}</p>
+                  {participant.userId === viewer?.userId ? (
+                    <span className="ml-auto text-xs font-bold text-indigo-500">나</span>
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="rounded-2xl bg-indigo-50 p-5 text-sm leading-6 text-indigo-800">
+            <p className="font-bold">대화 안내</p>
+            <p className="mt-2 text-indigo-600">
+              전송한 메시지는 워크스페이스 구성원에게 바로 공유됩니다.
+            </p>
+          </div>
+        </aside>
+      </div>
+    </section>
+  );
+}
diff --git a/supabase/migrations/20260715100000_enable_workspace_chat_realtime.sql b/supabase/migrations/20260715100000_enable_workspace_chat_realtime.sql
new file mode 100644
index 0000000..bcdd9d4
--- /dev/null
+++ b/supabase/migrations/20260715100000_enable_workspace_chat_realtime.sql
@@ -0,0 +1,35 @@
+-- 워크스페이스 채팅은 멤버 조회와 본인 발송만 허용하고 INSERT 이벤트를 Realtime으로 전파한다.
+
+drop policy if exists chat_messages_member_all on public.chat_messages;
+drop policy if exists chat_messages_select_member on public.chat_messages;
+drop policy if exists chat_messages_insert_sender on public.chat_messages;
+
+create policy chat_messages_select_member
+on public.chat_messages
+for select
+to authenticated
+using (private.is_workspace_member(workspace_id));
+
+create policy chat_messages_insert_sender
+on public.chat_messages
+for insert
+to authenticated
+with check (
+  private.is_workspace_member(workspace_id)
+  and sender_id = auth.uid()
+);
+
+-- 이미 publication에 포함된 환경에서도 안전하게 마이그레이션을 다시 실행한다.
+do $$
+begin
+  if not exists (
+    select 1
+    from pg_publication_tables
+    where pubname = 'supabase_realtime'
+      and schemaname = 'public'
+      and tablename = 'chat_messages'
+  ) then
+    alter publication supabase_realtime add table public.chat_messages;
+  end if;
+end;
+$$;