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

[FEAT]: 광고 삽입

Author: Seol-JY

client/src/App.js

@@ -9,6 +9,7 @@ import { useState, useEffect } from "react";
 import { Provider } from "react-redux";
 import store from "./redux/store";
 import Draggable from "react-draggable";
+import InFeedAdvertise from "./components/advertises/InFeedAdvertise";
 
 function App() {
   const [section, setSection] = useState("1");
@@ -24,36 +25,36 @@ function App() {
   const [counterValue, setCounterValue] = useState(0);
 
   useEffect(() => {
-    fetchCounterValue();
+    // fetchCounterValue();
     egg();
   }, []);
 
-  const fetchCounterValue = async () => {
-    try {
-      const response = await fetch("/counter");
-      if (!response.ok) {
-        throw new Error("Failed to fetch counter value");
-      }
-      const data = await response.json();
-      setCounterValue(data.value);
-    } catch (error) {
-      console.error("Failed to fetch counter value:", error);
-    }
-  };
-  const increaseCounter = async () => {
-    try {
-      const response = await fetch(`/counter?amount=${1}`, {
-        method: "POST",
-      });
-      if (!response.ok) {
-        throw new Error("Failed to increase counter value");
-      }
-      setCounterValue((prevValue) => prevValue + 1);
-      setButtonClicked(true);
-    } catch (error) {
-      console.error("Failed to increase counter value:", error);
-    }
-  };
+  // const fetchCounterValue = async () => {
+  //   try {
+  //     const response = await fetch("/counter");
+  //     if (!response.ok) {
+  //       throw new Error("Failed to fetch counter value");
+  //     }
+  //     const data = await response.json();
+  //     setCounterValue(data.value);
+  //   } catch (error) {
+  //     console.error("Failed to fetch counter value:", error);
+  //   }
+  // };
+  // const increaseCounter = async () => {
+  //   try {
+  //     const response = await fetch(`/counter?amount=${1}`, {
+  //       method: "POST",
+  //     });
+  //     if (!response.ok) {
+  //       throw new Error("Failed to increase counter value");
+  //     }
+  //     setCounterValue((prevValue) => prevValue + 1);
+  //     setButtonClicked(true);
+  //   } catch (error) {
+  //     console.error("Failed to increase counter value:", error);
+  //   }
+  // };
 
   const handleResize = () => {
     setScale(Math.min(window.innerWidth / 1400, window.innerHeight / 900));
@@ -115,6 +116,19 @@ function App() {
           </button>
         )}
       </div> */}
+      <div
+        style={{
+          margin: "0 10px 0 0",
+          position: "absolute",
+          right: "0",
+          top: "calc(100vh/2 - 250px)",
+          display: "flex",
+          justifyContent: "space-around",
+          alignItems: "center",
+        }}
+      >
+        <InFeedAdvertise />
+      </div>
       <div className="scale-wrapper" style={{ transform: `scale(${scale})` }}>
         <Draggable onDrag={(e, data) => trackPos(data)}>
           <div className="form no-drag">

client/src/components/LeaderBoard.jsx

@@ -63,8 +63,8 @@ export default function LeaderBoard({ daynight }) {
     </ul>
   ) : (
     <ul className="sidebarsection-rank">
-      {items
-        .map((s, i) => {
+      {
+        items.map((s, i) => {
           // if (i === 2) {
           //   return (
           //     <li key={s._id} ref={prev}>
@@ -84,17 +84,19 @@ export default function LeaderBoard({ daynight }) {
             </li>
           );
         })
-        .reduce((acc, curr, i) => {
-          if (i === 3) {
-            acc.push(
-              <li key="advertise">
-                <InFeedAdvertise />
-              </li>
-            );
-          }
-          acc.push(curr);
-          return acc;
-        }, [])}
+        // 인피드 광고가 3번째에 삽입되어야 하나, 최소 width를 만족하지 못해 제거
+        // .reduce((acc, curr, i) => {
+        //   if (i === 3) {
+        //     acc.push(
+        //       <li key="advertise">
+        //         <InFeedAdvertise />
+        //       </li>
+        //     );
+        //   }
+        //   acc.push(curr);
+        //   return acc;
+        // }, [])
+      }
       {loading && (
         <li>
           <ul>

client/src/components/advertises/InFeedAdvertise.jsx

@@ -1,12 +1,6 @@
 import { useEffect } from "react";
 
-const InFeedAdvertise = ({
-  className = "adsbygoogle",
-  client = "ca-pub-8658385917169302",
-  slot = "1562420452",
-  format = "fluid",
-  layoutKey = "-fp+68-11-df+sd",
-}) => {
+const InFeedAdvertise = () => {
   useEffect(() => {
     if (process.env.NODE_ENV === "production")
       try {
@@ -24,10 +18,9 @@ const InFeedAdvertise = ({
         style={{
           background: "#8aff8a",
           color: "black",
-          fontSize: "18px",
-          fontWeight: "bold",
-          textAlign: "center",
-          padding: "16px",
+          display: "inline-block",
+          width: "140px",
+          height: "500px",
         }}
       >
         광고 표시 영역
@@ -36,18 +29,15 @@ const InFeedAdvertise = ({
   //production인 경우 구글 광고 표시
   return (
     <ins
-      className={className}
+      className="adsbygoogle"
       style={{
-        overflowX: "auto",
-        overflowY: "hidden",
-        display: "block",
-        textAlign: "center",
+        display: "inline-block",
+        width: "140px",
+        height: "500px",
       }}
-      data-ad-client={client}
-      data-ad-slot={slot}
-      data-ad-format={format}
-      data-ad-layout-key={layoutKey}
-    />
+      data-ad-client="ca-pub-8658385917169302"
+      data-ad-slot="5603304488"
+    ></ins>
   );
 };