치지직 채팅창 인식 추가 및 주사위 횟수 증가 추가.

2026-09-16 02:21:39 +09:00
parent 171a4e19f6
commit 7c402dfd8f
22 changed files with 2133 additions and 90 deletions
--- a/app/game/chat-feed.tsx
+++ b/app/game/chat-feed.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+export type ChatFeedItem = {
+  id: string;
+  at: number;
+  nickname: string;
+  message: string;
+  kind: 'chat' | 'donation';
+  payAmount?: number;
+};
+
+export default function ChatFeedPanel({
+  items,
+  visible,
+  compact = false,
+}: {
+  items: ChatFeedItem[];
+  visible: boolean;
+  compact?: boolean;
+}) {
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = listRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, [items.length, items[items.length - 1]?.id]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className={
+        compact
+          ? 'flex h-full max-h-[130px] min-h-0 w-full flex-col overflow-hidden rounded-md bg-black/75 text-white shadow-md'
+          : 'flex h-full min-h-0 w-full flex-col overflow-hidden rounded-lg bg-black/70 text-white shadow-lg'
+      }
+    >
+      <div
+        className={
+          compact
+            ? 'shrink-0 border-b border-white/10 px-1.5 py-0.5 text-[10px] font-semibold text-white/80'
+            : 'shrink-0 border-b border-white/10 px-2 py-1 text-[11px] font-semibold text-white/80'
+        }
+      >
+        채팅
+      </div>
+      <div
+        ref={listRef}
+        className={
+          compact
+            ? 'min-h-0 flex-1 space-y-0.5 overflow-y-auto px-1.5 py-1 text-[10px] leading-snug'
+            : 'min-h-0 flex-1 space-y-1 overflow-y-auto px-2 py-1.5 text-[11px] leading-snug'
+        }
+      >
+        {items.length === 0 ? (
+          <p className="text-white/40">채팅 대기 중…</p>
+        ) : (
+          items.map((item) => (
+            <p
+              key={item.id}
+              className={item.kind === 'donation' ? 'text-amber-200' : 'text-white/90'}
+            >
+              <span className="font-semibold text-white/70">{item.nickname}</span>
+              <span className="text-white/40">: </span>
+              <span>{item.message || (item.kind === 'donation' ? '치즈 후원' : '')}</span>
+              {item.kind === 'donation' && item.payAmount != null ? (
+                <span className="text-amber-300"> ({item.payAmount}치즈)</span>
+              ) : null}
+            </p>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}