From 4e6a28297c2333830e8cf309b0d57f065444cbde Mon Sep 17 00:00:00 2001
From: minjee2758 <minjee2758@naver.com>
Date: Sun, 6 Jul 2025 15:29:50 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EB=B3=80=EA=B2=BD,=20?=
 =?UTF-8?q?=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80,=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

스타일 변경

# Conflicts:
#	src/main/java/org/ezcode/codetest/presentation/view/ViewController.java
#	src/main/resources/static/css/header.css
#	src/main/resources/static/css/test-login.css
#	src/main/resources/static/css/test-main.css
#	src/main/resources/static/html/header.html
#	src/main/resources/templates/test-login.html
#	src/main/resources/templates/test-main.html
---
 src/main/resources/static/html/header.html | 141 ++-------------------
 1 file changed, 9 insertions(+), 132 deletions(-)

diff --git a/src/main/resources/static/html/header.html b/src/main/resources/static/html/header.html
index 7f52a12f..0535e6af 100644
--- a/src/main/resources/static/html/header.html
+++ b/src/main/resources/static/html/header.html
@@ -1,144 +1,21 @@
-<!-- 1) 기존 header.css 로딩 -->
-<link rel="stylesheet" href="/css/header.css" />
-
-<!-- 2) 채팅 오버레이·드로어용 CSS -->
-<style>
-    /* 반투명 뒤배경 */
-    .chat-overlay {
-        display: none;
-        position: fixed; top: 0; left: 0;
-        width: 100%; height: 100%;
-        background: rgba(0,0,0,0.4);
-        z-index: 9998;
-    }
-    .chat-overlay.open {
-        display: block;
-    }
-
-    /* 우측 슬라이드 패널 */
-    .chat-drawer {
-        position: fixed; top: 0; right: 0; bottom: 0;
-        width: 90%; max-width: 800px;
-        background: #1c1e2b;
-        transform: translateX(100%);
-        transition: transform 0.3s ease-out;
-        z-index: 9999;
-        display: flex; flex-direction: column;
-        box-shadow: -2px 0 8px rgba(0,0,0,0.3);
-    }
-    .chat-drawer.open {
-        transform: translateX(0);
-    }
-
-    /* 닫기 버튼 */
-    .chat-drawer-close {
-        align-self: flex-end;
-        padding: 12px;
-        font-size: 24px;
-        color: #fff;
-        cursor: pointer;
-    }
-
-    /* iframe 꽉 채우기 */
-    .chat-drawer iframe {
-        flex: 1;
-        border: none;
-    }
-</style>
-
-<!-- 3) 기존 <header>…</header> -->
 <header>
     <div class="logo-placeholder" onclick="location.href='/test/main'" style="cursor:pointer;"></div>
     <nav>
         <ul>
-            <li><a href="/test/problems">문제풀이</a></li>
-            <li><a href="/test/ranking">랭킹</a></li>
-
-            <!-- ★ 알람 벨 아이콘 복구 ★ -->
-            <li id="notificationBtn" style="cursor:pointer;">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"
-                     xmlns="http://www.w3.org/2000/svg">
-                    <path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6v-5
-                   c0-3.07-1.64-5.64-4.5-6.32V4a1.5 1.5 0 0
-                   0-3 0v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1
-                   l-2-2z"/>
-                </svg>
+            <li>
+                <a href="/test/problems">문제풀이</a>
             </li>
-
-            <!-- ★ 채팅 아이콘: 클릭 시 overlay·drawer 에 .open 추가 ★ -->
-            <li id="chatToggle" style="cursor:pointer;"
-                onclick="
-            document.getElementById('chatOverlay').classList.add('open');
-            document.getElementById('chatDrawer').classList.add('open');
-          ">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff">
-                    <path d="M4 4H20V16H7L4 19V4Z"/>
-                </svg>
+            <li>
+                <a href="/test/ranking">랭킹</a>
             </li>
-
             <li>
-                <button id="loginBtn" class="login-button-header"
-                        onclick="location.href='/test/signin'">
-                    로그인
-                </button>
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.9 22 12 22ZM18 16V11C18 7.93 16.36 5.36 13.5 4.68V4C13.5 3.17 12.83 2.5 12 2.5C11.17 2.5 10.5 3.17 10.5 4V4.68C7.64 5.36 6 7.92 6 11V16L4 18V19H20V18L18 16Z" fill="#fff"/>
+                </svg>
             </li>
-            <li class="user-menu" style="display:none;" id="userMenu">
-                <img id="userIcon" src="/images/user-icon.png" alt="유저 아이콘"/>
-                <div class="dropdown" id="userDropdown">
-                    <a href="/test/mypage">마이페이지</a>
-                    <button id="logoutBtn">로그아웃</button>
-                </div>
+            <li>
+                <button class="login-button-header" onclick="location.href='/test/signin'">로그인</button>
             </li>
         </ul>
     </nav>
 </header>
-
-<!-- 4) 오버레이 & 드로어 HTML (header 바로 밑에) -->
-<div id="chatOverlay" class="chat-overlay"
-     onclick="
-       this.classList.remove('open');
-       document.getElementById('chatDrawer').classList.remove('open');
-     ">
-</div>
-
-<div id="chatDrawer" class="chat-drawer">
-    <!-- 닫기 버튼 (×) -->
-    <span class="chat-drawer-close"
-          onclick="
-          document.getElementById('chatOverlay').classList.remove('open');
-          document.getElementById('chatDrawer').classList.remove('open');
-        ">
-    &times;
-  </span>
-
-    <!-- 실제 채팅 페이지 -->
-    <iframe src="/test/chatting"></iframe>
-</div>
-
-<!-- 5) 토글 스크립트 -->
-<script>
-    const toggle = document.getElementById('chatToggle');
-    const overlay = document.getElementById('chatOverlay');
-    const drawer  = document.getElementById('chatDrawer');
-    const closeBtn= document.querySelector('.chat-drawer-close');
-
-    function openChat() {
-        overlay.classList.add('open');
-        drawer.classList.add('open');
-    }
-    function closeChat() {
-        overlay.classList.remove('open');
-        drawer.classList.remove('open');
-    }
-
-    toggle.addEventListener('click', () =>
-        drawer.classList.contains('open') ? closeChat() : openChat()
-    );
-    closeBtn.addEventListener('click', closeChat);
-    overlay.addEventListener('click', closeChat);
-
-    // 알람 클릭 이벤트 (필요시 추가 기능 구현)
-    document.getElementById('notificationBtn').addEventListener('click', () => {
-        alert('알림 기능은 곧 제공됩니다.');
-    });
-</script>
\ No newline at end of file

From b17eee2ff325be37e7fb6124bd19c5ec4b0c8836 Mon Sep 17 00:00:00 2001
From: thezz9 <thezz9@naver.com>
Date: Sun, 6 Jul 2025 17:07:24 +0900
Subject: [PATCH 2/5] =?UTF-8?q?style:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20hover=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/static/html/header.html | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/main/resources/static/html/header.html b/src/main/resources/static/html/header.html
index 0535e6af..a4ce89d3 100644
--- a/src/main/resources/static/html/header.html
+++ b/src/main/resources/static/html/header.html
@@ -14,8 +14,16 @@
                 </svg>
             </li>
             <li>
-                <button class="login-button-header" onclick="location.href='/test/signin'">로그인</button>
+                <button id="loginBtn" class="login-button-header" onclick="location.href='/test/signin'">로그인</button>
             </li>
+            <li class="user-menu" style="display: none;" id="userMenu">
+                <img id="userIcon" src="/images/user-icon.png" alt="유저 아이콘" />
+                <div class="dropdown" id="userDropdown">
+                    <a href="/test/mypage">마이페이지</a>
+                    <button id="logoutBtn">로그아웃</button>
+                </div>
+            </li>
+
         </ul>
     </nav>
-</header>
+</header>
\ No newline at end of file

From 5ad9dbc2d8b0950200455261be048f277664576c Mon Sep 17 00:00:00 2001
From: chat26666 <chat26666@gmail.com>
Date: Sun, 6 Jul 2025 22:14:07 +0900
Subject: [PATCH 3/5] fix:chatting

---
 src/main/resources/static/html/header.html | 145 +++++++++++++++++++--
 1 file changed, 131 insertions(+), 14 deletions(-)

diff --git a/src/main/resources/static/html/header.html b/src/main/resources/static/html/header.html
index a4ce89d3..fe503d6a 100644
--- a/src/main/resources/static/html/header.html
+++ b/src/main/resources/static/html/header.html
@@ -1,29 +1,146 @@
+<!-- 1) 기존 header.css 로딩 -->
+<link rel="stylesheet" href="/css/header.css" />
+
+<!-- 2) 채팅 오버레이·드로어용 CSS -->
+<style>
+    /* 반투명 뒤배경 */
+    .chat-overlay {
+        display: none;
+        position: fixed; top: 0; left: 0;
+        width: 100%; height: 100%;
+        background: rgba(0,0,0,0.4);
+        z-index: 9998;
+    }
+    .chat-overlay.open {
+        display: block;
+    }
+
+    /* 우측 슬라이드 패널 */
+    .chat-drawer {
+        position: fixed; top: 0; right: 0; bottom: 0;
+        width: 90%; max-width: 800px;
+        background: #1c1e2b;
+        transform: translateX(100%);
+        transition: transform 0.3s ease-out;
+        z-index: 9999;
+        display: flex; flex-direction: column;
+        box-shadow: -2px 0 8px rgba(0,0,0,0.3);
+    }
+    .chat-drawer.open {
+        transform: translateX(0);
+    }
+
+    /* 닫기 버튼 */
+    .chat-drawer-close {
+        align-self: flex-end;
+        padding: 12px;
+        font-size: 24px;
+        color: #fff;
+        cursor: pointer;
+    }
+
+    /* iframe 꽉 채우기 */
+    .chat-drawer iframe {
+        flex: 1;
+        border: none;
+    }
+</style>
+
+<!-- 3) 기존 <header>…</header> -->
 <header>
-    <div class="logo-placeholder" onclick="location.href='/test/main'" style="cursor:pointer;"></div>
+    <div class="logo-placeholder"
+         onclick="location.href='/test/main'"
+         style="cursor:pointer;"></div>
     <nav>
         <ul>
-            <li>
-                <a href="/test/problems">문제풀이</a>
-            </li>
-            <li>
-                <a href="/test/ranking">랭킹</a>
+            <li><a href="/test/problems">문제풀이</a></li>
+            <li><a href="/test/ranking">랭킹</a></li>
+
+            <!-- ★ 알람 벨 아이콘 복구 ★ -->
+            <li id="notificationBtn" style="cursor:pointer;">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6v-5
+                   c0-3.07-1.64-5.64-4.5-6.32V4a1.5 1.5 0 0
+                   0-3 0v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1
+                   l-2-2z"/>
+                </svg>
             </li>
-            <li>
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.9 22 12 22ZM18 16V11C18 7.93 16.36 5.36 13.5 4.68V4C13.5 3.17 12.83 2.5 12 2.5C11.17 2.5 10.5 3.17 10.5 4V4.68C7.64 5.36 6 7.92 6 11V16L4 18V19H20V18L18 16Z" fill="#fff"/>
+
+            <!-- ★ 채팅 아이콘: 클릭 시 overlay·drawer 에 .open 추가 ★ -->
+            <li id="chatToggle" style="cursor:pointer;"
+                onclick="
+            document.getElementById('chatOverlay').classList.add('open');
+            document.getElementById('chatDrawer').classList.add('open');
+          ">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff">
+                    <path d="M4 4H20V16H7L4 19V4Z"/>
                 </svg>
             </li>
+
             <li>
-                <button id="loginBtn" class="login-button-header" onclick="location.href='/test/signin'">로그인</button>
+                <button id="loginBtn" class="login-button-header"
+                        onclick="location.href='/test/signin'">
+                    로그인
+                </button>
             </li>
-            <li class="user-menu" style="display: none;" id="userMenu">
-                <img id="userIcon" src="/images/user-icon.png" alt="유저 아이콘" />
+            <li class="user-menu" style="display:none;" id="userMenu">
+                <img id="userIcon" src="/images/user-icon.png" alt="유저 아이콘"/>
                 <div class="dropdown" id="userDropdown">
                     <a href="/test/mypage">마이페이지</a>
                     <button id="logoutBtn">로그아웃</button>
                 </div>
             </li>
-
         </ul>
     </nav>
-</header>
\ No newline at end of file
+</header>
+
+<!-- 4) 오버레이 & 드로어 HTML (header 바로 밑에) -->
+<div id="chatOverlay" class="chat-overlay"
+     onclick="
+       this.classList.remove('open');
+       document.getElementById('chatDrawer').classList.remove('open');
+     ">
+</div>
+
+<div id="chatDrawer" class="chat-drawer">
+    <!-- 닫기 버튼 (×) -->
+    <span class="chat-drawer-close"
+          onclick="
+          document.getElementById('chatOverlay').classList.remove('open');
+          document.getElementById('chatDrawer').classList.remove('open');
+        ">
+    &times;
+  </span>
+
+    <!-- 실제 채팅 페이지 -->
+    <iframe src="/test/chatting"></iframe>
+</div>
+
+<!-- 5) 토글 스크립트 -->
+<script>
+    const toggle = document.getElementById('chatToggle');
+    const overlay = document.getElementById('chatOverlay');
+    const drawer  = document.getElementById('chatDrawer');
+    const closeBtn= document.querySelector('.chat-drawer-close');
+
+    function openChat() {
+        overlay.classList.add('open');
+        drawer.classList.add('open');
+    }
+    function closeChat() {
+        overlay.classList.remove('open');
+        drawer.classList.remove('open');
+    }
+
+    toggle.addEventListener('click', () =>
+        drawer.classList.contains('open') ? closeChat() : openChat()
+    );
+    closeBtn.addEventListener('click', closeChat);
+    overlay.addEventListener('click', closeChat);
+
+    // 알람 클릭 이벤트 (필요시 추가 기능 구현)
+    document.getElementById('notificationBtn').addEventListener('click', () => {
+        alert('알림 기능은 곧 제공됩니다.');
+    });
+</script>
\ No newline at end of file

From e007fb999013ec091debe34154f11c4afc0a2e8d Mon Sep 17 00:00:00 2001
From: chat26666 <chat26666@gmail.com>
Date: Sun, 6 Jul 2025 23:34:30 +0900
Subject: [PATCH 4/5] dasd

---
 src/main/resources/static/html/header.html  | 32 +++++++++++++++++++--
 src/main/resources/templates/chat-page.html | 22 ++++++++++----
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/main/resources/static/html/header.html b/src/main/resources/static/html/header.html
index fe503d6a..c2e32732 100644
--- a/src/main/resources/static/html/header.html
+++ b/src/main/resources/static/html/header.html
@@ -44,6 +44,22 @@
         flex: 1;
         border: none;
     }
+
+    /* 조이패드 아이콘 스타일 */
+    #joypadIcon {
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        fill: white;
+        margin-left: 12px;
+        transition: fill 0.3s;
+    }
+    #joypadIcon:hover {
+        fill: #0f0;
+    }
 </style>
 
 <!-- 3) 기존 <header>…</header> -->
@@ -78,6 +94,18 @@
                 </svg>
             </li>
 
+            <!-- ★ 조이패드 아이콘 추가: 클릭 시 새탭으로 /test/gaming 열기 ★ -->
+            <li style="cursor:pointer;" title="게임 실행">
+                <a href="/test/gaming" target="_blank" rel="noopener noreferrer" id="joypadIcon" aria-label="게임 실행">
+                    <svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg" >
+                        <!-- 조이스틱 모양 아이콘 -->
+                        <circle cx="12" cy="12" r="10" stroke="#0f0" stroke-width="1.5" fill="none"/>
+                        <rect x="9" y="6" width="6" height="12" fill="#0f0" rx="2" ry="2"/>
+                        <circle cx="12" cy="10" r="1.5" fill="#111"/>
+                    </svg>
+                </a>
+            </li>
+
             <li>
                 <button id="loginBtn" class="login-button-header"
                         onclick="location.href='/test/signin'">
@@ -95,7 +123,7 @@
     </nav>
 </header>
 
-<!-- 4) 오버레이 & 드로어 HTML (header 바로 밑에) -->
+<!-- 4) 기존 오버레이 & 드로어 HTML (채팅용) -->
 <div id="chatOverlay" class="chat-overlay"
      onclick="
        this.classList.remove('open');
@@ -117,7 +145,7 @@
     <iframe src="/test/chatting"></iframe>
 </div>
 
-<!-- 5) 토글 스크립트 -->
+<!-- 5) 토글 스크립트 (채팅 전용, 절대 건드리지 마세요) -->
 <script>
     const toggle = document.getElementById('chatToggle');
     const overlay = document.getElementById('chatOverlay');
diff --git a/src/main/resources/templates/chat-page.html b/src/main/resources/templates/chat-page.html
index cab8e3ba..18137e2e 100644
--- a/src/main/resources/templates/chat-page.html
+++ b/src/main/resources/templates/chat-page.html
@@ -22,6 +22,7 @@
             min-height: 100vh;
         }
 
+
         header {
             width: 100%;
             background: #12141f;
@@ -199,6 +200,14 @@
     </style>
 </head>
 <body>
+<div id="loginMessage" style="
+     position:fixed; top:0; left:0; width:100%; height:100%;
+     background:rgba(0,0,0,0.8); color:#fff;
+     align-items:center; justify-content:center;
+     font-size:1.5rem; z-index:10000;
+     display:none;">
+    로그인이 필요합니다.
+</div>
 <div id="app">
     <div id="sidebar">
         <h2>채팅방 목록</h2>
@@ -213,14 +222,17 @@ <h2>채팅방 목록</h2>
     </div>
 </div>
 <script>
+
     let token, stompClient, chatSubscription, currentRoomId;
 
-    token = sessionStorage.getItem('accessToken').replace(/^Bearer\s+/, '');
-    if (!token) {
-        alert('로그인이 필요합니다.');
-        location.href = '/test/signin';
+    const rawToken = sessionStorage.getItem('accessToken');
+    if (!rawToken) {
+        // 로그인 메시지만 띄우고 종료
+        document.getElementById('loginMessage').style.display = 'flex';
     } else {
-        // 3) app 보이기 & 채팅 시작
+        // 토큰이 있으면 로그인 메시지 숨기고 채팅 시작
+        token = rawToken.replace(/^Bearer\s+/, '');
+        document.getElementById('loginMessage').style.display = 'none';
         document.getElementById('app').style.display = 'flex';
         initChat();
     }

From fee39a146c6cd36b9804dd10920664764ccb6002 Mon Sep 17 00:00:00 2001
From: chat26666 <chat26666@gmail.com>
Date: Mon, 7 Jul 2025 00:12:50 +0900
Subject: [PATCH 5/5] =?UTF-8?q?chore=20:=20ui=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/static/html/header.html  |  4 ++--
 src/main/resources/templates/game-page.html | 25 ++++++++++++++++++++-
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/main/resources/static/html/header.html b/src/main/resources/static/html/header.html
index c2e32732..6bd1efcf 100644
--- a/src/main/resources/static/html/header.html
+++ b/src/main/resources/static/html/header.html
@@ -94,9 +94,9 @@
                 </svg>
             </li>
 
-            <!-- ★ 조이패드 아이콘 추가: 클릭 시 새탭으로 /test/gaming 열기 ★ -->
+            <!-- ★ 조이패드 아이콘 href 직접 지정, id 유지 ★ -->
             <li style="cursor:pointer;" title="게임 실행">
-                <a href="/test/gaming" target="_blank" rel="noopener noreferrer" id="joypadIcon" aria-label="게임 실행">
+                <a href="/test/gaming" id="joypadIcon" aria-label="게임 실행">
                     <svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg" >
                         <!-- 조이스틱 모양 아이콘 -->
                         <circle cx="12" cy="12" r="10" stroke="#0f0" stroke-width="1.5" fill="none"/>
diff --git a/src/main/resources/templates/game-page.html b/src/main/resources/templates/game-page.html
index d6734723..95007128 100644
--- a/src/main/resources/templates/game-page.html
+++ b/src/main/resources/templates/game-page.html
@@ -346,10 +346,12 @@
 
     function saveToken(event) {
         event.preventDefault();
-        savedToken = document.getElementById('jwt-token').value;
+        const tokenInput = document.getElementById('jwt-token');
+        savedToken = tokenInput.value.trim();
         if (savedToken) {
             document.getElementById('main-container').classList.add('main-visible');
             document.querySelector('.token-form').style.display = 'none';
+            sessionStorage.setItem('accessToken', 'Bearer ' + savedToken);
         }
     }
 
@@ -689,6 +691,17 @@ <h3 style="color:#fff; margin-bottom:8px;">${enc.name}</h3>
         }
     }
 
+    window.addEventListener('DOMContentLoaded', () => {
+        const rawToken = sessionStorage.getItem('accessToken') || '';
+        const token = rawToken.replace(/^Bearer\s+/, '');
+        const tokenInput = document.getElementById('jwt-token');
+        if (token) {
+            tokenInput.value = token;
+            // 자동 제출
+            saveToken(new Event('submit'));
+        }
+    });
+
     // Encounter 선택 POST 및 결과 처리
     async function sendEncounterChoice(encounterToken, playerDecision) {
         const pop = document.getElementById('popup');
@@ -1032,6 +1045,16 @@ <h3>📜 전투 로그</h3>
         }
     }
 
+    window.addEventListener('DOMContentLoaded', () => {
+        const rawToken = sessionStorage.getItem('accessToken') || '';
+        const token = rawToken.replace(/^Bearer\s+/, '');
+        const tokenInput = document.getElementById('jwt-token');
+        if (token) {
+            tokenInput.value = token;
+        }
+        // 토큰 없으면 입력 빈칸 유지, 자동 제출 안 함
+    });
+
     async function gambleItem(category) {
         const pop = document.getElementById('popup');
         // 팝업 열고 로딩 표시