'use client'; import { useState } from 'react'; interface Message { id: number; user: string; avatar: string; content: string; time: string; reactions: { emoji: string; count: number }[]; thread?: number; } export default function ChatSlackStyleDemo() { const [activeChannel, setActiveChannel] = useState('general'); const [messageInput, setMessageInput] = useState(''); const channels = [ { id: 'general', name: '일반', unread: 0 }, { id: 'random', name: '잡담', unread: 3 }, { id: 'dev', name: '개발', unread: 0 }, { id: 'design', name: '디자인', unread: 1 }, { id: 'announcements', name: '공지사항', unread: 0 }, ]; const directMessages = [ { id: 'dm1', name: '김철수', status: 'online', avatar: '👨' }, { id: 'dm2', name: '이영희', status: 'away', avatar: '👩' }, { id: 'dm3', name: '박지민', status: 'offline', avatar: '🧑' }, ]; const messages: Message[] = [ { id: 1, user: '김철수', avatar: '👨', content: '안녕하세요! 오늘 스프린트 미팅 몇 시에 하나요?', time: '오전 9:30', reactions: [{ emoji: '👍', count: 3 }], }, { id: 2, user: '이영희', avatar: '👩', content: '10시에 시작합니다! 회의실 B에서 만나요.', time: '오전 9:32', reactions: [{ emoji: '✅', count: 2 }, { emoji: '🙏', count: 1 }], thread: 3, }, { id: 3, user: '박지민', avatar: '🧑', content: '저도 참석할게요. 어젠다 공유 부탁드려요~', time: '오전 9:35', reactions: [], }, ]; const statusColors = { online: 'bg-green-500', away: 'bg-yellow-500', offline: 'bg-gray-400', }; return (

{/* Workspace Sidebar */}

{/* Channel Sidebar */}

Team Workspace

{/* Channels */}

채널

{channels.map((channel) => ( ))}

{/* Direct Messages */}

다이렉트 메시지

{directMessages.map((dm) => ( ))}

{/* Main Chat Area */}

{/* Channel Header */}

{activeChannel}

{/* Messages */}

{messages.map((msg) => (

{msg.avatar}

{msg.user} {msg.time}

{msg.content}

{msg.reactions.length > 0 && (

{msg.reactions.map((r, i) => ( {r.emoji} {r.count} ))}

)} {msg.thread && ( )}

))}

{/* Message Input */}

setMessageInput(e.target.value)} placeholder={`#${activeChannel}에 메시지 보내기`} className="w-full px-4 py-3 bg-transparent text-white placeholder-gray-400 focus:outline-none" />

); }

Slack Style Chat

Acme Corp

# general