From 42f991da4fc3a4c7623c0a6bb361089e789686fa Mon Sep 17 00:00:00 2001
From: sanghun lee <57477415+sanghunlee-711@users.noreply.github.com>
Date: Thu, 1 Feb 2024 08:20:13 +0900
Subject: [PATCH] [Feat] Visitor count with Hits service (#162)

- #close #161

Co-authored-by: cloud <cloud@oysterable.com>
---
 src/components/Hits.js              | 17 +++++++++++++++++
 src/components/Nav.js               |  3 ++-
 src/pages/Home/constants/element.js |  1 +
 src/pages/Home/index.js             |  4 ++++
 src/styles/style.css                |  4 ++++
 5 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Hits.js

diff --git a/src/components/Hits.js b/src/components/Hits.js
new file mode 100644
index 0000000..b1379d3
--- /dev/null
+++ b/src/components/Hits.js
@@ -0,0 +1,17 @@
+class Hits {
+  constructor({ $target }) {
+    this.$target = $target;
+
+    this.render();
+  }
+
+  render() {
+    this.$target.innerHTML = /* html */ `
+      <div class="hits-wrapper">
+        <a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fwww.cloud-sanghun.com&count_bg=%23C9C9C9&title_bg=%23555555&icon=googlecloud.svg&icon_color=%23E7E7E7&title=hits&edge_flat=false"/></a>
+      <div>
+  `;
+  }
+}
+
+export default Hits;
diff --git a/src/components/Nav.js b/src/components/Nav.js
index 7f5c973..eee50c6 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -1,5 +1,6 @@
 import { SHOW_ROUTE } from '../common/constants/route.js';
 import BurgerNavPopup from './BurggerNavPopup.js';
+
 import Modal from './Modal.js';
 
 class Nav {
@@ -29,7 +30,7 @@ class Nav {
 
   render = () => {
     this.$wrapper.innerHTML = `
-      <h1>Sanghun(Cloud) Lee</h1>
+      <h1>Sanghun Lee</h1>
       <ul class="nav_list">
         ${SHOW_ROUTE.map((el) => {
           return `
diff --git a/src/pages/Home/constants/element.js b/src/pages/Home/constants/element.js
index f51f90c..207b1bf 100644
--- a/src/pages/Home/constants/element.js
+++ b/src/pages/Home/constants/element.js
@@ -2,4 +2,5 @@ export const $ELEMENT = {
   HOME_MAIN_CONTAINER: 'home-main-container',
   LATEST_POST_CONTAINER: 'latest-post-container',
   RESUME_CONTAINERL: 'resume-container',
+  HITS_CONTAINER: 'hits-wrapper',
 };
diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js
index 2189518..0ed4c90 100644
--- a/src/pages/Home/index.js
+++ b/src/pages/Home/index.js
@@ -1,5 +1,6 @@
 import Contribution from './components/Contribution/index.js';
 import LatestPost from './components/LatestPost/index.js';
+import Hits from '../../components/Hits.js';
 import { $ELEMENT } from './constants/element.js';
 
 class Home {
@@ -17,6 +18,7 @@ class Home {
     <div>
       <section class="${$ELEMENT.LATEST_POST_CONTAINER}"></section>
       <section class="${$ELEMENT.RESUME_CONTAINERL}"></section>
+      <div class=${$ELEMENT.HITS_CONTAINER}></div>
     </div>
     `;
   };
@@ -30,11 +32,13 @@ class Home {
     const resumeContainer = document.querySelector(
       `.${$ELEMENT.RESUME_CONTAINERL}`
     );
+    const hitsContainer = document.querySelector(`.${$ELEMENT.HITS_CONTAINER}`);
 
     new LatestPost({
       $target: postContainer,
     });
     new Contribution({ $target: resumeContainer });
+    new Hits({ $target: hitsContainer });
   };
 
   addListeners = () => {};
diff --git a/src/styles/style.css b/src/styles/style.css
index 1081afa..5f7093e 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -544,3 +544,7 @@ body {
   align-items: center;
   justify-content: center;
 }
+
+.hits-wrapper {
+  margin: 36px 0px;
+}