feat: document 미리보기 기능 구현

@@ -16,7 +16,7 @@
     "react/prop-types": 0,
     "import/prefer-default-export": 0,
     "no-param-reassign": 0,
-    "arrow-body-style": 0,
+    "arrow-body-style": 0
   },
   "settings": {
     "react": {

+import { Card, Center, Divider, Table, Text } from '@mantine/core';
+import React from 'react';
+
+function Detail({ filename, writer, filePath, createdDate }) {
+  const rows = (
+    <>
+      <tr>
+        <td>
+          <Text style={{ width: 50 }} weight={700}>
+            문서명
+          </Text>
+        </td>
+        <td>
+          <Text>{filename}</Text>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Text weight={700}>작성자</Text>
+        </td>
+        <td>
+          <Text>{writer}</Text>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Text weight={700}>파일 경로</Text>
+        </td>
+        <td>
+          <Text>{filePath}</Text>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Text weight={700}>파일 생성일</Text>
+        </td>
+        <td>
+          <Text>{createdDate}</Text>
+        </td>
+      </tr>
+    </>
+  );
+  return (
+    <Card>
+      <Center>
+        <Text weight={700}>파일 정보</Text>
+      </Center>
+      <Divider />
+      <Table striped>
+        <thead>
+          <tbody>{rows}</tbody>
+        </thead>
+      </Table>
+    </Card>
+  );
+}
+
+export default Detail;

+/* eslint-disable react/jsx-boolean-value */
 /* eslint-disable no-unused-vars */
-import React from 'react';
-import { Container, Text } from '@mantine/core';
+import React, { useState } from 'react';
+import { Container, Popover, Text } from '@mantine/core';
+import { FaSearchPlus } from 'react-icons/fa';
 import File from './File';
 import Thumbnails from './Thumbnail';
+import Detail from '../Detail';
 
 const Document = ({
   content,
@@ -17,6 +20,7 @@ const Document = ({
   const toggleEllipsis = (str, _limit) => ({
     string: str.slice(0, _limit),
   });
+  const [opened, setOpened] = useState(false);
 
   return (
     <Container
@@ -26,7 +30,30 @@ const Document = ({
         border: '1px solid black',
       }}
     >
-      <File filename={filename} filepath={filePath} />
+      <div style={{ display: 'flex' }}>
+        <File filename={filename} filepath={filePath} />
+        <Popover
+          opened={opened}
+          onClose={() => setOpened(false)}
+          target={
+            <FaSearchPlus
+              onMouseEnter={() => setOpened(true)}
+              onMouseLeave={() => setOpened(false)}
+              style={{ marginTop: 3, marginLeft: 3, color: '#868e96' }}
+            />
+          }
+          position="bottom-start"
+          gutter={50}
+          bodyStyle={{ pointerEvents: 'none' }}
+        >
+          <Detail
+            filename={filename}
+            filePath={filePath}
+            writer={writer}
+            createdDate={createdDate}
+          />
+        </Popover>
+      </div>
       <Text color="green">경로: {filePath}</Text>
       <Text>{toggleEllipsis(content, limit).string}...</Text>
       <Thumbnails srcs={srcs} />