From 5e67ef8046e6f749356146dd2e143db29a5e45c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=95=88=ED=9B=88=EA=B8=B0?=
 <angora@anhungiui-MacBookAir.local>
Date: Sat, 24 Jan 2026 12:19:50 +0900
Subject: [PATCH] =?UTF-8?q?:art:Design:=20stomp-test.html=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/stomp-test.html | 547 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 547 insertions(+)
 create mode 100644 assets/stomp-test.html
diff --git a/assets/stomp-test.html b/assets/stomp-test.html
new file mode 100644
index 0000000..91fdbeb
--- /dev/null
+++ b/assets/stomp-test.html
@@ -0,0 +1,547 @@
+<!doctype html>
+<html lang="ko">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Group Chat UI (SockJS + STOMP)</title>
+
+    <!-- ✅ 정상 조합 -->
+    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
+
+    <style>
+        :root{
+            --bg: #f5f6f8;
+            --card: #ffffff;
+            --text: #111;
+            --muted: #666;
+            --border: rgba(0,0,0,.08);
+            --shadow: 0 10px 30px rgba(0,0,0,.08);
+            --me: #2f6df6;
+            --other: #fff;
+            --other-border: rgba(0,0,0,.10);
+        }
+        *{ box-sizing:border-box; }
+        body{
+            margin:0; background:var(--bg); color:var(--text);
+            font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
+        }
+
+        .app{
+            max-width: 980px;
+            margin: 0 auto;
+            padding: 18px;
+            display: grid;
+            grid-template-columns: 320px 1fr;
+            gap: 14px;
+        }
+
+        .panel{
+            background: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            box-shadow: var(--shadow);
+            overflow: hidden;
+        }
+
+        .panel .hd{
+            padding: 14px 14px;
+            border-bottom: 1px solid var(--border);
+            display:flex; align-items:center; justify-content:space-between;
+            gap:10px;
+        }
+        .title{
+            font-size: 14px; font-weight: 700;
+            display:flex; flex-direction:column; gap:2px;
+        }
+        .subtitle{ font-size: 12px; color: var(--muted); font-weight: 500; }
+
+        .btn{
+            border: 1px solid var(--border);
+            background: #fff;
+            padding: 9px 10px;
+            border-radius: 12px;
+            cursor: pointer;
+            font-weight: 700;
+            font-size: 12px;
+        }
+        .btn.primary{
+            background: #111; color:#fff; border-color:#111;
+        }
+        .btn.danger{
+            background: #ffefef; border-color: #ffd6d6; color:#b00020;
+        }
+        .btn:disabled{ opacity:.5; cursor:not-allowed; }
+
+        .form{
+            padding: 12px 14px 14px;
+            display:flex;
+            flex-direction:column;
+            gap: 10px;
+        }
+        .field{
+            display:flex; flex-direction:column; gap:6px;
+        }
+        label{ font-size: 12px; color: var(--muted); }
+        input{
+            width: 100%;
+            padding: 10px 12px;
+            border-radius: 12px;
+            border: 1px solid var(--border);
+            outline: none;
+            font-size: 13px;
+            background: #fff;
+        }
+        input:focus{ border-color: rgba(47,109,246,.45); box-shadow: 0 0 0 3px rgba(47,109,246,.12); }
+
+        .row{
+            display:flex; gap: 8px;
+        }
+        .row > *{ flex:1; }
+
+        .status{
+            padding: 10px 14px;
+            border-top: 1px solid var(--border);
+            background: #fafafa;
+            font-size: 12px;
+            color: var(--muted);
+            display:flex; gap:10px; align-items:center; justify-content:space-between;
+        }
+        .badge{
+            display:inline-flex; align-items:center; gap:6px;
+            padding: 6px 10px;
+            border-radius: 999px;
+            border: 1px solid var(--border);
+            background:#fff;
+            font-weight:700;
+            color:#333;
+        }
+        .dot{
+            width:8px; height:8px; border-radius:50%;
+            background:#bbb;
+        }
+        .dot.on{ background:#18a957; }
+
+        /* Chat 영역 */
+        .chat{
+            display:flex;
+            flex-direction:column;
+            height: calc(100vh - 36px);
+            min-height: 640px;
+        }
+
+        .chat .hd{
+            padding: 14px;
+        }
+        .chatroom{
+            display:flex;
+            flex-direction:column;
+            padding: 14px;
+            gap: 10px;
+            overflow:auto;
+            flex:1;
+            background: linear-gradient(180deg, #f7f8fb 0%, #f4f5f8 100%);
+        }
+
+        .msg{
+            display:flex;
+            gap:10px;
+            align-items:flex-end;
+        }
+        .msg.me{ justify-content:flex-end; }
+        .bubble{
+            max-width: 72%;
+            padding: 10px 12px;
+            border-radius: 16px;
+            border: 1px solid var(--other-border);
+            background: var(--other);
+            box-shadow: 0 6px 18px rgba(0,0,0,.06);
+            line-height: 1.35;
+            word-break: break-word;
+        }
+        .msg.me .bubble{
+            background: var(--me);
+            border-color: rgba(47,109,246,.2);
+            color:#fff;
+        }
+
+        .meta{
+            display:flex;
+            gap:8px;
+            align-items:center;
+            margin-bottom: 6px;
+            color: var(--muted);
+            font-size: 11px;
+        }
+        .msg.me .meta{ justify-content:flex-end; color: rgba(255,255,255,.85); }
+        .name{ font-weight: 800; }
+        .time{ opacity:.85; }
+
+        .composer{
+            border-top: 1px solid var(--border);
+            padding: 12px;
+            display:flex;
+            gap:10px;
+            background:#fff;
+        }
+        .composer input{
+            flex:1;
+            padding: 12px 12px;
+            border-radius: 14px;
+        }
+        .send{
+            width: 110px;
+            border-radius: 14px;
+            border: 1px solid var(--border);
+            background: #111;
+            color:#fff;
+            font-weight: 900;
+            cursor:pointer;
+        }
+
+        /* 작은 로그(디버그) */
+        details{
+            border-top: 1px solid var(--border);
+            background:#fff;
+        }
+        details summary{
+            cursor:pointer;
+            padding: 10px 14px;
+            font-size: 12px;
+            color: var(--muted);
+            user-select:none;
+        }
+        #debugLog{
+            padding: 10px 14px 14px;
+            white-space: pre-wrap;
+            font-size: 12px;
+            color:#333;
+            max-height: 160px;
+            overflow:auto;
+            background:#fafafa;
+            border-top: 1px solid var(--border);
+        }
+
+        @media (max-width: 900px){
+            .app{ grid-template-columns: 1fr; }
+            .chat{ height: auto; min-height: 600px; }
+        }
+    </style>
+</head>
+<body>
+
+<div class="app">
+    <!-- Left: Settings -->
+    <div class="panel">
+        <div class="hd">
+            <div class="title">
+                채팅 설정
+                <div class="subtitle">멀티창 테스트용 (각 창에서 닉네임 다르게)</div>
+            </div>
+            <button class="btn danger" onclick="disconnect()">Disconnect</button>
+        </div>
+
+        <div class="form">
+            <div class="row">
+                <div class="field">
+                    <label>roomId</label>
+                    <input id="roomId" value="1" />
+                </div>
+                <div class="field">
+                    <label>senderUserId</label>
+                    <input id="senderUserId" value="1" />
+                </div>
+            </div>
+
+            <div class="field">
+                <label>senderNickname</label>
+                <input id="senderNickname" value="hoon" />
+            </div>
+
+            <div class="row">
+                <button class="btn primary" onclick="connect()">Connect</button>
+                <button class="btn" onclick="subscribeRoom()">Subscribe</button>
+            </div>
+        </div>
+
+        <div class="status">
+            <div class="badge">
+                <span id="connDot" class="dot"></span>
+                <span id="connText">DISCONNECTED</span>
+            </div>
+            <div class="subtitle" id="subText">not subscribed</div>
+        </div>
+    </div>
+
+    <!-- Right: Chat -->
+    <div class="panel chat">
+        <div class="hd">
+            <div class="title">
+                단체 채팅방
+                <div class="subtitle" id="roomTitle">room: 1</div>
+            </div>
+            <div class="subtitle">Enter로 전송 / Subscribe 후 수신</div>
+        </div>
+
+        <div id="chatroom" class="chatroom"></div>
+
+        <div class="composer">
+            <input id="content" placeholder="메시지를 입력하세요..." />
+            <button class="send" onclick="sendMsg()">Send</button>
+        </div>
+
+        <details>
+            <summary>디버그 로그 보기</summary>
+            <div id="debugLog"></div>
+        </details>
+    </div>
+</div>
+
+<script>
+    let stompClient = null;
+    let currentSub = null;
+    let isComposing = false;
+    let lastSent = { text: "", at: 0 };
+    const $ = (id) => document.getElementById(id);
+    const contentInput = document.getElementById("content");
+
+    contentInput.addEventListener("compositionstart", () => { isComposing = true; });
+    contentInput.addEventListener("compositionend", () => { isComposing = false; });
+    function debug(msg){
+        const el = $("debugLog");
+        el.textContent += msg + "\n";
+        el.scrollTop = el.scrollHeight;
+    }
+
+    function setConn(isOn){
+        $("connDot").classList.toggle("on", isOn);
+        $("connText").textContent = isOn ? "CONNECTED" : "DISCONNECTED";
+    }
+
+    function setSub(text){
+        $("subText").textContent = text;
+    }
+
+    function roomIdValue(){
+        return $("roomId").value.trim();
+    }
+
+    function myUserId(){
+        return Number($("senderUserId").value);
+    }
+
+    function myNickname(){
+        return $("senderNickname").value.trim();
+    }
+
+    function nowHHMM(){
+        const d = new Date();
+        const hh = String(d.getHours()).padStart(2,"0");
+        const mm = String(d.getMinutes()).padStart(2,"0");
+        return `${hh}:${mm}`;
+    }
+
+    function appendMessage({senderNickname, senderUserId, content, createdAt, type}){
+        if (type === "JOIN" || type === "LEAVE" || type === "SYSTEM") {
+            const div = document.createElement("div");
+            div.style.textAlign = "center";
+            div.style.fontSize = "12px";
+            div.style.color = "#777";
+            div.style.margin = "8px 0";
+
+            if (type === "JOIN") {
+                div.textContent = `🔔 ${senderNickname}님이 입장했습니다`;
+            } else if (type === "LEAVE") {
+                div.textContent = `🔕 ${senderNickname}님이 퇴장했습니다`;
+            } else {
+                div.textContent = content ?? "";
+            }
+
+            const chat = $("chatroom");
+            chat.appendChild(div);
+            chat.scrollTop = chat.scrollHeight;
+            return; // ❗ 여기서 함수 종료
+        }
+        const mine = Number(senderUserId) === myUserId();
+
+        const wrap = document.createElement("div");
+        wrap.className = "msg" + (mine ? " me" : "");
+
+        const bubble = document.createElement("div");
+        bubble.className = "bubble";
+
+        const meta = document.createElement("div");
+        meta.className = "meta";
+
+        const name = document.createElement("span");
+        name.className = "name";
+        name.textContent = senderNickname ?? "unknown";
+
+        const time = document.createElement("span");
+        time.className = "time";
+        // 서버 createdAt이 있으면 그걸 사용(UTC일 수 있음) / 없으면 현재 시간
+        let t = nowHHMM();
+        if (createdAt) {
+            try {
+                const dt = new Date(createdAt);
+                t = String(dt.getHours()).padStart(2,"0") + ":" + String(dt.getMinutes()).padStart(2,"0");
+            } catch(e){}
+        }
+        time.textContent = t;
+
+        // 카톡 느낌: 남 메시지는 "이름 + 시간", 내 메시지는 "시간"만(원하면 이름도 표시 가능)
+        if (!mine) meta.appendChild(name);
+        meta.appendChild(time);
+
+        const body = document.createElement("div");
+        body.textContent = content ?? "";
+
+        bubble.appendChild(meta);
+        bubble.appendChild(body);
+
+        wrap.appendChild(bubble);
+
+        const chat = $("chatroom");
+        chat.appendChild(wrap);
+        chat.scrollTop = chat.scrollHeight;
+    }
+
+    function connect(){
+        if (stompClient && stompClient.connected){
+            debug("[INFO] already connected");
+            return;
+        }
+
+        const socket = new SockJS(
+            "http://localhost:8080/ws",
+            null,
+            { transports: ["xhr-streaming", "xhr-polling"] } // ✅ opCode=7 우회
+        );
+
+        stompClient = Stomp.over(socket);
+        stompClient.debug = (str) => debug("[DEBUG] " + str);
+
+        stompClient.connect({}, () => {
+            setConn(true);
+            debug("[CONNECTED]");
+        }, (err) => {
+            setConn(false);
+            debug("[ERROR] " + (typeof err === "string" ? err : JSON.stringify(err)));
+        });
+    }
+
+    function subscribeRoom(){
+        if (!stompClient) return debug("[WARN] connect first");
+        if (!stompClient.connected) return debug("[WARN] not connected yet");
+
+        if (currentSub){
+            currentSub.unsubscribe();
+            currentSub = null;
+            setSub("not subscribed");
+            debug("[UNSUBSCRIBED] previous");
+        }
+
+        const rid = roomIdValue();
+        const dest = `/topic/chat/rooms/${rid}`;
+        $("roomTitle").textContent = `room: ${rid}`;
+
+        currentSub = stompClient.subscribe(dest, (frame) => {
+            // 서버 JSON 그대로 받음
+            try{
+                const data = JSON.parse(frame.body);
+                appendMessage(data);
+            }catch(e){
+                // 혹시 JSON 아니면 텍스트로 표시
+                appendMessage({
+                    senderNickname: "system",
+                    senderUserId: -1,
+                    content: frame.body
+                });
+            }
+        });
+        stompClient.send("/app/chat.join", {}, JSON.stringify({
+            roomId: Number(roomIdValue()),
+            senderUserId: myUserId(),
+            senderNickname: myNickname()
+        }));
+        setSub("subscribed: " + dest);
+        debug("[SUBSCRIBED] " + dest);
+    }
+
+    function sendMsg(){
+        if (!stompClient || !stompClient.connected) return debug("[WARN] not connected yet");
+
+        const contentEl = document.getElementById('content');
+        const content = contentEl.value;
+        const text = content.trim();
+        if (!text) return;
+
+        // ✅ 안전장치: 같은 내용이 200ms 이내에 또 보내지면 무시
+        const now = Date.now();
+        if (lastSent.text === text && (now - lastSent.at) < 200) {
+            return debug("[WARN] duplicate send blocked: " + text);
+        }
+        lastSent = { text, at: now };
+
+        const payload = {
+            roomId: Number(document.getElementById('roomId').value),
+            senderUserId: Number(document.getElementById('senderUserId').value),
+            senderNickname: document.getElementById('senderNickname').value.trim(),
+            content: text
+        };
+
+        stompClient.send("/app/chat.send", {}, JSON.stringify(payload));
+        debug("[SENT] " + JSON.stringify(payload));
+
+        contentEl.value = "";
+        contentEl.focus();
+    }
+
+    function disconnect(){
+
+        // 🔽 여기 먼저
+        if (stompClient && stompClient.connected) {
+            stompClient.send("/app/chat.leave", {}, JSON.stringify({
+                roomId: Number(roomIdValue()),
+                senderUserId: myUserId(),
+                senderNickname: myNickname()
+            }));
+        }
+
+        if (currentSub){
+            currentSub.unsubscribe();
+            currentSub = null;
+            setSub("not subscribed");
+            debug("[UNSUBSCRIBED] ✅");
+        }
+        if (stompClient){
+            stompClient.disconnect(() => {
+                setConn(false);
+                debug("[DISCONNECTED]");
+            });
+            stompClient = null;
+        }else{
+            setConn(false);
+            debug("[INFO] already disconnected");
+        }
+    }
+
+    // Enter 키 전송
+    contentInput.addEventListener("keydown", (e) => {
+        if (e.key !== "Enter") return;
+
+        // ✅ 한글 조합중(IME)에는 Enter로 전송하면 마지막 글자만/중복 전송 터질 수 있음
+        if (e.isComposing || isComposing || e.keyCode === 229) return;
+
+        e.preventDefault();
+        sendMsg();
+    });
+
+    // 초기 UI 반영
+    setConn(false);
+    setSub("not subscribed");
+    $("roomTitle").textContent = `room: ${roomIdValue()}`;
+</script>
+
+</body>
+</html>
\ No newline at end of file
