diff --git a/src/components/WriteEditor.tsx b/src/components/WriteEditor.tsx index b2e48a2..cfb8757 100644 --- a/src/components/WriteEditor.tsx +++ b/src/components/WriteEditor.tsx @@ -1,4 +1,11 @@ -import { useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'; +import { + useEffect, + useEffectEvent, + useLayoutEffect, + useMemo, + useRef, + useState, +} from 'react'; import { editorRequest as editorApi } from '../lib/editor-api'; import DOMPurify from 'dompurify'; import { toast } from 'sonner'; @@ -113,6 +120,31 @@ export default function WriteEditor() { const [uploads, setUploads] = useState(0); const [dragging, setDragging] = useState(false); const [view, setView] = useState<'editor' | 'preview' | 'both'>('both'); + const titleInput = useRef(null); + useLayoutEffect(() => { + const input = titleInput.current; + if (!input?.parentElement) return; + const container = input.parentElement; + const fit = () => { + input.style.fontSize = ''; + const style = getComputedStyle(input); + const maxSize = parseFloat(style.fontSize); + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + if (!context) return; + context.font = `${style.fontWeight} ${String(maxSize)}px ${style.fontFamily}`; + const width = context.measureText(input.value || input.placeholder).width; + const spacing = parseFloat(style.letterSpacing) || 0; + const textWidth = width + spacing * Math.max(0, input.value.length - 1); + input.style.fontSize = `${String(Math.max(20, Math.min(maxSize, (maxSize * input.clientWidth) / Math.max(textWidth, 1))))}px`; + input.style.height = 'auto'; + input.style.height = `${String(input.scrollHeight)}px`; + }; + fit(); + const observer = new ResizeObserver(fit); + observer.observe(container); + return () => observer.disconnect(); + }, [title, authorized, view]); const editor = useRef(null); const imageInput = useRef(null); const openedDeepLink = useRef(false); @@ -641,34 +673,9 @@ export default function WriteEditor() { return (
-
- {( - [ - ['editor', '에디터 보기'], - ['preview', '미리보기'], - ['both', '둘 다 보기'], - ] as const - ).map(([value, label]) => ( - - ))} -
-