Ant design을 사용 하여 레이아웃을 만들던 중...
Form 하위의 Form.Item의 레이아웃은 가져가면서 그 안의 내용은 편집 불가능한 텍스트로 보여주고 싶었다.
그냥 Form.Item 아래에 Text 넣으면 되는 거 아냐~? 생각했다.
<Form initialValues={initialValues}>
...
<Form.Item label="서비스" name="serviceType">
<Text />
</Form.Item>
...
</Form>
아무런 데이터도 안 나오는 Text...
참고로 Text는 chakra ui의 컴포넌트다. div랑 비슷하다.
Form.Item 하위에 Input같은 것들을 넣으면 알아서 initialValue로 설정해놓은 값이 잘 보여지던데 Text는 아무것도 뜨지 않았다. 아무래도 antd에 포함된 컴포넌트가 아니라서 그런듯...?
여튼 난 텍스트가 나오길 원해서 Input을 커스텀했었다.
<Form.Item label="서비스" name="serviceType">
<Input
bordered={false}
disabled
style={{ color: "black" }}
/>
</Form.Item>
되긴 됐는데 뭔가... 이질감이...
import { Box, chakra } from "@chakra-ui/react";
const FormText = chakra(({ ...rest }) => {
return (
<Box w="200px" {...rest}>
{rest.value}
</Box>
);
});
export default FormText;
Input 같이 값을 보여줄 수 있는 FormText를 새로 만들었다.
width를 200px로 설정한 이유는 Form.Item에 width가 없어서 width를 따로 줘야 컨텐츠가 제대로 나오기 때문... 200px이 제일 적당해서 200px로 줬지만 나중에 또 다르게 수정해야 할수도 있기 때문에 chakra로 감싸주었다.
<Form.Item label="서비스" name="serviceType">
<FormText />
</Form.Item>
그렇게 하면 예쁘게 완성~