[React] react-query & ant table & dayjs 사용

상담내역 화면(Table 구현)

이슈발생(TS2322)

TS2322: 
...
is not assignable to type 'ColumnGroupType<Chat> | 
...
is not assignable to type ColumnGroupType<Chat> | ColumnType<Chat>

해결

Ant Design의 `Table` 컴포넌트에서 `align`은 임의 문자열이 아니라, 정해진 타입만 허용

`align: string` → `align: 'left' | 'center' | 'right'`  
이렇게 명확한 값만 넣기

변경

const columns = [ ... ]

//Type 명세
import type { ColumnsType } from 'antd/es/table';

const columns: ColumnsType<Chat> = [ ... ]

---

이슈발생(TS7053)

TS7053: 
...
TS7053: Element implicitly has an any type because expression of type

해결

TS가 `status` 값이 `colorMap`의 key로 "확실하게 존재"하는지 보장 못 해서 발생하는 오류

방법 1: `as const` + `keyof` 사용
방법 2: 옵셔널 체이닝 + fallback 값

변경

//방법 1: `as const` + `keyof` 사용
import { Card, Table, Tag } from 'antd';  
import { useUserStore } from '@stores/userStore';  
import { useChat } from '@hooks/useChat';  
import type { Chat } from '@/types';  
import type { ColumnsType } from 'antd/es/table';  
  
const CounselHistory = () => {  
    const { userId } = useUserStore();  
    const { useChatHistory } = useChat();  
    const { data: chatList = [] } = useChatHistory(userId || '');  
  
    const colorMap = {  
        '미처리': 'red',  
        '처리중': 'blue',  
        '처리완료': 'green',  
        '보류': 'orange',  
        '': 'gray',  
    } as const;  
  
    type StatusKey = keyof typeof colorMap;  
  
    const columns: ColumnsType<Chat> = [  
        { title: '이용자', dataIndex: 'userNm', key: 'userNm', align: 'center' },  
        { title: '상담사', dataIndex: 'mgrNm', key: 'mgrNm', sorter: (a, b) => a.mgrNm.localeCompare(b.mgrNm), align: 'center' },  
        { title: '제목', dataIndex: 'title', key: 'title', sorter: (a, b) => a.title.localeCompare(b.title), align: 'center' },  
        {  
            title: '상태',  
            dataIndex: 'status',  
            key: 'status',  
            align: 'center',  
            sorter: (a, b) => a.status.localeCompare(b.status),  
            render: (status: StatusKey) => (  
                <Tag color={colorMap[status]}>{status}</Tag>  
            )  
        },  
        { title: '유형', dataIndex: 'type', key: 'type', sorter: (a, b) => a.type.localeCompare(b.type), align: 'center' },  
        { title: '종료일시', dataIndex: 'ed', key: 'ed', sorter: (a, b) => a.ed.localeCompare(b.ed), align: 'center' },  
    ];  
  
  
    return (  
        <>  
            <div style={{display: 'flex', flexDirection: 'column', height: '100%', position: 'relative'}}>  
                <Card title="상담 내역"></Card>  
                <Table  
                    rowKey="chatSeq"  
                    columns={columns}  
                    dataSource={chatList}  
                    style={{ flex: 1 }}  
                />            </div>  
        </>  
    );  
};  
  
export default CounselHistory;

---

테이블 화면