kakao english ver

카카오 헤더를 구현하고있다 오늘은 버튼을 클릭하면 영어페이지를 구현했다 .

처음엔 재사용할 컴포넌트를 찾고있었다.

하지만 카카오 페이지를 자꾸 들여다보니

영어버전일때 페이지 자체가 바뀐다는것을 알았다.

그렇기 때문에 영어로 된 레이아웃을 잡고 컴포넌트화 시켜 작업을 시작했다.

먼저 이전에 만들었던 util 컴포넌트를 재사용해 유틸기능을 구성했고 새롭게 만든 영어버전 컴포넌트는 EglishSerchBoard , EnglishGnb를 만들었다.

또한 바뀔 페이지는 kakaoEnglish 페이지를 만들어 nextjs의 Link를 사용해 구성했다.

util 컴포넌트는 이렇게 구성되어있다.

interface Props {
  searchUtilClick: Function;
}

const Util: FC<Props> = ({ searchUtilClick }) => {
  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>
      <Link href="kakao_english">
        <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>
      </Link>
      <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>
  );
};

EnglishSearchBar는 이렇게 구성되어있다.

import React, { FC, useState } from "react";
interface Props {
  searchUtilClose: Function;
}

const EnglishSearchBar: 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="What are you looking for?"
          />
        </div>
        <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]">Kakao Today</p>
          </div>
          <span className="font-bold text-[46px] text-left block my-[12px]">
            News for Monday, September 6
          </span>
        </div>
      </div>
    </div>
  );
};

export default EnglishSearchBar;

위에 util에서 globe icon button을 클릭하면 영어 페이지로 돌아오는 로직이다. 어떻게 다시 한국버전으로 돌아갈수있을까? 하면 h1태그에 onClick={(()=>{
router.push("/"})}로 간단하게 해결했다 그리고 마우스포인터도 커서로 바꿔서 사용자가 인지하기 편하게 만들었다.

const EnglishPage = () => {
  const router = useRouter();
  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 cursor-pointer"
          onClick={() => {
            router.push("/");
          }}

          KaKao
        </h1>
        {isUtilClick === false ? (
          <div className="flex text-center ">
            <EnglishGnb />
            <Util searchUtilClick={searchUtilClick} />
          </div>
        ) : null}
      </header>
      {isUtilClick === true ? (
        <EnglishSearchBar searchUtilClose={searchUtilClose} />
      ) : null}
    </div>
  );
};

좋은 페이지를 분석하고 어떻게 라우팅되고 있고 어디서 static하게 생성되고있고

어디서 다이나믹 라우팅이 쓰이고있고 이런 분석자체가 중요하다는것을 정말 많이 느낀 하루였다.