fix: 마크다운 에디터 스타일 수정

src/components/common/AddButton.tsx

@@ -19,6 +19,7 @@ export default function AddButton({ className, onClick, label }: PlusButtonProps
       name="add-button"
       type="button"
       title={label}
+      tabIndex={-1}
     >
       <CiCirclePlus className="h-[20px] w-[20px] text-gray-500 hover:text-blue-500" />
     </button>

src/components/memo-editor/LexicalMarkdownEditor/LexicalMarkdownEditor.toolbar.css

@@ -13,11 +13,13 @@
   gap: 4px;
   border: 1px solid #ccc;
   border-bottom: none;
+}
 
-  @media screen and (max-width: 640px) {
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
-  }
+.toolbar button,
+.toolbar select,
+.dropdown button {
+  outline: none !important;
+  user-select: none;
 }
 
 /* Mobile Toolbar Styles */

src/components/memo-editor/LexicalMarkdownEditor/LexicalMarkdownEditor.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import useWindowSize from '@/hooks/useWindowSize';
 import { CodeHighlightNode, CodeNode } from '@lexical/code';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
@@ -31,7 +30,6 @@ import ToolbarPlugin from './plugins/ToolbarPlugin';
 interface LexicalMarkdownEditorProps {
   value?: string;
   onChange?: (value: string | undefined) => void;
-  placeholder?: string;
   autoFocus?: boolean;
 }
 
@@ -43,11 +41,7 @@ export default function LexicalMarkdownEditor({
   value = '',
   onChange,
   autoFocus = true,
-  placeholder = '내용을 입력하세요...',
 }: LexicalMarkdownEditorProps) {
-  const { width } = useWindowSize();
-  const isMobile = width < 768;
-
   const initialConfig = {
     namespace: 'MarkdownEditor',
     theme: lexicalTheme,
@@ -108,17 +102,10 @@ export default function LexicalMarkdownEditor({
           <RichTextPlugin
             contentEditable={
               <ContentEditable
-                className={`flex-1 p-4 outline-none resize-none border rounded-b-lg border-gray-300 overflow-y-auto focus:border-blue-500 focus:ring-1 focus:ring-blue-500 ${
-                  isMobile ? 'pb-20' : ''
-                }`}
+                className={`flex-1 p-4 outline-none resize-none border rounded-b-lg border-gray-300 overflow-y-auto focus:border-blue-500 focus:ring-1 focus:ring-blue-500 `}
                 onClick={handleContentEditableClick}
               />
             }
-            placeholder={
-              <div className={`sm:hidden text-gray-400 absolute sm:top-4 top-[60px] left-4`}>
-                {placeholder}
-              </div>
-            }
             ErrorBoundary={LexicalErrorBoundary}
           />
           <MyOnChangePlugin onChange={handleEditorChange} />

src/components/memo-editor/LexicalMarkdownEditor/plugins/ToolbarPlugin.tsx

@@ -246,35 +246,35 @@ function BlockOptionsDropdownList({
 
   return (
     <div className="dropdown" ref={dropDownRef}>
-      <button className="item" onClick={formatParagraph}>
+      <button className="item" onClick={formatParagraph} tabIndex={-1}>
         <BiParagraph className="icon" />
         <span className="text">Normal</span>
       </button>
-      <button className="item" onClick={formatLargeHeading}>
+      <button className="item" onClick={formatLargeHeading} tabIndex={-1}>
         <RiH1 className="icon" />
         <span className="text">Heading 1</span>
       </button>
-      <button className="item" onClick={formatSmallHeading}>
+      <button className="item" onClick={formatSmallHeading} tabIndex={-1}>
         <RiH2 className="icon" />
         <span className="text">Heading 2</span>
       </button>
-      <button className="item" onClick={formatHeading}>
+      <button className="item" onClick={formatHeading} tabIndex={-1}>
         <RiH3 className="icon" />
         <span className="text">Heading 3</span>
       </button>
-      <button className="item" onClick={formatBulletList}>
+      <button className="item" onClick={formatBulletList} tabIndex={-1}>
         <BiListUl className="icon" />
         <span className="text">Bullet List</span>
       </button>
-      <button className="item" onClick={formatNumberedList}>
+      <button className="item" onClick={formatNumberedList} tabIndex={-1}>
         <BiListOl className="icon" />
         <span className="text">Numbered List</span>
       </button>
-      <button className="item" onClick={formatQuote}>
+      <button className="item" onClick={formatQuote} tabIndex={-1}>
         <RiDoubleQuotesL className="icon" />
         <span className="text">Quote</span>
       </button>
-      <button className="item" onClick={formatCode}>
+      <button className="item" onClick={formatCode} tabIndex={-1}>
         <BiCodeBlock className="icon" />
         <span className="text">Code Block</span>
       </button>
@@ -407,6 +407,7 @@ export default function ToolbarPlugin() {
         }}
         className="toolbar-item spaced"
         aria-label="Undo"
+        tabIndex={-1}
       >
         <BiUndo className="w-4 h-4" />
       </button>
@@ -417,6 +418,7 @@ export default function ToolbarPlugin() {
         }}
         className="toolbar-item"
         aria-label="Redo"
+        tabIndex={-1}
       >
         <BiRedo className="w-4 h-4" />
       </button>
@@ -427,6 +429,7 @@ export default function ToolbarPlugin() {
             className="toolbar-item block-controls"
             onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
             aria-label="Formatting Options"
+            tabIndex={-1}
           >
             {getBlockTypeIcon(blockType)}
             <span className="text">
@@ -451,6 +454,7 @@ export default function ToolbarPlugin() {
             className="toolbar-item code-language"
             onChange={onCodeLanguageSelect}
             value={codeLanguage}
+            tabIndex={-1}
           >
             <option value="">— Select language —</option>
             {codeLanguges.map(option => (
@@ -469,6 +473,7 @@ export default function ToolbarPlugin() {
             }}
             className={'toolbar-item spaced ' + (isBold ? 'active' : '')}
             aria-label="Format Bold"
+            tabIndex={-1}
           >
             <BiBold className="w-4 h-4" />
           </button>
@@ -478,6 +483,7 @@ export default function ToolbarPlugin() {
             }}
             className={'toolbar-item spaced ' + (isItalic ? 'active' : '')}
             aria-label="Format Italics"
+            tabIndex={-1}
           >
             <BiItalic className="w-4 h-4" />
           </button>
@@ -487,6 +493,7 @@ export default function ToolbarPlugin() {
             }}
             className={'toolbar-item spaced ' + (isUnderline ? 'active' : '')}
             aria-label="Format Underline"
+            tabIndex={-1}
           >
             <BiUnderline className="w-4 h-4" />
           </button>
@@ -496,6 +503,7 @@ export default function ToolbarPlugin() {
             }}
             className={'toolbar-item spaced ' + (isStrikethrough ? 'active' : '')}
             aria-label="Format Strikethrough"
+            tabIndex={-1}
           >
             <BiStrikethrough className="w-4 h-4" />
           </button>
@@ -505,23 +513,25 @@ export default function ToolbarPlugin() {
             }}
             className={'toolbar-item spaced ' + (isCode ? 'active' : '')}
             aria-label="Insert Code"
+            tabIndex={-1}
           >
             <BiCode className="w-4 h-4" />
           </button>
           <button
             onClick={insertLink}
             className={'toolbar-item spaced ' + (isLink ? 'active' : '')}
             aria-label="Insert Link"
+            tabIndex={-1}
           >
             <BiLink className="w-4 h-4" />
           </button>
-          {/* <div className="divider" /> */}
           <button
             onClick={() => {
               editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
             }}
             className="mobile-toolbar-item"
             aria-label="Left Align"
+            tabIndex={-1}
           >
             <BiAlignLeft className="w-4 h-4" />
           </button>
@@ -531,6 +541,7 @@ export default function ToolbarPlugin() {
             }}
             className="mobile-toolbar-item"
             aria-label="Center Align"
+            tabIndex={-1}
           >
             <BiAlignMiddle className="w-4 h-4" />
           </button>
@@ -540,6 +551,7 @@ export default function ToolbarPlugin() {
             }}
             className="mobile-toolbar-item"
             aria-label="Right Align"
+            tabIndex={-1}
           >
             <BiAlignRight className="w-4 h-4" />
           </button>
@@ -549,6 +561,7 @@ export default function ToolbarPlugin() {
             }}
             className="mobile-toolbar-item"
             aria-label="Justify Align"
+            tabIndex={-1}
           >
             <BiAlignJustify className="w-4 h-4" />
           </button>

src/components/memo-editor/MemoCreateModal.tsx

@@ -127,7 +127,6 @@ export default function MemoCreateModal({ onClose }: MemoCreateModalProps) {
             </div>
             <div className="h-full flex-grow pt-4">
               <LexicalMarkdownEditor
-                placeholder="마크다운으로 메모를 작성해보세요..."
                 value={memoData.content}
                 onChange={newValue => setMemoData(prev => ({ ...prev, content: newValue || '' }))}
                 autoFocus={false}

src/components/memo-editor/MemoUpdateModal.tsx

@@ -188,7 +188,6 @@ export default function MemoUpdateModal({ onClose, id }: MemoUpdateModalProps) {
                 value={displayMemoData.content}
                 onChange={handleMemoContentChange}
                 autoFocus={false}
-                placeholder="마크다운으로 메모를 작성해보세요..."
               />
             </div>
           </div>