fix: device detecetion

Author: velopert

src/components/common/NarrowAd.tsx

@@ -1,15 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import media from '../../lib/styles/media';
+import { isTablet } from '../../lib/deviceDetection';
 
 const Wrapper = styled.div`
-  display: none;
-  ${media.medium} {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 16px 0;
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 16px 0;
 `;
 
 const AdBlock = styled.div<{ width: number; height: number }>`
@@ -48,7 +46,7 @@ function AdInsComponent({
 }
 
 export default function NarrowAd() {
-  const [isMobile, setIsMobile] = useState(false);
+  const [isMobileOrTablet, setIsMobileOrTablet] = useState(false);
   const [mode, setMode] = useState<'wide' | 'narrow'>('wide');
 
   useEffect(() => {
@@ -57,8 +55,9 @@ export default function NarrowAd() {
       /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
         userAgent,
       );
+    const checkIsTablet = isTablet();
 
-    setIsMobile(checkIsMobile);
+    setIsMobileOrTablet(checkIsMobile || checkIsTablet);
 
     // Set mode based on window width
     const windowWidth = window.innerWidth;
@@ -80,14 +79,12 @@ export default function NarrowAd() {
   }, []);
 
   const size =
-    mode === 'narrow'
-      ? { width: 300, height: 50 }
-      : { width: 728, height: 90 };
+    mode === 'narrow' ? { width: 300, height: 50 } : { width: 728, height: 90 };
   const adSlot = mode === 'narrow' ? '1778476944' : '5606751754';
 
   return (
     <Wrapper>
-      {isMobile && mode === 'narrow' && (
+      {isMobileOrTablet && mode === 'narrow' && (
         <AdBlock width={size.width} height={size.height}>
           <AdInsComponent
             width={size.width}
@@ -96,7 +93,7 @@ export default function NarrowAd() {
           />
         </AdBlock>
       )}
-      {isMobile && mode === 'wide' && (
+      {isMobileOrTablet && mode === 'wide' && (
         <AdBlock width={size.width} height={size.height}>
           <AdInsComponent
             width={size.width}

src/components/post/SideAd.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef, useCallback } from 'react';
 import styled from 'styled-components';
 import media from '../../lib/styles/media';
 import { getScrollTop } from '../../lib/utils';
+import { isTablet } from '../../lib/deviceDetection';
 
 const Wrapper = styled.div`
   position: relative;
@@ -80,10 +81,11 @@ export default function SideAd() {
       /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
         userAgent,
       );
+    const checkIsTablet = isTablet();
     const hasMinWidth = window.innerWidth >= 1200;
     const hasMinHeight = window.innerHeight >= 674;
 
-    setIsDesktop(!isMobile && hasMinWidth && hasMinHeight);
+    setIsDesktop(!isMobile && !checkIsTablet && hasMinWidth && hasMinHeight);
 
     // Set mode based on window height
     const windowHeight = window.innerHeight;
@@ -115,10 +117,11 @@ export default function SideAd() {
         /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
           userAgent,
         );
+      const checkIsTablet = isTablet();
       const hasMinWidth = windowWidth >= 1200;
       const hasMinHeight = windowHeight >= 674;
 
-      setIsDesktop(!isMobile && hasMinWidth && hasMinHeight);
+      setIsDesktop(!isMobile && !checkIsTablet && hasMinWidth && hasMinHeight);
     };
 
     window.addEventListener('resize', handleResize);

src/lib/deviceDetection.ts

@@ -0,0 +1,22 @@
+export function isIPad() {
+  const ua = navigator.userAgent || navigator.vendor || (window as any).opera;
+  const platform = navigator.platform;
+
+  // iPadOS 13 이상: MacIntel + 터치포인트 존재
+  const iPadOS = platform === 'MacIntel' && navigator.maxTouchPoints > 1;
+
+  // iOS 12 이하 또는 구형 iPad 인식
+  const legacyiPad = /iPad/.test(ua);
+
+  // 일부 iPad Pro는 iPhone처럼 나오는 경우도 있어서 iOS 디바이스 + 큰 화면 기준 추가
+  const weirdSafariCase = /Macintosh/.test(ua) && 'ontouchend' in document;
+
+  return iPadOS || legacyiPad || weirdSafariCase;
+}
+
+export function isTablet() {
+  const ua = navigator.userAgent.toLowerCase();
+  const checkIPad = isIPad();
+
+  return checkIPad || /tablet|(android(?!.*mobile))/i.test(ua);
+}