Feat/editor

src/components/editor/Editor.tsx

@@ -52,11 +52,18 @@ import { CustomTableCell } from './customComponent/CustomTableCell';
 import CustomTextStyle from './customComponent/CustomTextStyle';
 import { CustomTable } from './customComponent/CustomTable';
 import CustomOembed from './customComponent/CustomOembed';
+import { jwtDecode } from '../../utils/jwtDecode';
 
 const Editor = ({ content }: { content: JSONContent[] | null }) => {
+  // 토큰을 가져와 디코딩하여 사용자 닉네임을 가져와서 authorName에 넣어준다.
+  const token = localStorage.getItem('token');
+  const decodedToken = jwtDecode(token);
+  const authorName = decodedToken.nickname;
+  decodedToken.nickname = authorName;
+
   const [articleData, setArticleData] = useState({
     title: '',
-    authorName: 'none',
+    authorName: authorName,
     categoryName: 'none',
     type: 'none',
     paywallUp: '',
@@ -364,4 +371,4 @@ const Editor = ({ content }: { content: JSONContent[] | null }) => {
   );
 };
 
-export default Editor;
+export default Editor;

src/components/editor/PreviewComponrnt.tsx

@@ -131,7 +131,7 @@ const PreviewComponent: React.FC<PreviewProps> = ({
             {new Date().toLocaleDateString()} <br />
             BY. {authorName}
           </p>
-          <div className="flex-1 max-h-[70vh]">
+          <div className="">
             {!isPremium ? (
               <>
                 <article className="mt-8 text-[15px] font-['Pretendard'] leading-[30.80px] tracking-wide relative">

src/components/editor/common/extractPaywallData.ts

@@ -107,8 +107,20 @@ const extractPaywallData = (editor: Editor): PaywallData => {
       paywallDown = convertToHTML(content.slice(index + 1));
     }
 
-    if (!imageLink && node.type === 'photo' && node.attrs?.src) {
-      imageLink = node.attrs.src;
+    if (!imageLink) {
+      if (node.type === 'photo' && node.attrs?.src) {
+        imageLink = node.attrs.src;
+      } else if (
+        (node.type === 'photoGroup' || node.type === 'photoStrip') &&
+        node.content
+      ) {
+        const firstImgNode = node.content.find(
+          (childNode) => childNode.type === 'image',
+        );
+        if (firstImgNode && firstImgNode.attrs?.src) {
+          imageLink = firstImgNode.attrs.src;
+        }
+      }
     }
   });
 

src/utils/jwtDecode.ts

@@ -0,0 +1,14 @@
+export const jwtDecode = (token: string | null) => {
+  if (!token) return null;
+
+  const base64Url = token.split('.')[1];
+  const base64 = base64Url.replace('-', '+').replace('_', '/');
+  const jsonPayload = decodeURIComponent(
+    atob(base64)
+      .split('')
+      .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+      .join('')
+  );
+
+  return JSON.parse(jsonPayload);
+}