해결된 질문
23.06.08 22:00 작성
·
335
0
import React from "react";
import PropTypes from "prop-types";
import Link from "next/link";
import { Input, Menu, Row, Col } from "antd";
import { useState, UseMemo } from "react";
import UserProfile from "../components/UserProfile";
import LoginForm from "../components/LoginForm";
import styled from "styled-components";
const { Search } = Input;
const onSearch = (value) => console.log(value);
const SearchInput = styled(Input.Search)`
verticalalign: middle;
width: 200px;
marginleft: 10px;
`;
const items = [
{
label: <Link href="/">노드버드</Link>,
key: "mail",
},
{
label: (
<div>
<Link href="/profile">프로필</Link>
<SearchInput
placeholder="input search text"
enterButton="Search"
onSearch={onSearch}
/>
</div>
),
key: "profile",
},
{
label: <Link href="/signup">회원가입</Link>,
key: "signup",
},
];
let tmp = "mail";
const AppLayout = ({ children }) => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [current, setCurrent] = useState(tmp);
console.log(current);
const onClick = (e) => {
console.log("click ", e);
setCurrent(e.key);
tmp = e.key;
};
return (
<div>
<Row>
<Col span={12} offset={6}>
<Menu
mode="horizontal"
onClick={onClick}
selectedKeys={[current]}
items={items}
/>
</Col>
</Row>
<Row gutter={8}>
<Col xs={24} md={6}>
{isLoggedIn ? <UserProfile /> : <LoginForm />}
</Col>
<Col xs={24} md={12}>
{children}
</Col>
<Col xs={24} md={6}>
<a
href="https://github.com/seroak"
target="_blank"
rel="noreferrer noopener"
>
Made by seooak
</a>
</Col>
</Row>
</div>
);
};
AppLayout.propTypes = {
children: PropTypes.node.isRequired,
};
export default AppLayout;
제가 메뉴를 만들 때 ant 디자인 공식문서를 보고 const item에 요소를 작성해서 메뉴를 만드는 방식으로 코드를 작성했는데 이렇게 작서하니까 SearchInput에 styled 컴포넌트를 적용하는 것이 안됩니다 어떤 방식이 좋을까요?
const SearchInput = styled(Input.Search)`
verticalalign: middle;
width: 200px;
marginleft: 10px;
`;
const items = [
{
label: <Link href="/">노드버드</Link>,
key: "mail",
},
{
label: (
<div>
<Link href="/profile">프로필</Link>
<SearchInput
placeholder="input search text"
enterButton="Search"
onSearch={onSearch}
/>
</div>
),
맨위의 코드가 전체 코드이고 제가 궁금한 부분이 있는 코드는 아래에 있습니다
2023. 06. 09. 00:10
ssr용 설정 따로 하셔야합니다. 강좌 배포 부분에 나옵니다