From 143187d0092b620e9240e2120562c55ea3a872c4 Mon Sep 17 00:00:00 2001 From: chj Date: Wed, 21 Feb 2024 15:39:22 +0900 Subject: [PATCH 01/24] =?UTF-8?q?test:=20useState=20=EC=82=AC=EC=9A=A9=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20(=EC=9E=84=EC=8B=9C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 98 +++++++++++++++++++++++- 1 file changed, 94 insertions(+), 4 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index bddb74d5..4670df8b 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -4,7 +4,7 @@ import { click } from "../../utils/clickEvent.js"; import { BACKEND, HISTORIES_IMAGE_PATH } from "../../global.js"; import { getCookie, deleteCookie } from "../../utils/cookie.js"; import useState from "../../utils/useState.js"; -import friendsInfoModal from "./friends-info-modal.js"; +// import friendsInfoModal from "./friends-info-modal.js"; /** * 사용자 전적 페이지에 사용하는 header 컴포넌트 @@ -87,7 +87,7 @@ export default function MainHeader($container) { } }); }); - // TODO => 친구 목록 버튼 클릭 이벤트 + // 친구 목록 버튼 클릭 이벤트 document.getElementById("friends").addEventListener("click", () => { const infoWrapper = document.getElementById("friends-info-wrapper"); if (infoWrapper.style.display === "grid") { @@ -100,14 +100,104 @@ export default function MainHeader($container) { click(document.getElementById("title"), () => { navigate("/game-mode"); }); + click(document.getElementById("lalala"), () => { + console.log("haha"); + setFriendsList(friendList); + }); }; + function createInfoCard(friend, style = {}, image = {}) { + const { username, avatarImagePath} = friend; + const borderColor = style.borderColor; + const imagePath = image.iconImagePath; + // accept.png 아이콘일 경우에만 추가할 HTML 조각을 정의 + const additionalIconHTML = imagePath === '../../assets/images/accept.png' ? + `
+ +
` : ''; + // 조건에 따라 클래스 추가 + const wrapperClass = imagePath === '../../assets/images/accept.png' ? 'friend-card-wrapper with-additional-icon' : 'friend-card-wrapper'; + + return ` +
+
+ +
+
+ ${username} +
+
+ +
+ ${additionalIconHTML} +
+ `; + } + + const friendList = [ + { + username: '효조초다호호호호', + avatarImagePath: '../../assets/images/avatar/darth_vader.png' + }, + { + username: 'yena', + avatarImagePath: '../../assets/images/avatar/han_solo.png' + }, + { + username: 'sejokim', + avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' + }, + { + username: 'sejokim', + avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' + }, + { + username: 'sejokim', + avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' + }, + { + username: 'sejokim', + avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' + } + ]; + let renderFriendsInfoModal = (headerElement) => { - const modalHtml = friendsInfoModal(); - headerElement.insertAdjacentHTML("beforeend", modalHtml); + importCss('../../../assets/css/friendsInfoModal.css'); + headerElement.insertAdjacentHTML("beforeend", ` +
+
lalala
+
+ +
+
+ +
+
+ +
+
+ `) + }; + + this.renderFriendsList = () => { + // 상태 관리 시스템으로부터 현재 친구 목록 상태를 가져옵니다. + const newFriendList = getFriendsList(); + // 새로운 친구 목록을 기반으로 친구 카드를 생성합니다. + const newFriendCards = friendList.slice(0, 8).map(card => + createInfoCard(card, {borderColor: '#07F7B0'}, {iconImagePath: '../../assets/images/trash.png'})).join(''); + document.getElementById("friends-list-wrapper").innerHTML = ` +
+ 친구 (${newFriendList.length} / 8) +
+
+ ${newFriendCards} +
+ `; }; importCss("../../../assets/fonts/font.css"); init(); let [getUserInfo, setUserInfo] = useState({}, this, "render"); + let [getFriendsList, setFriendsList] = useState({}, this, "renderFriendsList"); + } From 967f959078d85a7f86c1a061d99e47bcf6bcf304 Mon Sep 17 00:00:00 2001 From: chj Date: Wed, 21 Feb 2024 17:07:22 +0900 Subject: [PATCH 02/24] =?UTF-8?q?feat:=20fetch=20=EC=9D=B4=EC=A0=84?= =?UTF-8?q?=EA=B9=8C=EC=A7=80=20=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index 4670df8b..b91e463c 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -101,7 +101,7 @@ export default function MainHeader($container) { navigate("/game-mode"); }); click(document.getElementById("lalala"), () => { - console.log("haha"); + fetch() setFriendsList(friendList); }); }; @@ -195,9 +195,14 @@ export default function MainHeader($container) { `; }; + this.renderFoundUserList = () => { + const newFoundUserList = getFoundUserList(); + // const newFoundCards = + } + importCss("../../../assets/fonts/font.css"); init(); let [getUserInfo, setUserInfo] = useState({}, this, "render"); let [getFriendsList, setFriendsList] = useState({}, this, "renderFriendsList"); - + // let [getFoundUserList, setFoundUserList] = useState({}, this, "renderFoundUserList"); } From 478a65672b1551a35131b1a726f9a0e7fbb50e7c Mon Sep 17 00:00:00 2001 From: chj Date: Thu, 22 Feb 2024 14:07:00 +0900 Subject: [PATCH 03/24] =?UTF-8?q?feat:=20fetch=20=EC=A0=81=EC=9A=A9=20(?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=93=A4=EC=96=B4=EC=98=A4?= =?UTF-8?q?=EB=A9=B4=20=ED=99=95=EC=9D=B8=20=ED=95=84=EC=9A=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 71 ++++++++++++------------ 1 file changed, 34 insertions(+), 37 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index b91e463c..a616ebc9 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -90,20 +90,38 @@ export default function MainHeader($container) { // 친구 목록 버튼 클릭 이벤트 document.getElementById("friends").addEventListener("click", () => { const infoWrapper = document.getElementById("friends-info-wrapper"); + if (infoWrapper.style.display === "grid") { infoWrapper.style.display = "none"; } else { infoWrapper.style.display = "grid"; } + + fetch(`${BACKEND}/friends/`, { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${getCookie("jwt")}`, + }, + }).then((response) => { + if (response.status === 200) { + // this.$container.textContent = ""; + response.json().then((data) => { + setFriendsList(data); + }); + // new WebSocket("wss://localhost/ws/friend_status/"); + } else { + navigate("/"); + } + }); }); // 메인 타이틀 클릭 이벤트 click(document.getElementById("title"), () => { navigate("/game-mode"); }); - click(document.getElementById("lalala"), () => { - fetch() - setFriendsList(friendList); - }); + // click(document.getElementById("lalala"), () => { + // + // }); }; function createInfoCard(friend, style = {}, image = {}) { @@ -134,38 +152,10 @@ export default function MainHeader($container) { `; } - const friendList = [ - { - username: '효조초다호호호호', - avatarImagePath: '../../assets/images/avatar/darth_vader.png' - }, - { - username: 'yena', - avatarImagePath: '../../assets/images/avatar/han_solo.png' - }, - { - username: 'sejokim', - avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' - }, - { - username: 'sejokim', - avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' - }, - { - username: 'sejokim', - avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' - }, - { - username: 'sejokim', - avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' - } - ]; - let renderFriendsInfoModal = (headerElement) => { importCss('../../../assets/css/friendsInfoModal.css'); headerElement.insertAdjacentHTML("beforeend", `
-
lalala
@@ -179,11 +169,19 @@ export default function MainHeader($container) { `) }; + // 받아 올 데이터 + // friends": [ + // { + // "nickname": "sejokim", + // "is_online": true, + // "avatar": "https://example.com/path/to/sejokim_avatar.jpg" + // } this.renderFriendsList = () => { // 상태 관리 시스템으로부터 현재 친구 목록 상태를 가져옵니다. const newFriendList = getFriendsList(); + console.log(newFriendList); // 새로운 친구 목록을 기반으로 친구 카드를 생성합니다. - const newFriendCards = friendList.slice(0, 8).map(card => + const newFriendCards = newFriendList.friends.slice(0, 8).map(card => createInfoCard(card, {borderColor: '#07F7B0'}, {iconImagePath: '../../assets/images/trash.png'})).join(''); document.getElementById("friends-list-wrapper").innerHTML = `
@@ -193,12 +191,11 @@ export default function MainHeader($container) { ${newFriendCards}
`; + + // todo-> "is_online": true 라면 그대로, false 라면 투명도를 줘야한다 + }; - this.renderFoundUserList = () => { - const newFoundUserList = getFoundUserList(); - // const newFoundCards = - } importCss("../../../assets/fonts/font.css"); init(); From 75b7a08d139ae6f21148c7096744d5e117851ee5 Mon Sep 17 00:00:00 2001 From: chj Date: Wed, 21 Feb 2024 15:39:22 +0900 Subject: [PATCH 04/24] =?UTF-8?q?test:=20useState=20=EC=82=AC=EC=9A=A9=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20(=EC=9E=84=EC=8B=9C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 98 +++++++++++++++++++++++- 1 file changed, 94 insertions(+), 4 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index bddb74d5..4670df8b 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -4,7 +4,7 @@ import { click } from "../../utils/clickEvent.js"; import { BACKEND, HISTORIES_IMAGE_PATH } from "../../global.js"; import { getCookie, deleteCookie } from "../../utils/cookie.js"; import useState from "../../utils/useState.js"; -import friendsInfoModal from "./friends-info-modal.js"; +// import friendsInfoModal from "./friends-info-modal.js"; /** * 사용자 전적 페이지에 사용하는 header 컴포넌트 @@ -87,7 +87,7 @@ export default function MainHeader($container) { } }); }); - // TODO => 친구 목록 버튼 클릭 이벤트 + // 친구 목록 버튼 클릭 이벤트 document.getElementById("friends").addEventListener("click", () => { const infoWrapper = document.getElementById("friends-info-wrapper"); if (infoWrapper.style.display === "grid") { @@ -100,14 +100,104 @@ export default function MainHeader($container) { click(document.getElementById("title"), () => { navigate("/game-mode"); }); + click(document.getElementById("lalala"), () => { + console.log("haha"); + setFriendsList(friendList); + }); }; + function createInfoCard(friend, style = {}, image = {}) { + const { username, avatarImagePath} = friend; + const borderColor = style.borderColor; + const imagePath = image.iconImagePath; + // accept.png 아이콘일 경우에만 추가할 HTML 조각을 정의 + const additionalIconHTML = imagePath === '../../assets/images/accept.png' ? + `
+ +
` : ''; + // 조건에 따라 클래스 추가 + const wrapperClass = imagePath === '../../assets/images/accept.png' ? 'friend-card-wrapper with-additional-icon' : 'friend-card-wrapper'; + + return ` +
+
+ +
+
+ ${username} +
+
+ +
+ ${additionalIconHTML} +
+ `; + } + + const friendList = [ + { + username: '효조초다호호호호', + avatarImagePath: '../../assets/images/avatar/darth_vader.png' + }, + { + username: 'yena', + avatarImagePath: '../../assets/images/avatar/han_solo.png' + }, + { + username: 'sejokim', + avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' + }, + { + username: 'sejokim', + avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' + }, + { + username: 'sejokim', + avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' + }, + { + username: 'sejokim', + avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' + } + ]; + let renderFriendsInfoModal = (headerElement) => { - const modalHtml = friendsInfoModal(); - headerElement.insertAdjacentHTML("beforeend", modalHtml); + importCss('../../../assets/css/friendsInfoModal.css'); + headerElement.insertAdjacentHTML("beforeend", ` +
+
lalala
+
+ +
+
+ +
+
+ +
+
+ `) + }; + + this.renderFriendsList = () => { + // 상태 관리 시스템으로부터 현재 친구 목록 상태를 가져옵니다. + const newFriendList = getFriendsList(); + // 새로운 친구 목록을 기반으로 친구 카드를 생성합니다. + const newFriendCards = friendList.slice(0, 8).map(card => + createInfoCard(card, {borderColor: '#07F7B0'}, {iconImagePath: '../../assets/images/trash.png'})).join(''); + document.getElementById("friends-list-wrapper").innerHTML = ` +
+ 친구 (${newFriendList.length} / 8) +
+
+ ${newFriendCards} +
+ `; }; importCss("../../../assets/fonts/font.css"); init(); let [getUserInfo, setUserInfo] = useState({}, this, "render"); + let [getFriendsList, setFriendsList] = useState({}, this, "renderFriendsList"); + } From 094b9dfe3784c48dbe6a2793478cce1b3bf60f0d Mon Sep 17 00:00:00 2001 From: chj Date: Wed, 21 Feb 2024 17:07:22 +0900 Subject: [PATCH 05/24] =?UTF-8?q?feat:=20fetch=20=EC=9D=B4=EC=A0=84?= =?UTF-8?q?=EA=B9=8C=EC=A7=80=20=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index 4670df8b..b91e463c 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -101,7 +101,7 @@ export default function MainHeader($container) { navigate("/game-mode"); }); click(document.getElementById("lalala"), () => { - console.log("haha"); + fetch() setFriendsList(friendList); }); }; @@ -195,9 +195,14 @@ export default function MainHeader($container) { `; }; + this.renderFoundUserList = () => { + const newFoundUserList = getFoundUserList(); + // const newFoundCards = + } + importCss("../../../assets/fonts/font.css"); init(); let [getUserInfo, setUserInfo] = useState({}, this, "render"); let [getFriendsList, setFriendsList] = useState({}, this, "renderFriendsList"); - + // let [getFoundUserList, setFoundUserList] = useState({}, this, "renderFoundUserList"); } From c420dfbd727c4e031047467381906ed3a377453f Mon Sep 17 00:00:00 2001 From: chj Date: Thu, 22 Feb 2024 14:07:00 +0900 Subject: [PATCH 06/24] =?UTF-8?q?feat:=20fetch=20=EC=A0=81=EC=9A=A9=20(?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=93=A4=EC=96=B4=EC=98=A4?= =?UTF-8?q?=EB=A9=B4=20=ED=99=95=EC=9D=B8=20=ED=95=84=EC=9A=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 71 ++++++++++++------------ 1 file changed, 34 insertions(+), 37 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index b91e463c..a616ebc9 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -90,20 +90,38 @@ export default function MainHeader($container) { // 친구 목록 버튼 클릭 이벤트 document.getElementById("friends").addEventListener("click", () => { const infoWrapper = document.getElementById("friends-info-wrapper"); + if (infoWrapper.style.display === "grid") { infoWrapper.style.display = "none"; } else { infoWrapper.style.display = "grid"; } + + fetch(`${BACKEND}/friends/`, { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${getCookie("jwt")}`, + }, + }).then((response) => { + if (response.status === 200) { + // this.$container.textContent = ""; + response.json().then((data) => { + setFriendsList(data); + }); + // new WebSocket("wss://localhost/ws/friend_status/"); + } else { + navigate("/"); + } + }); }); // 메인 타이틀 클릭 이벤트 click(document.getElementById("title"), () => { navigate("/game-mode"); }); - click(document.getElementById("lalala"), () => { - fetch() - setFriendsList(friendList); - }); + // click(document.getElementById("lalala"), () => { + // + // }); }; function createInfoCard(friend, style = {}, image = {}) { @@ -134,38 +152,10 @@ export default function MainHeader($container) { `; } - const friendList = [ - { - username: '효조초다호호호호', - avatarImagePath: '../../assets/images/avatar/darth_vader.png' - }, - { - username: 'yena', - avatarImagePath: '../../assets/images/avatar/han_solo.png' - }, - { - username: 'sejokim', - avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' - }, - { - username: 'sejokim', - avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' - }, - { - username: 'sejokim', - avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' - }, - { - username: 'sejokim', - avatarImagePath: '../../assets/images/avatar/luke_skywalker.png' - } - ]; - let renderFriendsInfoModal = (headerElement) => { importCss('../../../assets/css/friendsInfoModal.css'); headerElement.insertAdjacentHTML("beforeend", `
-
lalala
@@ -179,11 +169,19 @@ export default function MainHeader($container) { `) }; + // 받아 올 데이터 + // friends": [ + // { + // "nickname": "sejokim", + // "is_online": true, + // "avatar": "https://example.com/path/to/sejokim_avatar.jpg" + // } this.renderFriendsList = () => { // 상태 관리 시스템으로부터 현재 친구 목록 상태를 가져옵니다. const newFriendList = getFriendsList(); + console.log(newFriendList); // 새로운 친구 목록을 기반으로 친구 카드를 생성합니다. - const newFriendCards = friendList.slice(0, 8).map(card => + const newFriendCards = newFriendList.friends.slice(0, 8).map(card => createInfoCard(card, {borderColor: '#07F7B0'}, {iconImagePath: '../../assets/images/trash.png'})).join(''); document.getElementById("friends-list-wrapper").innerHTML = `
@@ -193,12 +191,11 @@ export default function MainHeader($container) { ${newFriendCards}
`; + + // todo-> "is_online": true 라면 그대로, false 라면 투명도를 줘야한다 + }; - this.renderFoundUserList = () => { - const newFoundUserList = getFoundUserList(); - // const newFoundCards = - } importCss("../../../assets/fonts/font.css"); init(); From 801bd96f5f566ce03eedf018de31cb4c919ad00f Mon Sep 17 00:00:00 2001 From: chj Date: Thu, 22 Feb 2024 15:01:45 +0900 Subject: [PATCH 07/24] =?UTF-8?q?feat:=20=EC=B9=9C=EA=B5=AC=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20fetch=EB=A5=BC=20=ED=86=B5=ED=95=B4=20=EB=B0=9B?= =?UTF-8?q?=EC=95=84=EC=98=A8=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 25 +++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index a616ebc9..3ae300f2 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -109,7 +109,6 @@ export default function MainHeader($container) { response.json().then((data) => { setFriendsList(data); }); - // new WebSocket("wss://localhost/ws/friend_status/"); } else { navigate("/"); } @@ -125,24 +124,31 @@ export default function MainHeader($container) { }; function createInfoCard(friend, style = {}, image = {}) { - const { username, avatarImagePath} = friend; + const {nickname, avatar, is_online} = friend; + // 아바타 이미지 경로 조정 + const avatarImagePath = `../../assets/images/avatar/${avatar}`; const borderColor = style.borderColor; const imagePath = image.iconImagePath; + + // `is_online`이 false일 경우 카드에 적용할 투명도 스타일 + const opacityStyle = is_online ? '' : 'opacity: 0.5;'; + // accept.png 아이콘일 경우에만 추가할 HTML 조각을 정의 const additionalIconHTML = imagePath === '../../assets/images/accept.png' ? `
- -
` : ''; + +
` : ''; // 조건에 따라 클래스 추가 const wrapperClass = imagePath === '../../assets/images/accept.png' ? 'friend-card-wrapper with-additional-icon' : 'friend-card-wrapper'; + return ` -
+
- ${username} + ${nickname}
@@ -183,18 +189,19 @@ export default function MainHeader($container) { // 새로운 친구 목록을 기반으로 친구 카드를 생성합니다. const newFriendCards = newFriendList.friends.slice(0, 8).map(card => createInfoCard(card, {borderColor: '#07F7B0'}, {iconImagePath: '../../assets/images/trash.png'})).join(''); + + console.log(newFriendCards); document.getElementById("friends-list-wrapper").innerHTML = `
- 친구 (${newFriendList.length} / 8) + 친구 (${newFriendList.friends.length} / 8)
${newFriendCards}
`; + }; - // todo-> "is_online": true 라면 그대로, false 라면 투명도를 줘야한다 - }; importCss("../../../assets/fonts/font.css"); From fcbc6215bb75b40dfb0c84e7198331601fe9f688 Mon Sep 17 00:00:00 2001 From: chj Date: Fri, 23 Feb 2024 13:02:00 +0900 Subject: [PATCH 08/24] =?UTF-8?q?feat:=20=EC=B9=9C=EA=B5=AC=20delete?= =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 97 +++++++++++++++++++----- 1 file changed, 78 insertions(+), 19 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index 3ae300f2..f73438ea 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -87,8 +87,8 @@ export default function MainHeader($container) { } }); }); - // 친구 목록 버튼 클릭 이벤트 - document.getElementById("friends").addEventListener("click", () => { + // 친구 목록 버튼 클릭 이벤트 (모달 보이기, 친구목록 요청, 친구요청 리스트 요청) + click(document.getElementById("friends"),() => { const infoWrapper = document.getElementById("friends-info-wrapper"); if (infoWrapper.style.display === "grid") { @@ -113,17 +113,31 @@ export default function MainHeader($container) { navigate("/"); } }); + fetch(`${BACKEND}/friends/pending/`, { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${getCookie("jwt")}`, + }, + }).then((response) => { + if (response.status === 200) { + response.json().then((data) => { + setRequestersList(data); + }); + } else { + navigate("/"); + } + }); }); // 메인 타이틀 클릭 이벤트 click(document.getElementById("title"), () => { navigate("/game-mode"); }); - // click(document.getElementById("lalala"), () => { - // - // }); + + }; - function createInfoCard(friend, style = {}, image = {}) { + function createInfoCard(friend, index, style = {}, image = {}) { const {nickname, avatar, is_online} = friend; // 아바타 이미지 경로 조정 const avatarImagePath = `../../assets/images/avatar/${avatar}`; @@ -151,7 +165,7 @@ export default function MainHeader($container) { ${nickname}
- +
${additionalIconHTML}
@@ -166,7 +180,15 @@ export default function MainHeader($container) {
- +
+ 유저 찾기 () +
+
+ + +
+
@@ -175,22 +197,13 @@ export default function MainHeader($container) { `) }; - // 받아 올 데이터 - // friends": [ - // { - // "nickname": "sejokim", - // "is_online": true, - // "avatar": "https://example.com/path/to/sejokim_avatar.jpg" - // } this.renderFriendsList = () => { // 상태 관리 시스템으로부터 현재 친구 목록 상태를 가져옵니다. const newFriendList = getFriendsList(); - console.log(newFriendList); // 새로운 친구 목록을 기반으로 친구 카드를 생성합니다. - const newFriendCards = newFriendList.friends.slice(0, 8).map(card => - createInfoCard(card, {borderColor: '#07F7B0'}, {iconImagePath: '../../assets/images/trash.png'})).join(''); + const newFriendCards = newFriendList.friends.slice(0, 8).map((card, index) => + createInfoCard(card, index,{borderColor: '#07F7B0'}, {iconImagePath: '../../assets/images/trash.png'})).join(''); - console.log(newFriendCards); document.getElementById("friends-list-wrapper").innerHTML = `
친구 (${newFriendList.friends.length} / 8) @@ -199,14 +212,60 @@ export default function MainHeader($container) { ${newFriendCards}
`; + + // 친구삭제 클릭 이벤트 + newFriendList.friends.forEach((friend, index) => { + const iconElement = document.getElementById(`icon-${index}`); + if (iconElement) { + iconElement.addEventListener('click', () => { + // 여기에 클릭 시 실행할 로직을 추가합니다. + console.log(`Icon at index ${index} clicked.`); + console.log(friend.nickname); + // 요청 본문을 구성 + const data = friend.nickname; + // 예: 특정 친구를 삭제하는 함수 호출 등 + fetch(`${BACKEND}/friends/`, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${getCookie("jwt")}`, + }, + body: JSON.stringify({data}) + }).then((response) => { + if (response.status === 200) { + + } else { + // TODO => 에러 페이지로 이동 + navigate("/"); + } + }) + }); + } + }); }; + this.renderRequestersList = () => { + const newRequestersList = getRequestersList(); + console.log(newRequestersList); + const newRequestersCards = newRequestersList.friendRequestList.map((card, index)=> + createInfoCard(card, index, {borderColor: '#29ABE2'}, {iconImagePath: '../../assets/images/accept.png'})).join(''); + + document.getElementById("friend-request-list-wrapper").innerHTML = ` +
+ 친구 요청 (${newRequestersList.friendRequestList.length}) +
+
+ ${newRequestersCards} +
+ ` + } importCss("../../../assets/fonts/font.css"); init(); let [getUserInfo, setUserInfo] = useState({}, this, "render"); let [getFriendsList, setFriendsList] = useState({}, this, "renderFriendsList"); + let [getRequestersList, setRequestersList] = useState({}, this, "renderRequestersList"); // let [getFoundUserList, setFoundUserList] = useState({}, this, "renderFoundUserList"); } From 5477e760602145d2c9f15ebaf18e349cf24f7e8b Mon Sep 17 00:00:00 2001 From: chj Date: Fri, 23 Feb 2024 13:45:34 +0900 Subject: [PATCH 09/24] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=EC=B0=BE?= =?UTF-8?q?=EA=B8=B0=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20setting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 27 +++++++++++++++++------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index 447352e0..25a41881 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -129,12 +129,19 @@ export default function MainHeader($container) { } }); }); + // 유저찾기 검색 이벤트 + document.getElementById('input').addEventListener('input', function(event) { + const userInput = event.target.value; + console.log('User input:', userInput); + fetch(`${BACKEND}/api/friends/search?nickname=${encodeURIComponent(userInput)}`, { + method: "GET", + + }) + }) // 메인 타이틀 클릭 이벤트 click(document.getElementById("title"), () => { navigate("/game-mode"); }); - - }; function createInfoCard(friend, index, style = {}, image = {}) { @@ -150,12 +157,11 @@ export default function MainHeader($container) { // accept.png 아이콘일 경우에만 추가할 HTML 조각을 정의 const additionalIconHTML = imagePath === '../../assets/images/accept.png' ? `
- -
` : ''; + +
` : ''; // 조건에 따라 클래스 추가 const wrapperClass = imagePath === '../../assets/images/accept.png' ? 'friend-card-wrapper with-additional-icon' : 'friend-card-wrapper'; - return `
@@ -185,7 +191,7 @@ export default function MainHeader($container) {
- +
@@ -247,7 +253,6 @@ export default function MainHeader($container) { this.renderRequestersList = () => { const newRequestersList = getRequestersList(); - console.log(newRequestersList); const newRequestersCards = newRequestersList.friendRequestList.map((card, index)=> createInfoCard(card, index, {borderColor: '#29ABE2'}, {iconImagePath: '../../assets/images/accept.png'})).join(''); @@ -261,12 +266,18 @@ export default function MainHeader($container) { ` } + this.renderFoundUserList = () => { + const newRenderFoundUser = getFoundUserList(); + + + } + importCss("../../../assets/fonts/font.css"); init(); let [getUserInfo, setUserInfo] = useState({}, this, "render"); let [getFriendsList, setFriendsList] = useState({}, this, "renderFriendsList"); let [getRequestersList, setRequestersList] = useState({}, this, "renderRequestersList"); - // let [getFoundUserList, setFoundUserList] = useState({}, this, "renderFoundUserList"); + let [getFoundUserList, setFoundUserList] = useState({}, this, "renderFoundUserList"); } From 1bf63f6eecd8023b11d2f4ab0e378e80d3435656 Mon Sep 17 00:00:00 2001 From: chj Date: Fri, 23 Feb 2024 14:35:23 +0900 Subject: [PATCH 10/24] =?UTF-8?q?feat:=20=EC=B9=9C=EA=B5=AC=20delete=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 49 ++++++++++++++---------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index 25a41881..f774b6b8 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -135,9 +135,19 @@ export default function MainHeader($container) { console.log('User input:', userInput); fetch(`${BACKEND}/api/friends/search?nickname=${encodeURIComponent(userInput)}`, { method: "GET", - + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${getCookie("jwt")}`, + }, + }).then((response) => { + if (response.status.status === 200) { + this.$container.textContent = ""; + response.json().then((data) => { + setSearchedUserList(data); + }) + } }) - }) + }); // 메인 타이틀 클릭 이벤트 click(document.getElementById("title"), () => { navigate("/game-mode"); @@ -211,32 +221,31 @@ export default function MainHeader($container) { createInfoCard(card, index,{borderColor: '#07F7B0'}, {iconImagePath: '../../assets/images/trash.png'})).join(''); document.getElementById("friends-list-wrapper").innerHTML = ` -
- 친구 (${newFriendList.friends.length} / 8) -
-
- ${newFriendCards} -
- `; +
+ 친구 (${newFriendList.friends.length} / 8) +
+
+ ${newFriendCards} +
+ `; // 친구삭제 클릭 이벤트 newFriendList.friends.forEach((friend, index) => { const iconElement = document.getElementById(`icon-${index}`); if (iconElement) { iconElement.addEventListener('click', () => { - // 여기에 클릭 시 실행할 로직을 추가합니다. console.log(`Icon at index ${index} clicked.`); console.log(friend.nickname); - // 요청 본문을 구성 - const data = friend.nickname; - // 예: 특정 친구를 삭제하는 함수 호출 등 + // nickname 키값 구성 + const nickname = friend.nickname; + fetch(`${BACKEND}/friends/`, { method: 'DELETE', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${getCookie("jwt")}`, }, - body: JSON.stringify({data}) + body: JSON.stringify({nickname}) }).then((response) => { if (response.status === 200) { @@ -266,10 +275,11 @@ export default function MainHeader($container) { ` } - this.renderFoundUserList = () => { - const newRenderFoundUser = getFoundUserList(); - + this.rendersearchedUserList = () => { + const newSearchedUserList = getSearchedUserList(); + const newSearchedUserCards = newSearchedUserList.searchedUserList.map((card, index) => + createInfoCard(card, index, {borderColor: ''})) } @@ -278,6 +288,5 @@ export default function MainHeader($container) { let [getUserInfo, setUserInfo] = useState({}, this, "render"); let [getFriendsList, setFriendsList] = useState({}, this, "renderFriendsList"); let [getRequestersList, setRequestersList] = useState({}, this, "renderRequestersList"); - let [getFoundUserList, setFoundUserList] = useState({}, this, "renderFoundUserList"); -} - + let [getSearchedUserList, setSearchedUserList] = useState({}, this, "rendersearchedUserList"); +} \ No newline at end of file From b4dfbf1a77290dc90aee67d1c5622625ce9af81c Mon Sep 17 00:00:00 2001 From: chj Date: Fri, 23 Feb 2024 16:23:29 +0900 Subject: [PATCH 11/24] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=EC=B0=BE?= =?UTF-8?q?=EA=B8=B0=20=EC=9A=B0=EC=84=A0=20=EA=B5=AC=ED=98=84=20(?= =?UTF-8?q?=ED=95=9C=EB=B2=88=20=EC=B0=BE=EA=B3=A0=20=EC=9D=B4=ED=9B=84=20?= =?UTF-8?q?=EB=A8=B9=ED=86=B5=EB=90=98=EB=8A=94=20ver)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 32 +++++++++++++++++------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index f774b6b8..bed0ec94 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -131,17 +131,17 @@ export default function MainHeader($container) { }); // 유저찾기 검색 이벤트 document.getElementById('input').addEventListener('input', function(event) { - const userInput = event.target.value; - console.log('User input:', userInput); - fetch(`${BACKEND}/api/friends/search?nickname=${encodeURIComponent(userInput)}`, { + const nickname = event.target.value; + console.log('User input:', nickname); + fetch(`${BACKEND}/friends/search/?nickname=${encodeURIComponent(nickname)}`, { method: "GET", headers: { "Content-Type": "application/json", Authorization: `Bearer ${getCookie("jwt")}`, }, }).then((response) => { - if (response.status.status === 200) { - this.$container.textContent = ""; + if (response.status === 200) { + // this.$container.textContent = ""; response.json().then((data) => { setSearchedUserList(data); }) @@ -197,7 +197,7 @@ export default function MainHeader($container) {
- 유저 찾기 () + 유저 찾기 (0)
@@ -275,11 +275,25 @@ export default function MainHeader($container) { ` } - this.rendersearchedUserList = () => { + this.renderSearchedUserList = () => { const newSearchedUserList = getSearchedUserList(); + console.log(newSearchedUserList); const newSearchedUserCards = newSearchedUserList.searchedUserList.map((card, index) => - createInfoCard(card, index, {borderColor: ''})) + createInfoCard(card, index, {borderColor: '#FF52A0'}, {iconImagePath: '../../assets/images/paper_plane.png'})).join(''); + + document.getElementById("user-search-wrapper").innerHTML = ` +
+ 유저 찾기 (${newSearchedUserList.searchedUserList.length}) +
+
+ + +
+ + ` } @@ -288,5 +302,5 @@ export default function MainHeader($container) { let [getUserInfo, setUserInfo] = useState({}, this, "render"); let [getFriendsList, setFriendsList] = useState({}, this, "renderFriendsList"); let [getRequestersList, setRequestersList] = useState({}, this, "renderRequestersList"); - let [getSearchedUserList, setSearchedUserList] = useState({}, this, "rendersearchedUserList"); + let [getSearchedUserList, setSearchedUserList] = useState({}, this, "renderSearchedUserList"); } \ No newline at end of file From 36ac9da9523e59742e8382e6991e62dd3395fd72 Mon Sep 17 00:00:00 2001 From: chj Date: Fri, 23 Feb 2024 16:55:07 +0900 Subject: [PATCH 12/24] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=EC=B0=BE?= =?UTF-8?q?=EA=B8=B0=20=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C=20(?= =?UTF-8?q?=EC=9A=B0=EC=84=A0=20=EC=97=94=ED=84=B0=ED=82=A4=20ver)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 48 ++++++++++++++---------- 1 file changed, 29 insertions(+), 19 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index bed0ec94..12a16e8f 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -130,24 +130,7 @@ export default function MainHeader($container) { }); }); // 유저찾기 검색 이벤트 - document.getElementById('input').addEventListener('input', function(event) { - const nickname = event.target.value; - console.log('User input:', nickname); - fetch(`${BACKEND}/friends/search/?nickname=${encodeURIComponent(nickname)}`, { - method: "GET", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${getCookie("jwt")}`, - }, - }).then((response) => { - if (response.status === 200) { - // this.$container.textContent = ""; - response.json().then((data) => { - setSearchedUserList(data); - }) - } - }) - }); + findUserEvent(); // 메인 타이틀 클릭 이벤트 click(document.getElementById("title"), () => { navigate("/game-mode"); @@ -188,6 +171,31 @@ export default function MainHeader($container) { `; } + let findUserEvent = () => { + // 유저찾기 검색 이벤트 + document.getElementById('input').addEventListener('keydown', function(event) { + const nickname = event.target.value; + console.log('User input:', nickname); + if (event.key === 'Enter') { + fetch(`${BACKEND}/friends/search/?nickname=${encodeURIComponent(nickname)}`, { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${getCookie("jwt")}`, + }, + }).then((response) => { + if (response.status === 200) { + response.json().then((data) => { + setSearchedUserList(data); + }) + } else { + this.$container.textContent = ""; + } + }) + } + }); + } + let renderFriendsInfoModal = (headerElement) => { importCss('../../../assets/css/friendsInfoModal.css'); headerElement.insertAdjacentHTML("beforeend", ` @@ -278,7 +286,6 @@ export default function MainHeader($container) { this.renderSearchedUserList = () => { const newSearchedUserList = getSearchedUserList(); - console.log(newSearchedUserList); const newSearchedUserCards = newSearchedUserList.searchedUserList.map((card, index) => createInfoCard(card, index, {borderColor: '#FF52A0'}, {iconImagePath: '../../assets/images/paper_plane.png'})).join(''); @@ -294,6 +301,9 @@ export default function MainHeader($container) { ${newSearchedUserCards}
` + + // 유저찾기 검색 이벤트 + findUserEvent(); } From 9c364b9ad73bfc160f3e97ede77cbf7e1aeb13a2 Mon Sep 17 00:00:00 2001 From: chj Date: Fri, 23 Feb 2024 18:09:45 +0900 Subject: [PATCH 13/24] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=EC=B0=BE?= =?UTF-8?q?=EA=B8=B0=20=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C=20(?= =?UTF-8?q?=EA=B0=84=EC=A7=80=20ver)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 65 +++++++++++------------- 1 file changed, 30 insertions(+), 35 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index 12a16e8f..d6e08091 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -173,26 +173,30 @@ export default function MainHeader($container) { let findUserEvent = () => { // 유저찾기 검색 이벤트 - document.getElementById('input').addEventListener('keydown', function(event) { + document.getElementById('input').addEventListener('input', function(event) { const nickname = event.target.value; - console.log('User input:', nickname); - if (event.key === 'Enter') { - fetch(`${BACKEND}/friends/search/?nickname=${encodeURIComponent(nickname)}`, { - method: "GET", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${getCookie("jwt")}`, - }, - }).then((response) => { - if (response.status === 200) { - response.json().then((data) => { - setSearchedUserList(data); - }) - } else { - this.$container.textContent = ""; - } - }) + + // 유저찾기 input을 비웠을 땐 리스트도 비워줘야함 + if (nickname === '') { + document.getElementById('user-search').innerHTML = ''; } + console.log(nickname); + fetch(`${BACKEND}/friends/search/?nickname=${encodeURIComponent(nickname)}`, { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${getCookie("jwt")}`, + }, + }).then((response) => { + if (response.status === 200) { + response.json().then((data) => { + console.log(data); + setSearchedUserList(data); + }) + } else { + setSearchedUserList(null); + } + }) }); } @@ -205,17 +209,17 @@ export default function MainHeader($container) {
- 유저 찾기 (0) + 유저 찾기
-
- +
`) @@ -286,24 +290,15 @@ export default function MainHeader($container) { this.renderSearchedUserList = () => { const newSearchedUserList = getSearchedUserList(); + console.log(newSearchedUserList); const newSearchedUserCards = newSearchedUserList.searchedUserList.map((card, index) => createInfoCard(card, index, {borderColor: '#FF52A0'}, {iconImagePath: '../../assets/images/paper_plane.png'})).join(''); - document.getElementById("user-search-wrapper").innerHTML = ` -
- 유저 찾기 (${newSearchedUserList.searchedUserList.length}) -
-
- - -
- + document.getElementById("user-search-list").innerHTML = ` + ` - - // 유저찾기 검색 이벤트 - findUserEvent(); } From 60d9b8c37b093120e6fbd85c4c2e4881d5e94056 Mon Sep 17 00:00:00 2001 From: chj Date: Fri, 23 Feb 2024 18:11:58 +0900 Subject: [PATCH 14/24] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=EC=B0=BE?= =?UTF-8?q?=EA=B8=B0=20css=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/assets/css/friendsInfoModal.css | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/frontend/assets/css/friendsInfoModal.css b/frontend/assets/css/friendsInfoModal.css index a5465889..22187fe0 100644 --- a/frontend/assets/css/friendsInfoModal.css +++ b/frontend/assets/css/friendsInfoModal.css @@ -38,9 +38,11 @@ height: 100%; } -#user-search { +#user-search-list { overflow: auto; overflow-y: scroll; + border: 0.3vw solid #FF52A0; + height: 100%; } #friend-request-list { @@ -52,11 +54,6 @@ color: #FF52A0; } -#user-search { - border: 0.3vw solid #FF52A0; - height: 100%; -} - #friend-request-list-wrapper { color: #29ABE2; } @@ -77,7 +74,7 @@ color: white; padding: 0.8vh 1vw; margin: 1.3vh 0 1.3vh 1vh; - width: calc(100% - 5vh - 0.6vw - 1vh - 0.4vw); + width: calc(100% - 5vh - 0.6vw - 1vh - 3vw); font-size: 2.5vh; font-family: Galmuri11-Bold, serif; } From 31c1962a98aa92561f46c29c91efd9506aea4349 Mon Sep 17 00:00:00 2001 From: chj Date: Sun, 25 Feb 2024 21:34:32 +0900 Subject: [PATCH 15/24] =?UTF-8?q?feat:=20=EB=B6=84=EA=B8=B0=EB=B3=84?= =?UTF-8?q?=EB=A1=9C=20icon-image=EC=9D=98=20id=EA=B0=92=EC=9D=84=20?= =?UTF-8?q?=EB=8B=A4=EB=A5=B4=EA=B2=8C=20=EC=A0=81=EC=9A=A9=20(=EA=B0=81?= =?UTF-8?q?=EA=B0=81=20=EB=8B=A4=EB=A5=B8=20=EC=9D=B4=EB=B2=A4=ED=8A=B8?= =?UTF-8?q?=EB=A5=BC=20=EC=A0=81=EC=9A=A9=ED=95=98=EA=B8=B0=20=EC=9C=84?= =?UTF-8?q?=ED=95=A8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 49 ++++++++++++++++-------- 1 file changed, 33 insertions(+), 16 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index d6e08091..b6fa1dc2 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -105,7 +105,6 @@ export default function MainHeader($container) { }, }).then((response) => { if (response.status === 200) { - // this.$container.textContent = ""; response.json().then((data) => { setFriendsList(data); }); @@ -131,6 +130,12 @@ export default function MainHeader($container) { }); // 유저찾기 검색 이벤트 findUserEvent(); + + // 친구 추가 요청 전송 이벤트 + // click(document.getElementById(""), () => { + // + // }); + // 메인 타이틀 클릭 이벤트 click(document.getElementById("title"), () => { navigate("/game-mode"); @@ -150,27 +155,40 @@ export default function MainHeader($container) { // accept.png 아이콘일 경우에만 추가할 HTML 조각을 정의 const additionalIconHTML = imagePath === '../../assets/images/accept.png' ? `
- -
` : ''; + +
` : ''; // 조건에 따라 클래스 추가 const wrapperClass = imagePath === '../../assets/images/accept.png' ? 'friend-card-wrapper with-additional-icon' : 'friend-card-wrapper'; + // 이미지 이름에 따른 id 속성 값 설정 + let iconIdSuffix; + if (imagePath === '../../assets/images/accept.png') { + iconIdSuffix = 'accept-icon-'; + } else if (imagePath === '../../assets/images/paper_plane.png') { + iconIdSuffix = 'request-icon-'; + } else if (imagePath === '../../assets/images/trash.png') { + iconIdSuffix = 'delete-icon-'; + } else { + iconIdSuffix = 'icon-'; // 기본 값 + } + return ` -
-
- -
-
- ${nickname} -
-
- -
- ${additionalIconHTML} +
+
+ +
+
+ ${nickname} +
+
+
+ ${additionalIconHTML} +
`; } + let findUserEvent = () => { // 유저찾기 검색 이벤트 document.getElementById('input').addEventListener('input', function(event) { @@ -243,7 +261,7 @@ export default function MainHeader($container) { // 친구삭제 클릭 이벤트 newFriendList.friends.forEach((friend, index) => { - const iconElement = document.getElementById(`icon-${index}`); + const iconElement = document.getElementById(`delete-icon-${index}`); if (iconElement) { iconElement.addEventListener('click', () => { console.log(`Icon at index ${index} clicked.`); @@ -301,7 +319,6 @@ export default function MainHeader($container) { ` } - importCss("../../../assets/fonts/font.css"); init(); let [getUserInfo, setUserInfo] = useState({}, this, "render"); From 800b0670f6810ba5a329bf29e997e5657ba61de5 Mon Sep 17 00:00:00 2001 From: chj Date: Sun, 25 Feb 2024 22:19:24 +0900 Subject: [PATCH 16/24] =?UTF-8?q?feat:=20=EC=B9=9C=EA=B5=AC=EC=9A=94?= =?UTF-8?q?=EC=B2=AD=20=EB=B3=B4=EB=82=B4=EA=B8=B0=20api=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 50 ++++++++++++++++++------ 1 file changed, 37 insertions(+), 13 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index b6fa1dc2..77e7e7a6 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -131,11 +131,6 @@ export default function MainHeader($container) { // 유저찾기 검색 이벤트 findUserEvent(); - // 친구 추가 요청 전송 이벤트 - // click(document.getElementById(""), () => { - // - // }); - // 메인 타이틀 클릭 이벤트 click(document.getElementById("title"), () => { navigate("/game-mode"); @@ -262,6 +257,7 @@ export default function MainHeader($container) { // 친구삭제 클릭 이벤트 newFriendList.friends.forEach((friend, index) => { const iconElement = document.getElementById(`delete-icon-${index}`); + if (iconElement) { iconElement.addEventListener('click', () => { console.log(`Icon at index ${index} clicked.`); @@ -289,6 +285,7 @@ export default function MainHeader($container) { }); }; + // 요청받은 리스트 렌더링 this.renderRequestersList = () => { const newRequestersList = getRequestersList(); @@ -296,19 +293,21 @@ export default function MainHeader($container) { createInfoCard(card, index, {borderColor: '#29ABE2'}, {iconImagePath: '../../assets/images/accept.png'})).join(''); document.getElementById("friend-request-list-wrapper").innerHTML = ` -
- 친구 요청 (${newRequestersList.friendRequestList.length}) -
-
- ${newRequestersCards} -
- ` +
+ 친구 요청 (${newRequestersList.friendRequestList.length}) +
+
+ ${newRequestersCards} +
+ ` + + } + // 유저검색 리스트 렌더링 this.renderSearchedUserList = () => { const newSearchedUserList = getSearchedUserList(); - console.log(newSearchedUserList); const newSearchedUserCards = newSearchedUserList.searchedUserList.map((card, index) => createInfoCard(card, index, {borderColor: '#FF52A0'}, {iconImagePath: '../../assets/images/paper_plane.png'})).join(''); @@ -317,6 +316,31 @@ export default function MainHeader($container) { ${newSearchedUserCards}
` + + newSearchedUserList.searchedUserList.forEach((friend, index) => { + const iconElement = document.getElementById(`request-icon-${index}`); + + if (iconElement) { + iconElement.addEventListener('click', () => { + const nickname = friend.nickname; + + fetch(`${BACKEND}/friends/`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${getCookie("jwt")}`, + }, + body: JSON.stringify({nickname}) + }).then((response) => { + if (response.status === 200) { + + } else { + navigate("/"); + } + }) + }) + } + }) ; } importCss("../../../assets/fonts/font.css"); From 091407e11f76b79fb889aa0070d854647200aeb1 Mon Sep 17 00:00:00 2001 From: chj Date: Sun, 25 Feb 2024 23:15:54 +0900 Subject: [PATCH 17/24] =?UTF-8?q?feat:=20=EC=9A=94=EC=B2=AD=20=EA=B1=B0?= =?UTF-8?q?=EC=A0=88=20API=20=EC=9D=B4=EC=8B=9D=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 85 ++++++++++++++++++------ 1 file changed, 66 insertions(+), 19 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index 77e7e7a6..5ccb6047 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -147,11 +147,12 @@ export default function MainHeader($container) { // `is_online`이 false일 경우 카드에 적용할 투명도 스타일 const opacityStyle = is_online ? '' : 'opacity: 0.5;'; - // accept.png 아이콘일 경우에만 추가할 HTML 조각을 정의 + // accept.png 아이콘일 경우에만 추가할 HTML 조각을 정의하고 reject-icon에도 인덱스 적용 const additionalIconHTML = imagePath === '../../assets/images/accept.png' ? `
- +
` : ''; + // 조건에 따라 클래스 추가 const wrapperClass = imagePath === '../../assets/images/accept.png' ? 'friend-card-wrapper with-additional-icon' : 'friend-card-wrapper'; @@ -167,20 +168,22 @@ export default function MainHeader($container) { iconIdSuffix = 'icon-'; // 기본 값 } + + return ` -
-
- -
-
- ${nickname} -
-
- +
+
+ +
+
+ ${nickname} +
+
+ +
+ ${additionalIconHTML}
- ${additionalIconHTML} -
- `; + `; } @@ -285,7 +288,7 @@ export default function MainHeader($container) { }); }; - // 요청받은 리스트 렌더링 + // 친구요청 받은 리스트 렌더링 this.renderRequestersList = () => { const newRequestersList = getRequestersList(); @@ -301,7 +304,51 @@ export default function MainHeader($container) {
` + newRequestersList.friendRequestList.forEach((requester, index) => { + const acceptIcon = document.getElementById(`accept-icon-${index}`); + const rejectIcon = document.getElementById(`reject-icon-${index}`); + + if (acceptIcon) { + acceptIcon.addEventListener('click', () => { + const nickname = requester.nickname; + + fetch(`${BACKEND}/friends/accept/`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${getCookie("jwt")}` + }, + body: JSON.stringify({nickname}) + }).then((response) => { + if (response.status === 200) { + + } else { + navigate("/"); + } + }) + }) + } + if (rejectIcon) { + rejectIcon.addEventListener('click', () => { + const nickname = requester.nickname; + + fetch(`${BACKEND}/friends/reject/`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${getCookie("jwt")}` + }, + body: JSON.stringify({nickname}) + }).then((response) => { + if (response.status === 200) { + } else { + navigate("/"); + } + }) + }) + } + }); } // 유저검색 리스트 렌더링 @@ -317,18 +364,18 @@ export default function MainHeader($container) { ` - newSearchedUserList.searchedUserList.forEach((friend, index) => { + newSearchedUserList.searchedUserList.forEach((user, index) => { const iconElement = document.getElementById(`request-icon-${index}`); if (iconElement) { iconElement.addEventListener('click', () => { - const nickname = friend.nickname; + const nickname = user.nickname; fetch(`${BACKEND}/friends/`, { method: 'POST', headers: { 'Content-Type': 'application/json', - Authorization: `Bearer ${getCookie("jwt")}`, + Authorization: `Bearer ${getCookie("jwt")}` }, body: JSON.stringify({nickname}) }).then((response) => { @@ -340,7 +387,7 @@ export default function MainHeader($container) { }) }) } - }) ; + }); } importCss("../../../assets/fonts/font.css"); From e7a233ddfb26c15ef0596ed145b1566ea49c717a Mon Sep 17 00:00:00 2001 From: chj Date: Mon, 26 Feb 2024 13:38:45 +0900 Subject: [PATCH 18/24] =?UTF-8?q?feat:=20=EC=B9=9C=EA=B5=AC=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD=20=EA=B1=B0=EC=A0=88=20API=EC=9D=B4=EC=8B=9D=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 77 ++++++++++-------------- 1 file changed, 32 insertions(+), 45 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index 5ccb6047..9f26e70d 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -4,7 +4,6 @@ import { click } from "../../utils/clickEvent.js"; import { BACKEND, HISTORIES_IMAGE_PATH } from "../../global.js"; import { getCookie, deleteCookie } from "../../utils/cookie.js"; import useState from "../../utils/useState.js"; -// import friendsInfoModal from "./friends-info-modal.js"; /** * 사용자 전적 페이지에 사용하는 header 컴포넌트 @@ -289,10 +288,12 @@ export default function MainHeader($container) { }; // 친구요청 받은 리스트 렌더링 + // 친구요청 받은 리스트 렌더링 함수 this.renderRequestersList = () => { const newRequestersList = getRequestersList(); - const newRequestersCards = newRequestersList.friendRequestList.map((card, index)=> + // 친구 요청 카드 생성 (accept 아이콘만 포함되어 있음, reject 아이콘 처리는 가정하에 추가) + const newRequestersCards = newRequestersList.friendRequestList.map((card, index) => createInfoCard(card, index, {borderColor: '#29ABE2'}, {iconImagePath: '../../assets/images/accept.png'})).join(''); document.getElementById("friend-request-list-wrapper").innerHTML = ` @@ -302,54 +303,40 @@ export default function MainHeader($container) {
${newRequestersCards}
- ` + `; - newRequestersList.friendRequestList.forEach((requester, index) => { - const acceptIcon = document.getElementById(`accept-icon-${index}`); - const rejectIcon = document.getElementById(`reject-icon-${index}`); - - if (acceptIcon) { - acceptIcon.addEventListener('click', () => { - const nickname = requester.nickname; - - fetch(`${BACKEND}/friends/accept/`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${getCookie("jwt")}` - }, - body: JSON.stringify({nickname}) - }).then((response) => { - if (response.status === 200) { - - } else { - navigate("/"); - } - }) - }) - } - if (rejectIcon) { - rejectIcon.addEventListener('click', () => { - const nickname = requester.nickname; + // 공통 요청 처리 함수 + function handleFriendRequest(action, nickname) { + fetch(`${BACKEND}/friends/${action}/`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${getCookie("jwt")}` + }, + body: JSON.stringify({nickname}) + }).then(response => { + if (response.status !== 200) { + navigate("/"); + } + // 성공적으로 처리됐을 때의 로직 (예: 리스트 갱신, 알림 등) + }).catch(error => { + console.error('Error:', error); + }); + } - fetch(`${BACKEND}/friends/reject/`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${getCookie("jwt")}` - }, - body: JSON.stringify({nickname}) - }).then((response) => { - if (response.status === 200) { + // 각 요청자에 대한 이벤트 리스너 설정 + newRequestersList.friendRequestList.forEach((requester, index) => { + const acceptIcon = document.getElementById(`accept-icon-${index}`); + const rejectIcon = document.getElementById(`reject-icon-${index}`); - } else { - navigate("/"); - } - }) - }) + if (acceptIcon) { + acceptIcon.addEventListener('click', () => handleFriendRequest('accept', requester.nickname)); + } + if (rejectIcon) { + rejectIcon.addEventListener('click', () => handleFriendRequest('reject', requester.nickname)); } }); - } + }; // 유저검색 리스트 렌더링 this.renderSearchedUserList = () => { From 6f78761969fc2657da386f5541ffc54aecd90a67 Mon Sep 17 00:00:00 2001 From: chj Date: Mon, 26 Feb 2024 14:03:57 +0900 Subject: [PATCH 19/24] =?UTF-8?q?refactor:=20=EB=94=94=EB=B2=84=EA=B9=85?= =?UTF-8?q?=20=ED=9D=94=EC=A0=81=20=EC=A7=80=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index 9f26e70d..fce6d801 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -195,7 +195,6 @@ export default function MainHeader($container) { if (nickname === '') { document.getElementById('user-search').innerHTML = ''; } - console.log(nickname); fetch(`${BACKEND}/friends/search/?nickname=${encodeURIComponent(nickname)}`, { method: "GET", headers: { @@ -205,7 +204,6 @@ export default function MainHeader($container) { }).then((response) => { if (response.status === 200) { response.json().then((data) => { - console.log(data); setSearchedUserList(data); }) } else { @@ -262,8 +260,6 @@ export default function MainHeader($container) { if (iconElement) { iconElement.addEventListener('click', () => { - console.log(`Icon at index ${index} clicked.`); - console.log(friend.nickname); // nickname 키값 구성 const nickname = friend.nickname; From dc24bedb855f785546f5e2cfa743dda211048eda Mon Sep 17 00:00:00 2001 From: chj Date: Mon, 26 Feb 2024 14:30:29 +0900 Subject: [PATCH 20/24] =?UTF-8?q?refactor:=20=EC=B9=9C=EA=B5=AC=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=EC=B9=B4=EB=93=9C=20height=EA=B3=A0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index fce6d801..cba40617 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -167,8 +167,6 @@ export default function MainHeader($container) { iconIdSuffix = 'icon-'; // 기본 값 } - - return `
@@ -232,7 +230,7 @@ export default function MainHeader($container) {
- +
`) From cc0ee652ff2851453da77da1a6c4ae3f6249c808 Mon Sep 17 00:00:00 2001 From: chj Date: Mon, 26 Feb 2024 14:46:27 +0900 Subject: [PATCH 21/24] =?UTF-8?q?feat:=20=EC=9B=B9=EC=86=8C=EC=BC=93=20?= =?UTF-8?q?=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index cba40617..f22e66cb 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -32,6 +32,11 @@ export default function MainHeader($container) { navigate("/"); } }); + this.ws = new WebSocket(`wss://localhost:443/ws/friends/`); + this.ws.onmessage = () => { + + } + }; this.render = () => { @@ -227,6 +232,7 @@ export default function MainHeader($container) {
+
From 08b09c7758320c290091eba62ea3b42e5d301a16 Mon Sep 17 00:00:00 2001 From: chj Date: Mon, 26 Feb 2024 17:27:22 +0900 Subject: [PATCH 22/24] =?UTF-8?q?feat:=20=EC=9B=B9=EC=86=8C=EC=BC=93=20?= =?UTF-8?q?=EC=9D=B4=EC=8B=9D=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 69 +++++++++--------------- 1 file changed, 24 insertions(+), 45 deletions(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index f22e66cb..ba2663e3 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -26,17 +26,19 @@ export default function MainHeader($container) { setUserInfo(data); }); // alert("웹소켓 연결!"); - new WebSocket("wss://localhost/ws/friend_status/"); + this.ws = new WebSocket("wss://localhost/ws/friend_status/"); + this.ws.onmessage = (msg) => { + let response = JSON.parse(msg.data); + + // 업데이트된 내용을 set 함수에 전달합니다. + setFriendsList(response.data); + setRequestersList(response.data); + } } else { // TODO => 에러 페이지로 이동 navigate("/"); } }); - this.ws = new WebSocket(`wss://localhost:443/ws/friends/`); - this.ws.onmessage = () => { - - } - }; this.render = () => { @@ -100,37 +102,6 @@ export default function MainHeader($container) { } else { infoWrapper.style.display = "grid"; } - - fetch(`${BACKEND}/friends/`, { - method: "GET", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${getCookie("jwt")}`, - }, - }).then((response) => { - if (response.status === 200) { - response.json().then((data) => { - setFriendsList(data); - }); - } else { - navigate("/"); - } - }); - fetch(`${BACKEND}/friends/pending/`, { - method: "GET", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${getCookie("jwt")}`, - }, - }).then((response) => { - if (response.status === 200) { - response.json().then((data) => { - setRequestersList(data); - }); - } else { - navigate("/"); - } - }); }); // 유저찾기 검색 이벤트 findUserEvent(); @@ -221,7 +192,11 @@ export default function MainHeader($container) { headerElement.insertAdjacentHTML("beforeend", `
- +
+ 친구 (0) +
+
+
@@ -236,7 +211,11 @@ export default function MainHeader($container) {
- +
+ 친구 요청 (0) +
+
+
`) @@ -252,11 +231,11 @@ export default function MainHeader($container) { document.getElementById("friends-list-wrapper").innerHTML = `
친구 (${newFriendList.friends.length} / 8) -
-
- ${newFriendCards} -
- `; +
+
+ ${newFriendCards} +
+ `; // 친구삭제 클릭 이벤트 newFriendList.friends.forEach((friend, index) => { @@ -378,9 +357,9 @@ export default function MainHeader($container) { } importCss("../../../assets/fonts/font.css"); - init(); let [getUserInfo, setUserInfo] = useState({}, this, "render"); let [getFriendsList, setFriendsList] = useState({}, this, "renderFriendsList"); let [getRequestersList, setRequestersList] = useState({}, this, "renderRequestersList"); let [getSearchedUserList, setSearchedUserList] = useState({}, this, "renderSearchedUserList"); + init(); } \ No newline at end of file From a7c01a74c9eba110828a97e8288c76e7003158bb Mon Sep 17 00:00:00 2001 From: chj Date: Mon, 26 Feb 2024 19:36:36 +0900 Subject: [PATCH 23/24] =?UTF-8?q?feat:=20spinner=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/header/mainHeader/header.js | 49 +++++++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) diff --git a/frontend/src/header/mainHeader/header.js b/frontend/src/header/mainHeader/header.js index ba2663e3..d8386867 100644 --- a/frontend/src/header/mainHeader/header.js +++ b/frontend/src/header/mainHeader/header.js @@ -196,6 +196,13 @@ export default function MainHeader($container) { 친구 (0)
+
+
+ +
+
@@ -215,6 +222,13 @@ export default function MainHeader($container) { 친구 요청 (0)
+
+
+ +
+
@@ -255,13 +269,24 @@ export default function MainHeader($container) { body: JSON.stringify({nickname}) }).then((response) => { if (response.status === 200) { - + const loadingHtml = ` +
+
+ +
+
+ `; + const friendsListDiv = document.getElementById('friends-list'); + friendsListDiv.innerHTML += loadingHtml; // 로딩 스피너를 friends-list 내부에 추가 } else { // TODO => 에러 페이지로 이동 navigate("/"); } }) }); + } }); }; @@ -310,9 +335,31 @@ export default function MainHeader($container) { if (acceptIcon) { acceptIcon.addEventListener('click', () => handleFriendRequest('accept', requester.nickname)); + const loadingHtml = ` +
+
+ +
+
+ `; + const friendsListDiv = document.getElementById('friends-list'); + friendsListDiv.innerHTML += loadingHtml; // 로딩 스피너를 friends-list 내부에 추가 } if (rejectIcon) { rejectIcon.addEventListener('click', () => handleFriendRequest('reject', requester.nickname)); + const loadingHtml = ` +
+
+ +
+
+ `; + const friendsListDiv = document.getElementById('friends-list'); + friendsListDiv.innerHTML += loadingHtml; // 로딩 스피너를 friends-list 내부에 추가 } }); }; From 5253d59c0187e342099351e58873c5b02f679a89 Mon Sep 17 00:00:00 2001 From: chj Date: Mon, 26 Feb 2024 19:36:47 +0900 Subject: [PATCH 24/24] =?UTF-8?q?feat:=20spinner=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/assets/css/friendsInfoModal.css | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/assets/css/friendsInfoModal.css b/frontend/assets/css/friendsInfoModal.css index 22187fe0..28cd3698 100644 --- a/frontend/assets/css/friendsInfoModal.css +++ b/frontend/assets/css/friendsInfoModal.css @@ -80,6 +80,7 @@ } .friend-card-wrapper { + height: 11vh; display: grid; grid-gap: 7%; grid-template-columns: 1fr 4fr 1fr;