📚 Part 16 모바일 대응

---

📁 모바일 대응

📌 모바일 대응 / 반응형 웹 (responsive web)

1. viewport
2. 상대값을 가진 레이아웃
3. 화면 너비 감지 (mediaquery)

export type MediaQuery = "mobile" | "tablet" | "desktop";
interface Theme {
  mediaQuery: {
        [key in MediaQuery]: string;
    }
};
export const light: Theme = {
  mediaQuery: {
        mobile: "(max-width: 768px)",   // 768px 이하에서 동작
        tablet: "(max-width: 1024px)",  // 1024px 이하에서 동작
        desktop: "(min-width: 1025px)"  // 1025px 이상에서 동작 
    }
};

• 테마에 mediaQuery 설정 추가
  • Theme 인터페이스에 mediaQuery 속성 추가
  • mediaQuery 타입 정의: "mobile", "tablet", "desktop"
  • light 테마에 mediaQuery 값 추가: 모바일, 태블릿, 데스크탑 뷰포트 크기 설정
  • 기존의 light 테마와 dark 테마에 mediaQuery 속성 반영
  • getTheme 함수에서 테마를 가져올 때 mediaQuery 값도 포함되도록 수정

import { getTheme } from "@/style/theme";
import { useEffect, useState } from "react";

export const useMediaQuery = () => {
    const [isMobile, setIsMobile] = useState(
        window.matchMedia(getTheme("light").mediaQuery.mobile).matches
    );

    useEffect(() => {
        const isMobileQuery = window.matchMedia(
            getTheme("light").mediaQuery.mobile
        );

        setIsMobile(isMobileQuery.matches);
    }, []);

    return { isMobile };
};

• 미디어 쿼리 상태를 관리하는 useMediaQuery 훅 추가
  • getTheme 함수를 사용하여 현재 테마의 모바일 미디어 쿼리 가져오기
  • window.matchMedia를 이용해 초기 모바일 여부 설정
  • useEffect를 통해 컴포넌트 마운트 시 모바일 여부 업데이트
  • isMobile 상태를 반환하여 컴포넌트에서 모바일 여부를 사용할 수 있도록 구현

📌 inputMode

모바일 기기를 통해서 접근을 하면 inputMode에 따라서 화면에 나타나는 스마트폰의 키보드가 다르게 나타남.
사용자의 편의와 접근성을 위해서 inputMode를 설정해주는 것이 좋음