214 lines
8.0 KiB
TypeScript
214 lines
8.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
import { MessageSquare, Pencil, Check, X, ChevronsDown } from "lucide-react";
|
|
import { useMessages, useMarkAsRead, useUpdateRoom } from "@/hooks/useMessenger";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { useMessengerContext } from "@/contexts/MessengerContext";
|
|
import { useMessengerSocket } from "@/hooks/useMessengerSocket";
|
|
import { MessageItem } from "./MessageItem";
|
|
import { MessageInput } from "./MessageInput";
|
|
import type { Room } from "@/hooks/useMessenger";
|
|
|
|
interface ChatPanelProps {
|
|
room: Room | null;
|
|
}
|
|
|
|
export function ChatPanel({ room }: ChatPanelProps) {
|
|
const { user } = useAuth();
|
|
const { selectedRoomId } = useMessengerContext();
|
|
const { data: messages } = useMessages(selectedRoomId);
|
|
const markAsRead = useMarkAsRead();
|
|
const updateRoom = useUpdateRoom();
|
|
const { emitTypingStart, emitTypingStop, typingUsers } = useMessengerSocket();
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const [isAtBottom, setIsAtBottom] = useState(true);
|
|
const bottomRef = useRef<HTMLDivElement>(null);
|
|
const [isEditingName, setIsEditingName] = useState(false);
|
|
const [editName, setEditName] = useState("");
|
|
const editInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (selectedRoomId) {
|
|
markAsRead.mutate(selectedRoomId);
|
|
}
|
|
}, [selectedRoomId, messages?.length]);
|
|
|
|
const lastMessageId = messages?.[messages.length - 1]?.id;
|
|
|
|
// Scroll to bottom: sentinel scrollIntoView before paint (no visible jump)
|
|
useLayoutEffect(() => {
|
|
bottomRef.current?.scrollIntoView();
|
|
}, [selectedRoomId, lastMessageId]);
|
|
|
|
// Second pass for async image loads
|
|
useEffect(() => {
|
|
const t = setTimeout(() => { bottomRef.current?.scrollIntoView(); }, 600);
|
|
return () => clearTimeout(t);
|
|
}, [lastMessageId, selectedRoomId]);
|
|
|
|
// Re-attach scroll listener whenever room changes (scrollRef mounts after room is set)
|
|
useEffect(() => {
|
|
const el = scrollRef.current;
|
|
if (!el) return;
|
|
const onScroll = () => {
|
|
setIsAtBottom(el.scrollHeight - el.scrollTop - el.clientHeight < 60);
|
|
};
|
|
el.addEventListener("scroll", onScroll);
|
|
return () => el.removeEventListener("scroll", onScroll);
|
|
}, [room?.id]);
|
|
|
|
if (!room) {
|
|
return (
|
|
<div className="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-2">
|
|
<MessageSquare className="h-10 w-10" />
|
|
<p className="text-sm">대화를 선택하세요</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const roomTyping = selectedRoomId ? typingUsers.get(selectedRoomId) : undefined;
|
|
|
|
// First message in a time group (shows avatar + name)
|
|
const isFirstInGroup = (idx: number) => {
|
|
if (idx === 0) return true;
|
|
const prev = messages![idx - 1];
|
|
const curr = messages![idx];
|
|
if (prev.senderId !== curr.senderId || curr.isDeleted || prev.isDeleted) return true;
|
|
const gap = new Date(curr.createdAt).getTime() - new Date(prev.createdAt).getTime();
|
|
return gap > 5 * 60 * 1000;
|
|
};
|
|
|
|
const isLastInGroup = (idx: number) => {
|
|
if (!messages) return true;
|
|
if (idx === messages.length - 1) return true;
|
|
const curr = messages[idx];
|
|
const next = messages[idx + 1];
|
|
if (curr.senderId !== next.senderId || next.isDeleted || curr.isDeleted) return true;
|
|
// Gap > 5 minutes → new time group
|
|
const gap = new Date(next.createdAt).getTime() - new Date(curr.createdAt).getTime();
|
|
return gap > 5 * 60 * 1000;
|
|
};
|
|
|
|
// Date separator helper
|
|
const shouldShowDate = (idx: number) => {
|
|
if (idx === 0) return true;
|
|
const prev = new Date(messages![idx - 1].createdAt).toDateString();
|
|
const curr = new Date(messages![idx].createdAt).toDateString();
|
|
return prev !== curr;
|
|
};
|
|
|
|
// Compute display name based on room type
|
|
const displayName = (() => {
|
|
if (room.type === "dm") {
|
|
const other = room.participants.find((p) => p.userId !== user?.userId);
|
|
return other?.userName ?? room.name;
|
|
}
|
|
if (room.name) return room.name;
|
|
const others = room.participants.filter((p) => p.userId !== user?.userId);
|
|
if (others.length <= 2) {
|
|
return others.map((p) => p.userName).join(", ");
|
|
}
|
|
return `${others[0].userName}, ${others[1].userName} 외 ${others.length - 2}명`;
|
|
})();
|
|
|
|
return (
|
|
<div className="flex-1 flex flex-col min-w-0 min-h-0 overflow-hidden relative">
|
|
{/* Header */}
|
|
<div className="border-b px-4 py-2 flex items-center gap-2">
|
|
{isEditingName ? (
|
|
<form
|
|
className="flex items-center gap-1 flex-1 min-w-0"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
const trimmed = editName.trim();
|
|
if (trimmed && trimmed !== room.name) {
|
|
updateRoom.mutate({ roomId: room.id, name: trimmed });
|
|
}
|
|
setIsEditingName(false);
|
|
}}
|
|
>
|
|
<input
|
|
ref={editInputRef}
|
|
value={editName}
|
|
onChange={(e) => setEditName(e.target.value)}
|
|
className="font-semibold text-sm bg-transparent border-b border-primary outline-none flex-1 min-w-0"
|
|
autoFocus
|
|
/>
|
|
<button type="submit" className="p-0.5 hover:bg-muted rounded">
|
|
<Check className="h-3.5 w-3.5 text-primary" />
|
|
</button>
|
|
<button type="button" onClick={() => setIsEditingName(false)} className="p-0.5 hover:bg-muted rounded">
|
|
<X className="h-3.5 w-3.5 text-muted-foreground" />
|
|
</button>
|
|
</form>
|
|
) : (
|
|
<>
|
|
<h3 className="font-semibold text-sm truncate">{displayName}</h3>
|
|
<button
|
|
onClick={() => { setEditName(room.name); setIsEditingName(true); }}
|
|
className="p-0.5 hover:bg-muted rounded shrink-0"
|
|
>
|
|
<Pencil className="h-3.5 w-3.5 text-muted-foreground" />
|
|
</button>
|
|
<span className="text-xs text-muted-foreground">
|
|
{room.participants.length}명
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Messages */}
|
|
<div ref={scrollRef} className="flex-1 min-h-0 overflow-y-auto relative">
|
|
<div className="pt-2">
|
|
{messages?.map((msg, idx) => (
|
|
<div key={msg.id}>
|
|
{shouldShowDate(idx) && (
|
|
<div className="flex items-center gap-2 px-4 py-2">
|
|
<div className="flex-1 h-px bg-border" />
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{new Date(msg.createdAt).toLocaleDateString("ko-KR", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
weekday: "short",
|
|
})}
|
|
</span>
|
|
<div className="flex-1 h-px bg-border" />
|
|
</div>
|
|
)}
|
|
<MessageItem
|
|
message={msg}
|
|
isOwn={msg.senderId === user?.userId}
|
|
showAvatar={isFirstInGroup(idx)}
|
|
isLastInGroup={isLastInGroup(idx)}
|
|
/>
|
|
</div>
|
|
))}
|
|
<div className="px-4 h-5 flex items-center text-xs text-muted-foreground">
|
|
{roomTyping && roomTyping.length > 0 ? `${roomTyping.join(", ")}님이 입력 중...` : ""}
|
|
</div>
|
|
<div ref={bottomRef} />
|
|
</div>
|
|
</div>
|
|
|
|
{!isAtBottom && (
|
|
<button
|
|
onClick={() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }}
|
|
className="absolute bottom-14 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1 bg-primary text-primary-foreground text-xs px-3 py-1.5 rounded-full shadow-md hover:bg-primary/90"
|
|
>
|
|
<ChevronsDown className="h-3.5 w-3.5" />
|
|
최신 메시지
|
|
</button>
|
|
)}
|
|
|
|
{/* Input */}
|
|
<MessageInput
|
|
roomId={room.id}
|
|
onTypingStart={() => emitTypingStart(room.id)}
|
|
onTypingStop={() => emitTypingStop(room.id)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|