Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 'use client';
import { useDeleteMapTagMutation, usePatchActivateMapTagMutation } from '@lib/api/mutations';
import { useGetMapTagsQuery } from '@lib/api/queries';
import MapTagTable from '@lib/components/MapTag/MapTagTable';
import CreateMapTagModal from '@lib/components/MapTag/Modal/CreateMapTagModal';
import ModifyMapTagModal from '@lib/components/MapTag/Modal/ModifyMapTagModal';
import useModalState from '@lib/hooks/useModalState';
import { Button } from 'antd';
import React from 'react';
import styled from 'styled-components';
export default function MapTagPage() {
const { data, isLoading } = useGetMapTagsQuery();
const { mutateAsync } = useDeleteMapTagMutation();
const { mutateAsync: activateMapTag } = usePatchActivateMapTagMutation();
const mapTags = data?.data || [];
const { openModal, closeModal, modal } = useModalState();
const {
openModal: openModifyModal,
closeModal: closeModifyModal,
modal: modifyModal
} = useModalState();
const [currentMapTagId, setCurrentMapTagId] = React.useState('');
const handleCreateClick = () => {
openModal({});
};
const handleRowClick = (id: string) => {
setCurrentMapTagId(id);
openModifyModal({});
};
return (
<>
<h1>맵 태그 관리</h1>
<ControllerContainer>
<Button type="primary" onClick={handleCreateClick}>
맵 태그 생성
</Button>
</ControllerContainer>
<MapTagTable
mapTags={mapTags}
onDelete={mutateAsync}
onActivate={activateMapTag}
onRowClick={handleRowClick}
loading={isLoading}
/>
<CreateMapTagModal modalData={modal} closeModal={closeModal} />
<ModifyMapTagModal
modalData={modifyModal}
closeModal={closeModifyModal}
mapTagId={currentMapTagId}
/>
</>
);
}
const ControllerContainer = styled.div`
margin-bottom: 16px;
text-align: right;
`;
|