Merge pull request #54 from frontend-opensource-project/URH-66/use-device-detect

[URH-66] useDeviceDetect 신규

Author: foresec

src/hooks/useDetectDevice.test.ts

@@ -0,0 +1,160 @@
+import { renderHook } from '@testing-library/react';
+import useDetectDevice from './useDetectDevice';
+import * as utils from '../utils';
+
+const mockUserAgent = (userAgent: string) => {
+  Object.defineProperty(navigator, 'userAgent', {
+    value: userAgent,
+    configurable: true,
+  });
+};
+
+const uaAndroid14 =
+  'Mozilla/5.0 (Linux; Android 14; Pixel 6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.6613.88 Mobile Safari/537.36';
+const uaiOS17 =
+  'Mozilla/5.0 (iPhone; CPU iPhone OS 17_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1';
+const uaWindows10 = {
+  edge: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 Edg/127.0.2651.105',
+  chrome:
+    'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36',
+};
+const uaMac14 = {
+  safari:
+    'Mozilla/5.0 (Macintosh; Intel Mac OS X 14_6_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15',
+  firefox:
+    'Mozilla/5.0 (Macintosh; Intel Mac OS X 14.6; rv:129.0) Gecko/20100101 Firefox/129.0',
+};
+const uaLinux =
+  'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36';
+const uaWhale =
+  'mozilla/5.0 (linux; android 11; sm-a908n build/rp1a.200720.012; wv) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/80.0.3987.163 whale/1.0.0.0 crosswalk/25.80.14.29 mobile safari/537.36 naver(inapp; search; 1000; 11.6.7)';
+
+describe('useDetectDevice', () => {
+  let originalUserAgent: string;
+
+  beforeEach(() => {
+    originalUserAgent = navigator.userAgent;
+  });
+
+  afterEach(() => {
+    mockUserAgent(originalUserAgent);
+  });
+
+  test('모바일 디바이스(Android)를 감지한다.', () => {
+    mockUserAgent(uaAndroid14);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.isMobile).toBe(true);
+    expect(result.current.isDesktop).toBe(false);
+  });
+
+  test('모바일 디바이스(iOS)를 감지한다.', () => {
+    mockUserAgent(uaiOS17);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.isMobile).toBe(true);
+    expect(result.current.isDesktop).toBe(false);
+  });
+
+  test('데스크탑 디바이스를 올바르게 감지한다.', () => {
+    mockUserAgent(uaWindows10.chrome);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.isMobile).toBe(false);
+    expect(result.current.isDesktop).toBe(true);
+  });
+
+  test('iOS 환경을 감지한다.', () => {
+    mockUserAgent(uaiOS17);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.os).toBe('iOS');
+  });
+
+  test('Android 환경을 감지한다.', () => {
+    mockUserAgent(uaAndroid14);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.os).toBe('Android');
+  });
+
+  test('Windows 환경을 감지한다.', () => {
+    mockUserAgent(uaWindows10.chrome);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.os).toBe('Windows');
+  });
+
+  test('MacOS 환경을 감지한다.', () => {
+    mockUserAgent(uaMac14.safari);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.os).toBe('MacOS');
+  });
+
+  test('Linux 환경을 감지한다.', () => {
+    mockUserAgent(uaLinux);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.os).toBe('Linux');
+  });
+
+  test('Chrome 브라우저를 감지한다.', () => {
+    mockUserAgent(uaWindows10.chrome);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.browser).toBe('Chrome');
+  });
+
+  test('Firefox 브라우저를 감지한다.', () => {
+    mockUserAgent(uaMac14.firefox);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.browser).toBe('Firefox');
+  });
+
+  test('Safari 브라우저를 감지한다.', () => {
+    mockUserAgent(uaMac14.safari);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.browser).toBe('Safari');
+  });
+
+  test('Whale 브라우저를 감지한다.', () => {
+    mockUserAgent(uaWhale);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.browser).toBe('Whale');
+  });
+
+  test('Edge 브라우저를 감지한다.', () => {
+    mockUserAgent(uaWindows10.edge);
+
+    const { result } = renderHook(() => useDetectDevice());
+
+    expect(result.current.browser).toBe('Edge');
+  });
+
+  test('isClient가 false일 때, 디바이스 정보가 초기값으로 유지된다', () => {
+    jest.spyOn(utils, 'isClient', 'get').mockReturnValue(false);
+    expect(utils.isClient).toBe(false);
+
+    const { result } = renderHook(() => useDetectDevice());
+    expect(result.current.isMobile).toBe(false);
+    expect(result.current.isDesktop).toBe(false);
+    expect(result.current.os).toBe('');
+    expect(result.current.browser).toBe('');
+  });
+});

src/hooks/useDetectDevice.ts

@@ -0,0 +1,100 @@
+import { useEffect, useState } from 'react';
+import { isClient } from '../utils';
+
+interface UseDeviceDetectReturns {
+  isMobile: boolean;
+  isDesktop: boolean;
+  os: string;
+  browser: string;
+}
+
+const DEVICE_PATTERNS = {
+  mobile: /Mobi/i,
+};
+
+const OS_PATTERNS = {
+  windows: /Windows/i,
+  macOS: /Macintosh|Mac/i,
+  linux: /Linux/i,
+  android: /Android/i,
+  iOS: /iPhone|iPad|iPod/i,
+};
+
+const BROWSER_PATTERNS = {
+  whale: /Whale/i,
+  edge: /Edg/i,
+  chrome: /Chrome/i,
+  safari: /Safari/i,
+  firefox: /Firefox/i,
+};
+
+/**
+ * 사용자 디바이스의 유형, os, 브라우저를 감지하는 훅.
+ *
+ * @returns {UseDeviceDetectReturns} - 디바이스 정보 객체(isMobile, isTablet, isDesktop, os, browser)를 반환합니다.
+ *
+ * @property {boolean} isMobile - 사용 중인 디바이스의 Mobile 여부를 나타냅니다.
+ * @property {boolean} isTablet - 사용 중인 디바이스의 Tablet 여부를 나타냅니다.
+ * @property {boolean} isDesktop - 사용 중인 디바이스의 Desktop 여부를 나타냅니다.
+ * @property {string} os - 사용 중인 디바이스의 OS 이름을 나타냅니다.
+ * @property {string} browser - 사용 중인 브라우저의 이름을 나타냅니다.
+ *
+ * @description
+ * 사용자의 userAgent 문자열을 기반으로 디바이스 유형(Mobile, Tablet, Desktop), 운영체제(OS),
+ * 그리고 브라우저 종류를 감지하여 반환합니다.
+ */
+
+const useDetectDevice = (): UseDeviceDetectReturns => {
+  const [deviceInfo, setDeviceInfo] = useState({
+    isMobile: false,
+    isDesktop: false,
+    os: '',
+    browser: '',
+  });
+
+  const detectDeviceType = (userAgent: string) => {
+    const isMobile = DEVICE_PATTERNS.mobile.test(userAgent);
+    const isDesktop = !isMobile;
+    return { isMobile, isDesktop };
+  };
+
+  const detectOS = (userAgent: string) => {
+    if (OS_PATTERNS.iOS.test(userAgent)) return 'iOS';
+    if (OS_PATTERNS.android.test(userAgent)) return 'Android';
+    if (OS_PATTERNS.windows.test(userAgent)) return 'Windows';
+    if (OS_PATTERNS.macOS.test(userAgent)) return 'MacOS';
+    if (OS_PATTERNS.linux.test(userAgent)) return 'Linux';
+    return '';
+  };
+
+  const detectBrowser = (userAgent: string) => {
+    // Order is fixed(due to the structure of the userAgent): Whale -> Edge -> Chrome -> Safari -> Firefox
+    if (BROWSER_PATTERNS.whale.test(userAgent)) return 'Whale';
+    if (BROWSER_PATTERNS.edge.test(userAgent)) return 'Edge';
+    if (BROWSER_PATTERNS.chrome.test(userAgent)) return 'Chrome';
+    if (BROWSER_PATTERNS.safari.test(userAgent)) return 'Safari';
+    if (BROWSER_PATTERNS.firefox.test(userAgent)) return 'Firefox';
+    return '';
+  };
+
+  useEffect(() => {
+    if (!isClient) return;
+
+    const UA = navigator.userAgent;
+
+    const { isMobile, isDesktop } = detectDeviceType(UA);
+    const os = detectOS(UA);
+    const browser = detectBrowser(UA);
+
+    setDeviceInfo({
+      isMobile,
+      isDesktop,
+      os,
+      browser,
+    });
+  }, []);
+
+  return deviceInfo;
+};
+
+export default useDetectDevice;