mod: challenge past list top 안 뜨는 문제 해결

....
Tekken-Supporter · Nov 29, 2023 · 5420d1b · 5420d1b
1 parent b1192db
commit 5420d1b
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 29 deletions.
diff --git a/challenge.css b/challenge.css
@@ -736,20 +736,11 @@ header {
     border-top: 2px solid #000;
 }
 
-.board_list_p>div {
-    border-bottom: 1px solid #ddd;
+.board_list_p .top {
     font-size: 0;
 }
 
-.board_list_p>div.top {
-    border-bottom: 1.5px solid #000;
-}
-
-.board_list_p>div:last-child {
-    border-bottom: 1.5px solid #000;
-}
-
-.board_list_p>div>div {
+.board_list_p .top > div {
     display: inline-block;
     padding: 15px 0;
     text-align: center;
@@ -760,12 +751,41 @@ header {
     font-weight: 600;
 }
 
-.board_list_p .num {
+.board_list_p .num, .numT {
     width: 10%;
 }
 
-.board_list_p .name {
-    width: 35%;
+.board_list_p .name, .nameT {
+    width: 30%;
+}
+
+.board_list_p .result, .resultT {
+    width: 30%;
+}
+
+.board_list_p .date, .dateT {
+    width: 30%;
+}
+
+.list {
+    width: 100%;
+    border-top: 2px solid #000;
+}
+
+.list > div {
+    border-bottom: 1px solid #ddd;
+    font-size: 0;
+}
+
+.list > div:last-child {
+    border-bottom: 1.5px solid #000;
+}
+
+.list > div > div {
+    display: inline-block;
+    padding: 15px 0;
+    text-align: center;
+    font-size: 1rem;
 }
 
 .btnResult-popup {
@@ -781,13 +801,7 @@ header {
     line-height: normal; 
 }
 
-.board_list_p .result {
-    width: 30%;
-}
-
-.board_list_p .date {
-    width: 25%;
-}
+/* 페이지 */
 
 .board_page {
     margin-top: 30px;

diff --git a/challenge.html b/challenge.html
@@ -80,10 +80,16 @@ <h2>미확인 신청</h2><br>
                 <h2>전적</h2><br>
                 <div class="board_list_p">
                     <div class="top">
-                        <div class="num">번호</div>
-                        <div class="name"><button class="btnResult-popup">상대</button></div>
-                        <div class="result">승자</div>
-                        <div class="date">대결일</div>
+                        <div class="numT">번호</div>
+                        <div class="nameT">상대</div>
+                        <div class="resultT">승자</div>
+                        <div class="dateT">대결일</div>
+                    </div>
+                    <div class="list">
+                        <div class="num"></div>
+                        <div class="name"><button class="btnResult-popup"></button></div>
+                        <div class="result"></div>
+                        <div class="date"></div>
                     </div>
                 </div>
                 <div class="board_page">

diff --git a/challenge_result.js b/challenge_result.js
@@ -98,17 +98,18 @@ function updateList(pageNumber) {
   const endIndex = startIndex + itemsPerPage;
   const paginatedItems = challengess.slice(startIndex, endIndex);
 
-  const listElement = document.querySelector(".board_list_p");
+  const listElement = document.querySelector(".list");
   listElement.innerHTML = "";
 
   paginatedItems.forEach((challenge, index) => {
     const challengeRow = document.createElement("div");
     challengeRow.innerHTML = `
                                 <div class="num">${index + 1}</div>
-                                <div class="name"><button class="btnResult-popup">${challenge.challenger}</button></div>
+                                <div class="name"><button class="btnResult-popup" data-match-id="${challenge.match_id}">${challenge.challenger}</button></div>
                                 <div class="result">${challenge.winner}</div>
                                 <div class="date">${new Date(challenge.matchDate).toLocaleDateString()}</div>
                             `;
+    console.log(challenge.match_id);
     listElement.appendChild(challengeRow);
   });
 }
@@ -213,10 +214,15 @@ document.addEventListener('click', function (event) {
   // 클릭된 요소가 btnResult-popup 클래스를 가지고 있는지 확인
   if (event.target && event.target.classList.contains('btnResult-popup')) {
     // 해당 버튼과 관련된 challenge 객체 찾기
-    const challenge = challengess.find(ch => ch.challenger === event.target.textContent);
+    const matchId = event.target.getAttribute('data-match-id');
+    // 문자열로 가져온 matchId를 숫자로 변환 (타입 불일치 방지)
+    const numericMatchId = parseInt(matchId, 10);
+    // 타입 변환된 ID를 사용하여 객체 찾기
+    const challenge = challengess.find(ch => ch.match_id === numericMatchId);
+    console.log(challenge);
     if (challenge) {
       // winscore와 losescore 값 확인
-      if (challenge.winscore === undefined && challenge.losescore === undefined) {
+      if (challenge.winscore === "0" && challenge.losescore === "0") {
         // challenge 객체에서 정보 가져와서 설정하기 (result 팝업)
         document.getElementById("challenger_result").textContent = challenge.challenger;
         document.getElementById("contender_result").textContent = challenge.contender;