카카오 헤더 리팩토링

카카오 헤더영역에서 영어버전 분기처리를 하다가 며칠동안 고생을 하고있다.

부족한 네이밍 디테일 , 설계를 생각하지 않은 기능구현에만 초점을 둔 탓이었다.

(네이밍을 대충했기에 코드를 다시 볼 때 불필요하게 시간이 많이 들었다.)

그래서 규격부터 하나하나 설계하고 , 왜 이게 필요한지 사고하던중 영어 페이지 컴포넌트 자체가

전펴 필요 없다는것을 깨우쳤다.

아래는 내가 설계한 구조이다.

        KaKaoContainer. (함수를 전부 가지고 있는 최상위 레벨)   
                | 
           kakaoLayOut                                               
      /         |         \
 KakaoTop  childrenCompo    KakaoFooter
  /   \   \
Header gNb util     

문제를 해결하기 위해선 kakaoTop Component에서 분기처리를 맡아야했다.

고안해낸 방법은 아래있다.

const router =useRouter();

const {language} = router.query

이것을 토대로

import Link from "next/link";
import Router, { useRouter } from "next/router";
import React, { FC, useState } from "react";

import Gnb from "../../../gnb/Gnb";
import HeaderUtilSearchBar from "../../../headerUtilSearchArea/HeaderUtilSearchBar";

import Util from "../../../utilarea/Util";

interface Props {
  searchUtilClick: Function;
  isSearchUtilClick: boolean;
  isAnimate: boolean;
  searchCloseHandler: () => void;
  animateDelete: () => void;
}
const KaKaoTop: FC<Props> = ({
  searchUtilClick,
  isSearchUtilClick,

  isAnimate,
  searchCloseHandler,
  animateDelete,
}) => {
  const router = useRouter();
  const { language } = router.query;
  return (
    <div>
      <header className="flex items-center w-[1296px] h-[72px] m-auto ">
        <Link href="/kakao?language=korea">
          <h1
            className="w-[74px] h-[25px] font-light cursor-pointer"
            // h1태그엔 버튼 다는것보다 이걸 감싸는 linK가 필요함
          >
            KaKao
          </h1>
        </Link>
        {language === "korea" && isSearchUtilClick === false ? (
          <div className="flex text-center ">
            <Gnb language={language} />
            <Util searchUtilClick={searchUtilClick} />
          </div>
        ) : null}
        {language === "english" && isSearchUtilClick === false ? (
          <div className="flex text-center ">
            <Gnb language={language} />
            <Util searchUtilClick={searchUtilClick} />
          </div>
        ) : null}
      </header>
      {language === "korea" && isSearchUtilClick === true ? (
        <HeaderUtilSearchBar
          language={language}
          isAnimate={isAnimate}
          searchCloseHandler={searchCloseHandler}
          animateDelete={animateDelete}
        />
      ) : null}
      {language === "english" && isSearchUtilClick === true ? (
        <HeaderUtilSearchBar
          language={language}
          // language={language}
          isAnimate={isAnimate}
          searchCloseHandler={searchCloseHandler}
          animateDelete={animateDelete}
        />
      ) : null}
    </div>
  );
};

export default KaKaoTop;

쿼리값을 사용해 분기처리를 헤더영역에서 맡아서 하니 컴포넌트가 총 4개 줄었고 페이지도 하나 줄었다.

기존에 엉켜있는 컴포넌트를 제거하고 코드를 재사용하니 내가 직접적으러 봐야하는 내용이 절반이상 줄었으며 코드도 더 깔끔해졌다.

오늘 느낀 것은 기능구현이 당장 중요한건 아니구나 싶었다.

조금 더 큰 그림을 볼 줄 알고 설계 할 수 있는 사람이 되고싶다는 생각이 강하게 들었다.

이제는 next에서 있는 i18n을 공부해보려고 한다.

어려웠던 내용들이 하나하나 익숙해지는 과정이 나한텐 값지며 더 잘하고 싶다는 생각을 일으킨다.