[MySchedule project] 19. header (Navbar) 모바일 반응형 / 툴팁 / 토글 사용

레이아웃에서 header(Navbar)에 해당하는 부분에서 pc버전이 아닌 모바일화면에서 볼수 있는 화면 UI를 작성하고자 한다.
토글 기능을 사용해서 화면이 작아질때는 특정 아이콘이 생기면서 Navbar 부분이 사라지고, 다시 아이콘을 클릭하면 모바일에서만 볼수있는 navbar부분이 생기게 구현했다.
추가적으로 tooltip기능을 이용해서 보충설명에 해당하는 간단한 기능도 넣었다.

 

 

[ 툴팁(tooltip) 사용하기 ]

- 툴팁은 말풍선 모양처럼 생긴 그래픽 사용자 인터페이스 요소이다.

- cursor를 pointer할때 동작하게 된다.

- 참고자료는 아래 링크를 클릭하면 볼수 있다.

 

https://www.w3schools.com/css/css_tooltip.asp

CSS Tooltip

 

[ src / layout / Header / header.css ]

- 간단한기본 툴팁 css파일

.tooltip {
  position: relative;
  display: block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: rgb(129, 128, 128);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

 

[ src / layout / Header / index.tsx ]

- 아래 코드를 추가해 준다.

- 모바일버전에 대한부분을 컴포넌트로 분리했다.

 

최종 완성된 Header - index.tsx

import React from "react";
import { Link, useNavigate } from "react-router-dom";
import { AiOutlineSchedule } from "react-icons/ai";
import { useAddDispatch, useAddSelector } from "../../store/redux";
import { logout, socialLogout } from "../../store/thunkFunction";
import MobileHeader from "./MobileHeader";
import "./header.css";

const Header = () => {
  const dispatch = useAddDispatch();
  const navigate = useNavigate();
  const auth = useAddSelector((state) => state.user?.isAuth);
  const userData = useAddSelector((state) => state.user?.userData);

  const role = useAddSelector((state) => state.user?.userData?.role);
  const loginType = useAddSelector((state) => state.user?.userData?.loginType);

  //로그아웃
  const handleLogout = () => {
    dispatch(logout()).then(() => {
      navigate("/login");
    });
  };
  //소셜 로그아웃
  const handleSocialLogout = () => {
    dispatch(socialLogout()).then(() => {
      navigate("/login");
    });
  };

  return (
    <section>
      <nav className="bg-white border-gray-100 border-b-[1px]">
        <div className="flex flex-wrap justify-between items-center mx-auto max-w-screen-sm sm:max-w-screen-xl p-4">
          <p className="flex items-center space-x-3 rtl:space-x-reverse">
            <AiOutlineSchedule className="h-8 text-gray-800 dark:text-gray-900 w-10 float-left" />
            <span className="self-center sm:text-2xl text-lg font-semibold whitespace-nowrap dark:text-gray-900">
              <Link to={"/"}>MY-SCHEDULE</Link>
            </span>
          </p>
          <div className="flex items-end space-x-4 rtl:space-x-reverse mt-2 ">
            {auth ? (
              <>
                <div
                  className="tooltip text-sm font-medium font-sans text-gray-800 dark:text-gray-900 hover:text-gray-600"
                  aria-current="page"
                >
                  <div>
                    <Link to={"/mypage"}>{`${userData.userName}님`}</Link>
                  </div>

                  <span className="tooltiptext">
                    {`${userData.userName}님의 마이페이지`}
                  </span>
                </div>

                {loginType === 0 && (
                  <p className="text-sm font-medium font-sans text-gray-800 dark:text-gray-900 hover:text-gray-600">
                    <button onClick={handleLogout}>로그아웃</button>
                  </p>
                )}
                {loginType === 1 && (
                  <p className="text-sm font-medium font-sans text-gray-800 dark:text-gray-900 hover:text-gray-600">
                    <button onClick={handleSocialLogout}>로그아웃</button>
                  </p>
                )}
              </>
            ) : (
              <>
                <p className="text-sm font-medium font-sans text-gray-800 dark:text-gray-900 hover:text-gray-600">
                  <Link to={"/register"}>회원가입</Link>
                </p>
                <p className="text-sm font-medium font-sans text-gray-800 dark:text-gray-900 hover:text-gray-600">
                  <Link to={"/login"}>로그인</Link>
                </p>
              </>
            )}
          </div>
        </div>
      </nav>
      {auth === true && (
        <nav className="border-gray-100 border-b-[1px] ">
          {/* pc버전 */}
          <div className="hidden sm:block max-w-screen-xl px-4 py-4 mx-auto">
            <div className="flex items-center">
              <ul className="pl-1 flex flex-row font-medium mt-0 space-x-8 rtl:space-x-reverse text-sm">
                <li>
                  <p
                    className="font-medium text-gray-800 dark:text-gray-900 hover:text-gray-600"
                    aria-current="page"
                  >
                    <Link to={"/"}>스케줄 - 전체보기</Link>
                  </p>
                </li>
                <li>
                  <p
                    className="font-medium text-gray-800 dark:text-gray-900 hover:text-gray-600"
                    aria-current="page"
                  >
                    <Link to={"/myschedule/health"}>운동관리</Link>
                  </p>
                </li>
                <li>
                  <p className="font-medium text-gray-800 dark:text-gray-900 hover:text-gray-600">
                    <Link to={"/myschedule"}>스케줄관리</Link>
                  </p>
                </li>
                <li>
                  <p className="font-medium text-gray-800 dark:text-gray-900 hover:text-gray-600">
                    <Link to={"/myschedule/mealCost"}>식비관리</Link>
                  </p>
                </li>

                {/* 관리자 1 사용자 0 */}
                {role === 1 && (
                  <>
                    <li>
                      <p className="font-medium text-gray-800 dark:text-gray-900 hover:text-gray-600">
                        <Link to={"/excel"}>엑셀 - 다운로드</Link>
                      </p>
                    </li>
                    <li>
                      <p className="font-medium text-gray-800 dark:text-gray-900 hover:text-gray-600">
                        <Link to={"/userManagement"}>사용자관리</Link>
                      </p>
                    </li>
                    <li>
                      <p className="font-medium text-gray-800 dark:text-gray-900 hover:text-gray-600">
                        <Link to={"/logManagement"}>로그관리</Link>
                      </p>
                    </li>
                  </>
                )}
              </ul>
            </div>
          </div>
          {/* 모바일 버전 */}
          <div>
            <MobileHeader />
          </div>
        </nav>
      )}
      {/* object-cover : 이미지를 왜곡없이 보여줌
          bottom-0 inset-x-0 text-center: absolute 시에 텍스트의 가운데정렬 text-center만 사용시 안먹힘.
          opacity : 배경흐리게 
      */}
      <div className="m-auto relative">
        <div className="absolute top-[50%] bottom-0 inset-x-0 text-center">
          <h2 className="text-gray-900 font-sans font-bold text-xl">
            {" "}
            마이스케줄과 함께 다양한 일정을 관리해보세요{" "}
          </h2>
        </div>
        <div>
          <img
            src="/img/backImage1.avif"
            alt=""
            className="w-full max-h-64 opacity-45 object-cover"
          />
        </div>
      </div>
    </section>
  );
};

export default Header;

 

[ src / layout / Header / MobileHeader.tsx ]

- 토글(toggle)기능을 useState의 상태값으로 관리하게 하였고, default는 false이다. 

 

- 토글에서 react-icons를 사용해 flase일때와 true때의 아이콘이 다르게 보이게 했다. 

 

- 토글이 true일때는 모바일 화면용 navbar화면을 볼수있게 했는데, 화면이 축소된만큼 navbar 요소들이 세로로 보이게 했다.

 

- header부분 모바일용 완성된 컴포넌트

import React, { useState } from "react";
import { BsXSquare } from "react-icons/bs";
import { BsList } from "react-icons/bs";
import { Link } from "react-router-dom";
import { useAddSelector } from "../../store/redux";

const MobileHeader = () => {
  const [toggleOpen, setToggleOpen] = useState(false);
  const role = useAddSelector((state) => state.user?.userData?.role);
  return (
    <>
      <nav className="sm:hidden flex px-6 justify-between items-center w-full h-12 bg-gray-50 text-white">
        <div className="text-xl">Logo</div>
        {toggleOpen ? (
          <BsXSquare
            className="w-8 h-8 p-1 rounded-md text-black hover:cursor-pointer transform duration-150"
            onClick={() => setToggleOpen(false)}
          />
        ) : (
          <BsList
            className="w-8 h-8 p-1 rounded-md bg-gray-600 hover:cursor-pointer transform duration-150"
            onClick={() => setToggleOpen(true)}
          />
        )}
      </nav>
      {toggleOpen ? (
        // <ul className="block overflow-auto sm:hidden w-full h-screen p-6 bg-blue-700 ">
        <ul className="block overflow-auto sm:hidden w-full h-full p-6 bg-gray-50 ">
          <li>
            <p
              className="w-full text-sm py-2.5 text-gray-800 hover:font-bold"
              aria-current="page"
            >
              <Link to={"/"}>스케줄 - 전체보기</Link>
            </p>
          </li>
          <li>
            <p
              className="w-full text-sm py-2.5 text-gray-800 hover:font-bold"
              aria-current="page"
            >
              <Link to={"/myschedule/health"}>운동관리</Link>
            </p>
          </li>
          <li>
            <p className="w-full text-sm py-2.5 text-gray-800 hover:font-bold">
              <Link to={"/myschedule"}>스케줄관리</Link>
            </p>
          </li>
          <li>
            <p className="w-full text-sm py-2.5 text-gray-800 hover:font-bold">
              <Link to={"/myschedule/mealCost"}>식비관리</Link>
            </p>
          </li>
          {role === 1 && (
            <>
              <li>
                <p className="w-full text-sm py-2.5 text-gray-800 hover:font-bold">
                  <Link to={"/excel"}>엑셀 - 다운로드</Link>
                </p>
              </li>
              <li>
                <p className="w-full text-sm py-2.5 text-gray-800 hover:font-bold">
                  <Link to={"/userManagement"}>사용자관리</Link>
                </p>
              </li>
              <li>
                <p className="w-full text-sm py-2.5 text-gray-800 hover:font-bold">
                  <Link to={"/logManagement"}>로그관리</Link>
                </p>
              </li>
            </>
          )}
        </ul>
      ) : null}
    </>
  );
};

export default MobileHeader;

 

[ 결과화면 ]

툴팁 기본화면

 

header부분 모바일 화면 1

header부분 모바일화면 - 토글버튼 클릭 했을때