인프런 커뮤니티 질문&답변

메뉴를 구현하고 모바일버전에서도 확인을 하고싶어서 개발자도구에서 toggle device toolbar를 클릭하고 메뉴의 버튼들을 눌렀는데

이러한 에러가 뜹니다.  그리고 모바일로 접속해서 클릭을 해봐도 동일한 오류가 뜹니다. 이러면은 antd-mobile로 메뉴를 두개로 구성을 해야하나요?

아래는 제 코드입니다.

import PropTypes from "prop-types";
import React, { useCallback } from "react";
import Link from "next/link"
import {Menu, Input, Row, Col} from "antd";
import UserProfile from "./UserProfile";
import LoginForm from "./LoginForm";
import styled from "styled-components";
import {useSelector} from "react-redux";
import  Router  from "next/router";
import useInput from "../hooks/useInput";


const InputSearch = styled(Input.Search)`
    vertical-align: middle;
`;

const AppLayout = ({ children }) => {
    const {me } = useSelector((state) => state.user);
    const [search, changeSearch] = useInput('');
    const searchHashtag = useCallback(() => {
        Router.push(`/hashtag/${search}`);
    }, [search]);

    return (
        <div>
            <Menu mode="horizontal">
                <Menu.Item key="home">
                    <Link href={"/"}><a>home</a></Link>
                </Menu.Item>
                <Menu.Item key="profile">
                    <Link href={"/profile"}><a>profile</a></Link>
                </Menu.Item>
                <Menu.Item key="search">
                    <InputSearch  
                        enterButton 
                        value={search}
                        onChange={changeSearch}
                        onSearch={searchHashtag}/>
                </Menu.Item>
                <Menu.Item key="signup">
                    <Link href={"/signup"}><a>signup</a></Link>
                </Menu.Item>
            </Menu>
            <Row gutter={8}>
                <Col xs={24} md={6}>
                    {me ? <UserProfile/> : <LoginForm />}
                </Col>
                <Col xs={24} md={12}>{children}</Col>
                <Col xs={24} md={6}><a href="https://velog.io/@mayrang" target="_blank" rel="noreferrer noopener">Made by Mayrang</a> </Col>
            </Row>
        </div>
    );
};



AppLayout.propTypes = {
    children: PropTypes.node.isRequired,
};

export default AppLayout;