Netfilx Clone #5 Header 만들기

Header 에 위치할 Navigation 을 만들어보자!

---

Navigation Bar

• 네비게이션 바에는 "넷플릭스 로고, Home, Series, Search, 검색아이콘" 을 넣을 예정!
• 넷플릭스 로고는 framer motion 을 넣을거라 svg 파일로 추가하고
  스타일 컴포넌트 작성시 motion.svg로 스타일 부여하기

// -Header.tsx

 <Logo
    variants={logoVariants}
    initial="normal"
    whileHover="active"
    xmlns="http://www.w3.org/2000/svg"
    width="1024"
    height="276.742"
    viewBox="0 0 1024 276.742"
  >
  <motion.path  d="M140....295" />
</Logo>

• 그리고 스크롤의 움직임에 따라 일정 이상 스크롤이 내려가면 화면 전체를 꽉 채우도록 variants 를 설정하고,
  스크롤 감지를 위한 함수도 작성!

function Header() {

// NAV 애니메이션을 위한 스크롤 감지
  const navAnimation = useAnimation();
  const { scrollY } = useScroll();
  useEffect(() => {
    scrollY.onChange(() => {
      if (scrollY.get() > 50) {
        navAnimation.start("scroll");
      } else {
        navAnimation.start("top");
      }
    });
  }, [scrollY, navAnimation]);

//---------Variants
const navVariants = {
  top: {
    backgroundColor: "rgba(0,0,0,0)",
  },
  scroll: {
    backgroundColor: "rgba(20,20,20,1)",
  },
};

---

LayoutId 를 사용한 애니메이션

• Home, series, search 메뉴를 클릭할 때마다 아래에 빨간 동그라미가 선택된 메뉴 아래로 오는 애니메이션을 추가하기로함
• 그러려면 현재 URL 위치를 알아야하므로 useMatch() 함수를 사용했다.

const ItemCircle = styled(motion.span)`
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: ${props => props.theme.red};
  border-radius: 5px;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: 0 auto;
`;

function Header() {
  // 현재 URL 위치 확인
  const homeMatch = useMatch("/");
  const tvMatch = useMatch("tv");
  const searchMatch = useMatch("search");

...
return (
...

        <Items>
          <Item>
            <Link to="/">
              Home {homeMatch && <ItemCircle layoutId="circle" />}
            </Link>
          </Item>
          <Item>
            <Link to="tv">
              Series {tvMatch && <ItemCircle layoutId="circle" />}
            </Link>
          </Item>
          <Item>
            <Link to="search">
              Search {searchMatch && <ItemCircle layoutId="circle" />}
            </Link>
          </Item>
        </Items>
        ...

---

useForm을 사용한 검색기능

• search 페이지 및 우측 상단 돋보기 모양 아이콘을 통해 검색 기능 만들기
• react-hook-form 은 여기!

function Header() {
  const { register, handleSubmit, setValue } = useForm<IForm>();
  const navigate: NavigateFunction = useNavigate();
  const onValid = ({ keyword }: IForm) => {
    navigate(`/search?keyword=${keyword}`);
    setValue("keyword", "");
  };
  
  return ( 
     ...
     <Search onSubmit={handleSubmit(onValid)}>
     	<motion.svg
            onClick={toggleSearch}
            animate={{ x: searchOpen ? -200 : 0 }}
            transition={{ type: "linear" }}
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
          <path fillRule="evenodd" ...></path>
          <Input
            animate={inputAnimation}
            initial={{ scaleX: 0 }}
            transition={{ type: "linear" }}
            placeholder="Title, Person, Genre"
            {...register("keyword", { required: true, minLength: 2 })}
          />
     </Search>

• 그리고 아이콘을 누르면 좌측으로 input 입력창이 나오도록 할것이기에 애니메이션도 추가!

// 검색창 오픈 여부에 따른 애니메이션
  const inputAnimation = useAnimation();
  const toggleSearch = () => {
    if (searchOpen) {
      inputAnimation.start({
        scaleX: 0,
      });
    } else {
      inputAnimation.start({
        scaleX: 1,
      });
    }
    setSearchOpen(prev => !prev);
  };

---

framer motion을 사용한 네비게이션바 완성❤️