Merge pull request #27 from Seol-JY/feature/new

Seol-JY · web-flow · commit ac6b4c13c1fb · 2024-05-27T10:35:21.000+09:00
[FEAT]: 광고 삽입 시도
diff --git a/client/public/index.html b/client/public/index.html
@@ -2,6 +2,7 @@
 <html lang="kr" data-theme="light">
   <head>
     <meta charset="utf-8" />
+    <meta name="google-adsense-account" content="ca-pub-8658385917169302" />
     <meta
       name="google-site-verification"
       content="x96FdMXm-uHwvLPsY__UXOIvT3CNgHMApLx5Ki6TZ9w"
@@ -16,6 +17,11 @@
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
     />
+    <script
+      async
+      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8658385917169302"
+      crossorigin="anonymous"
+    ></script>
     <title>Speed Coder</title>
   </head>
   <body onpaste="return false">
diff --git a/client/src/components/LeaderBoard.jsx b/client/src/components/LeaderBoard.jsx
@@ -2,6 +2,7 @@ import fetcher from "../utils/fetcher";
 import { useState, useEffect, useCallback } from "react";
 import { useInView } from "react-intersection-observer";
 import LeaderBoardContents from "./LeaderBoardContents";
+import InFeedAdvertise from "./advertises/InFeedAdvertise";
 
 export default function LeaderBoard({ daynight }) {
   const [prev, prevInView] = useInView(); // 무한 스크롤용 ref - 이전
@@ -62,26 +63,38 @@ export default function LeaderBoard({ daynight }) {
     </ul>
   ) : (
     <ul className="sidebarsection-rank">
-      {items.map((s, i) => {
-        // if (i === 2) {
-        //   return (
-        //     <li key={s._id} ref={prev}>
-        //       <LeaderBoardContents s={s} />
-        //     </li>
-        //   );
-        if (i === items.length - 1) {
+      {items
+        .map((s, i) => {
+          // if (i === 2) {
+          //   return (
+          //     <li key={s._id} ref={prev}>
+          //       <LeaderBoardContents s={s} />
+          //     </li>
+          //   );
+          if (i === items.length - 1) {
+            return (
+              <li key={s._id} ref={next}>
+                <LeaderBoardContents s={s} />
+              </li>
+            );
+          }
           return (
-            <li key={s._id} ref={next}>
+            <li key={s._id}>
               <LeaderBoardContents s={s} />
             </li>
           );
-        }
-        return (
-          <li key={s._id}>
-            <LeaderBoardContents s={s} />
-          </li>
-        );
-      })}
+        })
+        .reduce((acc, curr, i) => {
+          if (i === 3) {
+            acc.push(
+              <li key="advertise">
+                <InFeedAdvertise />
+              </li>
+            );
+          }
+          acc.push(curr);
+          return acc;
+        }, [])}
       {loading && (
         <li>
           <ul>
diff --git a/client/src/components/Sidebar.jsx b/client/src/components/Sidebar.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import Debug from "./Debug";
 import LeaderBoard from "./LeaderBoard";
 import IconGenerator from "./IconGenerator";
+import InFeedAdvertise from "./advertises/InFeedAdvertise";
 
 export default function Sidebar(props) {
   const [filestate, setFilestate] = useState("hello.py");
diff --git a/client/src/components/advertises/InFeedAdvertise.jsx b/client/src/components/advertises/InFeedAdvertise.jsx
@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+
+const InFeedAdvertise = ({
+  className = "adsbygoogle",
+  client = "ca-pub-8658385917169302",
+  slot = "1562420452",
+  format = "fluid",
+  layoutKey = "-fp+68-11-df+sd",
+}) => {
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production")
+      try {
+        (window.adsbygoogle = window.adsbygoogle || []).push({});
+        console.log("Advertise is pushed");
+      } catch (e) {
+        console.error("AdvertiseError", e);
+      }
+  }, []);
+
+  //production이 아닌 경우 대체 컴포넌트 표시
+  if (process.env.NODE_ENV !== "production")
+    return (
+      <div
+        style={{
+          background: "#8aff8a",
+          color: "black",
+          fontSize: "18px",
+          fontWeight: "bold",
+          textAlign: "center",
+          padding: "16px",
+        }}
+      >
+        광고 표시 영역
+      </div>
+    );
+  //production인 경우 구글 광고 표시
+  return (
+    <ins
+      className={className}
+      style={{
+        overflowX: "auto",
+        overflowY: "hidden",
+        display: "block",
+        textAlign: "center",
+      }}
+      data-ad-client={client}
+      data-ad-slot={slot}
+      data-ad-format={format}
+      data-ad-layout-key={layoutKey}
+    />
+  );
+};
+
+export default InFeedAdvertise;
