feat: adfit

hyochan · Sep 18, 2023 · be9152e · be9152e · vercel · Sep 18, 2023
1 parent 2b3b53d
commit be9152e
Show file tree

Hide file tree

Showing 10 changed files with 227 additions and 11 deletions.
diff --git a/app/[lang]/(common)/AdFit.tsx b/app/[lang]/(common)/AdFit.tsx
@@ -0,0 +1,45 @@
+import React, { CSSProperties } from "react";
+import { useEffect } from "react";
+
+export default function AdFit({
+  className = "adfit",
+  style,
+  unit,
+  height,
+  width,
+}: {
+  className?: string;
+  style?: CSSProperties;
+  unit: string;
+  width: number;
+  height: number;
+}): JSX.Element {
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      let ins = document.createElement("ins");
+      let scr = document.createElement("script");
+      ins.className = "kakao_ad_area";
+      // @ts-ignore
+      ins.style = "display:none; width:100%;";
+      // @ts-ignore
+      scr.async = "true";
+      scr.type = "text/javascript";
+      scr.src = "//t1.daumcdn.net/kas/static/ba.min.js";
+      ins.setAttribute("data-ad-width", width.toString());
+      ins.setAttribute("data-ad-height", height.toString());
+      ins.setAttribute("data-ad-unit", unit.toString());
+      document.querySelector(`.${className}`)?.appendChild(ins);
+      document.querySelector(`.${className}`)?.appendChild(scr);
+    }, 100);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [className, height, unit, width]);
+
+  return (
+    <div style={style}>
+      <div className={className}></div>
+    </div>
+  );
+}
diff --git a/app/[lang]/(common)/AdFitResponsive.tsx b/app/[lang]/(common)/AdFitResponsive.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { useMediaQuery } from "usehooks-ts";
+import AdFit from "./AdFit";
+
+export default function AdFitResponsive({className}: {className?: string}): JSX.Element {
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  return <div className={className}>
+    {/* Begin: AdFit */}
+    {!isMobile ? (
+      <div>
+        <AdFit
+          unit="DAN-SEcRVdSHkh05H0jO"
+          height={90}
+          width={728}
+          className="adfit-top"
+          style={{
+            flex: 1,
+          }}
+        />
+      </div>
+    ) : null}
+    {isMobile ? (
+      <div>
+        <AdFit
+          unit="DAN-dAqcoLWvKpYEtbtq"
+          height={100}
+          width={320}
+          className="adfit-top-mobile"
+          style={{
+            flex: 1,
+          }}
+        />
+      </div>
+    ) : null}
+  </div>
+}
diff --git a/app/[lang]/(home)/Hero/index.tsx b/app/[lang]/(home)/Hero/index.tsx
@@ -17,6 +17,8 @@ import TextInput from '../../(common)/TextInput';
 
 import StatsSymbols from './StatsSymbol';
 import StatsUrlCard from './StatsUrlCards';
+import { useMediaQuery } from 'usehooks-ts';
+import AdFit from '../../(common)/AdFit';
 
 const rootUrl = `${process.env.NEXT_PUBLIC_ROOT_URL}/api`;
 
@@ -56,6 +58,7 @@ function Hero({t, statsInfo}: Props): ReactElement {
     },
   ];
 
+  const isMobile = useMediaQuery('(max-width: 768px)')
   const [selectedPluginType, setSelectedPluginType] = useState(statTypes[0]);
   const [login, setLogin] = useState('');
   const [searchLogin, setSearchedUID] = useState('');
@@ -111,6 +114,36 @@ function Hero({t, statsInfo}: Props): ReactElement {
         <p className="body1 text-[20px] text-left mb-[36px] opacity-50">
           {t.developerPowerMeterDesc}
         </p>
+        {/* Begin: AdFit */}
+        {!isMobile ? (
+          <div>
+            <AdFit
+              unit="DAN-SEcRVdSHkh05H0jO"
+              height={90}
+              width={728}
+              className="adfit-top"
+              style={{
+                flex: 1,
+                marginBottom: 40,
+              }}
+            />
+          </div>
+        ) : null}
+        {isMobile ? (
+          <div>
+            <AdFit
+              unit="DAN-dAqcoLWvKpYEtbtq"
+              height={100}
+              width={320}
+              className="adfit-top-mobile"
+              style={{
+                flex: 1,
+                marginBottom: 40,
+              }}
+            />
+          </div>
+        ) : null}
+        {/* End: AdFit */}
         {/* Begin: Search Form */}
         <form
           onSubmit={handleSubmit(searchUser)}

diff --git a/app/[lang]/(home)/Home.tsx b/app/[lang]/(home)/Home.tsx
@@ -10,6 +10,7 @@ import {initAmplitude} from '../../../src/utils/webUtils';
 import Hero from './Hero';
 import SectionFooter from './SectionFooter';
 import SectionHowItWorks from './SectionHowItWorks';
+import AdFit from '../(common)/AdFit';
 
 type Props = {
   t: Translates['home'];

diff --git a/app/[lang]/(home)/SectionFooter.tsx b/app/[lang]/(home)/SectionFooter.tsx
@@ -6,6 +6,8 @@ import type {Translates} from '../../../src/localization';
 
 import imgBgSection1 from '@/public/assets/bg_section1.png';
 import SvgScouter from '@/public/assets/scouter.svg';
+import { useMediaQuery } from 'usehooks-ts';
+import AdFit from '../(common)/AdFit';
 
 const inter = Inter({subsets: ['latin']});
 
@@ -14,6 +16,8 @@ type Props = {
 };
 
 export default function SectionFooter({t}: Props): ReactElement {
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
   return (
     <div
       className={clsx(
@@ -44,7 +48,7 @@ export default function SectionFooter({t}: Props): ReactElement {
         <SvgScouter className="w-screen px-12 max-w-6xl" />
         <div
           className={clsx(
-            'h-[22px] mb-28 mt-12',
+            'h-[22px] mb-12 mt-12',
             'flex flex-row items-center',
             inter.className,
           )}
@@ -69,6 +73,36 @@ export default function SectionFooter({t}: Props): ReactElement {
           </p>
         </div>
       </div>
+      {/* Begin: AdFit */}
+      {!isMobile ? (
+        <div>
+          <AdFit
+            unit="DAN-SEcRVdSHkh05H0jO"
+            height={90}
+            width={728}
+            className="adfit-bottom"
+            style={{
+              flex: 1,
+              marginBottom: 80,
+            }}
+          />
+        </div>
+      ) : null}
+      {isMobile ? (
+        <div>
+          <AdFit
+            unit="DAN-dAqcoLWvKpYEtbtq"
+            height={100}
+            width={320}
+            className="adfit-bottom-mobile"
+            style={{
+              flex: 1,
+              marginBottom: 80,
+            }}
+          />
+        </div>
+      ) : null}
+      {/* End: AdFit */}
     </div>
   );
 }
diff --git a/app/[lang]/recent-list/page.tsx b/app/[lang]/recent-list/page.tsx
@@ -11,6 +11,7 @@ import GithubUserList from './GithubUserList';
 
 import {H1} from '~/components/Typography';
 import type {Locale} from '~/i18n';
+import AdFitResponsive from '../(common)/AdFitResponsive';
 
 const inter = Inter({subsets: ['latin']});
 
@@ -34,16 +35,23 @@ export default async function Page({
 
   return (
     <div className={clsx('flex-1 bg-paper overflow-hidden', 'flex flex-col')}>
-      <H1
-        className={clsx(
-          'text-[44px] font-bold mt-12 mb-[32px] mx-6',
-          'max-[480px]:text-[28px] max-[480px]:mb-0 max-[480px]:my-4',
-          inter.className,
-        )}
+      <div className='
+        mt-4 mb-[32px] mx-6
+        flex-row items-center
+        max-[480px]:mb-0 max-[480px]:my-4
+      '
       >
-        {recentList.title}
-      </H1>
-
+        <H1
+          className={clsx(
+            'text-[44px] font-bold',
+            'max-[560px]:text-[28px]',
+            inter.className,
+          )}
+        >
+          {recentList.title}
+        </H1>
+        <AdFitResponsive className='mx-6 mb-2'/>
+      </div>
       <GithubUserList
         initialData={userPlugins as UserListItem[]}
         t={recentList}

diff --git a/app/[lang]/sign-in/page.tsx b/app/[lang]/sign-in/page.tsx
@@ -8,6 +8,7 @@ import {getTranslates} from '../../../src/localization';
 import SocialButtons from './SocialButtons';
 
 import type {Locale} from '~/i18n';
+import AdFitResponsive from '../(common)/AdFitResponsive';
 
 const inter = Inter({subsets: ['latin']});
 
@@ -46,12 +47,13 @@ export default async function Page({
   return (
     <div
       className={clsx(
-        'bg-modal-background',
+        'bg-modal-background pb-20',
         'flex-1 bg-paper overflow-hidden',
         'max-md:px-4',
         'flex flex-col justify-center items-center',
       )}
     >
+      <AdFitResponsive className='mx-6 mb-8'/>
       <div
         className={clsx(
           'bg-modal max-w-[480px] rounded-2xl px-12 py-16',

diff --git a/app/[lang]/stats/[login]/Scouter/index.tsx b/app/[lang]/stats/[login]/Scouter/index.tsx
@@ -11,6 +11,7 @@ import styles from '../../../styles.module.css';
 
 import StatsDetails from './StatsDetails';
 import StatsHeader from './StatsHeader';
+import AdFitResponsive from '../../../(common)/AdFitResponsive';
 
 export const statNames = [
   'tree',
@@ -44,6 +45,7 @@ export default function Scouter(props: ScouterProps): ReactElement {
           setSelectedStat(name);
         }}
       />
+      <AdFitResponsive/>
       <StatsDetails {...props} selectedStat={selectedStat} />
     </div>
   );

diff --git a/app/[lang]/stats/page.tsx b/app/[lang]/stats/page.tsx
@@ -4,6 +4,7 @@ import type {Locale} from '../../../src/i18n';
 import {getTranslates} from '../../../src/localization';
 
 import Container from './Container';
+import AdFitResponsive from '../(common)/AdFitResponsive';
 
 type Props = {
   params: {lang: Locale};
@@ -19,6 +20,7 @@ export default async function Page({
       <div className="max-[480px]:p-6">
         <p className="text-dark dark:text-paper-light">{t.searchUserHint}.</p>
       </div>
+      <AdFitResponsive className='mt-8'/>
     </Container>
   );
 }
diff --git a/styles/output.css b/styles/output.css
@@ -1506,6 +1506,10 @@ input[type='search']::-webkit-search-decoration,
   gap: 8px;
 }
 
+.self-start {
+  align-self: flex-start;
+}
+
 .self-center {
   align-self: center;
 }
@@ -1682,6 +1686,11 @@ input[type='search']::-webkit-search-decoration,
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-cover {
   background-size: cover;
 }
@@ -1850,6 +1859,18 @@ input[type='search']::-webkit-search-decoration,
   padding-top: 1rem;
 }
 
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
+.pb-20 {
+  padding-bottom: 5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2219,6 +2240,24 @@ input[type='search']::-webkit-search-decoration,
   }
 }
 
+@media (max-width: 620px) {
+  .max-\[620px\]\:text-\[28px\] {
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 560px) {
+  .max-\[560px\]\:text-\[28px\] {
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 520px) {
+  .max-\[520px\]\:text-\[28px\] {
+    font-size: 28px;
+  }
+}
+
 @media (max-width: 480px) {
   .max-\[480px\]\:mx-0 {
     margin-left: 0px;
@@ -2263,6 +2302,18 @@ input[type='search']::-webkit-search-decoration,
   .max-\[480px\]\:text-\[28px\] {
     font-size: 28px;
   }
+
+  .max-\[480px\]\:text-\[16px\] {
+    font-size: 16px;
+  }
+
+  .max-\[480px\]\:text-\[8px\] {
+    font-size: 8px;
+  }
+
+  .max-\[480px\]\:text-\[px\] {
+    color: px;
+  }
 }
 
 @media (max-width: 425px) {