${initial}
${roomInfo.username}
최근 메시지 확인 중...
`;
});
roomListContainer.innerHTML = listHtml;
}
// 룸 검색 필터링 제거 (사용자 요청)
// if (roomSearchInput) { ... }
// Send Message
async function sendMessage(text = null, imageUrl = null) {
const message = text || messageInput.value.trim();
if (message || imageUrl) {
const data = {
room: currentRoom,
sender: currentUser.username,
user_code: currentUser.id,
consultant_code: currentConsultant,
message: imageUrl || message,
msg_type: imageUrl ? 'image' : 'text',
role: currentUser.role, // Add role to metadata
timestamp: new Date().toLocaleTimeString()
};
socket.emit('send_message', data);
if (!imageUrl) messageInput.value = '';
}
}
sendBtn.addEventListener('click', () => sendMessage());
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
// Image Upload Handling
imageBtn.addEventListener('click', () => imageInput.click());
imageInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (file) await uploadAndSendImage(file);
imageInput.value = '';
});
// Clipboard Paste Handling (Screen Capture)
messageInput.addEventListener('paste', async (e) => {
const clipboardData = e.clipboardData || window.clipboardData;
if (!clipboardData) return;
const items = clipboardData.items;
let imageFound = false;
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
const file = items[i].getAsFile();
if (file) {
imageFound = true;
console.log('이미지 붙여넣기 감지됨:', file.name);
await uploadAndSendImage(file);
}
}
}
// 이미지를 전송했다면 텍스트박스에 텍스트가 중복으로 들어가는 것을 방지하고 싶을 때 사용 (선택 사항)
// if (imageFound) e.preventDefault();
});
async function uploadAndSendImage(file) {
const formData = new FormData();
formData.append('image', file);
console.log('이미지 업로드 시도 중:', file.name);
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error(`서버 응답 오류: ${response.status}`);
}
const result = await response.json();
if (result.success) {
console.log('이미지 업로드 성공:', result.imageUrl);
await sendMessage(null, result.imageUrl);
} else {
alert('이미지 업로드 실패: ' + result.message);
}
} catch (err) {
console.error('이미지 업로드 프로세스 오류:', err);
alert('이미지 전송 중 오류가 발생했습니다. 서버 로그를 확인하거나 다시 시도해 주세요.');
}
}
// Helper: 상담원 역할 확인
function isConsultantRole(role) {
if (!role) return false;
const consultantKeywords = ['manage', 'manager', 'cloudflare', 'security', 'director', 'master', 'admin', 'consultant'];
const roles = String(role).toLowerCase();
return consultantKeywords.some(keyword => roles.includes(keyword));
}
// Receive Message
socket.on('receive_message', (data) => {
if (!chatMessages) return;
const msgDiv = document.createElement('div');
msgDiv.classList.add('message');
// Align messages: Consultant right, Guest left (Skype style is often left-dominant, but we follow chat standards)
const isConsultant = isConsultantRole(data.role);
const isMe = (data.user_code === currentUser.id);
msgDiv.classList.add('message');
msgDiv.classList.add(isMe ? 'right' : 'left');
let contentHtml = '';
if (data.msg_type === 'image') {
contentHtml += `