feat : 북마크 버튼을 포스트 상단에도 추가 (#36)

- 블로그 포스트를 상단 블로그명 바로 옆에도 추가하도록 개선함
- 블로그 버튼 끼리 색깔이 동기화가 안되는 문제가 있음

Author: junah201

frontend/src/bookmark.js

@@ -1,10 +1,8 @@
-function add_bookmark_button() {
-	var bookmarkButton = createElement("button", { class: "bookmark-button" });
+function createBookmarkButton() {
+	const bookmarkButton = createElement("button", { class: "bookmark-button" });
 	bookmarkButton.innerHTML =
 		'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>';
 
-	document.querySelector(".name").append(bookmarkButton);
-
 	bookmarkButton.addEventListener("click", () => {
 		if (bookmarkButton.classList.contains("yellow-bookmark-button")) {
 			bookmarkButton.classList.remove("yellow-bookmark-button");
@@ -27,18 +25,30 @@ function add_bookmark_button() {
 			payload: window.location.pathname.split("/")[1].substring(1),
 		},
 		(response) => {
-			console.log(response.is_bookmarked);
 			if (response.is_bookmarked) {
 				bookmarkButton.classList.add("yellow-bookmark-button");
 			} else {
 				bookmarkButton.classList.remove("yellow-bookmark-button");
 			}
 		}
 	);
+
+	return bookmarkButton;
 }
 
-console.log(document.querySelector(".bookmark-button"));
 if (document.querySelector(".bookmark-button") == null) {
-	add_bookmark_button();
-	console.log("SUCCES add bookmark button");
+	var blogProfile = document.querySelector("div > div.name");
+	console.log(blogProfile);
+	if (blogProfile != null && blogProfile != undefined) {
+		var bookmarkButton = createBookmarkButton();
+		blogProfile.append(bookmarkButton);
+		console.log("SUCCES add bookmark button in blog profile");
+	}
+
+	var username = document.querySelector("div.information > span.username");
+	if (username != null && username != undefined) {
+		var bookmarkButton = createBookmarkButton();
+		username.after(bookmarkButton);
+		console.log("SUCCES add bookmark button in top of post");
+	}
 }