Style/main header (#149)

chat26666 · minjee2758 · thezz9 · web-flow · commit b22ad9acc919 · 2025-07-07T00:15:30.000+09:00
* 헤더 변경, 마이페이지,로그인 반영

스타일 변경

# 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

* style: 로그인 로그아웃 hover 헤더 변경

* fix:chatting

* dasd

* chore : ui 변경

---------

Co-authored-by: minjee2758 &lt;minjee2758@naver.com&gt;
Co-authored-by: thezz9 &lt;thezz9@naver.com&gt;
diff --git a/src/main/resources/static/html/header.html b/src/main/resources/static/html/header.html
@@ -44,11 +44,29 @@
         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> -->
 <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>
@@ -76,6 +94,18 @@
                 </svg>
             </li>
 
+            <!-- ★ 조이패드 아이콘 href 직접 지정, id 유지 ★ -->
+            <li style="cursor:pointer;" title="게임 실행">
+                <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"/>
+                        <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'">
@@ -93,7 +123,7 @@
     </nav>
 </header>
 
-<!-- 4) 오버레이 & 드로어 HTML (header 바로 밑에) -->
+<!-- 4) 기존 오버레이 & 드로어 HTML (채팅용) -->
 <div id="chatOverlay" class="chat-overlay"
      onclick="
        this.classList.remove('open');
@@ -115,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
@@ -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();
     }
diff --git 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');
         // 팝업 열고 로딩 표시
