React 플로팅 버튼 추가하기

React 레이아웃에 공통적으로 사용할 버튼이 필요해 플로팅 버튼을 추가해 봤습니다.

버튼을 누르면 위로 다른 버튼들이 펴지는 형태로 코딩해 봤고 펴지는 로직이 생각보다 어려웠네요.

React에 플로팅 버튼 추가한 예시

React 플로팅 버튼 버튼 리스트 생성

먼저 FloatingButton.js 파일을 생성하고 버튼 리스트를 생성해 줍니다.

각 버튼에는 id, text, onClick 메서드를 갖도록 하고 플러스 마이너스 버튼은 따로 추가해 줄 거라 이 리스트에서는 포함하지 않습니다.

import { useState } from "react";

function FloatingButton({styles}) {
  const buttonList = [
    {id: "Cbtn", text: "C" ,onClick:cBtnClick},
    {id: "Rbtn", text: "R" ,onClick:rBtnClick},
    {id: "Ubtn", text: "U" ,onClick:uBtnClick},
    {id: "Dbtn", text: "D" ,onClick:dBtnClick}
  ];
  const [isOpen, setIsOpen] = useState(false);

  function cBtnClick() {
    console.log("C버튼 클릭");
  }

  function rBtnClick() {
    console.log("R버튼 클릭");
  }

  function uBtnClick() {
    console.log("U버튼 클릭");
  }

  function dBtnClick() {
    console.log("D버튼 클릭");
  }
}

export default FloatingButton;

어차피 버튼 동작은 다 따로 할 거라 메서드는 돌려쓰지 않고 각각 생성했습니다.

React 플로팅 버튼 생성

리턴 값으로 플로팅 버튼을 모아서 div로 보내줄 겁니다.

  return (
    <div>
      {buttonList.map((button,index) => (
        <button key={index} id={button.id} className={styles.floatingButton} onClick={button.onClick}
        >{button.text}</button>
      ))
      }
      <button id="Mbtn" onClick={handleOnOpen} className={styles.floatingButton}>{isOpen ? '-' : '+'}
      </button>
    </div>
  );

플로팅 버튼 리스트에 있던 버튼들을 만들어주고 메뉴가 열려있으면 +, 닫혀있으면 -가 표시되는 버튼을 하나 더 추가해 줍니다.

React 플로팅 버튼 CSS 파일

이제 CSS 파일에 스타일을 줘서 플로팅 버튼의 위치를 고정시켜 줍시다.

이 버튼은 다른 화면과 겹쳐져야 하기 때문에 포지션을 고정시켜 줄 겁니다.

.floatingButton{
    position: fixed;
    bottom: 50px;
    right: 50px;
    background-color: rgb(250, 232, 222);
    border: none;
    color: rgb(87, 87, 87);
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50%;
    padding: 0.5rem;
    transition: 0.3s;
    width: 50px;
    height: 50px;
    &:hover {
        background-color: rgb(255, 177, 135);
        color: rgb(255, 255, 255);
    }
}

자 이렇게 스타일을 만들어주면 위치가 고정되어 있고 마우스 오버 시, 컬러가 바뀔 겁니다.

대부분은 위치나 색상 값이라 자유롭게 수정하시면 됩니다.

문제는 여기까지 오면 다른 버튼들이 안 보인다는 거죠.

플러스 버튼 하나만 보일 겁니다.

이제 플러스 버튼을 클릭하면 스타일에 위치 정보를 건드려서 메뉴가 펼쳐지게 할 겁니다.

메뉴 열어주도록 스타일 주기

앞서 onClick 메서드로 사용한 handleOnOpen 메서드를 추가해서 플러스 마이너스 버튼 클릭 시 isOpen 값이 바뀌도록 해줄 겁니다.

  function getButtonClassName(index) {
    // isOpen 상태에 따라 bottom 스타일 동적으로 설정
    const bottomValue = isOpen ? `${(index+2) * 55}px` : '50px';
    return {
      bottom: bottomValue
    };
  }

  function handleOnOpen() {
    setIsOpen(!isOpen);
  }

get Button Class Name 메서드는 각 C, R, U, D 버튼에 들어갈 style로 isOpen 변수가 true일 때 최초 버튼을 만들 때 넣은 index를 넘겨받아서 bottom 즉, 밑에서부터 높이를 index + 2에 55px를 곱한 값을 줄 겁니다.

그 반대일 경우에는 50으로 고정해 주고 앞선 css에서 받은 스타일을 적용해 주겠죠.

  return (
    <div>
      {buttonList.map((button,index) => (
        <button key={index} id={button.id} className={styles.floatingButton} style={getButtonClassName(index)} onClick={button.onClick}
        >{button.text}</button>
      ))
      }
      <button id="Mbtn" onClick={handleOnOpen} className={styles.floatingButton}>{isOpen ? '-' : '+'}
      </button>
    </div>
  );

마지막으로 이 스타일을 버튼에 스타일로 적용시켜 주면 완성됩니다.

전체 소스는 하단의 Github Repository로 확인하시면 됩니다.

floating-button-add · jkandrea/My-React-Project@e6c900b