권돌선생님의 블로그

리액트에서 특정 메뉴를 클릭할 경우

특정 위치로 이동하는 것을 해보자.

​

* 시나리오

1) 메뉴 버튼 클릭

2) 메뉴 리스트에서 특정 버튼 클릭

3) 이동

​

import { useState, useRef} from 'react';
import {
  MenuButton,
  Section,
  SectionInner,
  NavItem,
  Navigation,
  TitleWrapper,
} from './promotionComponents';

const Promotion: NextPage<any> = (props: any) => {

  const [menuOpen , setMenuOpen] = useState(false); // 메뉴 팝업
   
    const handleClick = () => {
    setMenuOpen(true);
    };
    const handleClose = () => {
    setMenuOpen(false);
    };
    const element = {
      customer : useRef<HTMLDivElement>(null), 
      worker : useRef<HTMLDivElement>(null),
      labor : useRef<HTMLDivElement>(null),
      schedule : useRef<HTMLDivElement>(null),
      wage : useRef<HTMLDivElement>(null),
      insurance : useRef<HTMLDivElement>(null),
    };
    const onMoveToElement = (e:any) => {
      const targetId = e.target.id;
      if(targetId === 'customer'){ // 타겟이 거래처면 
        element.customer.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }); //거래처로 이동하라
        setMenuOpen(false); // 메뉴는 종료
    };

   return (
   <>
     <MenuButton
          onClick={handleClick}
      >
        <MenuIcon fontSize="large"></MenuIcon>
      </MenuButton>

       {menuOpen ?
          <Navigation>
            <NavItem id= 'customer' onClick={(e:any) => onMoveToElement(e)}>사업장 관리</NavItem>
            <NavItem id= 'worker' onClick={(e:any) => onMoveToElement(e)}>근로자 관리</NavItem>
            <NavItem id= 'labor' onClick={(e:any) => onMoveToElement(e)}>근로계약서</NavItem>
            <NavItem id= 'schedule' onClick={(e:any) => onMoveToElement(e)}>근무일정</NavItem>
            <NavItem id= 'wage' onClick={(e:any) => onMoveToElement(e)}>임금명세서</NavItem>
            <NavItem id= 'insurance' onClick={(e:any) => onMoveToElement(e)}>4대보험</NavItem>
            <div style={{ backgroundColor:'rgba(0,0,0,0.6)', width:'100%', height:'100%'}} onClick={handleClose}></div>
        </Navigation>
        :<></>
       }
        // 이동 대상 거래처 화면, ref 부분의 element.customer 를 확인하자
         <Section position={`relative`} ref={element.customer}>
            <SectionInner>
              <WrapperDiv ju={`center`}>
                <TitleWrapper>
                  <TitleP fontSize={`20px`}>
                    사업장 관리
                  </TitleP>
                </TitleWrapper>
              </WrapperDiv>
              <CustomerStepper />
            </SectionInner>
          </Section>
</>
  );



}

export default Promotion;

결과