[FEATURE] 텍스트 에디터 table 추가

package.json

@@ -13,18 +13,19 @@
     "@next/third-parties": "^16.1.5",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-query": "^5.90.5",
-    "@tiptap/core": "^3.7.2",
-    "@tiptap/extension-document": "^3.7.2",
-    "@tiptap/extension-heading": "^3.7.2",
-    "@tiptap/extension-link": "^3.7.2",
-    "@tiptap/extension-list": "^3.7.2",
-    "@tiptap/extension-paragraph": "^3.7.2",
-    "@tiptap/extension-placeholder": "^3.7.2",
-    "@tiptap/extension-text": "^3.7.2",
-    "@tiptap/extension-underline": "^3.7.2",
-    "@tiptap/pm": "^3.7.2",
-    "@tiptap/react": "^3.7.2",
-    "@tiptap/starter-kit": "^3.7.2",
+    "@tiptap/core": "^3.20.0",
+    "@tiptap/extension-document": "^3.20.0",
+    "@tiptap/extension-heading": "^3.20.0",
+    "@tiptap/extension-link": "^3.20.0",
+    "@tiptap/extension-list": "^3.20.0",
+    "@tiptap/extension-paragraph": "^3.20.0",
+    "@tiptap/extension-placeholder": "^3.20.0",
+    "@tiptap/extension-table": "^3.20.0",
+    "@tiptap/extension-text": "^3.20.0",
+    "@tiptap/extension-underline": "^3.20.0",
+    "@tiptap/pm": "^3.20.0",
+    "@tiptap/react": "^3.20.0",
+    "@tiptap/starter-kit": "^3.20.0",
     "axios": "^1.12.2",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",

src/app/globals.css

@@ -262,6 +262,90 @@ body {
   word-break: break-all;
 }
 
+.table-drag-highlight {
+  opacity: 0.4;
+  background-color: rgb(var(--color-primary-100) / 0.3);
+}
+
+.selectedCell {
+  background-color: rgb(0 0 0 / 0.05);
+}
+
+/* 테이블 컬럼 리사이즈 핸들 */
+.column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background-color: transparent;
+  cursor: col-resize;
+  z-index: 20;
+  transition: background-color 0.15s;
+}
+
+.column-resize-handle:hover,
+.resize-cursor .column-resize-handle {
+  background-color: rgb(0 0 0 / 0.2);
+}
+
+/* 리사이즈 중 커서 전체 적용 */
+.resize-cursor {
+  cursor: col-resize;
+}
+
+.ProseMirror table {
+  table-layout: fixed;
+  width: 100%;
+}
+
+.ProseMirror table td,
+.ProseMirror table th {
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  min-width: 120px;
+}
+
+.table-mobile-handle {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .table-mobile-handle {
+    display: flex;
+  }
+}
+
+@media (max-width: 640px) {
+  .ProseMirror table {
+    width: 100%;
+    table-layout: auto;
+  }
+
+  .column-resize-handle {
+    display: none;
+  }
+}
+
+/* 모바일 테이블 가로 스크롤 */
+@media (max-width: 640px) {
+  .ProseMirror table {
+    width: 100%;
+    table-layout: auto;
+  }
+
+  .ProseMirror td,
+  .ProseMirror th {
+    min-width: 120px;
+  }
+}
+
+@media (max-width: 640px) {
+  .column-resize-handle {
+    display: none;
+  }
+}
+
 /* slide-up 애니메이션 */
 @keyframes slide-up {
   from {

src/components/recruit/PositionDropdown.tsx

@@ -55,7 +55,7 @@ export default function PositionDropdown({
           {isPlaceholder ? placeholder : selected?.label}
         </span>
         <Image
-          src={open ? '/icons/arrow-up-gray.svg' : '/icons/arrow-down-gray.svg'}
+          src={open ? '/icons/question_gray_up.svg' : '/icons/question_gray_down.svg'}
           alt=""
           width={20}
           height={20}

src/components/recruit/ProjectDropdown.tsx

@@ -72,7 +72,7 @@ const ProjectDropdown = ({
           <span className="body-7 desktop:body-5">{selectedLabel}</span>
         )}
         <Image
-          src={open ? '/icons/arrow-up-gray.svg' : '/icons/arrow-down-gray.svg'}
+          src={open ? '/icons/question_gray_up.svg' : '/icons/question_gray_down.svg'}
           alt={open ? '드롭다운 열림' : '드롭다운 닫힘'}
           width={24}
           height={24}

src/components/recruit/editor/TextContent.tsx

@@ -7,6 +7,8 @@ import Toolbar from './Toolbar';
 import { handleLink } from './linkUtils';
 import { Control, useController } from 'react-hook-form';
 import { RecruitFormType } from '@/libs/schemas/projectSchema';
+import { TableBubbleMenu } from './table/TableBubbleMenu';
+import { TableHandles } from './table/TableHandles';
 
 type Props = {
   control: Control<RecruitFormType>;
@@ -62,11 +64,9 @@ const TextContent = ({ control, name = 'content' }: Props) => {
     if (!editor) return;
     const update = () => forceUpdate((v) => v + 1);
     editor.on('selectionUpdate', update);
-    editor.on('transaction', update);
     editor.on('update', update);
     return () => {
       editor.off('selectionUpdate', update);
-      editor.off('transaction', update);
       editor.off('update', update);
     };
   }, [editor]);
@@ -81,11 +81,15 @@ const TextContent = ({ control, name = 'content' }: Props) => {
         className={`desktop:px-8 desktop:pb-9 flex flex-col rounded-2xl border-1 border-gray-300 px-6 pt-4 pb-7`}
       >
         <Toolbar editor={editor} onLinkButtonClick={() => handleLink(editor)} />
-        <EditorContent editor={editor} className="mt-7" />
+        <div className="mt-7 overflow-x-auto">
+          <EditorContent editor={editor} />
+        </div>
         <p className={`body-8 self-end ${textLength < 50 ? 'text-red-100' : 'text-gray-600'}`}>
           {textLength}
         </p>
       </div>
+      <TableBubbleMenu editor={editor} />
+      <TableHandles editor={editor} />
     </div>
   );
 };

src/components/recruit/editor/Toolbar.tsx

@@ -173,6 +173,50 @@ const Toolbar = ({ editor, onLinkButtonClick }: ToolbarProps) => {
           className="h-6 w-6"
         />
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          // 표 안에 있으면 삽입 막기
+          if (editor.isActive('table')) return;
+
+          const cols = 3;
+          const chain = editor.chain().focus() as ReturnType<typeof editor.chain> & {
+            insertTable: (opts: { rows: number; cols: number; withHeaderRow: boolean }) => any;
+          };
+
+          chain.insertTable({ rows: 3, cols, withHeaderRow: true }).run();
+
+          requestAnimationFrame(() => {
+            const { from } = editor.state.selection;
+            const domAtPos = editor.view.domAtPos(from).node;
+            const anchor = domAtPos instanceof Element ? domAtPos : domAtPos.parentElement;
+            const table = anchor?.closest('table');
+            if (!table) return;
+
+            const colsEl = table.querySelectorAll(':scope > colgroup > col');
+            if (!colsEl.length) return;
+
+            const equalWidth = 100 / cols;
+            colsEl.forEach((col) => {
+              (col as HTMLElement).style.width = `${equalWidth}%`;
+            });
+          });
+        }}
+        title="표 삽입"
+        className="cursor-pointer transition-opacity hover:opacity-80"
+      >
+        <Image
+          src={
+            editor.isActive('table')
+              ? '/icons/editor/table-selected.svg'
+              : '/icons/editor/table.svg'
+          }
+          alt="Table"
+          width={24}
+          height={24}
+          className="h-6 w-6"
+        />
+      </button>
     </div>
   );
 };

src/components/recruit/editor/editorExtensions.ts

@@ -1,13 +1,32 @@
 import StarterKit from '@tiptap/starter-kit';
 import Link from '@tiptap/extension-link';
 import Placeholder from '@tiptap/extension-placeholder';
+import { TableKit } from '@tiptap/extension-table';
 
 export const getEditorExtensions = () => [
   StarterKit.configure({
     link: false,
     bulletList: { HTMLAttributes: { class: 'list-disc ml-4' } },
     orderedList: { HTMLAttributes: { class: 'list-decimal ml-4' } },
   }),
+  TableKit.configure({
+    table: {
+      resizable: true,
+      HTMLAttributes: {
+        class: 'border-collapse w-full my-4',
+      },
+    },
+    tableCell: {
+      HTMLAttributes: {
+        class: 'border border-gray-300 px-3 py-2 text-left',
+      },
+    },
+    tableHeader: {
+      HTMLAttributes: {
+        class: 'border border-gray-300 px-3 py-2 bg-gray-100 font-semibold text-left',
+      },
+    },
+  }),
   Link.configure({
     autolink: true,
     linkOnPaste: true,
@@ -20,7 +39,13 @@ export const getEditorExtensions = () => [
     validate: (href) => /^(https?:\/\/|mailto:|tel:|www\.)/i.test(href),
   }),
   Placeholder.configure({
-    placeholder: ({ node }) => {
+    placeholder: ({ node, pos, editor }) => {
+      const resolvedPos = editor.state.doc.resolve(pos);
+      const parent = resolvedPos.parent;
+      if (parent.type.name === 'tableCell' || parent.type.name === 'tableHeader') {
+        return '';
+      }
+
       if (node.type.name === 'paragraph') {
         return [
           '*최소 50자 이상부터 작성 가능해요',