카카오 헤더 영역

프로젝트에 투입되기에 앞서 먼저 필요한 역량이 무엇인가 고민해봤다 .

보다 큰 기업의 기술을 구현하고 싶었고 흥미로운 부분이 많았기에 카카오의 헤더영역 부터

구현하려고 마음 먹었다.

카카오의 헤더영역은 gnb 그리고 util 에 대한 영역이 각각 존재했다.

util의 기능은 검색아이콘 , 영어버전 아이콘 , 다크모드 이렇게 존재했다.

검색아이콘을 클릭하면 gnb의 영역은 전부 사라지고 카카오의 로고 그리고 특정한

애니메이션이 발동하면서 인풋창이 나왔다.

이 부분에서 나는 고민이 많았다 . 인풋창이 나오게 하는게 문제가 아니라 어떻게 gnb를 사라지게 해야할지 말이다.

그렇게 고민하던 순간에 인풋 컴포넌트 자체에서 gnb를 뺀 ui로 만들면 되겠다는 생각이
들었다 .

const Header = () => {
  const [isUtilClick, setIsUtilClick] = useState<boolean>(false);

  const searchUtilClick = () => {
    setIsUtilClick(true);
    console.log(isUtilClick);
  };
  const searchUtilClose = () => {
    setIsUtilClick(false);
  };

  return (
    <div>
      <header className="flex items-center w-[1296px] h-[72px] m-auto ">
        <h1 className="w-[74px] h-[25px] font-light">KaKao</h1>
        {isUtilClick === false ? (
          <div className="flex text-center ">
            <Gnb />
            <Util
              searchUtilClick={searchUtilClick}
              searchUtilClose={searchUtilClose}
            />
          </div>
        ) : null}
      </header>
      {isUtilClick === true ? (
        <HeaderSearch searchUtilClose={searchUtilClose} />
      ) : null}
    </div>
  );
};

이런 형식으로 조건부랜더 자체를 두번을 거쳐 구현이 가능했다 . props로 넘긴 내용은 (util compo)

const Util: FC<Props> = ({ searchUtilClick, searchUtilClose }) => {
  const utilSearchClickHandler = () => {
    searchUtilClick();
  };

  return (
    <ul className="flex ml-[300px] ">
      <li className="flex justify-center items-center">
        <button
          className="w-[36px] h-[36px] text-[20px]"
          onClick={utilSearchClickHandler}
        >
          <i className="search icon w-[36px]"></i>
        </button>
      </li>
      <li className="flex justify-center items-center">
        <button className="w-[36px] h-[36px] text-[20px]">
          <i className="globe icon w-[36px] h-[36px]"></i>
        </button>
      </li>
      <li className="flex justify-center items-center">
        <button className="w-[36px] h-[36px] text-[20px]">
          <i className="moon icon w-[36px] h-[36px]"></i>
        </button>
      </li>
    </ul>
  );
};

header search compo는

const HeaderSearch: FC<Props> = ({ searchUtilClose }) => {
  const searchCloseHandler = () => {
    searchUtilClose();
  };
  const [isAnimate, setIsAnimate] = useState(true);
  const animateDelete = () => {
    setIsAnimate(false);
  };

  return (
    <div>
      <div
        className={`w-[1296px] h-[382px] p-[130px] m-auto text-center ${
          isAnimate === true ? "animate-pulse" : "animate-none"
        }`}
      >
        {/* <h1 className="w-[74px] h-[25px] font-light">KaKao</h1> */}
        <div>
          <input
            onClick={animateDelete}
            className="w-[823px] h-[72px] rounded-2xl text-center bg-zinc-800 text-3xl placeholder-white"
            placeholder="무엇이 궁금하신가요?"
          />
        </div>
        <ul className="flex  justify-center items-center mt-[50px]">
          <li className="w-[117px] h-[34px] flex bg-slate-100  justify-center items-center rounded-2xl m-[5px]">
            #최고기술책임자
          </li>
          <li className="w-[132px] h-[34px] flex bg-slate-100  justify-center items-center rounded-2xl m-[5px]">
            #기술윤리 전담 조직
          </li>
          <li className="w-[117px] h-[34px] flex bg-slate-100  justify-center items-center rounded-2xl m-[5px]">
            #신입개발공채
          </li>
          <li className="w-[128px] h-[34px] flex bg-slate-100  justify-center items-center rounded-2xl m-[5px]">
            #테크블라인드채용
          </li>
        </ul>
        <div>
          <img
            className="w-[162px] h-[178px] absolute top-[250px] right-[110px]"
            src="https://www.kakaocorp.com/page/bg_search.png"
            alt=""
          />
        </div>
        <button
          className="font-bold text-3xl absolute top-[25px] right-[130px]"
          onClick={searchCloseHandler}
        >
          X
        </button>
      </div>
      <div>
        <div className="mt-[30px] ml-[130px] opacity-30 ">
          <div className="flex">
            <img
              className="w-[72px] h-[72px]"
              src="https://www.kakaocorp.com/page/calendar/light/ico_date4.gif"
              alt="달력"
            />
            <p className="font-bold text-[46px]">오늘의 카카오</p>
          </div>
          <span className="font-bold text-[46px] text-left block my-[12px]">
            9월 4일 토요일입니다.
          </span>
        </div>
      </div>
    </div>
  );
};

특정한 유아이를 없애는게 아니라 조건으로 통제해 해결할 수 있었다는게 매력적이었다.

한 생각에 집중되기보단 끝 없이 다른 사고를 하는 연습을 해야할 것 같다.