아코디언 메뉴

햄버거 버튼과 비슷하게 토글 형태로 컨텐츠를 보여준다. 다만 아코디언처럼 컨텐츠가 아래로 나오고 여러개가 붙어있다.

 

출처 : WEBCLUM Blog (https://webclub.tistory.com/288)

 

 

장단점

장단점은 햄버거 버튼과 비슷한 것 같다.

정보에 대한 타이틀을 보이게 해두고 사용자로 하여금 그 정보가 필요할 때 열어보게 하는 식으로 사용하기 좋을 것 같다. 채용사이트에서 그런 형태를 많이 보았다.

Q. 중복 지원은 불가능 한가요? ⇒ 이런 타이틀을 가진 버튼을 누르면

A. 가능합니다. 다만… ⇒ 설명이 나온다.

 

 

구현

accordianMenu.tsx

import React, { useState } from 'react';

import styles from './index.module.scss';

import classNames from 'classnames/bind';

import basicCn from 'classnames';

const cn = classNames.bind(styles);

const AccordianMenu = () => {
  const [activeId, setActiveId] = useState<string>('');

  const handleActiveId = (id: string) => {
    if (activeId === id) {
      setActiveId('');
      return;
    }
    setActiveId(id);
  };

  const menuList = [
    { title: 'A', contents: ['A-1', 'A-2'], id: '1' },
    { title: 'B', contents: ['B-1', 'B-2'], id: '2' },
  ];

  return (
    <div>
      {menuList?.map((item) => (
        <div key={item?.id}>
          <button
            className={cn('menu_button')}
            onClick={() => handleActiveId(item.id)}
          >
            <i
              className={basicCn('ri-arrow-down-line', {
                'ri-arrow-up-line': activeId === item.id,
              })}
            ></i>
            <h2>{item?.title}</h2>
          </button>

          <div>
            {item?.contents.map((content) => (
              <div
                key={item?.id}
                className={cn('menu_item', {
                  menu_item_active: activeId === item.id,
                })}
              >
                {content}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export default AccordianMenu;

• menuList 배열을 통해 title과 contetns를 화면에 보여준다. id는 key의 값으로도 사용되고 현재 active된 요소를 파악하는데도 사용된다. 일단 컴포넌트 내부에서 작성했지만 개인적으론 Props를 통해 받아오는 편이 좋다고 생각된다. 테스트도 편해지고 중요 정보를 외부에서 받아옴으로써 accordianMenu 컴포넌트를 사용하는 곳에서 결과를 예상하기 쉬워진다.
• 가독성 향상을 위해 컴포넌트를 추가할 수 있다. 두 번째 map에서 ListItem이라고 하는 contents를 보여주는 목적을 가진 컴포넌트를 추가해서 사용할 수 있다.

 

 

accordian.module.css

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu_button {
    width: 200px;
    display: flex;
    column-gap: 16px;
    align-items: center;
    border: none;
    border-bottom: 1px solid gray;
    background-color: transparent;

    &:hover {
        background-color: lightgray;
    }

    & i {
       @extend .center;
        margin-right: 30px;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        background-color: dodgerblue;
        color: white;
    }
}

.menu_item {
    @extend .center;
    width: 0;
    height: 0;
    opacity: 0;
    border-bottom: 1px solid gray;
    transition: height .3s;
}

.menu_item_active {
    width: 200px;
    height: 50px;
    opacity: 1;
}

• active 될 때 height에 변화를 주고 trasition을 걸어 animation 효과를 줬다.

 

 

결과물