feat : 알림이 없을 때 표시되는 메시지 추가 (#15)

알림이 없을 때 아래와 같은 메시지가 출력됩니다.

```
Velog Helper를 사용해보세요!
새 글 알림이 없습니다.
블로그에 가서 별 모양 북마크 버튼을 눌러보세요.
이미 눌렀다면 잠시만 기다려주세요. (최대 15분)
```

Author: junah201

frontend/src/util.js

@@ -7,40 +7,90 @@ function createElement(tag, attrs) {
 	return el;
 }
 
+function createNoticeitem(item, isNotice) {
+	const itemDiv = createElement("div", { class: "notice-item" });
+
+	const BlogImgContainer = createElement("a", {
+		class: "notice-blog-img-container",
+		href: `https://velog.io/@${item.user}/`,
+		target: "_blank",
+	});
+
+	const itemBlogImg = createElement("img", {
+		src: item.user_img,
+		class: "notice-blog-img",
+	});
+
+	BlogImgContainer.append(itemBlogImg);
+
+	const itemTitle = createElement("a", {
+		class: "notice-post-title",
+		href: `https://velog.io/@${item.user}/${item.link}`,
+		target: "_blank",
+	});
+
+	itemTitle.innerHTML = item.title;
+	const itemDate = createElement("div", { class: "notice-date" });
+
+	if (isNotice) {
+		itemTitle.setAttribute("style", "width : 350px;");
+		itemTitle.setAttribute("href", item.link);
+		itemDate.setAttribute("style", "width : 0;padding : 0;");
+		itemDate.innerHTML = "";
+	} else {
+		itemDate.innerHTML = item.created_at.substring(5, 10);
+	}
+
+	itemDiv.append(BlogImgContainer, itemTitle, itemDate);
+	return itemDiv;
+}
+
 function createNoticeItems() {
 	const noticeItemsDiv = createElement("div", { class: "notice-item-div" });
 	chrome.runtime.sendMessage(
 		{
 			message: "get_new_post",
 		},
 		(response) => {
-			response.data.forEach(function (item, index, array) {
-				const itemDiv = createElement("div", { class: "notice-item" });
-
-				const BlogImgContainer = createElement("a", {
-					class: "notice-blog-img-container",
-					href: `https://velog.io/@${item.user}/`,
-					target: "_blank",
-				});
-
-				const itemBlogImg = createElement("img", {
-					src: item.user_img,
-					class: "notice-blog-img",
-				});
-
-				BlogImgContainer.append(itemBlogImg);
+			if (response.data.length == 0) {
+				const items = [
+					{
+						user_img:
+							"https://lh3.googleusercontent.com/QO4AoAGH0U9IcMouWT_m2GNvMy4P4eFwmEpVxakU4xOwGH9YpGMSgsU5alalzZf2PFg6KGL3DbA0khc8a7xiNQnuwg=w128-h128-e365-rj-sc0x00ffffff",
+						link: "https://github.com/junah201/velog-helper",
+						title: "Velog Helper를 사용해보세요!",
+					},
+					{
+						user_img:
+							"https://lh3.googleusercontent.com/QO4AoAGH0U9IcMouWT_m2GNvMy4P4eFwmEpVxakU4xOwGH9YpGMSgsU5alalzZf2PFg6KGL3DbA0khc8a7xiNQnuwg=w128-h128-e365-rj-sc0x00ffffff",
+						link: "https://github.com/junah201/velog-helper",
+						title: "새 글 알림이 없습니다.",
+					},
+					{
+						user_img:
+							"https://lh3.googleusercontent.com/QO4AoAGH0U9IcMouWT_m2GNvMy4P4eFwmEpVxakU4xOwGH9YpGMSgsU5alalzZf2PFg6KGL3DbA0khc8a7xiNQnuwg=w128-h128-e365-rj-sc0x00ffffff",
+						link: "https://github.com/junah201/velog-helper",
+						title: "블로그에 가서 별 모양 북마크 버튼을 눌러보세요.",
+					},
+					{
+						user_img:
+							"https://lh3.googleusercontent.com/QO4AoAGH0U9IcMouWT_m2GNvMy4P4eFwmEpVxakU4xOwGH9YpGMSgsU5alalzZf2PFg6KGL3DbA0khc8a7xiNQnuwg=w128-h128-e365-rj-sc0x00ffffff",
+						link: "https://github.com/junah201/velog-helper",
+						title: "이미 눌렀다면 잠시만 기다려주세요. (최대 15분)",
+					},
+				];
 
-				const itemTitle = createElement("a", {
-					class: "notice-post-title",
-					href: `https://velog.io/@${item.user}/${item.link}`,
-					target: "_blank",
+				items.forEach(function (item, index, array) {
+					noticeItemsDiv.append(
+						createNoticeitem((item = item), (isNotice = true))
+					);
 				});
+			}
 
-				itemTitle.innerHTML = item.title;
-				const itemDate = createElement("div", { class: "notice-date" });
-				itemDate.innerHTML = item.created_at.substring(5, 10);
-				itemDiv.append(BlogImgContainer, itemTitle, itemDate);
-				noticeItemsDiv.append(itemDiv);
+			response.data.forEach(function (item, index, array) {
+				noticeItemsDiv.append(
+					createNoticeitem((item = item), (isNotice = false))
+				);
 			});
 		}
 	);