LC-2853 admin 블로그 글 에디터 개선 1

src/domain/admin/blog/BlogEditPage.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { BlogSchema } from '@/api/blog/blogSchema';
+import { useBlogEditForm } from '@/domain/admin/blog/hooks/useBlogEditForm';
 import BlogActionButtons from '@/domain/admin/blog/section/BlogActionButtons';
 import BlogBasicInfoSection from '@/domain/admin/blog/section/BlogBasicInfoSection';
 import BlogProgramRecommendSection from '@/domain/admin/blog/section/BlogProgramRecommendSection';
 import BlogPublishDateSection from '@/domain/admin/blog/section/BlogPublishDateSection';
 import BlogRecommendSection from '@/domain/admin/blog/section/BlogRecommendSection';
 import BlogTagSection from '@/domain/admin/blog/section/BlogTagSection';
-import { useBlogEditForm } from '@/domain/admin/blog/hooks/useBlogEditForm';
 import EditorApp from '@/domain/admin/lexical/EditorApp';
 import { useRouter } from 'next/navigation';
 

src/domain/admin/blog/hooks/useBlogCreateForm.ts

@@ -0,0 +1,108 @@
+import { usePostBlogMutation } from '@/api/blog/blog';
+import {
+  BlogContent,
+  ProgramRecommendItem,
+  TagDetail,
+} from '@/api/blog/blogSchema';
+import { useAdminSnackbar } from '@/hooks/useAdminSnackbar';
+import dayjs from '@/lib/dayjs';
+import { Dayjs } from 'dayjs';
+import { ChangeEvent, useState } from 'react';
+
+interface CreateBlog {
+  title: string;
+  category: string;
+  thumbnail: string;
+  description: string;
+  ctaLink: string;
+  ctaText: string;
+  tagList: TagDetail[];
+}
+
+const RECOMMEND_SLOT_COUNT = 4;
+
+const initialBlog: CreateBlog = {
+  title: '',
+  category: '',
+  thumbnail: '',
+  description: '',
+  ctaLink: '',
+  ctaText: '',
+  tagList: [],
+};
+
+const initialContent: BlogContent = {
+  programRecommend: Array(RECOMMEND_SLOT_COUNT).fill({ id: null }),
+  blogRecommend: new Array(RECOMMEND_SLOT_COUNT).fill(null),
+};
+
+export const useBlogCreateForm = () => {
+  const { snackbar: setSnackbar } = useAdminSnackbar();
+  const createBlogMutation = usePostBlogMutation();
+
+  const [editingValue, setEditingValue] = useState<CreateBlog>(initialBlog);
+  const [dateTime, setDateTime] = useState<Dayjs | null>(null);
+  const [content, setContent] = useState<BlogContent>(initialContent);
+
+  const onChangeField = (event: ChangeEvent<HTMLInputElement>) => {
+    setEditingValue((prev) => ({
+      ...prev,
+      [event.target.name]: event.target.value,
+    }));
+  };
+
+  const onChangeCategory = (category: string) => {
+    setEditingValue((prev) => ({ ...prev, category }));
+  };
+
+  const onChangeThumbnail = (url: string) => {
+    setEditingValue((prev) => ({ ...prev, thumbnail: url }));
+  };
+
+  const onChangeTagList = (tagList: TagDetail[]) => {
+    setEditingValue((prev) => ({ ...prev, tagList }));
+  };
+
+  const onChangeProgramRecommend = (items: ProgramRecommendItem[]) => {
+    setContent((prev) => ({ ...prev, programRecommend: items }));
+  };
+
+  const onChangeBlogRecommend = (items: (number | null)[]) => {
+    setContent((prev) => ({ ...prev, blogRecommend: items }));
+  };
+
+  const onChangeEditor = (jsonString: string) => {
+    setContent((prev) => ({ ...prev, lexical: jsonString }));
+  };
+
+  const postBlog = async (isPublish: boolean) => {
+    const displayDate = isPublish && !dateTime
+      ? dayjs().format('YYYY-MM-DDTHH:mm')
+      : (dateTime?.format('YYYY-MM-DDTHH:mm') ?? '');
+
+    await createBlogMutation.mutateAsync({
+      ...editingValue,
+      content: JSON.stringify(content),
+      isDisplayed: isPublish,
+      tagList: editingValue.tagList.map((tag) => tag.id),
+      displayDate,
+    });
+
+    setSnackbar('블로그가 생성되었습니다.');
+  };
+
+  return {
+    editingValue,
+    dateTime,
+    content,
+    onChangeField,
+    onChangeCategory,
+    onChangeThumbnail,
+    onChangeTagList,
+    onChangeProgramRecommend,
+    onChangeBlogRecommend,
+    onChangeEditor,
+    setDateTime,
+    postBlog,
+  };
+};

src/domain/admin/blog/section/BlogActionButtons.tsx

@@ -4,12 +4,14 @@ interface BlogActionButtonsProps {
   onCancel: () => void;
   onSaveTemp: () => void;
   onPublish: () => void;
+  helperText?: string;
 }
 
 const BlogActionButtons = ({
   onCancel,
   onSaveTemp,
   onPublish,
+  helperText = '*임시 저장: 블로그가 숨겨집니다.',
 }: BlogActionButtonsProps) => {
   return (
     <div className="text-right">
@@ -34,9 +36,7 @@ const BlogActionButtons = ({
           발행
         </Button>
       </div>
-      <span className="text-0.875 text-neutral-35">
-        *임시 저장: 블로그가 숨겨집니다.
-      </span>
+      <span className="text-0.875 text-neutral-35">{helperText}</span>
     </div>
   );
 };

src/domain/admin/lexical/index.css

@@ -975,15 +975,20 @@ i.page-break,
   text-align: center;
 }
 
-.editor-shell .editor-image .image-caption-button {
-  display: block;
+.editor-shell .editor-image .image-action-buttons {
+  display: flex;
+  gap: 8px;
   position: absolute;
   bottom: 20px;
   left: 0;
   right: 0;
-  width: 30%;
+  justify-content: center;
+}
+
+.editor-shell .editor-image .image-caption-button,
+.editor-shell .editor-image .image-link-button {
+  display: block;
   padding: 10px;
-  margin: 0 auto;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 5px;
   background-color: rgba(0, 0, 0, 0.5);
@@ -993,7 +998,8 @@ i.page-break,
   user-select: none;
 }
 
-.editor-shell .editor-image .image-caption-button:hover {
+.editor-shell .editor-image .image-caption-button:hover,
+.editor-shell .editor-image .image-link-button:hover {
   background-color: rgba(60, 132, 244, 0.5);
 }
 

src/domain/admin/lexical/nodes/ImageComponent.tsx

@@ -16,7 +16,7 @@ import type {
 import './ImageNode.css';
 
 import { HashtagNode } from '@lexical/hashtag';
-import { LinkNode } from '@lexical/link';
+import { $createLinkNode, $isLinkNode, LinkNode } from '@lexical/link';
 import { useCollaborationContext } from '@lexical/react/LexicalCollaborationContext';
 import { CollaborationPlugin } from '@lexical/react/LexicalCollaborationPlugin';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -367,6 +367,47 @@ export default function ImageComponent({
     });
   };
 
+  const handleLinkClick = () => {
+    // 현재 링크 URL 읽기
+    let currentUrl = '';
+    editor.getEditorState().read(() => {
+      const node = $getNodeByKey(nodeKey);
+      const parent = node?.getParent();
+      if (parent && $isLinkNode(parent)) {
+        currentUrl = parent.getURL();
+      }
+    });
+
+    const url = window.prompt('링크 URL을 입력하세요', currentUrl);
+    if (url === null) return;
+
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if (!node) return;
+      const parent = node.getParent();
+      if (!parent) return;
+
+      if (url === '') {
+        // 링크 제거: LinkNode를 벗기고 자식을 꺼냄
+        if ($isLinkNode(parent)) {
+          const children = parent.getChildren();
+          for (const child of children) {
+            parent.insertBefore(child);
+          }
+          parent.remove();
+        }
+      } else if ($isLinkNode(parent)) {
+        // 기존 링크 URL 수정
+        parent.setURL(url);
+      } else {
+        // 새 링크 추가: LinkNode로 이미지를 감쌈
+        const linkNode = $createLinkNode(url);
+        node.insertBefore(linkNode);
+        linkNode.append(node);
+      }
+    });
+  };
+
   const onResizeEnd = (
     nextWidth: 'inherit' | number,
     nextHeight: 'inherit' | number,
@@ -474,6 +515,7 @@ export default function ImageComponent({
             onResizeStart={onResizeStart}
             onResizeEnd={onResizeEnd}
             captionsEnabled={!isLoadError && captionsEnabled}
+            onLinkClick={handleLinkClick}
           />
         )}
       </>

src/domain/admin/lexical/themes/PlaygroundEditorTheme.css

@@ -13,7 +13,7 @@
   text-align: right;
 }
 .PlaygroundEditorTheme__paragraph {
-  margin: 0;
+  margin: 0 0 1rem 0;
   position: relative;
   font-weight: 300;
 }

src/domain/admin/lexical/ui/ImageResizer.tsx

@@ -33,6 +33,7 @@ export default function ImageResizer({
   showCaption,
   setShowCaption,
   captionsEnabled,
+  onLinkClick,
 }: {
   editor: LexicalEditor;
   buttonRef: {current: null | HTMLButtonElement};
@@ -43,6 +44,7 @@ export default function ImageResizer({
   setShowCaption: (show: boolean) => void;
   showCaption: boolean;
   captionsEnabled: boolean;
+  onLinkClick?: () => void;
 }): JSX.Element {
   const controlWrapperRef = useRef<HTMLDivElement>(null);
   const userSelect = useRef({
@@ -253,16 +255,25 @@ export default function ImageResizer({
   };
   return (
     <div ref={controlWrapperRef}>
-      {!showCaption && captionsEnabled && (
-        <button
-          className="image-caption-button"
-          ref={buttonRef}
-          onClick={() => {
-            setShowCaption(!showCaption);
-          }}>
-          Add Caption
-        </button>
-      )}
+      <div className="image-action-buttons">
+        {!showCaption && captionsEnabled && (
+          <button
+            className="image-caption-button"
+            ref={buttonRef}
+            onClick={() => {
+              setShowCaption(!showCaption);
+            }}>
+            Add Caption
+          </button>
+        )}
+        {onLinkClick && (
+          <button
+            className="image-link-button"
+            onClick={onLinkClick}>
+            링크
+          </button>
+        )}
+      </div>
       <div
         className="image-resizer image-resizer-n"
         onPointerDown={(event) => {