diff --git a/.vscode/settings.json b/.vscode/settings.json index 08b0782..4387795 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -27,6 +27,7 @@ "typescript.preferences.importModuleSpecifier": "relative", "prettier.configPath": ".prettierrc.js", "cSpell.words": [ + "adfit", "clsx", "formatjs", "hyochan", diff --git a/app/[lang]/(common)/AdFit.tsx b/app/[lang]/(common)/AdFit.tsx index 857c457..cb6c52b 100644 --- a/app/[lang]/(common)/AdFit.tsx +++ b/app/[lang]/(common)/AdFit.tsx @@ -1,45 +1,49 @@ -import React, { CSSProperties } from "react"; -import { useEffect } from "react"; +import React, {CSSProperties} from 'react'; +import {useEffect} from 'react'; +import {useMediaQuery} from 'usehooks-ts'; export default function AdFit({ - className = "adfit", + className, style, unit, height, width, }: { - className?: string; + className: string; style?: CSSProperties; unit: string; width: number; height: number; }): JSX.Element { + const isMobile = useMediaQuery('(max-width: 768px)'); + const convertedClassName = isMobile ? `${className}-mobile` : className; + useEffect(() => { const timeout = setTimeout(() => { - let ins = document.createElement("ins"); - let scr = document.createElement("script"); - ins.className = "kakao_ad_area"; + let ins = document.createElement('ins'); + let scr = document.createElement('script'); + ins.className = 'kakao_ad_area'; // @ts-ignore - ins.style = "display:none; width:100%;"; + 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); + 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(`.${convertedClassName}`)?.appendChild(ins); + document.querySelector(`.${convertedClassName}`)?.appendChild(scr); }, 100); return () => { clearTimeout(timeout); }; - }, [className, height, unit, width]); + }, [className, convertedClassName, height, unit, width]); return (
-
+
); } diff --git a/app/[lang]/(common)/AdFitResponsive.tsx b/app/[lang]/(common)/AdFitResponsive.tsx index d32c332..06d494b 100644 --- a/app/[lang]/(common)/AdFitResponsive.tsx +++ b/app/[lang]/(common)/AdFitResponsive.tsx @@ -5,16 +5,20 @@ import AdFit from './AdFit'; import {useEffect, useState} from 'react'; export default function AdFitResponsive({ + units, className, + adfitClassName, }: { className?: string; + units: { + mobile: string; + pc: string; + }; + adfitClassName: string; }): JSX.Element { const isMobile = useMediaQuery('(max-width: 768px)'); const [loaded, setLoaded] = useState(false); - console.log('isMobile: ', isMobile); - console.log('loaded: ', loaded); - useEffect(() => { const timeout = setTimeout(() => { setLoaded(true); @@ -33,26 +37,22 @@ export default function AdFitResponsive({ {!isMobile ? (
) : null} {isMobile ? (
) : null} diff --git a/app/[lang]/(home)/Hero/index.tsx b/app/[lang]/(home)/Hero/index.tsx index 214b3c3..ba31fb7 100644 --- a/app/[lang]/(home)/Hero/index.tsx +++ b/app/[lang]/(home)/Hero/index.tsx @@ -17,7 +17,7 @@ import TextInput from '../../(common)/TextInput'; import StatsSymbols from './StatsSymbol'; import StatsUrlCard from './StatsUrlCards'; -import { useMediaQuery } from 'usehooks-ts'; +import {useMediaQuery} from 'usehooks-ts'; import AdFit from '../../(common)/AdFit'; import AdFitResponsive from '../../(common)/AdFitResponsive'; @@ -59,7 +59,7 @@ function Hero({t, statsInfo}: Props): ReactElement { }, ]; - const isMobile = useMediaQuery('(max-width: 768px)') + const isMobile = useMediaQuery('(max-width: 768px)'); const [selectedPluginType, setSelectedPluginType] = useState(statTypes[0]); const [login, setLogin] = useState(''); const [searchLogin, setSearchedUID] = useState(''); @@ -116,7 +116,14 @@ function Hero({t, statsInfo}: Props): ReactElement { {t.developerPowerMeterDesc}

{/* Begin: AdFit */} - + {/* End: AdFit */} {/* Begin: Search Form */}
{/* Begin: AdFit */} - {!isMobile ? ( -
- -
- ) : null} - {isMobile ? ( -
- -
- ) : null} + {/* End: AdFit */} ); diff --git a/app/[lang]/recent-list/page.tsx b/app/[lang]/recent-list/page.tsx index af52b47..50cf4de 100644 --- a/app/[lang]/recent-list/page.tsx +++ b/app/[lang]/recent-list/page.tsx @@ -35,11 +35,12 @@ export default async function Page({ return (
-

{recentList.title}

- +
- +
- -

- {t.title} -

+
+

+ {t.title} +

+ +
{children}
); diff --git a/app/[lang]/stats/[login]/Scouter/index.tsx b/app/[lang]/stats/[login]/Scouter/index.tsx index b40a47c..1c91fad 100644 --- a/app/[lang]/stats/[login]/Scouter/index.tsx +++ b/app/[lang]/stats/[login]/Scouter/index.tsx @@ -45,7 +45,13 @@ export default function Scouter(props: ScouterProps): ReactElement { setSelectedStat(name); }} /> - +
); diff --git a/app/[lang]/stats/page.tsx b/app/[lang]/stats/page.tsx index 88f4f4d..ae3d9e7 100644 --- a/app/[lang]/stats/page.tsx +++ b/app/[lang]/stats/page.tsx @@ -20,7 +20,14 @@ export default async function Page({

{t.searchUserHint}.

- + ); } diff --git a/styles/output.css b/styles/output.css index 6f22b06..5e91583 100644 --- a/styles/output.css +++ b/styles/output.css @@ -1019,10 +1019,6 @@ input[type='search']::-webkit-search-decoration, right: 0px; } -.right-6 { - right: 1.5rem; -} - .top-12 { top: 3rem; } @@ -1031,10 +1027,6 @@ input[type='search']::-webkit-search-decoration, top: 3.5rem; } -.top-20 { - top: 5rem; -} - .m-2 { margin: 0.5rem; } @@ -1123,6 +1115,10 @@ input[type='search']::-webkit-search-decoration, margin-bottom: 10px; } +.mb-\[28px\] { + margin-bottom: 28px; +} + .mb-\[32px\] { margin-bottom: 32px; } @@ -1404,6 +1400,10 @@ input[type='search']::-webkit-search-decoration, max-width: 256; } +.max-w-\[320px\] { + max-width: 320px; +} + .max-w-\[480px\] { max-width: 480px; } @@ -2256,14 +2256,6 @@ input[type='search']::-webkit-search-decoration, display: none; } - .max-\[480px\]\:p-6 { - padding: 1.5rem; - } - - .max-\[480px\]\:p-2 { - padding: 0.5rem; - } - .max-\[480px\]\:px-0 { padding-left: 0px; padding-right: 0px; @@ -2274,14 +2266,6 @@ input[type='search']::-webkit-search-decoration, padding-right: 1.5rem; } - .max-\[480px\]\:pt-6 { - padding-top: 1.5rem; - } - - .max-\[480px\]\:pt-12 { - padding-top: 3rem; - } - .max-\[480px\]\:pt-10 { padding-top: 2.5rem; } @@ -2334,6 +2318,12 @@ input[type='search']::-webkit-search-decoration, } } +@media (max-width: 360px) { + .max-\[360px\]\:hidden { + display: none; + } +} + @media (max-width: 320px) { .max-\[320px\]\:items-start { align-items: flex-start;