d
+
+
+
+
+
+
+ 개요
+
+
+
+ 사용자 지정 모드
+
+
+
+ 토너먼트 모드
+
+
+
+ `;
+ }
+
+ /**
+ * 사용자 지정 모드의 전적 리스트를 렌더링합니다.
+ * 1. 플레이어 1의 정보를 렌더링합니다.
+ * 2. 게임 모드(1 vs 1 로고 또는 토너먼트 로고)를 렌더링합니다.
+ * 3. 플레이어 2의 정보를 렌더링합니다.
+ */
+ this.renderList = () => {
+ let list = document.getElementById("list");
+ list.innerHTML = `
+
+ `
+ let listWrapper = document.getElementById("list-wrapper");
+ listWrapper.innerHTML = '';
+ let mockData = [
+ {
+ player1: {
+ nickname: "hyojocho",
+ avatar: "../../../assets/images/avatar/red.png",
+ rating: 2130,
+ is_winner: true,
+ },
+ player2: {
+ nickname: "yena",
+ avatar: "../../../assets/images/avatar/blue.png",
+ rating: 110,
+ is_winner: false,
+ },
+ },
+ {
+ player1: {
+ nickname: "hyojocho",
+ avatar: "../../../assets/images/avatar/red.png",
+ rating: 2130,
+ is_winner: true,
+ },
+ player2: {
+ nickname: "yena",
+ avatar: "../../../assets/images/avatar/blue.png",
+ rating: 110,
+ is_winner: false,
+ },
+ },
+ {
+ player1: {
+ nickname: "hyojocho",
+ avatar: "../../../assets/images/avatar/red.png",
+ rating: 2130,
+ is_winner: true,
+ },
+ player2: {
+ nickname: "yena",
+ avatar: "../../../assets/images/avatar/blue.png",
+ rating: 110,
+ is_winner: false,
+ },
+ },
+ {
+ player1: {
+ nickname: "hyojocho",
+ avatar: "../../../assets/images/avatar/red.png",
+ rating: 2130,
+ is_winner: true,
+ },
+ player2: {
+ nickname: "donghyk2",
+ avatar: "../../../assets/images/avatar/green.png",
+ rating: 2120,
+ is_winner: false,
+ },
+ },
+ ]; // TODO: 백엔드로부터 데이터 받아오기
+ for (let data of mockData) {
+ const listItemDiv = document.createElement("div");
+ listItemDiv.className = "histories list-item";
+ this.renderPlayer(listItemDiv, data.player1);
+ this.renderGameMode(listItemDiv);
+ this.renderPlayer(listItemDiv, data.player2);
+ hoverChangeBorder(listItemDiv, "3px solid transparent", "3px solid #29ABE2");
+ hoverChangeCursor(listItemDiv, "pointer");
+ listItemDiv.addEventListener("click", () => {
+ console.log("TODO => 전적 상세 페이지로 이동")
+ });
+ listWrapper.appendChild(listItemDiv);
+ }
+ }
+
+ /**
+ * 전적 리스트의 플레이어 정보를 렌더링합니다.
+ * @param listItemDiv 전적 리스트의 플레이어 정보를 렌더링할 리스트 아이템
엘리먼트
+ * @param data 전적 리스트의 플레이어 정보
+ */
+ this.renderPlayer = (listItemDiv, data) => {
+ const playerDiv = document.createElement("div");
+ playerDiv.className = "histories player";
+ playerDiv.innerHTML = `
+
+
+
${data.nickname}
+
Rating: ${data.rating}
`;
+ listItemDiv.appendChild(playerDiv);
+ }
+
+ /**
+ * 전적 리스트의 게임 모드(1 vs 1 로고 또는 토너먼트 로고)를 렌더링합니다.
+ * @param listItemDiv 전적 리스트의 게임 모드를 렌더링할 리스트 아이템
엘리먼트
+ */
+ this.renderGameMode = (listItemDiv) => {
+ const gameModeDiv = document.createElement("div");
+ gameModeDiv.className = "histories game-mode";
+ gameModeDiv.innerHTML = `
+
+ `;
+ listItemDiv.appendChild(gameModeDiv);
+ }
+
+ /**
+ * 레이아웃 엘리먼트에 이벤트 리스너를 추가합니다.
+ */
+ this.addEventListenersToLayout = () => {
+ const summary = document.getElementById("summary");
+ const custom = document.getElementById("custom");
+ const tournament = document.getElementById("tournament");
+ const prev = document.getElementById("prev");
+ const next = document.getElementById("next");
+
+ // 폰트 색상 변경
+ hoverChangeColor(summary, "#ffffff", "#29ABE2");
+ hoverChangeColor(custom, "#ffffff", "#29ABE2");
+ hoverChangeColor(tournament, "#ffffff", "#29ABE2");
+
+ // 폰트 변경
+ hoverChangeFont(summary, "Galmuri11, serif", "Galmuri11-Bold, serif");
+ hoverChangeFont(custom, "Galmuri11, serif", "Galmuri11-Bold, serif");
+ hoverChangeFont(tournament, "Galmuri11, serif", "Galmuri11-Bold, serif");
+
+ // 커서 변경
+ hoverChangeCursor(summary, "pointer");
+ hoverChangeCursor(custom, "pointer");
+ hoverChangeCursor(tournament, "pointer");
+ hoverChangeCursor(prev, "pointer");
+ hoverChangeCursor(next, "pointer");
+
+ // click 이벤트
+ click(summary, function () {console.log("TODO => 개요 페이지로 이동")});
+ click(custom, function () {console.log("TODO => 사용자 지정 모드 페이지로 이동")});
+ click(tournament, function () {console.log("TODO => 토너먼트 모드 페이지로 이동")});
+ click(prev, function () {console.log("TODO => 이전 페이지로 이동")});
+ click(next, function () {console.log("TODO => 다음 페이지로 이동")});
}
this.render();
-}
\ No newline at end of file
+ this.addEventListenersToLayout();
+}
diff --git a/frontend/src/utils/clickEvent.js b/frontend/src/utils/clickEvent.js
new file mode 100644
index 00000000..088a2c59
--- /dev/null
+++ b/frontend/src/utils/clickEvent.js
@@ -0,0 +1,4 @@
+// TODO => click 시의 동작은 여기서 정의
+export const click = (element, func) => {
+ element.addEventListener("click", func);
+}
diff --git a/frontend/src/utils/hoverEvent.js b/frontend/src/utils/hoverEvent.js
new file mode 100644
index 00000000..5366dec4
--- /dev/null
+++ b/frontend/src/utils/hoverEvent.js
@@ -0,0 +1,58 @@
+/**
+ * 마우스 hover 시 폰트 색상 변경
+ * @param element hover 효과를 넣고 싶은 html 엘리먼트
+ * @param originalColor 원래 색상
+ * @param hoverColor hover 시 색상
+ */
+export const hoverChangeColor = (element, originalColor, hoverColor) => {
+ element.addEventListener("mouseover", () => {
+ element.style.color = hoverColor;
+ });
+ element.addEventListener("mouseout", () => {
+ element.style.color = originalColor;
+ });
+}
+
+/**
+ * 마우스 hover 시 폰트 변경
+ * @param element hover 효과를 넣고 싶은 html 엘리먼트
+ * @param originalFont 원래 폰트
+ * @param hoverFont hover 시 폰트
+ */
+export const hoverChangeFont = (element, originalFont, hoverFont) => {
+ element.addEventListener("mouseover", () => {
+ element.style.fontFamily = hoverFont;
+ });
+ element.addEventListener("mouseout", () => {
+ element.style.fontFamily = originalFont;
+ });
+}
+
+/**
+ * 마우스 hover 시 border 변경
+ * @param element hover 효과를 넣고 싶은 html 엘리먼트
+ * @param originalBorder 원래 border
+ * @param hoverBorder hover 시 border
+ */
+export const hoverChangeBorder = (element, originalBorder, hoverBorder) => {
+ element.addEventListener("mouseover", () => {
+ element.style.border = hoverBorder;
+ });
+ element.addEventListener("mouseout", () => {
+ element.style.border = originalBorder;
+ });
+}
+
+/**
+ * 마우스 hover 시 cursor 변경
+ * @param element hover 효과를 넣고 싶은 html 엘리먼트
+ * @param cursor hover 시 cursor
+ */
+export const hoverChangeCursor = (element, cursor) => {
+ element.addEventListener("mouseover", () => {
+ element.style.cursor = cursor;
+ });
+ element.addEventListener("mouseout", () => {
+ element.style.cursor = "default";
+ });
+}
diff --git a/nginx/config/owasp-crs/CHANGES.md b/nginx/config/owasp-crs/CHANGES.md
index 9ad99c47..700bdb4c 100644
--- a/nginx/config/owasp-crs/CHANGES.md
+++ b/nginx/config/owasp-crs/CHANGES.md
@@ -562,7 +562,7 @@ Fixes and improvements:
* Avoid embedded anchors in CRS rule 942330 (Allan Boll)
* Update 942450 for less false positives, more tests (#1662) (Will Woodson)
* Ensure single ranges are also checked (#1661) (Federico G. Schwindt)
- * WordPress: also exclude posts/pages endpoint in subdirectories (Walter Hop)
+ * WordPress: also exclude posts/page endpoint in subdirectories (Walter Hop)
* For bugs, also ask for the environment (#1657) (Federico G. Schwindt)
* XenForo: fix incorrect escape (Walter Hop)
* XenForo: additional exclusions (Walter Hop)
@@ -761,7 +761,7 @@ Fixes and improvements:
* Update RESPONSE-950-DATA-LEAKAGES.conf (Christoph Hansen)
* Update RESPONSE-959-BLOCKING-EVALUATION.conf (Christoph Hansen)
* Wordpress: add support for Gutenberg editor (siric_, Walter Hop)
- * Wordpress: allow searching for any term in admin posts/pages overview (Walter Hop)
+ * Wordpress: allow searching for any term in admin posts/page overview (Walter Hop)
* WordPress: exclude Gutenberg via rest_route (Walter Hop)
* WordPress: exclude some more profile.php fields from RFI rule (Walter Hop)
* WordPress: exclude SQL comment rule from _wp_http_referer (Walter Hop)
diff --git a/nginx/config/owasp-crs/rules/REQUEST-921-PROTOCOL-ATTACK.conf b/nginx/config/owasp-crs/rules/REQUEST-921-PROTOCOL-ATTACK.conf
index 5861bf5a..5ea74544 100644
--- a/nginx/config/owasp-crs/rules/REQUEST-921-PROTOCOL-ATTACK.conf
+++ b/nginx/config/owasp-crs/rules/REQUEST-921-PROTOCOL-ATTACK.conf
@@ -383,7 +383,7 @@ SecRule TX:DETECTION_PARANOIA_LEVEL "@lt 3" "id:921016,phase:2,pass,nolog,skipAf
# Forbid Request Range Header
#
-# It is possible abuse the HTTP Request Range Header to leak error pages
+# It is possible abuse the HTTP Request Range Header to leak error page
# and other information in very small snippets.
# The easiest way to fight this is to deny the use of this header.
# This is a viable option since the header is only used in rare circumstances
diff --git a/nginx/config/owasp-crs/rules/iis-errors.data b/nginx/config/owasp-crs/rules/iis-errors.data
index 4449d6ac..f1905589 100644
--- a/nginx/config/owasp-crs/rules/iis-errors.data
+++ b/nginx/config/owasp-crs/rules/iis-errors.data
@@ -1,4 +1,4 @@
-# This list comes from the default IIS error pages
+# This list comes from the default IIS error page
# To renerate get the files from a default installation and use:
# grep -h '
+ 
+ 
+