♻️ refactor: 채팅, 헤더 반응형 작업

[jungmyunggi]

🔨 테스크

useMediaQuery 구현

import { useState, useEffect } from "react";

export const useMediaQuery = (query: string): boolean => {
  const [viewport, setViewport] = useState(false);
  useEffect(() => {
    const mediaQuery = window.matchMedia(query);
    setViewport(mediaQuery.matches);
    const eventListener = (e: MediaQueryListEvent) => {
      setViewport(e.matches);
    };
    mediaQuery.addEventListener("change", eventListener);

    return () => {
      mediaQuery.removeEventListener("change", eventListener);
    };
  }, [query]);

  return viewport;
};

• 문자열로 입력받은 viewport의 크기를 useEffect를 이용해 확인해가면서 모바일인지 아닌지 판단하는 함수입니다.

📋 작업 내용

• 헤더 반응형
• 채팅 및 사이드바 반응형
• 검색시 페이지네이션 부분 반응형

📷 스크린 샷

• 모바일일 경우 헤더의 로고부분을 변경하고 사이드바가 나올 수 있는 햄버거버튼을 추가했습니다.
  

• 페이지네이션시 previous, next라는 글자로 버튼을 생성했었는데 모바일에서는 글자가 잘리는 문제가 발생해서 삭제시켰습니다.
  

• 사이드바와 채팅 모두 화면을 꽉 채우게 변경시켰습니다.
  
  

[junyeokk]

고생하셨어요!~