14. 미디어쿼리, 모바일용 레이아웃 헤더 만들기

모바일용 헤더를 만드는 방법은 여러가지가 있다.

 

해본 것들로는

1. "하나의 레이아웃 헤더 컴포넌트" 안에서, 모바일용과 윈도우용 전부 만들고, 
   미디어쿼리로, 스타일 내용을 변경하기
   
2. "따로 컴포넌트를 만들어서" 메인 레이아웃에서 미디어쿼리로, 선택하기

나는 두번째를 선호한다.

 

가령 이런식이다.

< Layout.tsx>

    import LayoutHeader from "./layout-header";
    import LayoutHeaderForM from "./layout-header-for-mobile";
    import LayoutFooter from "./layoute-footer";
    import styles from "./layout.module.css";
    import LayoutHeaderModalForM from "./layout-header-for-mobile-modal";
    import { useState } from "react";

    const Layout: React.FC<{ children: React.ReactNode }> = (props) => {
      const [showModal, setShowModal] = useState<boolean>(false);

      const toggleModal = () => {
        setShowModal((prev) => !prev);
      };

      let showStyle;

      if (showModal) {
        showStyle = styles.show;
      }
      if (!showModal) {
        showStyle = styles.hide;
      }

      return (
        <div>
          <div className={styles.desk}>
            <LayoutHeader />			// 일반 헤더
          </div>
          <div className={styles.mobile}>
            <LayoutHeaderForM toggleModal={toggleModal} />	// 모바일용 헤더
            <div className={showStyle}>
              <LayoutHeaderModalForM toggleModal={toggleModal} />	// 모바일용 헤더의 실제 메뉴가있는 모달
            </div>
          </div>
          {props.children}
          <LayoutFooter />
        </div>
      );
    };
    export default Layout;
    
    
<CSS> ===============================

.mobile {
  display: none;
}

.desk {
  display: block;
}

.show {
  display: block;
}

.hide {
  display: none;
}

@media (max-width: 1200px) {
  .mobile {
    display: block;
  }
  .desk {
    display: none;
  }
}

일반적인 헤더와, 모바일용 헤더 두개를 전부 만들고,

미디어 쿼리를 이용해, 필요에 따라, 다른 컴포넌트를 hide 시킨다.

 

모바일용 컴포넌트를 담고 있는 div 에는, 실제 메뉴 버튼을 담고있는 모달을 준비시킨다.

그리고, State에 따라, 버튼을 누르면 모달을 띄운다.

 

모바일용 레이아웃과 모달을 이런 식이 될 것이다.

< layout-header-for-mobile.tsx >

        import styles from "./layout-header-for-mobile.module.css";
        import { Link } from "react-router-dom";

        const LayoutHeaderForM: React.FC<{ toggleModal: () => void }> = (props) => {
        const { toggleModal } = props;
            return (
                <div className={styles.main_header}>
                    <Link to="/" className={styles.header_logo}>
                        <img src="/main-logo.png" alt="logo" />
                        <h3> DO.HEALTH</h3>
                    </Link>
                    <div className={styles.hamburger_button} onClick={toggleModal}>
                        <img src="/icons8-hamburger-64.png" />
                    </div>
                </div>
            );
        };

        export default LayoutHeaderForM;



< Modal.tsx >

        import styles from "./layout-header-for-mobile-modal.module.css";
        import { Link } from "react-router-dom";
        import { useCookies } from "react-cookie";
        import { useHistory } from "react-router-dom";

        const LayoutHeaderModalForM: React.FC<{ toggleModal: () => void }> = (
            props
        ) => {

            const [cookies, setCookie, removeCookie] = useCookies(["auth-cookie"]);
            const { toggleModal } = props;
            const history = useHistory();

            const logoutHandler = () => {
                removeCookie("auth-cookie");
                toggleModal();
                history.replace("/");
            };

            return (
                <div className={styles.main_header}>
                    <div className={styles.logo_and_X}>
                        <div>
                            ...
                        )}
                        {cookies["auth-cookie"] && <li onClick={logoutHandler}>로그아웃</li>}
                    </ul>
                </div>
            );
        };

        export default LayoutHeaderModalForM;