React.js를 사용하여 레스토랑 웹사이트에 버튼을 만드는 데 문제가 있고 오버레이 페이지가 올바르게 표시되지 않습니다. 이는 자체 구성 요소(MenuButtons.jsx)에 설정되어 있으며 이전 페이지의 짧은 메뉴 섹션 하단에 있습니다(아래 이미지 참조). 전체 메뉴가 너무 길어 첫 페이지에 모두 담기에는 나머지 메뉴(예: 와인 목록, 점심 메뉴 등)에 대해 별도의 오버레이 페이지를 시작했으면 좋겠습니다. 아래 이미지는 와인 목록 오버레이 페이지의 모습을 보여줍니다.

코드는 다음과 같습니다.

레스토랑 웹사이트 첫 페이지의 메뉴 섹션

레스토랑 웹사이트 와인 목록 오버레이 페이지

와인 목록을 구성 요소로 가져오기 위해 탐색 모음 섹션(이전 페이지 상단의 햄버거 메뉴에서 단일 오버레이 페이지를 시작함)의 일부 코드를 재사용해 보았습니다(아래 첫 번째 스크린샷 참조). 이는 첫 번째 버튼(와인)에 대해 작동하지만 두 번째 버튼(주류 및 리큐어)에 코드를 복사하려고 하면 와인 및 증류주/리큐어 버튼 오버레이에 증류주 및 리큐어 구성 요소의 내용이 표시됩니다.

메뉴 버튼 코드 - 오류

누군가가 MenuButtons.jsx 코드를 다음과 같이 다시 작성할 것을 제안했습니다(아래 두 번째 스크린샷 참조). 1: 구성 요소 상단에서 상태를 선언합니다(5행): const [overlay, setOverlay] = useState(null); 2: 문자열 "wines"를 속성으로 수신하고 상태에 설정된 문자열에 따라 WinesOverlay 구성 요소를 렌더링하는 구성 요소를 만듭니다(6-14행). 3: "label"을 "wines"의 onClick 핸들러로 설정합니다(라인 21).

MenuButtons.jsx에 코드를 올바르게 작성했는지, 아니면 올바른 순서로 작성했는지 잘 모르겠습니다. 그런데 와인 버튼이 작동하지 않아서 다시 작성한 코드가 원하는 효과에 더 가까운지는 모르겠습니다.

첫 번째 버튼을 작동하게 할 수 있다면 나머지는 상대적으로 간단할 것입니다. 어떤 조언이라도 대단히 감사하겠습니다.

메뉴 버튼 코드 - 현재