npm - @tipp/ui-quill-editor - Versions diffs - 1.3.34 → 1.4.0 - Mend

@tipp/ui-quill-editor 1.3.34 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/read-card.cjs CHANGED Viewed

@@ -111,6 +111,7 @@ function ReadCard(props) {
                 ref.current.style.height = "initial";
               }
             },
+            size: "small",
             variant: "outline",
             children: [
               "\uBA54\uBAA8 \uD3BC\uCE58\uAE30",
@@ -137,38 +138,62 @@ function ReadCard(props) {
     return null;
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Card, { size: "2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Flex, { align: "center", gap: "2", justify: "between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Flex, { align: "center", gap: "4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Heading, { variant: "heading5", weight: "regular", children: title }),
-        writer ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Badge, { color: "neutral", size: "small", children: `\uC791\uC131\uC790 : ${writer}` }) : null
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Flex, { align: "center", gap: "4", children: [
-        createAt ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Typo, { children: `\uB4F1\uB85D\uC77C\uC790: ${createAt.toLocaleDateString()} ` }) : null,
-        optionItems.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.DropdownMenu.Root, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.IconButton, { variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.DotsVerticalIcon, {}) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.DropdownMenu.Content, { children: optionItems.map((item) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.DropdownMenu.Item, { onClick: item.onClick, children: [
-              item.icon,
-              item.title
-            ] }, item.title);
-          }) })
-        ] }) : null
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_ui.AlertDialog.Root,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Grid, { columns: "1fr auto", width: "100%", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        import_ui.Grid,
         {
-          onOpenChange: setDeleteDialogOpen,
-          open: deleteDialogOpen,
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.AlertDialog.Content, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.AlertDialog.Title, { children: "\uB178\uD2B8\uB97C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.AlertDialog.Description, { children: "\uC0AD\uC81C\uB41C \uB178\uD2B8\uB294 \uBCF5\uAD6C\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Flex, { gap: "3", justify: "end", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Button, { color: "gray", variant: "outline", children: "\uCDE8\uC18C" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Button, { color: "tomato", onClick: propsOnClickDelete, children: "\uC0AD\uC81C" }) })
-            ] })
-          ] })
+          align: "center",
+          columns: { initial: "1", sm: "auto 1fr" },
+          gap: "2",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Heading, { variant: "heading5", weight: "regular", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              import_ui.Flex,
+              {
+                align: "center",
+                gap: "4",
+                justify: { initial: "start", sm: "between" },
+                width: "100%",
+                children: [
+                  writer ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Badge, { color: "neutral", size: "small", children: `\uC791\uC131\uC790 : ${writer}` }) : null,
+                  createAt ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_ui.Typo,
+                    {
+                      style: { whiteSpace: "nowrap" },
+                      children: `\uB4F1\uB85D ${createAt.getFullYear()}.${createAt.getMonth() + 1}.${createAt.getDate()} `
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_ui.AlertDialog.Root,
+              {
+                onOpenChange: setDeleteDialogOpen,
+                open: deleteDialogOpen,
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.AlertDialog.Content, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.AlertDialog.Title, { children: "\uB178\uD2B8\uB97C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.AlertDialog.Description, { children: "\uC0AD\uC81C\uB41C \uB178\uD2B8\uB294 \uBCF5\uAD6C\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Flex, { gap: "3", justify: "end", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Button, { color: "gray", variant: "outline", children: "\uCDE8\uC18C" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Button, { color: "tomato", onClick: propsOnClickDelete, children: "\uC0AD\uC81C" }) })
+                  ] })
+                ] })
+              }
+            )
+          ]
         }
-      )
+      ),
+      optionItems.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.DropdownMenu.Root, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.IconButton, { ml: "2", mt: "1", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.DotsVerticalIcon, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.DropdownMenu.Content, { children: optionItems.map((item) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.DropdownMenu.Item, { onClick: item.onClick, children: [
+            item.icon,
+            item.title
+          ] }, item.title);
+        }) })
+      ] }) : null
     ] }),
     Boolean(files == null ? void 0 : files.length) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Flex, { direction: "column", gap: "1", children: files == null ? void 0 : files.map((file) => {
       var _a;
@@ -182,16 +207,17 @@ function ReadCard(props) {
             {
               mt: "3",
               size: "4",
-              style: { width: 400, height: 56 },
+              style: { width: "100%", height: 56 },
               variant: "soft",
               children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Flex, { gap: "3", pl: "4", width: "100%", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Typo, { color: "gray", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.FileIcon, { height: 20, width: 20 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Typo, { color: "gray", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.FileIcon, { height: 16, width: 16 }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   import_ui.Typo,
                   {
                     as: "p",
                     color: "gray",
                     style: { width: "100%", textAlign: "left" },
+                    variant: "caption",
                     children: file.fileName
                   }
                 )

package/dist/read-card.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/read-card.tsx","../src/html-container.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport Dompurify from 'dompurify';\nimport {\n AlertDialog,\n Badge,\n FileIcon,\n Button,\n Card,\n ChevronDownIcon,\n ChevronUpIcon,\n DotsVerticalIcon,\n Flex,\n Heading,\n IconButton,\n Link,\n Typo,\n Separator,\n DropdownMenu,\n Pencil1Icon,\n TrashIcon,\n} from '@tipp/ui';\nimport QuillHtmlOutputContainer from './html-container';\nimport type { Attachment } from './type';\n\ninterface ReadCardProps {\n onClickDelete?: () => void;\n onClickEdit?: () => void;\n content?: string;\n title?: string;\n writer?: string;\n createAt?: Date;\n files?: Attachment[];\n}\n\nexport function ReadCard(props: ReadCardProps): React.ReactNode {\n const {\n onClickDelete: propsOnClickDelete,\n onClickEdit: propsOnClickEdit,\n content = '',\n title = '',\n writer,\n createAt,\n files,\n } = props;\n const ref = useRef<HTMLDivElement>(null);\n const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);\n\n const safeContent = useMemo(() => {\n return Dompurify.sanitize(content \|\| '');\n }, [content]);\n\n interface OptionItem {\n title: string;\n icon: React.ReactNode;\n onClick: () => void;\n }\n const optionItems = useMemo<OptionItem[]>(() => {\n const result: OptionItem[] = [];\n if (propsOnClickEdit) {\n result.push({\n title: '수정하기',\n icon: <Pencil1Icon />,\n onClick: propsOnClickEdit,\n });\n }\n\n if (propsOnClickDelete) {\n result.push({\n title: '삭제하기',\n onClick: () => {\n setDeleteDialogOpen(true);\n },\n icon: <TrashIcon />,\n });\n }\n\n return result;\n }, [propsOnClickDelete, propsOnClickEdit]);\n\n const [className, setClassName] = useState<undefined \| 'closed'>('closed');\n const [openBtnVisible, setOpenBtnVisible] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);\n ref.current.style.height = `${ref.current.clientHeight}px`;\n }, [ref, content]);\n\n const renderOpenBtns = (): React.ReactNode => {\n if (openBtnVisible) {\n if (className) {\n return (\n <Button\n color=\"gray\"\n onClick={() => {\n setClassName(undefined);\n if (ref.current) {\n ref.current.style.height = 'initial';\n }\n }}\n variant=\"outline\"\n >\n 메모 펼치기\n <ChevronDownIcon />\n </Button>\n );\n }\n return (\n <Button\n color=\"gray\"\n onClick={() => {\n setClassName('closed');\n }}\n variant=\"outline\"\n >\n 메모 접기\n <ChevronUpIcon />\n </Button>\n );\n }\n return null;\n };\n\n return (\n <Card size=\"2\">\n <Flex align=\"center\" gap=\"2\" justify=\"between\">\n <Flex align=\"center\" gap=\"4\">\n <Heading variant=\"heading5\" weight=\"regular\">\n {title}\n </Heading>\n {writer ? (\n <Badge color=\"neutral\" size=\"small\">{`작성자 : ${writer}`}</Badge>\n ) : null}\n </Flex>\n\n <Flex align=\"center\" gap=\"4\">\n {createAt ? (\n <Typo>{`등록일자: ${createAt.toLocaleDateString()} `}</Typo>\n ) : null}\n\n {optionItems.length ? (\n <DropdownMenu.Root>\n <DropdownMenu.Trigger>\n <IconButton variant=\"ghost\">\n <DotsVerticalIcon />\n </IconButton>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {optionItems.map((item) => {\n return (\n <DropdownMenu.Item key={item.title} onClick={item.onClick}>\n {item.icon}\n {item.title}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n ) : null}\n </Flex>\n\n <AlertDialog.Root\n onOpenChange={setDeleteDialogOpen}\n open={deleteDialogOpen}\n >\n <AlertDialog.Content>\n <AlertDialog.Title>노트를 삭제하시겠습니까?</AlertDialog.Title>\n <AlertDialog.Description>\n 삭제된 노트는 복구할 수 없습니다. 삭제하시겠습니까?\n </AlertDialog.Description>\n <Flex gap=\"3\" justify=\"end\">\n <AlertDialog.Cancel>\n <Button color=\"gray\" variant=\"outline\">\n 취소\n </Button>\n </AlertDialog.Cancel>\n <AlertDialog.Action>\n <Button color=\"tomato\" onClick={propsOnClickDelete}>\n 삭제\n </Button>\n </AlertDialog.Action>\n </Flex>\n </AlertDialog.Content>\n </AlertDialog.Root>\n </Flex>\n\n {Boolean(files?.length) && (\n <Flex direction=\"column\" gap=\"1\">\n {files?.map((file) => {\n return (\n <Link\n download={file.fileName}\n href={file.url}\n key={file.createdAt?.valueOf() + file.fileName}\n >\n <IconButton\n mt=\"3\"\n size=\"4\"\n style={{ width: 400, height: 56 }}\n variant=\"soft\"\n >\n <Flex gap=\"3\" pl=\"4\" width=\"100%\">\n <Typo color=\"gray\">\n <FileIcon height={20} width={20} />\n </Typo>\n <Typo\n as=\"p\"\n color=\"gray\"\n style={{ width: '100%', textAlign: 'left' }}\n >\n {file.fileName}\n </Typo>\n </Flex>\n </IconButton>\n </Link>\n );\n })}\n </Flex>\n )}\n\n {content ? (\n <>\n <Separator mb=\"4\" mt=\"4\" style={{ width: '100%' }} />\n\n <Flex align=\"center\" direction=\"column\" gap=\"3\">\n <QuillHtmlOutputContainer\n className={className}\n html={safeContent}\n ref={ref}\n />\n {renderOpenBtns()}\n </Flex>\n </>\n ) : null}\n </Card>\n );\n}\n","import React, { forwardRef } from 'react';\n\ninterface QuillHtmlOutputContainerProps {\n html: string;\n className?: string;\n}\n\nconst QuillHtmlOutputContainer = forwardRef<\n HTMLDivElement,\n QuillHtmlOutputContainerProps\n>(({ html, className }, ref): React.ReactNode => {\n return (\n <div className=\"ql-snow ql-container read-mode\">\n <div\n className={`ql-editor ${className \|\| ''}`}\n dangerouslySetInnerHTML={{ __html: html }}\n ref={ref}\n />\n </div>\n );\n});\n\nQuillHtmlOutputContainer.displayName = 'QuillHtmlOutputContainer';\n\nexport default QuillHtmlOutputContainer;\n"],"mappings":"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","names":["import_react","import_jsx_runtime","Dompurify"]}
1	+ {"version":3,"sources":["../src/read-card.tsx","../src/html-container.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport Dompurify from 'dompurify';\nimport {\n AlertDialog,\n Badge,\n FileIcon,\n Button,\n Card,\n ChevronDownIcon,\n ChevronUpIcon,\n DotsVerticalIcon,\n Flex,\n Heading,\n IconButton,\n Link,\n Typo,\n Separator,\n DropdownMenu,\n Pencil1Icon,\n TrashIcon,\n Grid,\n} from '@tipp/ui';\nimport QuillHtmlOutputContainer from './html-container';\nimport type { Attachment } from './type';\n\ninterface ReadCardProps {\n onClickDelete?: () => void;\n onClickEdit?: () => void;\n content?: string;\n title?: string;\n writer?: string;\n createAt?: Date;\n files?: Attachment[];\n}\n\nexport function ReadCard(props: ReadCardProps): React.ReactNode {\n const {\n onClickDelete: propsOnClickDelete,\n onClickEdit: propsOnClickEdit,\n content = '',\n title = '',\n writer,\n createAt,\n files,\n } = props;\n const ref = useRef<HTMLDivElement>(null);\n const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);\n\n const safeContent = useMemo(() => {\n return Dompurify.sanitize(content \|\| '');\n }, [content]);\n\n interface OptionItem {\n title: string;\n icon: React.ReactNode;\n onClick: () => void;\n }\n const optionItems = useMemo<OptionItem[]>(() => {\n const result: OptionItem[] = [];\n if (propsOnClickEdit) {\n result.push({\n title: '수정하기',\n icon: <Pencil1Icon />,\n onClick: propsOnClickEdit,\n });\n }\n\n if (propsOnClickDelete) {\n result.push({\n title: '삭제하기',\n onClick: () => {\n setDeleteDialogOpen(true);\n },\n icon: <TrashIcon />,\n });\n }\n\n return result;\n }, [propsOnClickDelete, propsOnClickEdit]);\n\n const [className, setClassName] = useState<undefined \| 'closed'>('closed');\n const [openBtnVisible, setOpenBtnVisible] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);\n ref.current.style.height = `${ref.current.clientHeight}px`;\n }, [ref, content]);\n\n const renderOpenBtns = (): React.ReactNode => {\n if (openBtnVisible) {\n if (className) {\n return (\n <Button\n color=\"gray\"\n onClick={() => {\n setClassName(undefined);\n if (ref.current) {\n ref.current.style.height = 'initial';\n }\n }}\n size=\"small\"\n variant=\"outline\"\n >\n 메모 펼치기\n <ChevronDownIcon />\n </Button>\n );\n }\n return (\n <Button\n color=\"gray\"\n onClick={() => {\n setClassName('closed');\n }}\n variant=\"outline\"\n >\n 메모 접기\n <ChevronUpIcon />\n </Button>\n );\n }\n return null;\n };\n\n return (\n <Card size=\"2\">\n <Grid columns=\"1fr auto\" width=\"100%\">\n <Grid\n align=\"center\"\n columns={{ initial: '1', sm: 'auto 1fr' }}\n gap=\"2\"\n width=\"100%\"\n >\n <Heading variant=\"heading5\" weight=\"regular\">\n {title}\n </Heading>\n\n <Flex\n align=\"center\"\n gap=\"4\"\n justify={{ initial: 'start', sm: 'between' }}\n width=\"100%\"\n >\n {writer ? (\n <Badge color=\"neutral\" size=\"small\">{`작성자 : ${writer}`}</Badge>\n ) : null}\n {createAt ? (\n <Typo\n style={{ whiteSpace: 'nowrap' }}\n >{`등록 ${createAt.getFullYear()}.${createAt.getMonth() + 1}.${createAt.getDate()} `}</Typo>\n ) : null}\n </Flex>\n\n <AlertDialog.Root\n onOpenChange={setDeleteDialogOpen}\n open={deleteDialogOpen}\n >\n <AlertDialog.Content>\n <AlertDialog.Title>노트를 삭제하시겠습니까?</AlertDialog.Title>\n <AlertDialog.Description>\n 삭제된 노트는 복구할 수 없습니다. 삭제하시겠습니까?\n </AlertDialog.Description>\n <Flex gap=\"3\" justify=\"end\">\n <AlertDialog.Cancel>\n <Button color=\"gray\" variant=\"outline\">\n 취소\n </Button>\n </AlertDialog.Cancel>\n <AlertDialog.Action>\n <Button color=\"tomato\" onClick={propsOnClickDelete}>\n 삭제\n </Button>\n </AlertDialog.Action>\n </Flex>\n </AlertDialog.Content>\n </AlertDialog.Root>\n </Grid>\n\n {/* ... 옵션 버튼 */}\n {optionItems.length ? (\n <DropdownMenu.Root>\n <DropdownMenu.Trigger>\n <IconButton ml=\"2\" mt=\"1\" variant=\"ghost\">\n <DotsVerticalIcon />\n </IconButton>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {optionItems.map((item) => {\n return (\n <DropdownMenu.Item key={item.title} onClick={item.onClick}>\n {item.icon}\n {item.title}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n ) : null}\n </Grid>\n\n {Boolean(files?.length) && (\n <Flex direction=\"column\" gap=\"1\">\n {files?.map((file) => {\n return (\n <Link\n download={file.fileName}\n href={file.url}\n key={file.createdAt?.valueOf() + file.fileName}\n >\n <IconButton\n mt=\"3\"\n size=\"4\"\n style={{ width: '100%', height: 56 }}\n variant=\"soft\"\n >\n <Flex gap=\"3\" pl=\"4\" width=\"100%\">\n <Typo color=\"gray\">\n <FileIcon height={16} width={16} />\n </Typo>\n <Typo\n as=\"p\"\n color=\"gray\"\n style={{ width: '100%', textAlign: 'left' }}\n variant=\"caption\"\n >\n {file.fileName}\n </Typo>\n </Flex>\n </IconButton>\n </Link>\n );\n })}\n </Flex>\n )}\n\n {content ? (\n <>\n <Separator mb=\"4\" mt=\"4\" style={{ width: '100%' }} />\n\n <Flex align=\"center\" direction=\"column\" gap=\"3\">\n <QuillHtmlOutputContainer\n className={className}\n html={safeContent}\n ref={ref}\n />\n {renderOpenBtns()}\n </Flex>\n </>\n ) : null}\n </Card>\n );\n}\n","import React, { forwardRef } from 'react';\n\ninterface QuillHtmlOutputContainerProps {\n html: string;\n className?: string;\n}\n\nconst QuillHtmlOutputContainer = forwardRef<\n HTMLDivElement,\n QuillHtmlOutputContainerProps\n>(({ html, className }, ref): React.ReactNode => {\n return (\n <div className=\"ql-snow ql-container read-mode\">\n <div\n className={`ql-editor ${className \|\| ''}`}\n dangerouslySetInnerHTML={{ __html: html }}\n ref={ref}\n />\n </div>\n );\n});\n\nQuillHtmlOutputContainer.displayName = 'QuillHtmlOutputContainer';\n\nexport default QuillHtmlOutputContainer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAA4D;AAC5D,uBAAsB;AACtB,gBAmBO;;;ACrBP,mBAAkC;AAa5B;AANN,IAAM,+BAA2B,yBAG/B,CAAC,EAAE,MAAM,UAAU,GAAG,QAAyB;AAC/C,SACE,4CAAC,SAAI,WAAU,kCACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,aAAa,aAAa,EAAE;AAAA,MACvC,yBAAyB,EAAE,QAAQ,KAAK;AAAA,MACxC;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,yBAAyB,cAAc;AAEvC,IAAO,yBAAQ;;;ADsCD,IAAAC,sBAAA;AA3BP,SAAS,SAAS,OAAuC;AAC9D,QAAM;AAAA,IACJ,eAAe;AAAA,IACf,aAAa;AAAA,IACb,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,UAAM,sBAAuB,IAAI;AACvC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,wBAAS,KAAK;AAE9D,QAAM,kBAAc,uBAAQ,MAAM;AAChC,WAAO,iBAAAC,QAAU,SAAS,WAAW,EAAE;AAAA,EACzC,GAAG,CAAC,OAAO,CAAC;AAOZ,QAAM,kBAAc,uBAAsB,MAAM;AAC9C,UAAM,SAAuB,CAAC;AAC9B,QAAI,kBAAkB;AACpB,aAAO,KAAK;AAAA,QACV,OAAO;AAAA,QACP,MAAM,6CAAC,yBAAY;AAAA,QACnB,SAAS;AAAA,MACX,CAAC;AAAA,IACH;AAEA,QAAI,oBAAoB;AACtB,aAAO,KAAK;AAAA,QACV,OAAO;AAAA,QACP,SAAS,MAAM;AACb,8BAAoB,IAAI;AAAA,QAC1B;AAAA,QACA,MAAM,6CAAC,uBAAU;AAAA,MACnB,CAAC;AAAA,IACH;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,gBAAgB,CAAC;AAEzC,QAAM,CAAC,WAAW,YAAY,QAAI,wBAA+B,QAAQ;AACzE,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,wBAAS,KAAK;AAE1D,+BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAClB,sBAAkB,IAAI,QAAQ,eAAe,IAAI,QAAQ,YAAY;AACrE,QAAI,QAAQ,MAAM,SAAS,GAAG,IAAI,QAAQ,YAAY;AAAA,EACxD,GAAG,CAAC,KAAK,OAAO,CAAC;AAEjB,QAAM,iBAAiB,MAAuB;AAC5C,QAAI,gBAAgB;AAClB,UAAI,WAAW;AACb,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAS,MAAM;AACb,2BAAa,MAAS;AACtB,kBAAI,IAAI,SAAS;AACf,oBAAI,QAAQ,MAAM,SAAS;AAAA,cAC7B;AAAA,YACF;AAAA,YACA,MAAK;AAAA,YACL,SAAQ;AAAA,YACT;AAAA;AAAA,cAEC,6CAAC,6BAAgB;AAAA;AAAA;AAAA,QACnB;AAAA,MAEJ;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,SAAS,MAAM;AACb,yBAAa,QAAQ;AAAA,UACvB;AAAA,UACA,SAAQ;AAAA,UACT;AAAA;AAAA,YAEC,6CAAC,2BAAc;AAAA;AAAA;AAAA,MACjB;AAAA,IAEJ;AACA,WAAO;AAAA,EACT;AAEA,SACE,8CAAC,kBAAK,MAAK,KACT;AAAA,kDAAC,kBAAK,SAAQ,YAAW,OAAM,QAC7B;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,SAAS,EAAE,SAAS,KAAK,IAAI,WAAW;AAAA,UACxC,KAAI;AAAA,UACJ,OAAM;AAAA,UAEN;AAAA,yDAAC,qBAAQ,SAAQ,YAAW,QAAO,WAChC,iBACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,KAAI;AAAA,gBACJ,SAAS,EAAE,SAAS,SAAS,IAAI,UAAU;AAAA,gBAC3C,OAAM;AAAA,gBAEL;AAAA,2BACC,6CAAC,mBAAM,OAAM,WAAU,MAAK,SAAS,kCAAS,MAAM,IAAG,IACrD;AAAA,kBACH,WACC;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAO,EAAE,YAAY,SAAS;AAAA,sBAC9B,0BAAM,SAAS,YAAY,CAAC,IAAI,SAAS,SAAS,IAAI,CAAC,IAAI,SAAS,QAAQ,CAAC;AAAA;AAAA,kBAAI,IACjF;AAAA;AAAA;AAAA,YACN;AAAA,YAEA;AAAA,cAAC,sBAAY;AAAA,cAAZ;AAAA,gBACC,cAAc;AAAA,gBACd,MAAM;AAAA,gBAEN,wDAAC,sBAAY,SAAZ,EACC;AAAA,+DAAC,sBAAY,OAAZ,EAAkB,kFAAa;AAAA,kBAChC,6CAAC,sBAAY,aAAZ,EAAwB,yJAEzB;AAAA,kBACA,8CAAC,kBAAK,KAAI,KAAI,SAAQ,OACpB;AAAA,iEAAC,sBAAY,QAAZ,EACC,uDAAC,oBAAO,OAAM,QAAO,SAAQ,WAAU,0BAEvC,GACF;AAAA,oBACA,6CAAC,sBAAY,QAAZ,EACC,uDAAC,oBAAO,OAAM,UAAS,SAAS,oBAAoB,0BAEpD,GACF;AAAA,qBACF;AAAA,mBACF;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA,MAGC,YAAY,SACX,8CAAC,uBAAa,MAAb,EACC;AAAA,qDAAC,uBAAa,SAAb,EACC,uDAAC,wBAAW,IAAG,KAAI,IAAG,KAAI,SAAQ,SAChC,uDAAC,8BAAiB,GACpB,GACF;AAAA,QACA,6CAAC,uBAAa,SAAb,EACE,sBAAY,IAAI,CAAC,SAAS;AACzB,iBACE,8CAAC,uBAAa,MAAb,EAAmC,SAAS,KAAK,SAC/C;AAAA,iBAAK;AAAA,YACL,KAAK;AAAA,eAFgB,KAAK,KAG7B;AAAA,QAEJ,CAAC,GACH;AAAA,SACF,IACE;AAAA,OACN;AAAA,IAEC,QAAQ,+BAAO,MAAM,KACpB,6CAAC,kBAAK,WAAU,UAAS,KAAI,KAC1B,yCAAO,IAAI,CAAC,SAAS;AA3MhC;AA4MY,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,KAAK;AAAA,UACf,MAAM,KAAK;AAAA,UAGX;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,MAAK;AAAA,cACL,OAAO,EAAE,OAAO,QAAQ,QAAQ,GAAG;AAAA,cACnC,SAAQ;AAAA,cAER,wDAAC,kBAAK,KAAI,KAAI,IAAG,KAAI,OAAM,QACzB;AAAA,6DAAC,kBAAK,OAAM,QACV,uDAAC,sBAAS,QAAQ,IAAI,OAAO,IAAI,GACnC;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAG;AAAA,oBACH,OAAM;AAAA,oBACN,OAAO,EAAE,OAAO,QAAQ,WAAW,OAAO;AAAA,oBAC1C,SAAQ;AAAA,oBAEP,eAAK;AAAA;AAAA,gBACR;AAAA,iBACF;AAAA;AAAA,UACF;AAAA;AAAA,UArBK,UAAK,cAAL,mBAAgB,aAAY,KAAK;AAAA,MAsBxC;AAAA,IAEJ,IACF;AAAA,IAGD,UACC,8EACE;AAAA,mDAAC,uBAAU,IAAG,KAAI,IAAG,KAAI,OAAO,EAAE,OAAO,OAAO,GAAG;AAAA,MAEnD,8CAAC,kBAAK,OAAM,UAAS,WAAU,UAAS,KAAI,KAC1C;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACC,eAAe;AAAA,SAClB;AAAA,OACF,IACE;AAAA,KACN;AAEJ;","names":["import_react","import_jsx_runtime","Dompurify"]}

package/dist/read-card.js CHANGED Viewed

@@ -23,7 +23,8 @@ import {
   Separator,
   DropdownMenu,
   Pencil1Icon,
-  TrashIcon
+  TrashIcon,
+  Grid
 } from "@tipp/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function ReadCard(props) {
@@ -82,6 +83,7 @@ function ReadCard(props) {
                 ref.current.style.height = "initial";
               }
             },
+            size: "small",
             variant: "outline",
             children: [
               "\uBA54\uBAA8 \uD3BC\uCE58\uAE30",
@@ -108,38 +110,62 @@ function ReadCard(props) {
     return null;
   };
   return /* @__PURE__ */ jsxs(Card, { size: "2", children: [
-    /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", justify: "between", children: [
-      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", children: [
-        /* @__PURE__ */ jsx(Heading, { variant: "heading5", weight: "regular", children: title }),
-        writer ? /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "small", children: `\uC791\uC131\uC790 : ${writer}` }) : null
-      ] }),
-      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", children: [
-        createAt ? /* @__PURE__ */ jsx(Typo, { children: `\uB4F1\uB85D\uC77C\uC790: ${createAt.toLocaleDateString()} ` }) : null,
-        optionItems.length ? /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
-          /* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", children: /* @__PURE__ */ jsx(DotsVerticalIcon, {}) }) }),
-          /* @__PURE__ */ jsx(DropdownMenu.Content, { children: optionItems.map((item) => {
-            return /* @__PURE__ */ jsxs(DropdownMenu.Item, { onClick: item.onClick, children: [
-              item.icon,
-              item.title
-            ] }, item.title);
-          }) })
-        ] }) : null
-      ] }),
-      /* @__PURE__ */ jsx(
-        AlertDialog.Root,
+    /* @__PURE__ */ jsxs(Grid, { columns: "1fr auto", width: "100%", children: [
+      /* @__PURE__ */ jsxs(
+        Grid,
         {
-          onOpenChange: setDeleteDialogOpen,
-          open: deleteDialogOpen,
-          children: /* @__PURE__ */ jsxs(AlertDialog.Content, { children: [
-            /* @__PURE__ */ jsx(AlertDialog.Title, { children: "\uB178\uD2B8\uB97C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
-            /* @__PURE__ */ jsx(AlertDialog.Description, { children: "\uC0AD\uC81C\uB41C \uB178\uD2B8\uB294 \uBCF5\uAD6C\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
-            /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", children: [
-              /* @__PURE__ */ jsx(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "outline", children: "\uCDE8\uC18C" }) }),
-              /* @__PURE__ */ jsx(AlertDialog.Action, { children: /* @__PURE__ */ jsx(Button, { color: "tomato", onClick: propsOnClickDelete, children: "\uC0AD\uC81C" }) })
-            ] })
-          ] })
+          align: "center",
+          columns: { initial: "1", sm: "auto 1fr" },
+          gap: "2",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ jsx(Heading, { variant: "heading5", weight: "regular", children: title }),
+            /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                align: "center",
+                gap: "4",
+                justify: { initial: "start", sm: "between" },
+                width: "100%",
+                children: [
+                  writer ? /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "small", children: `\uC791\uC131\uC790 : ${writer}` }) : null,
+                  createAt ? /* @__PURE__ */ jsx(
+                    Typo,
+                    {
+                      style: { whiteSpace: "nowrap" },
+                      children: `\uB4F1\uB85D ${createAt.getFullYear()}.${createAt.getMonth() + 1}.${createAt.getDate()} `
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AlertDialog.Root,
+              {
+                onOpenChange: setDeleteDialogOpen,
+                open: deleteDialogOpen,
+                children: /* @__PURE__ */ jsxs(AlertDialog.Content, { children: [
+                  /* @__PURE__ */ jsx(AlertDialog.Title, { children: "\uB178\uD2B8\uB97C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
+                  /* @__PURE__ */ jsx(AlertDialog.Description, { children: "\uC0AD\uC81C\uB41C \uB178\uD2B8\uB294 \uBCF5\uAD6C\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
+                  /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", children: [
+                    /* @__PURE__ */ jsx(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "outline", children: "\uCDE8\uC18C" }) }),
+                    /* @__PURE__ */ jsx(AlertDialog.Action, { children: /* @__PURE__ */ jsx(Button, { color: "tomato", onClick: propsOnClickDelete, children: "\uC0AD\uC81C" }) })
+                  ] })
+                ] })
+              }
+            )
+          ]
         }
-      )
+      ),
+      optionItems.length ? /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(IconButton, { ml: "2", mt: "1", variant: "ghost", children: /* @__PURE__ */ jsx(DotsVerticalIcon, {}) }) }),
+        /* @__PURE__ */ jsx(DropdownMenu.Content, { children: optionItems.map((item) => {
+          return /* @__PURE__ */ jsxs(DropdownMenu.Item, { onClick: item.onClick, children: [
+            item.icon,
+            item.title
+          ] }, item.title);
+        }) })
+      ] }) : null
     ] }),
     Boolean(files == null ? void 0 : files.length) && /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "1", children: files == null ? void 0 : files.map((file) => {
       var _a;
@@ -153,16 +179,17 @@ function ReadCard(props) {
             {
               mt: "3",
               size: "4",
-              style: { width: 400, height: 56 },
+              style: { width: "100%", height: 56 },
               variant: "soft",
               children: /* @__PURE__ */ jsxs(Flex, { gap: "3", pl: "4", width: "100%", children: [
-                /* @__PURE__ */ jsx(Typo, { color: "gray", children: /* @__PURE__ */ jsx(FileIcon, { height: 20, width: 20 }) }),
+                /* @__PURE__ */ jsx(Typo, { color: "gray", children: /* @__PURE__ */ jsx(FileIcon, { height: 16, width: 16 }) }),
                 /* @__PURE__ */ jsx(
                   Typo,
                   {
                     as: "p",
                     color: "gray",
                     style: { width: "100%", textAlign: "left" },
+                    variant: "caption",
                     children: file.fileName
                   }
                 )

package/dist/read-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/read-card.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport Dompurify from 'dompurify';\nimport {\n AlertDialog,\n Badge,\n FileIcon,\n Button,\n Card,\n ChevronDownIcon,\n ChevronUpIcon,\n DotsVerticalIcon,\n Flex,\n Heading,\n IconButton,\n Link,\n Typo,\n Separator,\n DropdownMenu,\n Pencil1Icon,\n TrashIcon,\n} from '@tipp/ui';\nimport QuillHtmlOutputContainer from './html-container';\nimport type { Attachment } from './type';\n\ninterface ReadCardProps {\n onClickDelete?: () => void;\n onClickEdit?: () => void;\n content?: string;\n title?: string;\n writer?: string;\n createAt?: Date;\n files?: Attachment[];\n}\n\nexport function ReadCard(props: ReadCardProps): React.ReactNode {\n const {\n onClickDelete: propsOnClickDelete,\n onClickEdit: propsOnClickEdit,\n content = '',\n title = '',\n writer,\n createAt,\n files,\n } = props;\n const ref = useRef<HTMLDivElement>(null);\n const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);\n\n const safeContent = useMemo(() => {\n return Dompurify.sanitize(content \|\| '');\n }, [content]);\n\n interface OptionItem {\n title: string;\n icon: React.ReactNode;\n onClick: () => void;\n }\n const optionItems = useMemo<OptionItem[]>(() => {\n const result: OptionItem[] = [];\n if (propsOnClickEdit) {\n result.push({\n title: '수정하기',\n icon: <Pencil1Icon />,\n onClick: propsOnClickEdit,\n });\n }\n\n if (propsOnClickDelete) {\n result.push({\n title: '삭제하기',\n onClick: () => {\n setDeleteDialogOpen(true);\n },\n icon: <TrashIcon />,\n });\n }\n\n return result;\n }, [propsOnClickDelete, propsOnClickEdit]);\n\n const [className, setClassName] = useState<undefined \| 'closed'>('closed');\n const [openBtnVisible, setOpenBtnVisible] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);\n ref.current.style.height = `${ref.current.clientHeight}px`;\n }, [ref, content]);\n\n const renderOpenBtns = (): React.ReactNode => {\n if (openBtnVisible) {\n if (className) {\n return (\n <Button\n color=\"gray\"\n onClick={() => {\n setClassName(undefined);\n if (ref.current) {\n ref.current.style.height = 'initial';\n }\n }}\n variant=\"outline\"\n >\n 메모 펼치기\n <ChevronDownIcon />\n </Button>\n );\n }\n return (\n <Button\n color=\"gray\"\n onClick={() => {\n setClassName('closed');\n }}\n variant=\"outline\"\n >\n 메모 접기\n <ChevronUpIcon />\n </Button>\n );\n }\n return null;\n };\n\n return (\n <Card size=\"2\">\n <Flex align=\"center\" gap=\"2\" justify=\"between\">\n <Flex align=\"center\" gap=\"4\">\n <Heading variant=\"heading5\" weight=\"regular\">\n {title}\n </Heading>\n {writer ? (\n <Badge color=\"neutral\" size=\"small\">{`작성자 : ${writer}`}</Badge>\n ) : null}\n </Flex>\n\n <Flex align=\"center\" gap=\"4\">\n {createAt ? (\n <Typo>{`등록일자: ${createAt.toLocaleDateString()} `}</Typo>\n ) : null}\n\n {optionItems.length ? (\n <DropdownMenu.Root>\n <DropdownMenu.Trigger>\n <IconButton variant=\"ghost\">\n <DotsVerticalIcon />\n </IconButton>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {optionItems.map((item) => {\n return (\n <DropdownMenu.Item key={item.title} onClick={item.onClick}>\n {item.icon}\n {item.title}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n ) : null}\n </Flex>\n\n <AlertDialog.Root\n onOpenChange={setDeleteDialogOpen}\n open={deleteDialogOpen}\n >\n <AlertDialog.Content>\n <AlertDialog.Title>노트를 삭제하시겠습니까?</AlertDialog.Title>\n <AlertDialog.Description>\n 삭제된 노트는 복구할 수 없습니다. 삭제하시겠습니까?\n </AlertDialog.Description>\n <Flex gap=\"3\" justify=\"end\">\n <AlertDialog.Cancel>\n <Button color=\"gray\" variant=\"outline\">\n 취소\n </Button>\n </AlertDialog.Cancel>\n <AlertDialog.Action>\n <Button color=\"tomato\" onClick={propsOnClickDelete}>\n 삭제\n </Button>\n </AlertDialog.Action>\n </Flex>\n </AlertDialog.Content>\n </AlertDialog.Root>\n </Flex>\n\n {Boolean(files?.length) && (\n <Flex direction=\"column\" gap=\"1\">\n {files?.map((file) => {\n return (\n <Link\n download={file.fileName}\n href={file.url}\n key={file.createdAt?.valueOf() + file.fileName}\n >\n <IconButton\n mt=\"3\"\n size=\"4\"\n style={{ width: 400, height: 56 }}\n variant=\"soft\"\n >\n <Flex gap=\"3\" pl=\"4\" width=\"100%\">\n <Typo color=\"gray\">\n <FileIcon height={20} width={20} />\n </Typo>\n <Typo\n as=\"p\"\n color=\"gray\"\n style={{ width: '100%', textAlign: 'left' }}\n >\n {file.fileName}\n </Typo>\n </Flex>\n </IconButton>\n </Link>\n );\n })}\n </Flex>\n )}\n\n {content ? (\n <>\n <Separator mb=\"4\" mt=\"4\" style={{ width: '100%' }} />\n\n <Flex align=\"center\" direction=\"column\" gap=\"3\">\n <QuillHtmlOutputContainer\n className={className}\n html={safeContent}\n ref={ref}\n />\n {renderOpenBtns()}\n </Flex>\n </>\n ) : null}\n </Card>\n );\n}\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../src/read-card.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport Dompurify from 'dompurify';\nimport {\n AlertDialog,\n Badge,\n FileIcon,\n Button,\n Card,\n ChevronDownIcon,\n ChevronUpIcon,\n DotsVerticalIcon,\n Flex,\n Heading,\n IconButton,\n Link,\n Typo,\n Separator,\n DropdownMenu,\n Pencil1Icon,\n TrashIcon,\n Grid,\n} from '@tipp/ui';\nimport QuillHtmlOutputContainer from './html-container';\nimport type { Attachment } from './type';\n\ninterface ReadCardProps {\n onClickDelete?: () => void;\n onClickEdit?: () => void;\n content?: string;\n title?: string;\n writer?: string;\n createAt?: Date;\n files?: Attachment[];\n}\n\nexport function ReadCard(props: ReadCardProps): React.ReactNode {\n const {\n onClickDelete: propsOnClickDelete,\n onClickEdit: propsOnClickEdit,\n content = '',\n title = '',\n writer,\n createAt,\n files,\n } = props;\n const ref = useRef<HTMLDivElement>(null);\n const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);\n\n const safeContent = useMemo(() => {\n return Dompurify.sanitize(content \|\| '');\n }, [content]);\n\n interface OptionItem {\n title: string;\n icon: React.ReactNode;\n onClick: () => void;\n }\n const optionItems = useMemo<OptionItem[]>(() => {\n const result: OptionItem[] = [];\n if (propsOnClickEdit) {\n result.push({\n title: '수정하기',\n icon: <Pencil1Icon />,\n onClick: propsOnClickEdit,\n });\n }\n\n if (propsOnClickDelete) {\n result.push({\n title: '삭제하기',\n onClick: () => {\n setDeleteDialogOpen(true);\n },\n icon: <TrashIcon />,\n });\n }\n\n return result;\n }, [propsOnClickDelete, propsOnClickEdit]);\n\n const [className, setClassName] = useState<undefined \| 'closed'>('closed');\n const [openBtnVisible, setOpenBtnVisible] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);\n ref.current.style.height = `${ref.current.clientHeight}px`;\n }, [ref, content]);\n\n const renderOpenBtns = (): React.ReactNode => {\n if (openBtnVisible) {\n if (className) {\n return (\n <Button\n color=\"gray\"\n onClick={() => {\n setClassName(undefined);\n if (ref.current) {\n ref.current.style.height = 'initial';\n }\n }}\n size=\"small\"\n variant=\"outline\"\n >\n 메모 펼치기\n <ChevronDownIcon />\n </Button>\n );\n }\n return (\n <Button\n color=\"gray\"\n onClick={() => {\n setClassName('closed');\n }}\n variant=\"outline\"\n >\n 메모 접기\n <ChevronUpIcon />\n </Button>\n );\n }\n return null;\n };\n\n return (\n <Card size=\"2\">\n <Grid columns=\"1fr auto\" width=\"100%\">\n <Grid\n align=\"center\"\n columns={{ initial: '1', sm: 'auto 1fr' }}\n gap=\"2\"\n width=\"100%\"\n >\n <Heading variant=\"heading5\" weight=\"regular\">\n {title}\n </Heading>\n\n <Flex\n align=\"center\"\n gap=\"4\"\n justify={{ initial: 'start', sm: 'between' }}\n width=\"100%\"\n >\n {writer ? (\n <Badge color=\"neutral\" size=\"small\">{`작성자 : ${writer}`}</Badge>\n ) : null}\n {createAt ? (\n <Typo\n style={{ whiteSpace: 'nowrap' }}\n >{`등록 ${createAt.getFullYear()}.${createAt.getMonth() + 1}.${createAt.getDate()} `}</Typo>\n ) : null}\n </Flex>\n\n <AlertDialog.Root\n onOpenChange={setDeleteDialogOpen}\n open={deleteDialogOpen}\n >\n <AlertDialog.Content>\n <AlertDialog.Title>노트를 삭제하시겠습니까?</AlertDialog.Title>\n <AlertDialog.Description>\n 삭제된 노트는 복구할 수 없습니다. 삭제하시겠습니까?\n </AlertDialog.Description>\n <Flex gap=\"3\" justify=\"end\">\n <AlertDialog.Cancel>\n <Button color=\"gray\" variant=\"outline\">\n 취소\n </Button>\n </AlertDialog.Cancel>\n <AlertDialog.Action>\n <Button color=\"tomato\" onClick={propsOnClickDelete}>\n 삭제\n </Button>\n </AlertDialog.Action>\n </Flex>\n </AlertDialog.Content>\n </AlertDialog.Root>\n </Grid>\n\n {/* ... 옵션 버튼 */}\n {optionItems.length ? (\n <DropdownMenu.Root>\n <DropdownMenu.Trigger>\n <IconButton ml=\"2\" mt=\"1\" variant=\"ghost\">\n <DotsVerticalIcon />\n </IconButton>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {optionItems.map((item) => {\n return (\n <DropdownMenu.Item key={item.title} onClick={item.onClick}>\n {item.icon}\n {item.title}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n ) : null}\n </Grid>\n\n {Boolean(files?.length) && (\n <Flex direction=\"column\" gap=\"1\">\n {files?.map((file) => {\n return (\n <Link\n download={file.fileName}\n href={file.url}\n key={file.createdAt?.valueOf() + file.fileName}\n >\n <IconButton\n mt=\"3\"\n size=\"4\"\n style={{ width: '100%', height: 56 }}\n variant=\"soft\"\n >\n <Flex gap=\"3\" pl=\"4\" width=\"100%\">\n <Typo color=\"gray\">\n <FileIcon height={16} width={16} />\n </Typo>\n <Typo\n as=\"p\"\n color=\"gray\"\n style={{ width: '100%', textAlign: 'left' }}\n variant=\"caption\"\n >\n {file.fileName}\n </Typo>\n </Flex>\n </IconButton>\n </Link>\n );\n })}\n </Flex>\n )}\n\n {content ? (\n <>\n <Separator mb=\"4\" mt=\"4\" style={{ width: '100%' }} />\n\n <Flex align=\"center\" direction=\"column\" gap=\"3\">\n <QuillHtmlOutputContainer\n className={className}\n html={safeContent}\n ref={ref}\n />\n {renderOpenBtns()}\n </Flex>\n </>\n ) : null}\n </Card>\n );\n}\n"],"mappings":"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","names":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui-quill-editor",
-  "version": "1.3.34",
+  "version": "1.4.0",
   "private": false,
   "description": "tipp 디자인 시스템이 적용된  quillEditor 패키지, quillEditor의 사이즈가 커서 별도 패키지로 분리했습니다.",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-quill": "^2.0.0",
-    "@tipp/ui": "1.4.26"
+    "@tipp/ui": "1.5.0"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
@@ -58,8 +58,8 @@
     "postcss-nesting": "12.0.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "@tipp/eslint-config": "1.0.0",
-    "@tipp/typescript-config": "1.0.0"
+    "@tipp/typescript-config": "1.0.1",
+    "@tipp/eslint-config": "1.0.1"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css",

package/src/read-card.tsx CHANGED Viewed

@@ -18,6 +18,7 @@ import {
   DropdownMenu,
   Pencil1Icon,
   TrashIcon,
+  Grid,
 } from '@tipp/ui';
 import QuillHtmlOutputContainer from './html-container';
 import type { Attachment } from './type';
@@ -98,6 +99,7 @@ export function ReadCard(props: ReadCardProps): React.ReactNode {
                 ref.current.style.height = 'initial';
               }
             }}
+            size="small"
             variant="outline"
           >
             메모 펼치기
@@ -123,66 +125,79 @@ export function ReadCard(props: ReadCardProps): React.ReactNode {
   return (
     <Card size="2">
-      <Flex align="center" gap="2" justify="between">
-        <Flex align="center" gap="4">
+      <Grid columns="1fr auto" width="100%">
+        <Grid
+          align="center"
+          columns={{ initial: '1', sm: 'auto 1fr' }}
+          gap="2"
+          width="100%"
+        >
           <Heading variant="heading5" weight="regular">
             {title}
           </Heading>
-          {writer ? (
-            <Badge color="neutral" size="small">{`작성자 : ${writer}`}</Badge>
-          ) : null}
-        </Flex>
-        <Flex align="center" gap="4">
-          {createAt ? (
-            <Typo>{`등록일자: ${createAt.toLocaleDateString()} `}</Typo>
-          ) : null}
-          {optionItems.length ? (
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger>
-                <IconButton variant="ghost">
-                  <DotsVerticalIcon />
-                </IconButton>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content>
-                {optionItems.map((item) => {
-                  return (
-                    <DropdownMenu.Item key={item.title} onClick={item.onClick}>
-                      {item.icon}
-                      {item.title}
-                    </DropdownMenu.Item>
-                  );
-                })}
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
-          ) : null}
-        </Flex>
+          <Flex
+            align="center"
+            gap="4"
+            justify={{ initial: 'start', sm: 'between' }}
+            width="100%"
+          >
+            {writer ? (
+              <Badge color="neutral" size="small">{`작성자 : ${writer}`}</Badge>
+            ) : null}
+            {createAt ? (
+              <Typo
+                style={{ whiteSpace: 'nowrap' }}
+              >{`등록 ${createAt.getFullYear()}.${createAt.getMonth() + 1}.${createAt.getDate()} `}</Typo>
+            ) : null}
+          </Flex>
-        <AlertDialog.Root
-          onOpenChange={setDeleteDialogOpen}
-          open={deleteDialogOpen}
-        >
-          <AlertDialog.Content>
-            <AlertDialog.Title>노트를 삭제하시겠습니까?</AlertDialog.Title>
-            <AlertDialog.Description>
-              삭제된 노트는 복구할 수 없습니다. 삭제하시겠습니까?
-            </AlertDialog.Description>
-            <Flex gap="3" justify="end">
-              <AlertDialog.Cancel>
-                <Button color="gray" variant="outline">
-                  취소
-                </Button>
-              </AlertDialog.Cancel>
-              <AlertDialog.Action>
-                <Button color="tomato" onClick={propsOnClickDelete}>
-                  삭제
-                </Button>
-              </AlertDialog.Action>
-            </Flex>
-          </AlertDialog.Content>
-        </AlertDialog.Root>
-      </Flex>
+          <AlertDialog.Root
+            onOpenChange={setDeleteDialogOpen}
+            open={deleteDialogOpen}
+          >
+            <AlertDialog.Content>
+              <AlertDialog.Title>노트를 삭제하시겠습니까?</AlertDialog.Title>
+              <AlertDialog.Description>
+                삭제된 노트는 복구할 수 없습니다. 삭제하시겠습니까?
+              </AlertDialog.Description>
+              <Flex gap="3" justify="end">
+                <AlertDialog.Cancel>
+                  <Button color="gray" variant="outline">
+                    취소
+                  </Button>
+                </AlertDialog.Cancel>
+                <AlertDialog.Action>
+                  <Button color="tomato" onClick={propsOnClickDelete}>
+                    삭제
+                  </Button>
+                </AlertDialog.Action>
+              </Flex>
+            </AlertDialog.Content>
+          </AlertDialog.Root>
+        </Grid>
+        {/*  ... 옵션 버튼 */}
+        {optionItems.length ? (
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <IconButton ml="2" mt="1" variant="ghost">
+                <DotsVerticalIcon />
+              </IconButton>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              {optionItems.map((item) => {
+                return (
+                  <DropdownMenu.Item key={item.title} onClick={item.onClick}>
+                    {item.icon}
+                    {item.title}
+                  </DropdownMenu.Item>
+                );
+              })}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        ) : null}
+      </Grid>
       {Boolean(files?.length) && (
         <Flex direction="column" gap="1">
@@ -196,17 +211,18 @@ export function ReadCard(props: ReadCardProps): React.ReactNode {
                 <IconButton
                   mt="3"
                   size="4"
-                  style={{ width: 400, height: 56 }}
+                  style={{ width: '100%', height: 56 }}
                   variant="soft"
                 >
                   <Flex gap="3" pl="4" width="100%">
                     <Typo color="gray">
-                      <FileIcon height={20} width={20} />
+                      <FileIcon height={16} width={16} />
                     </Typo>
                     <Typo
                       as="p"
                       color="gray"
                       style={{ width: '100%', textAlign: 'left' }}
+                      variant="caption"
                     >
                       {file.fileName}
                     </Typo>