-
+ {rooms.map(room => (
+
-
+
navigate(chatRoomPath(room.id))} + /> +
+ ))}
+
+ {isFetchingNextPage ?
+
+ ) : null}
+
+
+ ),
+ ],
+ args: { message: message() },
+} satisfies Meta
+
+ )
+}
+
+const meta = {
+ title: 'features/chat/ChatConnectionBanner',
+ component: ConnectionBannerHarness,
+ parameters: { layout: 'centered' },
+ args: { initialState: 'reconnecting' },
+} satisfies Meta
+
+ ),
+ ],
+ args: { room: room() },
+} satisfies Meta
+
+ )
+}
+
+const meta = {
+ title: 'features/chat/ChatSegmentTab',
+ component: InteractiveChatSegmentTab,
+ parameters: { layout: 'centered' },
+ args: { unreadCountBySegment: { personal: 3, group: 1 } },
+} satisfies Meta
+ {
+ setSent(previous => [...previous, value])
+ setValue('')
+ }}
+ />
+
+ )
+}
+
+const meta = {
+ title: 'features/chat/MessageInput',
+ component: InteractiveMessageInput,
+ parameters: { layout: 'centered' },
+} satisfies Meta-
+ {sent.map((message, index) => (
+
- {message} + ))} +
+
+ )
+}
diff --git a/src/features/chat/ui/ChatBubble.tsx b/src/features/chat/ui/ChatBubble.tsx
new file mode 100644
index 00000000..15d8527f
--- /dev/null
+++ b/src/features/chat/ui/ChatBubble.tsx
@@ -0,0 +1,117 @@
+import { cn } from '@/shared/lib/utils'
+import { Avatar } from '@/shared/ui/common/Avatar'
+import { formatMessageTime } from '@/features/chat/lib/chatTime'
+import type { ChatMessage } from '@/features/chat/types/chat'
+
+interface ChatBubbleProps {
+ message: ChatMessage
+ /** 전체 채팅에서 발신자가 바뀌는 첫 메시지에만 이름·아바타를 노출합니다 */
+ showSenderMeta?: boolean
+ /** 아바타 자리 유지 — 전체 채팅에서 같은 발신자의 연속 메시지 정렬용 */
+ reserveAvatarSpace?: boolean
+ /** 전송 실패한 메시지 재전송 — 없으면 실패 표시만 합니다 */
+ onRetry?: () => void
+}
+
+const AVATAR_SIZE = 36
+
+export function ChatBubble({
+ message,
+ showSenderMeta = false,
+ reserveAvatarSpace = false,
+ onRetry,
+}: ChatBubbleProps) {
+ const timeLabel = formatMessageTime(message.createdAt)
+ const isPending = message.status === 'pending'
+ const isFailed = message.status === 'failed'
+
+ const hasAttachments = message.attachments.length > 0
+ const isNotice = message.messageType === 'NOTICE'
+
+ const bubble = (
+
+
+
+
+
+
+ {isSending ? (
+ + 사진을 보내는 중이에요… +
+ ) : null} + + + {/* capture 는 모바일에서 카메라를 바로 띄웁니다(데스크톱은 파일 선택으로 폴백) */} + +
+ {isNotice ? (
+ 공지
+ ) : null}
+ {hasAttachments
+ ? message.attachments.map(attachment => (
+ 
+ ))
+ : null}
+ {message.content ? {message.content} : null}
+
+ )
+
+ const meta = isFailed ? (
+
+ 전송 실패
+ {onRetry ? (
+
+ ) : null}
+
+ ) : (
+
+ {isPending ? '전송 중' : timeLabel}
+
+ )
+
+ if (message.isMine) {
+ return (
+
+ {meta}
+ {bubble}
+
+ )
+ }
+
+ return (
+
+ {showSenderMeta ? (
+
+ )
+}
diff --git a/src/features/chat/ui/ChatConnectionBanner.tsx b/src/features/chat/ui/ChatConnectionBanner.tsx
new file mode 100644
index 00000000..1fdaa76f
--- /dev/null
+++ b/src/features/chat/ui/ChatConnectionBanner.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react'
+import type { ChatConnectionState } from '@/features/chat/types/chat'
+
+/** '다시 연결됐어요' 안내를 노출하는 시간(ms) */
+const RECONNECTED_NOTICE_DURATION = 2000
+
+function isDown(state: ChatConnectionState): boolean {
+ return state === 'reconnecting' || state === 'disconnected'
+}
+
+interface ChatConnectionBannerProps {
+ state: ChatConnectionState
+}
+
+/** 중립 톤(text70) 안내 — 브랜드 그린은 쓰지 않습니다 */
+export function ChatConnectionBanner({ state }: ChatConnectionBannerProps) {
+ const [notice, setNotice] = useState({
+ trackedState: state,
+ showReconnected: false,
+ })
+
+ // 상태 전이는 렌더 중 조정 — 끊김 이후 연결됐을 때만 복구 안내를 띄웁니다
+ if (notice.trackedState !== state) {
+ setNotice({
+ trackedState: state,
+ showReconnected: isDown(notice.trackedState) && state === 'connected',
+ })
+ }
+
+ const { showReconnected } = notice
+
+ useEffect(() => {
+ if (!showReconnected) return
+ const timer = window.setTimeout(
+ () => setNotice(current => ({ ...current, showReconnected: false })),
+ RECONNECTED_NOTICE_DURATION
+ )
+ return () => window.clearTimeout(timer)
+ }, [showReconnected])
+
+ const message = isDown(state)
+ ? '연결이 끊겼어요 · 다시 연결 중…'
+ : showReconnected
+ ? '다시 연결됐어요'
+ : null
+
+ if (!message) return null
+
+ return (
+
+ {showSenderMeta && message.senderName ? (
+
+ {message.senderName}
+
+ ) : null}
+
+
+ {bubble}
+ {meta}
+
+
+ {message}
+
+ )
+}
diff --git a/src/features/chat/ui/ChatDateDivider.tsx b/src/features/chat/ui/ChatDateDivider.tsx
new file mode 100644
index 00000000..c06aaedc
--- /dev/null
+++ b/src/features/chat/ui/ChatDateDivider.tsx
@@ -0,0 +1,13 @@
+interface ChatDateDividerProps {
+ label: string
+}
+
+export function ChatDateDivider({ label }: ChatDateDividerProps) {
+ return (
+
+
+ {label}
+
+
+ )
+}
diff --git a/src/features/chat/ui/ChatRoomListItem.tsx b/src/features/chat/ui/ChatRoomListItem.tsx
new file mode 100644
index 00000000..e11407a7
--- /dev/null
+++ b/src/features/chat/ui/ChatRoomListItem.tsx
@@ -0,0 +1,166 @@
+import { useRef, useState, type PointerEventHandler } from 'react'
+import TrashIcon from '@/assets/icons/social/trash.svg'
+import { cn } from '@/shared/lib/utils'
+import { Avatar } from '@/shared/ui/common/Avatar'
+import { UnreadBadge } from '@/shared/ui/common/UnreadBadge'
+import { formatChatListTime } from '@/features/chat/lib/chatTime'
+import type { ChatRoomListItem as ChatRoomListItemModel } from '@/features/chat/types/chat'
+
+const ACTION_WIDTH = 72
+const OPEN_THRESHOLD = ACTION_WIDTH * 0.45
+/** 세로 스크롤과 구분하기 위한 가로 이동 최소값 */
+const HORIZONTAL_INTENT = 8
+
+interface ChatRoomRowProps {
+ room: ChatRoomListItemModel
+ onClick?: () => void
+}
+
+export function ChatRoomRow({ room, onClick }: ChatRoomRowProps) {
+ const hasUnread = room.unreadCount > 0
+ // 서버는 개인 채팅에도 인원수(2)를 주지만 표기는 전체 채팅에서만 의미가 있습니다
+ const memberCount = room.segment === 'group' ? room.memberCount : undefined
+
+ return (
+
+ )
+}
+
+interface SwipeableChatRoomItemProps extends ChatRoomRowProps {
+ /**
+ * 삭제 핸들러가 없으면 스와이프 자체를 막고 평범한 행으로 렌더합니다.
+ * 서버에 방 삭제·나가기 API 가 없어, 열어봐야 눌리지 않는 버튼만 드러납니다.
+ */
+ onDelete?: () => void
+}
+
+export function SwipeableChatRoomItem({
+ room,
+ onClick,
+ onDelete,
+}: SwipeableChatRoomItemProps) {
+ if (!onDelete) {
+ return
+
+ )
+}
diff --git a/src/features/chat/ui/ChatRoomListStates.tsx b/src/features/chat/ui/ChatRoomListStates.tsx
new file mode 100644
index 00000000..022c9e7d
--- /dev/null
+++ b/src/features/chat/ui/ChatRoomListStates.tsx
@@ -0,0 +1,63 @@
+import { Skeleton } from '@/shared/ui/common/Skeleton'
+
+const SKELETON_ROWS = 6
+
+export function ChatRoomListSkeleton() {
+ return (
+
+
+
+
+ finishDrag(event.pointerId)}
+ onPointerCancel={event => finishDrag(event.pointerId)}
+ style={{
+ touchAction: 'pan-y',
+ transform: `translateX(${translateX}px)`,
+ transition: isDragging ? 'none' : 'transform 180ms ease-out',
+ }}
+ >
+
+
+ {Array.from({ length: SKELETON_ROWS }, (_, index) => (
+
+ )
+}
+
+interface ChatRoomListEmptyProps {
+ title: string
+ description: string
+}
+
+export function ChatRoomListEmpty({
+ title,
+ description,
+}: ChatRoomListEmptyProps) {
+ return (
+
+
+ ))}
+
+
+
+
+
+
+ )
+}
+
+interface ChatRoomListErrorProps {
+ onRetry: () => void
+}
+
+export function ChatRoomListError({ onRetry }: ChatRoomListErrorProps) {
+ return (
+ {title}
+{description}
+
+
+ )
+}
diff --git a/src/features/chat/ui/ChatSegmentTab.tsx b/src/features/chat/ui/ChatSegmentTab.tsx
new file mode 100644
index 00000000..3c08aeca
--- /dev/null
+++ b/src/features/chat/ui/ChatSegmentTab.tsx
@@ -0,0 +1,50 @@
+import { cn } from '@/shared/lib/utils'
+import { UnreadBadge } from '@/shared/ui/common/UnreadBadge'
+import {
+ CHAT_SEGMENTS,
+ CHAT_SEGMENT_LABEL,
+ type ChatSegment,
+} from '@/features/chat/types/chat'
+
+interface ChatSegmentTabProps {
+ activeSegment: ChatSegment
+ onSegmentChange: (segment: ChatSegment) => void
+ /** 세그먼트 라벨 옆 미읽음 합계 */
+ unreadCountBySegment?: Partial+ 목록을 불러오지 못했어요. +
+ +
+ {CHAT_SEGMENTS.map(segment => {
+ const isActive = activeSegment === segment
+ return (
+
+ )
+ })}
+
+ )
+}
diff --git a/src/features/chat/ui/ContactPicker.tsx b/src/features/chat/ui/ContactPicker.tsx
new file mode 100644
index 00000000..1eac08ea
--- /dev/null
+++ b/src/features/chat/ui/ContactPicker.tsx
@@ -0,0 +1,47 @@
+import MessageIcon from '@/assets/icons/doc/Message.svg?react'
+import { Avatar } from '@/shared/ui/common/Avatar'
+import type { ChatContact } from '@/features/chat/types/chat'
+
+interface ContactPickerRowProps {
+ contact: ChatContact
+ onSelect: () => void
+ disabled?: boolean
+}
+
+export function ContactPickerRow({
+ contact,
+ onSelect,
+ disabled = false,
+}: ContactPickerRowProps) {
+ return (
+
+ )
+}
diff --git a/src/features/chat/ui/MessageInput.tsx b/src/features/chat/ui/MessageInput.tsx
new file mode 100644
index 00000000..344c9f0d
--- /dev/null
+++ b/src/features/chat/ui/MessageInput.tsx
@@ -0,0 +1,134 @@
+import { useRef, type ChangeEvent, type KeyboardEvent } from 'react'
+import SendIcon from '@/assets/icons/socialvector.svg'
+import { cn } from '@/shared/lib/utils'
+import {
+ canSendMessage,
+ clampMessageDraft,
+ isMessageDraftAtLimit,
+} from '@/features/chat/lib/messageDraft'
+import { CHAT_MESSAGE_MAX_LENGTH } from '@/features/chat/types/chat'
+
+interface MessageInputProps {
+ value: string
+ onChange: (value: string) => void
+ onSend: () => void
+ /** ＋ 버튼 — 첨부 트레이 토글 (P1, 디자인만) */
+ onToggleAttachment?: () => void
+ isAttachmentOpen?: boolean
+ disabled?: boolean
+}
+
+const MAX_TEXTAREA_ROWS_HEIGHT = 96
+
+export function MessageInput({
+ value,
+ onChange,
+ onSend,
+ onToggleAttachment,
+ isAttachmentOpen = false,
+ disabled = false,
+}: MessageInputProps) {
+ const textareaRef = useRef
+
+ )
+}
diff --git a/src/features/chat/ui/NewChatFab.tsx b/src/features/chat/ui/NewChatFab.tsx
new file mode 100644
index 00000000..5a26ae4c
--- /dev/null
+++ b/src/features/chat/ui/NewChatFab.tsx
@@ -0,0 +1,26 @@
+import PlusIcon from '@/assets/icons/posting/Plus.svg?react'
+
+interface NewChatFabProps {
+ onClick: () => void
+}
+
+/**
+ * 개인 채팅 세그먼트에서만 노출 — 전체 채팅방은 자동 생성됩니다.
+ * Docbar(78px) 위에 뜨도록 모바일 프레임(428px) 기준으로 정렬합니다.
+ */
+export function NewChatFab({ onClick }: NewChatFabProps) {
+ return (
+
+
+
+
+
+
+ {atLimit ? (
+
+
+
+ + 최대 {CHAT_MESSAGE_MAX_LENGTH}자까지 입력할 수 있어요. +
+ ) : null} +
+
+ )
+}
diff --git a/src/features/chat/ui/NewChatSheet.tsx b/src/features/chat/ui/NewChatSheet.tsx
new file mode 100644
index 00000000..849cdceb
--- /dev/null
+++ b/src/features/chat/ui/NewChatSheet.tsx
@@ -0,0 +1,101 @@
+import { useNewChatViewModel } from '@/features/chat/hooks/useNewChatViewModel'
+import { ContactPickerRow } from '@/features/chat/ui/ContactPicker'
+import { Modal } from '@/shared/ui/common/Modal'
+import { SearchBar } from '@/shared/ui/common/SearchBar'
+import { Skeleton } from '@/shared/ui/common/Skeleton'
+
+interface NewChatSheetProps {
+ isOpen: boolean
+ onClose: () => void
+}
+
+function ContactSkeleton() {
+ return (
+
+
+
+
+ {[0, 1, 2, 3].map(index => (
+
+ )
+}
+
+export function NewChatSheet({ isOpen, onClose }: NewChatSheetProps) {
+ const {
+ keyword,
+ setKeyword,
+ contacts,
+ isLoading,
+ isError,
+ refetch,
+ isEmpty,
+ hasKeyword,
+ isCreating,
+ selectContact,
+ } = useNewChatViewModel({ enabled: isOpen, onNavigated: onClose })
+
+ return (
+
+
+ ))}
+
+
+
+ {isLoading ?
+
+
+ ) : null}
+
+ {isEmpty ? (
+ + 동료 목록을 불러오지 못했어요. +
+ +
+
+ ) : null}
+
+ {!isLoading && !isError && contacts.length > 0 ? (
+ + {hasKeyword ? '검색 결과가 없어요' : '대화할 동료가 없어요'} +
++ {hasKeyword + ? '다른 이름이나 근무지로 검색해보세요.' + : '같은 근무지에 동료가 등록되면 여기에 표시돼요.'} +
+-
+ {contacts.map(contact => (
+
-
+
void selectContact(contact)} + /> +
+ ))}
+
-
-
- )
-}
diff --git a/src/features/social/hooks/useChatRoomsViewModel.ts b/src/features/social/hooks/useChatRoomsViewModel.ts
deleted file mode 100644
index 292aecaf..00000000
--- a/src/features/social/hooks/useChatRoomsViewModel.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useMemo } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { formatDistanceToNowStrict } from 'date-fns'
-import { ko } from 'date-fns/locale'
-import { fetchChatRooms } from '@/features/social/api/chatroom'
-import type { ChatRoomListResponseDto } from '@/features/social/types/chatroom'
-
-const CHATROOM_PAGE_SIZE = 20
-
-export interface SocialListItemViewData {
- id: number
- name: string
- message: string
- timeAgo: string
- unread: boolean
-}
-
-function toRelativeTime(dateString: string): string {
- const date = new Date(dateString)
- if (Number.isNaN(date.getTime())) return '-'
- return `${formatDistanceToNowStrict(date, { locale: ko })} 전`
-}
-
-function adaptChatRoomToItem(
- room: ChatRoomListResponseDto
-): SocialListItemViewData {
- return {
- id: room.id,
- name: room.opponentName,
- message: room.latestMessageContent,
- timeAgo: toRelativeTime(room.updatedAt),
- unread: false,
- }
-}
-
-export function useChatRoomsViewModel() {
- const { data, isPending, isError } = useQuery({
- queryKey: ['chatRooms', 'list', { pageSize: CHATROOM_PAGE_SIZE }],
- queryFn: () =>
- fetchChatRooms({
- pageSize: CHATROOM_PAGE_SIZE,
- }),
- })
-
- const chatRooms = useMemo(
- () => data?.data.map(adaptChatRoomToItem) ?? [],
- [data]
- )
-
- return {
- chatRooms,
- isLoading: isPending,
- isError,
- }
-}
diff --git a/src/features/social/index.ts b/src/features/social/index.ts
deleted file mode 100644
index 2a8887c1..00000000
--- a/src/features/social/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { fetchChatRooms } from './api/chatroom'
-export { useChatRoomsViewModel } from './hooks/useChatRoomsViewModel'
-export type {
- ChatRoomListQueryParams,
- ChatRoomListResponseDto,
- CursorPaginatedApiResponseChatRoomListResponseDto,
-} from './types/chatroom'
-export type { SocialListItemViewData } from './hooks/useChatRoomsViewModel'
diff --git a/src/features/social/types/chatroom.ts b/src/features/social/types/chatroom.ts
deleted file mode 100644
index bf654c2e..00000000
--- a/src/features/social/types/chatroom.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export interface CursorPaginatedApiResponseChatRoomListResponseDto {
- page: ChatRoomPageDto
- data: ChatRoomListResponseDto[]
-}
-
-export interface ChatRoomPageDto {
- cursor: string | null
- pageSize: number
-}
-
-export interface ChatRoomListResponseDto {
- id: number
- opponentId: number
- opponentScope: string
- opponentName: string
- latestMessageContent: string
- createdAt: string
- updatedAt: string
-}
-
-export interface ChatRoomListQueryParams {
- cursor?: string
- pageSize: number
-}
diff --git a/src/features/social/ui/SocialList.tsx b/src/features/social/ui/SocialList.tsx
deleted file mode 100644
index ab62dd07..00000000
--- a/src/features/social/ui/SocialList.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { useRef, useState, type PointerEventHandler } from 'react'
-import TrashIcon from '@/assets/icons/social/trash.svg'
-
-interface SocialProfileProps {
- name: string
- message: string
- timeAgo: string
- unread?: boolean
- unreadCount?: number
-}
-
-interface SocialActionProps {
- onDelete?: () => void
-}
-
-interface SwipeableSocialItemProps extends SocialProfileProps {
- onDelete?: () => void
-}
-
-const ACTION_WIDTH = 72
-const OPEN_THRESHOLD = ACTION_WIDTH * 0.45
-
-export function SocialList({
- name,
- message,
- timeAgo,
- unread = false,
- unreadCount,
-}: SocialProfileProps) {
- return (
-
-
-
-
- )
-}
-
-export function SwipeableSocialItem({
- name,
- message,
- timeAgo,
- unread = false,
- onDelete,
- unreadCount,
-}: SwipeableSocialItemProps) {
- const [translateX, setTranslateX] = useState(0)
- const [isDragging, setIsDragging] = useState(false)
-
- const pointerIdRef = useRef
-
-
-
-
- {name}
-
- {timeAgo}
-
-
-
-
- {message}
-
- {unread ? (
-
- {unreadCount ?? 1}
-
- ) : null}
-
-
- )
-}
-
-export function SocialAction({ onDelete }: SocialActionProps) {
- return (
-
-
-
-
-
-
-
-
-
-
- )
-}
diff --git a/src/pages/chat/room/index.tsx b/src/pages/chat/room/index.tsx
new file mode 100644
index 00000000..46b954e1
--- /dev/null
+++ b/src/pages/chat/room/index.tsx
@@ -0,0 +1,207 @@
+import { useEffect, useLayoutEffect, useRef } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+
+import { useChatRoomViewModel } from '@/features/chat/hooks/useChatRoomViewModel'
+import { AttachmentTray } from '@/features/chat/ui/AttachmentTray'
+import { ChatBubble } from '@/features/chat/ui/ChatBubble'
+import { ChatConnectionBanner } from '@/features/chat/ui/ChatConnectionBanner'
+import { ChatDateDivider } from '@/features/chat/ui/ChatDateDivider'
+import { MessageInput } from '@/features/chat/ui/MessageInput'
+import { ROUTES } from '@/shared/constants/routes'
+import { Navbar } from '@/shared/ui/common/Navbar'
+import { Skeleton } from '@/shared/ui/common/Skeleton'
+import { Spinner } from '@/shared/ui/Spinner'
+
+function MessagesSkeleton() {
+ return (
+
+
+ )
+}
+
+export function ChatRoomPage() {
+ const navigate = useNavigate()
+ const { roomId: roomIdParam } = useParams<{ roomId: string }>()
+ const roomId = Number(roomIdParam)
+
+ const {
+ room,
+ timeline,
+ isLoading,
+ isError,
+ isEmpty,
+ refetch,
+ hasOlderMessages,
+ isFetchingOlderMessages,
+ fetchOlderMessages,
+ draft,
+ setDraft,
+ handleSend,
+ sendImages,
+ isSendingImages,
+ retryFailedMessage,
+ connectionState,
+ isAttachmentOpen,
+ toggleAttachment,
+ } = useChatRoomViewModel(roomId)
+
+ const scrollRef = useRef
+ navigate(ROUTES.CHAT.ROOMS)}
+ />
+
+ )
+ }
+
+ return (
+
+ 잘못된 채팅방이에요.
+
+
+ navigate(ROUTES.CHAT.ROOMS)}
+ rightAction={
+ room.segment === 'group' && room.memberCount !== undefined ? (
+
+ 멤버 {room.memberCount}
+
+ ) : undefined
+ }
+ />
+
+ void sendImages(files)}
+ isSending={isSendingImages}
+ />
+ ) : null}
+
+ )
+}
diff --git a/src/pages/chat/rooms/index.tsx b/src/pages/chat/rooms/index.tsx
new file mode 100644
index 00000000..48116345
--- /dev/null
+++ b/src/pages/chat/rooms/index.tsx
@@ -0,0 +1,144 @@
+import { useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { useChatListViewModel } from '@/features/chat/hooks/useChatListViewModel'
+import { ChatSegmentTab } from '@/features/chat/ui/ChatSegmentTab'
+import { SwipeableChatRoomItem } from '@/features/chat/ui/ChatRoomListItem'
+import {
+ ChatRoomListEmpty,
+ ChatRoomListError,
+ ChatRoomListSkeleton,
+} from '@/features/chat/ui/ChatRoomListStates'
+import { NewChatFab } from '@/features/chat/ui/NewChatFab'
+import { NewChatSheet } from '@/features/chat/ui/NewChatSheet'
+import { useNavbarNotificationProps } from '@/features/notification'
+import { chatRoomPath } from '@/shared/constants/routes'
+import { Navbar } from '@/shared/ui/common/Navbar'
+import { SearchBar } from '@/shared/ui/common/SearchBar'
+import { Spinner } from '@/shared/ui/Spinner'
+
+const EMPTY_COPY = {
+ personal: {
+ title: '아직 대화가 없어요',
+ description: '＋ 버튼을 눌러 동료나 점주님과 대화를 시작해보세요.',
+ },
+ group: {
+ title: '참여 중인 전체 채팅방이 없어요',
+ description: '업장에 소속되면 단체방이 자동으로 만들어져요.',
+ },
+} as const
+
+export function ChatRoomsPage() {
+ const navigate = useNavigate()
+ const notificationProps = useNavbarNotificationProps()
+ const [isNewChatOpen, setNewChatOpen] = useState(false)
+
+ const {
+ segment,
+ changeSegment,
+ keyword,
+ setKeyword,
+ rooms,
+ isLoading,
+ isError,
+ isEmpty,
+ hasKeyword,
+ unreadCountBySegment,
+ refetch,
+ hasNextPage,
+ isFetchingNextPage,
+ fetchNextPage,
+ } = useChatListViewModel()
+
+ const sentinelRef = useRef
+ {isLoading ?
+
+
+
+ ) : null}
+
+ {!isLoading && !isError && isEmpty ? (
+ + 대화를 불러오지 못했어요. +
+ +
+
+ ) : null}
+
+ {!isLoading && !isError && !isEmpty ? (
+ + 대화를 시작해보세요 +
++ 첫 메시지를 보내면 여기에 표시돼요. +
+
+ retryFailedMessage(clientId)
+ : undefined
+ }
+ />
+ )
+ })}
+
+ ) : null}
+
+ {isFetchingOlderMessages ?
+
+ {timeline.map(entry => {
+ if (entry.kind === 'date') {
+ return
+
+ {isLoading ? void refetch()} />
+ ) : null}
+
+ {isEmpty && hasKeyword ? (
+
+
+ {segment === 'personal' ? (
+ setNewChatOpen(true)} />
+ ) : null}
+
+ setNewChatOpen(false)}
+ />
+
+ )
+}
diff --git a/src/pages/manager/social-chat/index.tsx b/src/pages/manager/social-chat/index.tsx
deleted file mode 100644
index 88ff1cfa..00000000
--- a/src/pages/manager/social-chat/index.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { useNavigate } from 'react-router-dom'
-import { useState } from 'react'
-import chevronLeftIcon from '@/assets/icons/chevron-left.svg'
-import socialVectorIcon from '@/assets/icons/socialvector.svg'
-import imageIcon from '@/assets/icons/image.svg'
-import cameraIcon from '@/assets/icons/camera.svg'
-
-export function SocialChatPage() {
- const navigate = useNavigate()
- const [attachMenuOpen, setAttachMenuOpen] = useState(false)
-
- return (
-
+ setKeyword(event.target.value)}
+ placeholder="이름 또는 대화 내용 검색"
+ aria-label="채팅 검색"
+ />
+
+
+
-
-
-
-
-
-
-
-
- )
-}
diff --git a/src/pages/manager/social/index.tsx b/src/pages/manager/social/index.tsx
deleted file mode 100644
index aa2fdce1..00000000
--- a/src/pages/manager/social/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Navbar } from '@/shared/ui/common/Navbar'
-import { useChatRoomsViewModel } from '@/features/social'
-import { useNavbarNotificationProps } from '@/features/notification'
-import { SwipeableSocialItem } from '@/features/social/ui/SocialList'
-
-import SearchIcon from '@/assets/icons/search.svg'
-import MessageIcon from '@/assets/icons/doc/Message.svg'
-import { SocialSearch } from '@/features/social/common/SocialSearch'
-
-export function SocialPage() {
- const [searchPopupOpen, setSearchPopupOpen] = useState(false)
- const navigate = useNavigate()
- const notificationProps = useNavbarNotificationProps()
- const { chatRooms, isLoading, isError } = useChatRoomsViewModel()
-
- return (
- 이수연
-
-
-
-
- 안녕하세요!
-
- 오전 12:00
-
-
-
-
- 안녕하세요!
-
-
- 오전 12:00
-
-
- 혹시 저 대타 부탁드려도 될까요??
-
-
-
-
- {attachMenuOpen && (
-
-
-
-
-
-
-
- )}
-
-
-
-
-
-
- setSearchPopupOpen(true)} />
-
-
- {isLoading && (
-
-
-
- {searchPopupOpen && (
-
- )
-}
diff --git a/src/shared/constants/routes.ts b/src/shared/constants/routes.ts
index 98bfa262..ba205e12 100644
--- a/src/shared/constants/routes.ts
+++ b/src/shared/constants/routes.ts
@@ -35,7 +35,9 @@ export const ROUTES = {
STORE_REGISTER: '/manager/store-register',
SUBSTITUTE_REQUEST: '/manager/substitute-request',
WORKER_INVITE: '/manager/worker-invite',
+ /** @deprecated 공용 채팅으로 통합 — ROUTES.CHAT.ROOMS 사용 */
SOCIAL: '/manager/social',
+ /** @deprecated 공용 채팅으로 통합 — ROUTES.CHAT.ROOM_PATTERN 사용 */
SOCIAL_CHAT: '/manager/social/chat',
/** 구인구직 — 내 공고 목록 (사장님 알바찾기 탭 진입점) */
POSTINGS: '/manager/postings',
@@ -71,6 +73,13 @@ export const ROUTES = {
/** 신청 상세 (파라미터) */
REQUEST_DETAIL_PATTERN: '/store-register/requests/:requestId',
},
+ /** 채팅 — USER·MANAGER 공용. 스코프 차이는 API 경로(app|manager)로만 구분합니다 */
+ CHAT: {
+ /** 채팅 목록 — Docbar 탭 진입점(개인/전체 세그먼트) */
+ ROOMS: '/chat',
+ /** 채팅방 (파라미터) */
+ ROOM_PATTERN: '/chat/rooms/:roomId',
+ },
NOTIFICATIONS: '/notifications',
NOTIFICATION_SETTINGS: '/notifications/settings',
} as const
@@ -108,3 +117,7 @@ export function managerPostingApplicationsPath(postingId?: number) {
export function managerPostingApplicationDetailPath(applicationId: number) {
return `/manager/postings/applications/${applicationId}`
}
+
+export function chatRoomPath(roomId: number) {
+ return `/chat/rooms/${roomId}`
+}
diff --git a/src/shared/lib/queryKeys.ts b/src/shared/lib/queryKeys.ts
index 4f90917c..effce287 100644
--- a/src/shared/lib/queryKeys.ts
+++ b/src/shared/lib/queryKeys.ts
@@ -114,6 +114,25 @@ export const queryKeys = {
comments: (scope: 'MANAGER' | 'USER' | null, requestId: number) =>
['storeRegisterRequest', 'comments', scope, requestId] as const,
},
+ chat: {
+ all: ['chat'] as const,
+ /** 목록 전체 무효화용 prefix — pageSize 무관하게 매칭 */
+ roomsAll: ['chat', 'rooms'] as const,
+ /** 개인·전체 방이 한 목록으로 오므로 세그먼트는 키에 넣지 않습니다 */
+ rooms: (scope: 'MANAGER' | 'USER' | null, params?: { pageSize?: number }) =>
+ ['chat', 'rooms', scope, params] as const,
+ /** 딥링크 진입 시 목록 캐시 대신 쓰는 방 상세 */
+ roomDetail: (scope: 'MANAGER' | 'USER' | null, roomId: number) =>
+ ['chat', 'roomDetail', scope, roomId] as const,
+ messages: (
+ scope: 'MANAGER' | 'USER' | null,
+ roomId: number,
+ params?: { pageSize?: number }
+ ) => ['chat', 'messages', scope, roomId, params] as const,
+ /** 새 채팅 상대 후보 — 근무지 동료·점주 */
+ contacts: (scope: 'MANAGER' | 'USER' | null) =>
+ ['chat', 'contacts', scope] as const,
+ },
notification: {
list: (scope: 'MANAGER' | 'USER' | null, type?: string) =>
['notifications', scope, type] as const,
diff --git a/src/shared/lib/stompConnection.ts b/src/shared/lib/stompConnection.ts
new file mode 100644
index 00000000..de4bf238
--- /dev/null
+++ b/src/shared/lib/stompConnection.ts
@@ -0,0 +1,159 @@
+import { Client, type StompSubscription } from '@stomp/stompjs'
+
+import { API_CONFIG } from './apiConfig'
+import { useAuthStore } from '../stores/useAuthStore'
+
+export type StompStatus =
+ | 'idle'
+ | 'connecting'
+ | 'connected'
+ | 'reconnecting'
+ | 'disconnected'
+
+const RECONNECT_DELAY = 3000
+const HEARTBEAT_INTERVAL = 10_000
+
+/** `ws(s)://` 절대 주소는 그대로, 그 외에는 현재 오리진 기준으로 해석합니다 */
+export function resolveBrokerUrl(configured: string): string {
+ if (/^wss?:\/\//.test(configured)) return configured
+ if (typeof window === 'undefined') return configured
+
+ const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+ const path = configured.startsWith('/') ? configured : `/${configured}`
+ return `${protocol}//${window.location.host}${path}`
+}
+
+interface Subscriber {
+ id: number
+ destination: string
+ onMessage: (body: string) => void
+ subscription: StompSubscription | null
+}
+
+/**
+ * 앱 전역 STOMP 연결.
+ *
+ * - 화면(훅)들이 acquire/release 로 참조를 잡고, 참조가 0이 되면 연결을 끊습니다.
+ * - 구독 요청은 매니저가 보관하다가 연결·재연결 시점에 실제 구독으로 붙입니다.
+ * (stompjs 는 미연결 상태의 subscribe 를 큐잉하지 않습니다)
+ */
+class StompConnectionManager {
+ private client: Client | null = null
+ private refCount = 0
+ private status: StompStatus = 'idle'
+ private statusListeners = new Set<(status: StompStatus) => void>()
+ private subscribers = new Map
- 목록을 불러오는 중입니다.
-
- )}
- {isError && !isLoading && (
-
- 목록을 불러오지 못했습니다.
-
- )}
- {!isLoading &&
- !isError &&
- chatRooms.map(item => (
- setSearchPopupOpen(false)}
- >
-
- )}
- e.stopPropagation()}
- >
-
-
-
-
- {chatRooms.map(item => (
-
-
-
-
- ))}
-
-
-
-
- {item.name}
-
-
- {item.message}
-
- >
+ /** 탭별 미읽음 뱃지 수 — 0·미지정이면 뱃지를 숨깁니다 */
+ badgeCountByTab?: Partial
-
- ),
- ],
- argTypes: {
- unread: { control: 'boolean' },
- },
-} satisfies Meta