어제부터 시작했던 KINFOLK Website 클론 프로젝트..!
PM 향수님과 함께 포크포크하게 시작했던 프로젝트🍴🍴

Header Scroll 구현하기

이거 해보고싶어서 메인 페이지에 헤더 담당했다! 라고 말해도 무관했던 스크롤 이벤트!
진짜 하면서 머리 데록데록 굴려가면서 물음표 열심히 날렸다.\

내 코드 =>

import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import SideMenu from "../SideMenu/SideMenu";
import logo from "./forkfolk.png";
import "./Header.scss";

class Header extends Component {
  constructor() {
    super();
    this.state = {
      logoScale: 8,
      wheelDeltaCount: 0,
      sideMenuVisible: false,
    };
  }
  goToMain = () => {
    this.props.history.push("/");
  };
  sideMenuVisibilityHandler = (e) => {
    const { sideMenuVisible } = this.state;
    this.setState({ sideMenuVisible: !sideMenuVisible });
  };
  componentDidMount() {
    window.addEventListener("wheel", (e) => {
      const { logoScale, wheelDeltaCount } = this.state;
      const { wheelDelta } = e;
      if (window.pageYOffset > 1000) {
        return;
      }
      this.setState({ wheelDeltaCount: wheelDelta / 120 }, () => {
        if (logoScale + wheelDeltaCount < 1) {
          this.setState({ logoScale: 1 });
        } else if (logoScale + wheelDeltaCount > 8) {
          this.setState({ logoScale: 8 });
        } else {
          this.setState({
            logoScale: logoScale + wheelDeltaCount,
          });
        }
      });
    });
  }
  render() {
    const { logoScale, sideMenuVisible } = this.state;
    return (
      <>
        <header className="Header">
          <nav>
            <ul>
              <li>
                <Link to="/">Subscribe</Link>
              </li>
              <li>
                <Link to="/">Issue</Link>
              </li>
              <li>
                <Link to="/">Shop</Link>
              </li>
            </ul>
            <div
              to="/"
              className="imgBox"
              style={{ transform: `scale(${logoScale})` }}
            >
              <img src={logo} alt="logo" onClick={this.goToMain} />
            </div>
            <ul>
              <li>
                <button>
                  <i className="xi-search"></i>
                </button>
              </li>
              <li>
                <button onClick={this.sideMenuVisibilityHandler}>
                  <span></span>
                  <span></span>
                  <span></span>
                </button>
              </li>
            </ul>
          </nav>
        </header>
      </>
    );
  }
}

export default Header;

로고 크기가 가장 큰 상태에서 시작되기때문에, 휠이 아래로 향하는 경우 wheelDelta의 값이 -가 되는 특성을 이용해서 점점 줄어들게 코드를 작성했었다.

if (window.pageYOffset > 1000) {
        return;
}

=> 일정 스크롤 이상으로 넘어갔을 경우 스크롤 이벤트가 발생되어 미리 작아지거나 커지는 상황을 막기 위해서 예외처리를 해주었다. :)

어떻게 생각을 할 수 있었나요!

우선 스크롤 위치값에 따라 transform 의 scale의 값이 변해야한다고 생각했다.
처음에는 scroll 위치값에 따라 조정을 하려고 했지만, 스크롤의 위아래로 내려가는 값에 따라서 조정하는 방법도 어렵지 않게 할 수 있지 않을까 라는 생각을 할 수 있었다. 생각에 따라 wheel이벤트를 사용해서 정리했다.
(지금 보니까 스크롤로 해야해서.. 스크롤의 위치값에 따라 변경되는 scale로 수정을 해야할 필요성이 보인다..ㅠㅠ 내일 수정하기..)

그 뒤 생긴 문제점이 scroll을 내려 scale이 너무 커지는 경우, 작아지는 경우만 막아뒀더니 한참 밑에서 다시 스크롤을 올릴 때 사이즈가 미리 커져버리는 경우가 생겨버렸었다.
이미지가 가장 작아지는 포인트를 찾아 그 위치에서 벗어날 경우 이벤트가 발생하지 않도록 처리했다.

제일 어려웠던 점

생각보다 로직은 간단히 구현했지만 뭔가 이상하게 많이 꼬였었다.
wheelDelta값을 처리하는 과정에서 + 와 - 가 꼬이기도 했고, 아예 다르게 되기도 했었고.
그래도 간단하게 처리할 수 있었던 문제였기 때문에 너무 다행이었다ㅠㅠ