Fragment に投稿者IDを表示する

src/client/component/FragmentViewer.tsx

@@ -2,11 +2,10 @@ import EditFragmentForm from '@/client/component/EditFragmentForm'
 import { Markdown } from '@/client/component/markdown/Markdown'
 import useEditFragmentDraft from '@/client/hook/useEditFragmentDraft'
 import type { Fragment } from '@/common/model/fragment'
-import { ActionIcon, Box, Card, Group, Stack } from '@mantine/core'
+import { ActionIcon, Box, Card, Flex, Group, Stack, Text } from '@mantine/core'
 import { useHover } from '@mantine/hooks'
 import { IconPencil } from '@tabler/icons-react'
 import { useState } from 'react'
-import classes from './FragmentViewer.module.css'
 
 interface FragmentViewerProps {
   fragment: Fragment
@@ -66,15 +65,22 @@ export function FragmentViewer({
           <ToolBox onClickEdit={() => setShowEditor(true)} />
         </Box>
       )}
-      <Card withBorder className={classes.markdown}>
+      <Card withBorder>
         {showEditor ? (
           <EditFragmentForm
             closeEditor={() => setShowEditor(false)}
             updateFragment={updateFragment}
             fragment={fragment}
           />
         ) : (
-          <FragmentContent fragment={fragment} />
+          <Stack gap='6px'>
+            <FragmentContent fragment={fragment} />
+            <Flex justify='flex-end'>
+              <Text size='xs' c='dimmed'>
+                {fragment.authorId}
+              </Text>
+            </Flex>
+          </Stack>
         )}
       </Card>
     </Stack>

src/client/component/markdown/Markdown.tsx

@@ -4,6 +4,7 @@ import type { Root, RootContent } from 'mdast'
 import { useEffect, useState } from 'react'
 import { remark } from 'remark'
 import remarkGfm from 'remark-gfm'
+import classes from './Markdown.module.css'
 
 type MarkdownProps = {
   markdown: string
@@ -24,7 +25,11 @@ export function Markdown({ markdown }: MarkdownProps) {
     )
   }
 
-  return <NodeRenderer nodes={rootNode.children} />
+  return (
+    <div className={classes.markdown}>
+      <NodeRenderer nodes={rootNode.children} />
+    </div>
+  )
 }
 
 type NodeRendererProps = {

src/server/routes/scraps.ts

@@ -63,7 +63,14 @@ const scraps = honoFactory
         fragments: true,
       },
     })
-    return c.json(scrap)
+    if (!scrap) {
+      throw new HTTPException(404)
+    }
+
+    const scrapModel: Scrap = {
+      ...scrap,
+    }
+    return c.json(scrapModel)
   })
   .put(
     '/:id',