아이패드와 모바일 버전에서 카테고리들이 드롭다운 형태로 보여지게 ui를 구성하였습니다. 세부카테고리를 보기 위해서는 카테고리 옆의 화살표를 클릭하면 숨겨진 아코디언 메뉴가 나오게 구성하였습니다.
토글메뉴 구현
토글메뉴를 적용하기 위해서 먼저 토글메뉴가 열렸는지 열리지 않았는지를 구분하기 위한 useState값을 만들어 주었습니다.
그리고 isMenu state값을 관리해 줄 isMenuToggle함수를 만들었습니다.
ismenuToggle 함수는 isClickedBlock이라는 styled div 요소에 onClick으로 할당해주었습니다.
삼항연산자를 사용해서 isMenu가 true일때는 x모양 이미지 아이콘을, isMenu가 false일때는 버거모양 메뉴아이콘을 보여주도록 설정해 주었습니다.
이제 emotion styled를 통해서 isMenu state의 값에 따라 카테고리 토글창의 높이 요소를 조절해 주었습니다. 먼저 overflow:hidden 속성을 설정해서 높이를 초과하는 내부요소들은 보이지 않게 만들었습니다. 그리고 isMenu가 true일 때는 높이를 auto로 설정해 토글 메뉴 요소들이 보이게 하고, isMenu가 false일 시에는 높이를 0으로 만들어 내부 요소들이 보이지 않게 만들었습니다.
isMenu의 값은 styled-component 의 props 속성을 사용해 카테고리 제목들을 감싸고 있는 wrap에 전달해 주었습니다.
아코디언 메뉴
카테고리들 중에서 consulting, portfolio, customer 카테고리는 세부 카테고리들을 가지고 있기 때문에 그 세부 카테고리들을 보여줄 아코디언 메뉴가 필요했습니다.
과정자체는 토글메뉴를 만들때와 유사했지만, 아코디언 메뉴 사용시에는 한 메뉴를 열면 다른 메뉴가 자동적으로 닫혀지는 기능이 필요했으므로 그 부분을 추가로 설정해 주었습니다.
아코디언 메뉴가 필요한 카테고리 요소가 세게 있었으므로 이에 동일하게 3개의 state값을 생성했습니다.
그 이후 토글메뉴처럼 토글을 관리해줄 toggle함수를 만드는 과정에서 한 toggle이 열리면 다른 toggle이 닫히는 기능을 if문으로 추가해 주었습니다.
state값이 3개라 toggle 함수도 3개를 만들어 줘야 해서 코드가 길어져 버렸네요..
만들어진 토글 함수들은 dropdown 화살표가 있는 img 요소에 onClick으로 할당해주었습니다.
isDropdownClicked라는 props를 DropdownArrow와 Bubble 컴포넌트에 넣어서
각각의 state값들이 true인 경우에 맞춰 css height요소와 arrow의 rorate요소를 컨트롤 해주었습니다.
