✨ feat: release 브랜치에 Adsense 추가 (#401 cherry-pick)

Author: seojin-v6x

package.json

@@ -5,6 +5,7 @@
   "homepage": "https://naegasogaeseo-dev.kro.kr/",
   "dependencies": {
     "@craco/craco": "^6.4.3",
+    "@ctrl/react-adsense": "1.6.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",

public/index.html

@@ -25,6 +25,11 @@
     />
     <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-4DZZ8ZJJYS"></script>
+    <script
+      async
+      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6625943874572956"
+      crossorigin="anonymous"
+    ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {

src/application/utils/constant.ts

@@ -1,4 +1,4 @@
-const isProduction = process.env.NODE_ENV === 'production';
+export const isProduction = process.env.NODE_ENV === 'production';
 export const DOMAIN = isProduction ? 'https://naegasogaeseo-dev.kro.kr' : 'http://localhost:3000';
 
 export const PAGES = { KEYWORD: 15, NOTICE: 15, PICK: 10, SEARCHED_USER: 16 };

src/presentation/components/GoogleAdsense/index.tsx

@@ -0,0 +1,20 @@
+import { Adsense } from '@ctrl/react-adsense';
+import { isProduction } from '@utils/constant';
+import { StDummyAdvertiseBlock } from './style';
+
+function GoogleAdsense() {
+  if (!isProduction) {
+    return <StDummyAdvertiseBlock />;
+  }
+
+  return (
+    <Adsense
+      client="ca-pub-6625943874572956"
+      slot="8554867589"
+      layout="display"
+      style={{ width: '100%', height: '50px', position: 'absolute', top: 0, left: 0 }}
+    />
+  );
+}
+
+export default GoogleAdsense;

src/presentation/components/GoogleAdsense/style.ts

@@ -0,0 +1,11 @@
+import { COLOR } from '@styles/common/color';
+import styled from 'styled-components';
+
+export const StDummyAdvertiseBlock = styled.div`
+  height: 50px;
+  background-color: ${COLOR.WHITE};
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+`;

src/presentation/pages/Neoga/Link/index.tsx

@@ -67,7 +67,8 @@ export default function NeogaLink() {
     createdFormData && navigate(`/neoga/${createdFormData.formID}/detail/form`);
 
   useEffect(() => {
-    if (!(viewMode === VIEW_MODE.NEW || viewMode === VIEW_MODE.CREATED)) navigate('/');
+    setIsCreated(true);
+    // if (!(viewMode === VIEW_MODE.NEW || viewMode === VIEW_MODE.CREATED)) navigate('/');
     if (viewMode === VIEW_MODE.CREATED) createFormCode();
   }, []);
 

src/presentation/pages/NeososeoForm/Finish/index.tsx

@@ -1,4 +1,5 @@
 import { ImgAnswerDone } from '@assets/images';
+import GoogleAdsense from '@components/GoogleAdsense';
 import { useNavigate } from 'react-router-dom';
 import { StButton } from '../style';
 import { StBody, StNeososeoFinish } from './style';
@@ -8,6 +9,7 @@ function NeososeoFormFinish() {
 
   return (
     <StNeososeoFinish>
+      <GoogleAdsense />
       <StBody>
         <ImgAnswerDone />
         <div>답변이 전달되었어요</div>

src/presentation/pages/NeososeoForm/Finish/style.ts

@@ -5,29 +5,25 @@ import styled from 'styled-components';
 export const StBody = styled.div`
   display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
+  padding-bottom: 2px;
+  & > div:nth-child(2) {
+    color: ${COLOR.GRAY_8};
+    ${FONT_STYLES.SB_20_TITLE}
+  }
+  & > div:nth-child(3) {
+    margin-top: 8px;
+    color: ${COLOR.GRAY_5};
+    ${FONT_STYLES.R_15_TITLE}
+  }
 `;
 
 export const StNeososeoFinish = styled.div`
   height: 100vh;
   width: 100%;
-  padding: 50px 20px;
+  padding: 0 20px 50px 20px;
   display: grid;
   grid-template-rows: auto 58px;
-  & > div:nth-child(1) {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding-bottom: 52px;
-    & > div:nth-child(2) {
-      color: ${COLOR.GRAY_8};
-      ${FONT_STYLES.SB_20_TITLE}
-    }
-    & > div:nth-child(3) {
-      margin-top: 8px;
-      color: ${COLOR.GRAY_5};
-      ${FONT_STYLES.R_15_TITLE}
-    }
-  }
+  position: relative;
 `;

src/presentation/pages/NeososeoForm/index.tsx

@@ -1,4 +1,5 @@
 import { useParams, Outlet } from 'react-router-dom';
+import GoogleAdsense from '@components/GoogleAdsense';
 
 import { useGetFormInfo } from '@hooks/queries/neososeo-form';
 import { StNeososeoFormPage } from './style';
@@ -9,6 +10,7 @@ function NeososeoFormPage() {
 
   return (
     <StNeososeoFormPage>
+      <GoogleAdsense />
       {!isLoading && neososeoFormData !== undefined && <Outlet context={{ neososeoFormData }} />}
     </StNeososeoFormPage>
   );

src/presentation/pages/NeososeoForm/style.ts

@@ -9,6 +9,13 @@ export const StNeososeoFormPage = styled.div`
   display: flex;
   flex-direction: column;
   position: relative;
+  padding-top: 50px;
+  position: relative;
+
+  & > *:first-child {
+    padding: 0 20px;
+    padding-top: 50px;
+  }
 `;
 
 export const StNeososeoTitle = styled.div`
@@ -77,7 +84,7 @@ export const StNeososeoFormLayout = styled.div`
   margin-bottom: 48px;
   & > div:nth-child(1) {
     padding-top: 22px;
-    padding-bottom: 134px;
+    padding-bottom: 84px;
   }
   & > div:nth-child(2) {
     display: flex;