Skip to content
Merged
14 changes: 12 additions & 2 deletions src/domains/freetalk/components/ChatRoomModal.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ import {useAuth} from '../../../contexts/AuthContext'
import {useThemeMode} from '../../../contexts/ThemeContext'
import {DESIGN_TOKENS, getChatStyles} from '../../../theme/theme'
import {useChatWebSocket} from '../hooks/useChatWebSocket'
import SystemCommandMessage from './SystemCommandMessage'
import {MessageType} from '../types/chatCommandTypes'

const ChatRoomModal = ({open, onClose, room, onLeave}) => {
const theme = useTheme()
Expand Down Expand Up @@ -456,7 +458,15 @@ const ChatRoomModal = ({open, onClose, room, onLeave}) => {
</Typography>
</Box>
) : (
messages.map((message) => (
messages.map((message) => {
// 시스템 명령어 메시지 (SYSTEM_COMMAND)
if (message.messageType === MessageType.SYSTEM_COMMAND || message.messageType === 'SYSTEM_COMMAND') {
return (
<SystemCommandMessage key={message.id} data={message.data} />
)
}

return (
<Box
key={message.id}
sx={{
Expand Down Expand Up @@ -594,7 +604,7 @@ const ChatRoomModal = ({open, onClose, room, onLeave}) => {
</>
)}
</Box>
))
)})
)}
<div ref={messagesEndRef}/>
</Box>
Expand Down
49 changes: 32 additions & 17 deletions src/domains/freetalk/components/SystemCommandMessage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,18 @@ const SystemCommandMessage = ({ data }) => {
const { mode } = useThemeMode()
const isDark = mode === 'dark'

const config = SystemCommandConfig[data.commandType] || SystemCommandConfig.help
// 명령어 타입 추출
const commandType = data?.commandType || data?.type || data?.raw?.type || 'help'
const config = SystemCommandConfig[commandType] || SystemCommandConfig.help
const { icon, color, bgColor } = config

// 표시 텍스트 추출
const displayText = data?.displayText || data?.message || data?.content || ''
const userId = data?.userId || data?.nickname || ''

// 결과 값 추출
const result = data?.result || data?.raw || {}

return (
<Box sx={{ width: '100%', display: 'flex', justifyContent: 'center', py: 1 }}>
<Paper
Expand Down Expand Up @@ -49,29 +58,35 @@ const SystemCommandMessage = ({ data }) => {

{/* 내용 */}
<Box sx={{ flex: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1 }}>
<Typography
variant="caption"
sx={{
fontWeight: 600,
color: isDark ? '#9ca3af' : 'text.secondary',
}}
>
{data.userId}
</Typography>
{/* displayText가 있으면 그대로 표시 (백엔드에서 이미 포맷팅됨) */}
{displayText ? (
<Typography
variant="body2"
sx={{
fontWeight: 500,
color: isDark ? '#fafaf9' : color,
color: isDark ? '#fafaf9' : 'text.primary',
whiteSpace: 'pre-wrap',
}}
>
{data.displayText}
{displayText}
</Typography>
</Box>

{/* 추가 결과 정보 */}
{renderCommandResult(data.commandType, data.result, isDark)}
) : (
<>
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1 }}>
<Typography
variant="caption"
sx={{
fontWeight: 600,
color: isDark ? '#9ca3af' : 'text.secondary',
}}
>
{userId}
</Typography>
</Box>
{/* 추가 결과 정보 */}
{renderCommandResult(commandType, result, isDark)}
</>
)}
</Box>
</Box>
</Paper>
Expand Down
17 changes: 12 additions & 5 deletions src/domains/freetalk/hooks/useChatWebSocket.js
Original file line number Diff line number Diff line change
Expand Up @@ -165,14 +165,21 @@ export function useChatWebSocket(roomId, userId) {
},

onSystemCommand: (data) => {
console.log('[useChatWebSocket] System command:', data)
const commandData = data.data || data
const commandData = data.data || {}
const commandMessage = {
id: `syscmd-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
messageType: 'SYSTEM_COMMAND',
userId: commandData.userId,
createdAt: new Date().toISOString(),
data: commandData,
userId: commandData.userId || commandData.nickname || data.userId,
createdAt: data.createdAt || new Date().toISOString(),
data: {
commandType: commandData.type || 'help',
userId: commandData.userId || commandData.nickname,
displayText: data.content || data.message || '',
result: typeof commandData.result === 'object'
? commandData.result
: { value: commandData.result },
raw: commandData,
},
}
setMessages((prev) => [...prev, commandMessage])
},
Expand Down