[antd] Form.Item 안에 들어갈 텍스트 컴포넌트 만들기

Ant design을 사용 하여 레이아웃을 만들던 중...
Form 하위의 Form.Item의 레이아웃은 가져가면서 그 안의 내용은 편집 불가능한 텍스트로 보여주고 싶었다.

만들고 싶은 것: Form.Item의 value를 보여주는 단순 text 컴포넌트

첫번째 시도: 걍 Text 넣기

그냥 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 커스텀

여튼 난 텍스트가 나오길 원해서 Input을 커스텀했었다.

<Form.Item label="서비스" name="serviceType">
	<Input
	bordered={false}
	disabled
	style={{ color: "black" }}
/>
</Form.Item>

되긴 됐는데 뭔가... 이질감이...

세번째 시도: Text 커스텀

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>

그렇게 하면 예쁘게 완성~