tailwind typography 스타일 수정, Link 기능 추가

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@tailwindcss/line-clamp": "^0.4.0",
     "@til-log.lab/tilog-api": "^0.1.9",
+    "@tiptap/extension-link": "^2.0.0-beta.43",
     "@tiptap/react": "^2.0.0-beta.108",
     "@tiptap/starter-kit": "^2.0.0-beta.183",
     "@types/react-responsive": "^8.0.5",

src/components/common/molecules/text-area/hooks/useTiptapEditor.tsx

@@ -1,3 +1,4 @@
+import Link from "@tiptap/extension-link";
 import { EditorOptions, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 
@@ -10,7 +11,7 @@ import { CreatePostRequestBodyDto } from "@til-log.lab/tilog-api";
 const useTiptapEditor = (content: EditorOptions["content"]) => {
   const { setValue } = useFormContext<CreatePostRequestBodyDto>();
   return useEditor({
-    extensions: [StarterKit],
+    extensions: [StarterKit, Link],
 
     editable: true,
     content,
@@ -21,7 +22,7 @@ const useTiptapEditor = (content: EditorOptions["content"]) => {
     editorProps: {
       attributes: {
         class:
-          "w-full h-full prose xl:prose-xl max-w-none dark:prose-invert focus:outline-none overflow-y-auto prose-img:ml-auto prose-img:mr-auto prose-img:border prose-img:border-gray-200 dark:text-white text-natural-700 dark:prose-img:border-gray-700",
+          "w-full h-full prose scrollbar-hide prose-p:text-neutral-800 dark:prose-p:text-neutral-50 max-w-none dark:prose-invert focus:outline-none overflow-y-auto prose-img:ml-auto prose-img:mr-auto prose-img:border prose-img:border-gray-200 dark:text-white text-natural-700 dark:prose-img:border-gray-700",
       },
     },
   });

src/components/common/molecules/text-area/hooks/useTiptapViewer.tsx

@@ -1,16 +1,17 @@
+import Link from "@tiptap/extension-link";
 import { EditorOptions, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 
 const useTiptapViewer = (content: EditorOptions["content"]) => {
   return useEditor({
-    extensions: [StarterKit],
+    extensions: [StarterKit, Link],
 
     editable: false,
     content,
     editorProps: {
       attributes: {
         class:
-          "w-full h-full scrollbar-hide prose xl:prose-xl max-w-none dark:prose-invert focus:outline-none overflow-y-auto prose-img:ml-auto prose-img:mr-auto prose-img:border prose-img:border-gray-200 dark:text-white text-natural-700 dark:prose-img:border-gray-700",
+          "w-full h-full scrollbar-hide prose prose-p:text-neutral-800 dark:prose-p:text-neutral-50 max-w-none dark:prose-invert focus:outline-none overflow-y-auto prose-img:ml-auto prose-img:mr-auto prose-img:border prose-img:border-gray-200 dark:text-white text-natural-700 dark:prose-img:border-gray-700",
       },
     },
   });

styles/globals.css

@@ -31,7 +31,7 @@ body {
     @apply text-base font-medium md:text-lg text-neutral-500 dark:text-neutral-300 font-eng-sub-font-2;
   }
   a {
-    @apply text-base md:text-xl text-neutral-800 dark:text-neutral-50 hover:underline font-eng-sub-font-2;
+    @apply text-sm md:text-base text-neutral-800 dark:text-neutral-50 hover:underline font-eng-sub-font-2;
   }
   p {
     @apply text-sm md:text-base dark:text-neutral-500 text-neutral-400 font-eng-sub-font-2;

tailwind.config.js

@@ -1,3 +1,40 @@
+const disabledCss = {
+  "code::before": false,
+  "code::after": false,
+  "blockquote p:first-of-type::before": false,
+  "blockquote p:last-of-type::after": false,
+  "pre > code": false,
+  h1: {
+    "font-size": "2.5rem",
+  },
+  h2: {
+    "font-size": "2rem",
+  },
+  h3: {
+    "font-size": "1.88rem",
+  },
+  h4: {
+    "font-size": "1.55rem",
+  },
+  h5: {
+    "font-size": "1.44rem",
+  },
+  h6: {
+    "font-size": "1.22rem",
+  },
+  code: {
+    "font-size": "85%",
+    padding: ".2em .4em",
+    color: "#262626",
+    backgroundColor: "#cfcfcf",
+    "border-radius": "3px",
+    margin: "1px",
+  },
+  p: {
+    "line-height": "1.8",
+  },
+};
+
 module.exports = {
   purge: {
     enabled: true,
@@ -13,6 +50,10 @@ module.exports = {
       "2xl": { min: "1536px" },
     },
     extend: {
+      typography: {
+        DEFAULT: { css: disabledCss },
+      },
+
       fontFamily: {
         "eng-sub-font-1": ["Literata", "sans-serif"],
         "eng-sub-font-2": ["Poppins", "sans-serif"],

yarn.lock

@@ -305,6 +305,15 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.0.0-beta.26.tgz#b00c9e32b81b1bd94eaed24bb2a22e44d5dc54a3"
   integrity sha512-vejGe2ra4K5ipFOn1U9viqF9X9nPTX8WSJpSOux+9UbKjHpANy7bz69tp66OIi/Wh5L/MMDc+luH/04qfVnpZw==
 
+"@tiptap/extension-link@^2.0.0-beta.43":
+  version "2.0.0-beta.43"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.0.0-beta.43.tgz#c123a2170dd50d075b9fe7fb91d86d23f778ffb0"
+  integrity sha512-AYueqfTW713KGVfWSWhVbj4ObeWudgawikm3m0uYcKSdsAz/CfEvOD2/NA0uyQzlxmYLA6Pf8HMxoKGN+O4Cmg==
+  dependencies:
+    linkifyjs "^3.0.5"
+    prosemirror-model "1.18.1"
+    prosemirror-state "1.4.1"
+
 "@tiptap/extension-list-item@^2.0.0-beta.20":
   version "2.0.0-beta.20"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.20.tgz#7169528b226dee4590e013bdf6e5fc6d83729b0f"
@@ -1864,6 +1873,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkifyjs@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-3.0.5.tgz#99e51a3a0c0e232fcb63ebb89eea3ff923378f34"
+  integrity sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg==
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -2115,6 +2129,11 @@ orderedmap@^1.1.0:
   resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-1.1.5.tgz#4174c90b61bd7c25294932edf789f3b5677744d0"
   integrity sha512-/fzlCGKRmfayGoI9UUXvJfc2nMZlJHW30QqEvwPvlg8tsX7jyiUSomYie6mYqx7Z9bOMGoag0H/q1PS/0PjYkg==
 
+orderedmap@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.0.0.tgz#12ff5ef6ea9d12d6430b80c701b35475e1c9ff34"
+  integrity sha512-buf4PoAMlh45b8a8gsGy/X6w279TSqkyAS0C0wdTSJwFSU+ljQFJON5I8NfjLHoCXwpSROIo2wr0g33T+kQshQ==
+
 p-limit@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
@@ -2310,6 +2329,13 @@ prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.5:
     prosemirror-state "^1.0.0"
     w3c-keyname "^2.2.0"
 
+prosemirror-model@1.18.1:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.18.1.tgz#1d5d6b6de7b983ee67a479dc607165fdef3935bd"
+  integrity sha512-IxSVBKAEMjD7s3n8cgtwMlxAXZrC7Mlag7zYsAKDndAqnDScvSmp/UdnRTV/B33lTCVU3CCm7dyAn/rVVD0mcw==
+  dependencies:
+    orderedmap "^2.0.0"
+
 prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.16.1:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.16.1.tgz#fb388270bc9609b66298d6a7e15d0cc1d6c61253"
@@ -2325,6 +2351,14 @@ prosemirror-schema-list@^1.1.6:
     prosemirror-model "^1.0.0"
     prosemirror-transform "^1.0.0"
 
+prosemirror-state@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.1.tgz#f6e26c7b6a7e11206176689eb6ebbf91870953e1"
+  integrity sha512-U/LBDW2gNmVa07sz/D229XigSdDQ5CLFwVB1Vb32MJbAHHhWe/6pOc721faI17tqw4pZ49i1xfY/jEZ9tbIhPg==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
 prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.3.4.tgz#4c6b52628216e753fc901c6d2bfd84ce109e8952"