다섯째주 #22 React Js - N*tfilx 클론

Header 컴포넌트 작성

헤더 파트

컴포넌트 구성

	<Nav>
	  <Col>
        <Logo />
        <Items>
          <Item>
            <Link to="/">
              Home {homeMatch && <ItemCircle layoutId="circle" />}
            </Link>
          </Item>
          <Item>
            <Link to="/tv">
              Tv Shows {tvMatch && <ItemCircle layoutId="circle" />}
            </Link>
          </Item>
        </Items>
      </Col>
// Nav 안에 Col를 2개 놓고 왼쪽과 오른쪽 justify-content: space-between.
//왼쪽에 로고와 탭으로 구성, 오른쪽에 검색창 구성. 
      <Col>
        <Search>
          <motion.svg />
          <Input
            animate={{ scaleX: searchOpen ? 1 : 0 }}
            // 아이콘이 눌리면 scale이 X축으로 1로 커짐
            placeholder="Search for movie or tv show..."
          />
        </Search>
		//Search 안에 돋보기 아이콘과 input을 flex로 놓음
      </Col>
    </Nav>

Header 에서는...

Nav

motion.nav로 생성
position을 fixed로.
스크롤이 감지하기. const { scrollY } = useScroll();
스크롤이 내려가면 투명색으로 변경시키기. scrollY.get() > 80 이 조건!
const navAnimation = useAnimation(); 배경색 변화 useEffect 내부에서 코드화
useEffect 내부에 조건문으로 navAnimation.start() rgba 색상 설정하기

Logo

motion.svg로 생성!
호버시 테두리 제외한 부분이 흐려지게끔 만들것
fill을 theme 색상으로 바꿔주기
path {} 내부에 stroke, stroke-width 설정하기
Logo에 initial과 animate에 fillOpacity 설정하기

Item & ItemCircle

호버시 미세하게 theme 내부 색상으로 변경
누른 탭에 작은 빨간 원 표시하기
누른 탭 위치 확인하기, 일치할 경우만 보이게 하기, layoutId 추가하기.

• const homeMatch = useMatch("/");
• const tvMatch = useMatch("tv");

{homeMatch && <ItemCircle layoutId="circle" />

Item은 position: relative
ItemCircle의 position: absolute

Input

useState로 돋보기 아이콘이 눌렸을 때 true로 boolean값 설정, 누르면 반대값으로.
const [searchOpen, setSearchOpen] = useState(false);
const toggleSearch = () => setSearchOpen((prev) => !prev);
돋보기 아이콘이 눌렸을 때 아이콘 x축 왼쪽으로 이동, input창 x축으로 키우기.
animate 설정에 searchOpen로 조건 확인한다.
<motion.svg onClick={toggleSearch} animate={{ x: searchOpen ? -180 : 0 }}/>
<Input animate={{ scaleX: searchOpen ? 1 : 0 }}/>