Function DocumentModal

apps/web/app/documents/_components/DocumentModal.tsx:22–65

({ id, isOpen, closeModal }: DocumentModalProps)

};

export function DocumentModal({ id, isOpen, closeModal }: DocumentModalProps) {
  const { data: document } = useSuspenseQuery(documentQueryOptions.detail(id));

  return (
    <Modal isOpen={isOpen} closeModal={closeModal}>
      <Flex dir="col" gap={4} className="w-[80vw] md:w-[450px]">
        <Title3>자료실 다운로드</Title3>
        <div className="h-[1.5px] bg-gray-200" />
        <Flex dir="col" gap={2} className="py-2">
          {document.files.map((item) => (
            <Flex
              key={item.id}
              alignItems="center"
              justifyContent="between"
              onClick={() => downloadFile(item.originUrl, item.name)}
              className="cursor-pointer"
            >
              <Body2 weight="medium">{item.name}</Body2>
              <Icon name="download" color="gray" size={20} />
            </Flex>
          ))}
        </Flex>

        <DoubleButton
          left={
            <Button variant="tertiary" size="full" onClick={closeModal}>
              <Body2>닫기</Body2>
            </Button>
          }
          right={
            <Button
              variant="primary"
              color="blue"
              size="full"
              onClick={() => downloadAll(document.files)}
            >
              <Body2 weight="semibold">전체 다운로드</Body2>
            </Button>
          }
        />
      </Flex>
    </Modal>
  );
}