@teriusu/rich-editor 0.5.3 → 0.6.1

package/README.md

@@ -1,25 +1,25 @@
-# @hancomac/rich-editor
+# @teriusu/rich-editor
 
 TipTap v3 기반 리치 텍스트 에디터. Svelte 5 컴포넌트 라이브러리.
 
 ## 설치
 
 ```bash
-npm install @hancomac/rich-editor
+npm install @teriusu/rich-editor
 ```
 
 Tailwind CSS v4 사용 시 `@source` 추가:
 ```css
-@import "@hancomac/rich-editor/styles";
-@source "../node_modules/@hancomac/rich-editor/dist";
+@import "@teriusu/rich-editor/styles";
+@source "../node_modules/@teriusu/rich-editor/dist";
 ```
 
 ## 기본 사용법
 
 ```svelte
 <script>
-  import { TipTapEditor } from '@hancomac/rich-editor';
-  import '@hancomac/rich-editor/styles';
+  import { TipTapEditor } from '@teriusu/rich-editor';
+  import '@teriusu/rich-editor/styles';
 
   let html = $state('');
 </script>
@@ -121,7 +121,7 @@ TipTap v2 커스텀 태그를 자동 변환합니다. 에디터 로드 시 `tran
 게시물 조회 페이지(읽기 전용)에서도 적용:
 
 ```js
-import { transformLegacyHtml } from '@hancomac/rich-editor';
+import { transformLegacyHtml } from '@teriusu/rich-editor';
 
 const html = transformLegacyHtml(post.content);
 ```
@@ -132,7 +132,7 @@ const html = transformLegacyHtml(post.content);
 
 ```svelte
 <script>
-  import { TipTapEditor } from '@hancomac/rich-editor';
+  import { TipTapEditor } from '@teriusu/rich-editor';
   import { Node } from '@tiptap/core';
 
   const MyExtension = Node.create({ /* ... */ });
@@ -159,13 +159,46 @@ const html = transformLegacyHtml(post.content);
 ### 타입
 `UploadHandler`, `FileResolver`, `FileResolveResult`, `TipTapEditorProps`, `SlashMenuItem`
 
-## 빌드
+## 빌드 / 배포
 
 ```bash
 npm run build          # svelte-package → dist/
-npm version patch      # 버전 올리기
+npm test               # vitest
 ```
 
+배포는 **main 브랜치 push 시 GitHub Actions가 자동 수행** (`.github/workflows/publish.yml`).
+수동 `npm publish`는 사용하지 않음.
+
+### 버전 정책 (SemVer)
+
+| 단계 | 조건 | 커밋 타입 |
+|------|------|-----------|
+| **patch** (`0.0.x`) | 버그 수정, 내부 리팩토링, 스타일 조정, 의존성 patch | `fix:`, `chore:`, `refactor:`, `style:` |
+| **minor** (`0.x.0`) | 하위 호환 기능 추가 (새 prop, 새 extension, 새 toolbar feature) | `feat:` |
+| **major** (`x.0.0`) | 깨는 변경 (prop 제거·rename, peer dep major bump, export 경로 변경) | `feat!:` / `BREAKING CHANGE:` |
+
+> `0.x`대에서는 관행상 **minor도 breaking일 수 있음**. 호스트 앱은 `^0.5.3` 대신 `~0.5.3` 사용을 권장.
+
+### 릴리스 플로우
+
+1. **patch만 필요한 변경**: 소스 수정 후 `main`에 push → CI가 `package.json`의 버전이 이미 publish된 최신과 같으면 **자동 patch bump** 후 publish
+2. **minor / major 변경**: push 전에 수동 bump
+   ```bash
+   npm version minor --no-git-tag-version   # 또는 major
+   git add package.json package-lock.json
+   git commit -m "chore: v$(node -p 'require(\"./package.json\").version')"
+   git push
+   ```
+   CI가 "이미 bump됨"을 감지하고 그 버전으로 publish.
+
+### 자동 전파
+
+publish 성공 시 `repository_dispatch` (`rich-editor-published`) 이벤트가 다음 repo로 전송되고, 각 repo의 `update-*` 워크플로우가 `package.json`을 새 버전으로 업데이트 + 커밋:
+- `teriusu-ko/hancomac` → `@teriusu/rich-editor`
+- `HancomAC/arcturus-next` → `apps/jungol`, `apps/codepass`의 `@teriusu/rich-editor`
+
+`teriusu-ko/teriusu`는 현재 수동 업데이트 (hook 미설정 — `GH_PAT` secret 추가 시 연결 가능).
+
 ## 기술 스택
 
 | 구분 | 기술 |

package/dist/components/BubbleToolbar.svelte

@@ -22,9 +22,17 @@
     Code,
   } from "lucide-svelte";
   import { cn } from "../utils/cn";
-  import type { ToolbarFeature } from "../types";
+  import type { ToolbarFeature, PromptHandler } from "../types";
 
-  let { editor, features }: { editor: Editor; features: Set<ToolbarFeature> } = $props();
+  let {
+    editor,
+    features,
+    onPromptLink,
+  }: {
+    editor: Editor;
+    features: Set<ToolbarFeature>;
+    onPromptLink?: PromptHandler;
+  } = $props();
 
   const has = (f: ToolbarFeature) => features.has(f);
 
@@ -39,9 +47,11 @@
     return "본문";
   }
 
-  function addLink() {
+  async function addLink() {
     const previousUrl = editor.getAttributes("link").href || "";
-    const url = window.prompt("링크 URL을 입력하세요", previousUrl);
+    const url = onPromptLink
+      ? await onPromptLink(previousUrl)
+      : window.prompt("링크 URL을 입력하세요", previousUrl);
     if (url === null) return;
     if (url === "") {
       editor.chain().focus().extendMarkRange("link").unsetLink().run();
@@ -83,14 +93,14 @@
 </script>
 
 <div bind:this={menuEl} class="bubble-toolbar-container" style="visibility: hidden">
-  <div class="flex items-center gap-0.5 px-1.5 py-1 bg-foreground rounded-lg shadow-xl">
+  <div class="flex items-center gap-0.5 px-1.5 py-1 bg-foreground rounded-full shadow-xl">
     {#if has('h1') || has('h2') || has('h3')}
       <!-- Block type selector -->
       <div class="relative">
         <button
           type="button"
           onclick={() => (showHeadings = !showHeadings)}
-          class="flex items-center gap-1 px-2 py-1.5 rounded-md text-xs font-medium text-white/80 hover:text-white hover:bg-white/10 transition-colors"
+          class="flex items-center gap-1 px-2.5 py-1.5 rounded-full text-xs font-medium text-white/80 hover:text-white hover:bg-white/10 transition-colors"
         >
           <Type size={12} />
           {getCurrentBlockLabel()}
@@ -154,7 +164,7 @@
       title="굵게"
       aria-label="굵게"
       class={cn(
-        "p-1.5 rounded-md transition-colors",
+        "p-1.5 rounded-full transition-colors",
         editor.isActive("bold")
           ? "bg-white/20 text-white"
           : "text-white/70 hover:text-white hover:bg-white/10",
@@ -170,7 +180,7 @@
       title="기울임"
       aria-label="기울임"
       class={cn(
-        "p-1.5 rounded-md transition-colors",
+        "p-1.5 rounded-full transition-colors",
         editor.isActive("italic")
           ? "bg-white/20 text-white"
           : "text-white/70 hover:text-white hover:bg-white/10",
@@ -186,7 +196,7 @@
         title="밑줄"
         aria-label="밑줄"
         class={cn(
-          "p-1.5 rounded-md transition-colors",
+          "p-1.5 rounded-full transition-colors",
           editor.isActive("underline")
             ? "bg-white/20 text-white"
             : "text-white/70 hover:text-white hover:bg-white/10",
@@ -202,7 +212,7 @@
       title="취소선"
       aria-label="취소선"
       class={cn(
-        "p-1.5 rounded-md transition-colors",
+        "p-1.5 rounded-full transition-colors",
         editor.isActive("strike")
           ? "bg-white/20 text-white"
           : "text-white/70 hover:text-white hover:bg-white/10",
@@ -218,7 +228,7 @@
         title="하이라이트"
         aria-label="하이라이트"
         class={cn(
-          "p-1.5 rounded-md transition-colors",
+          "p-1.5 rounded-full transition-colors",
           editor.isActive("highlight")
             ? "bg-white/20 text-white"
             : "text-white/70 hover:text-white hover:bg-white/10",
@@ -234,7 +244,7 @@
       title="코드"
       aria-label="코드"
       class={cn(
-        "p-1.5 rounded-md transition-colors",
+        "p-1.5 rounded-full transition-colors",
         editor.isActive("code")
           ? "bg-white/20 text-white"
           : "text-white/70 hover:text-white hover:bg-white/10",
@@ -253,7 +263,7 @@
       title="링크"
       aria-label="링크"
       class={cn(
-        "p-1.5 rounded-md transition-colors",
+        "p-1.5 rounded-full transition-colors",
         editor.isActive("link")
           ? "bg-white/20 text-white"
           : "text-white/70 hover:text-white hover:bg-white/10",
@@ -274,7 +284,7 @@
         title="왼쪽 정렬"
         aria-label="왼쪽 정렬"
         class={cn(
-          "p-1.5 rounded-md transition-colors",
+          "p-1.5 rounded-full transition-colors",
           editor.isActive({ textAlign: "left" })
             ? "bg-white/20 text-white"
             : "text-white/70 hover:text-white hover:bg-white/10",
@@ -290,7 +300,7 @@
         title="가운데 정렬"
         aria-label="가운데 정렬"
         class={cn(
-          "p-1.5 rounded-md transition-colors",
+          "p-1.5 rounded-full transition-colors",
           editor.isActive({ textAlign: "center" })
             ? "bg-white/20 text-white"
             : "text-white/70 hover:text-white hover:bg-white/10",
@@ -306,7 +316,7 @@
         title="오른쪽 정렬"
         aria-label="오른쪽 정렬"
         class={cn(
-          "p-1.5 rounded-md transition-colors",
+          "p-1.5 rounded-full transition-colors",
           editor.isActive({ textAlign: "right" })
             ? "bg-white/20 text-white"
             : "text-white/70 hover:text-white hover:bg-white/10",

package/dist/components/BubbleToolbar.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Editor } from "@tiptap/core";
-import type { ToolbarFeature } from "../types";
+import type { ToolbarFeature, PromptHandler } from "../types";
 type $$ComponentProps = {
     editor: Editor;
     features: Set<ToolbarFeature>;
+    onPromptLink?: PromptHandler;
 };
 declare const BubbleToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
 type BubbleToolbar = ReturnType<typeof BubbleToolbar>;

package/dist/components/BubbleToolbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BubbleToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAqB3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE9C,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,CAAC;AA0O5E,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"BubbleToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BubbleToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAqB3C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;AAgPJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/FixedToolbar.svelte

@@ -43,7 +43,7 @@
   } from "lucide-svelte";
   import { cn } from "../utils/cn";
   import InputModal from "./InputModal.svelte";
-  import type { ToolbarFeature } from "../types";
+  import type { ToolbarFeature, PromptHandler } from "../types";
 
   let {
     editor,
@@ -51,12 +51,16 @@
     onPdfClick,
     onFileClick,
     onVideoClick,
+    onPromptLink,
+    onPromptImage,
   }: {
     editor: Editor;
     features: Set<ToolbarFeature>;
     onPdfClick: () => void;
     onFileClick?: () => void;
     onVideoClick?: () => void;
+    onPromptLink?: PromptHandler;
+    onPromptImage?: PromptHandler;
   } = $props();
 
   const has = (f: ToolbarFeature) => features.has(f);
@@ -91,11 +95,35 @@
     };
   });
 
-  function addLink() {
+  async function addLink() {
+    if (onPromptLink) {
+      const previous = editor.isActive("link")
+        ? (editor.getAttributes("link").href as string) || ""
+        : "";
+      const url = await onPromptLink(previous);
+      if (url === null) return;
+      if (url === "") {
+        editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      } else {
+        editor
+          .chain()
+          .focus()
+          .extendMarkRange("link")
+          .setLink({ href: url })
+          .run();
+      }
+      return;
+    }
     modalState = { type: "link" };
   }
 
-  function addImage() {
+  async function addImage() {
+    if (onPromptImage) {
+      const url = await onPromptImage("");
+      if (!url) return;
+      editor.chain().focus().setImage({ src: url }).run();
+      return;
+    }
     modalState = { type: "image" };
   }
 
@@ -120,10 +148,11 @@
 </script>
 
 <div
-  class="sticky z-30 flex flex-wrap items-center gap-0.5 px-3 py-2 border-b border-border bg-background rounded-t-xl"
+  class="hce-toolbar sticky z-30 flex flex-wrap items-center gap-1.5 px-3 py-2 border-b border-border bg-background rounded-t-xl"
   style="top: var(--header-height, 74px)"
 >
   <!-- Format -->
+  <div class="hce-toolbar-group">
   {#if has('bold')}
   <button
     type="button"
@@ -237,11 +266,11 @@
   </button>
   {/if}
 
-  {#if has('align-left') || has('align-center') || has('align-right')}
-  <div class="w-px h-6 bg-border mx-0.5"></div>
-  {/if}
+  </div>
 
+  {#if has('align-left') || has('align-center') || has('align-right')}
   <!-- Alignment -->
+  <div class="hce-toolbar-group">
   {#if has('align-left')}
   <button
     type="button"
@@ -291,11 +320,12 @@
   </button>
   {/if}
 
-  {#if has('h1') || has('h2') || has('h3')}
-  <div class="w-px h-6 bg-border mx-0.5"></div>
+    </div>
   {/if}
 
+  {#if has('h1') || has('h2') || has('h3')}
   <!-- Headings -->
+  <div class="hce-toolbar-group">
   {#if has('h1')}
   <button
     type="button"
@@ -345,11 +375,12 @@
   </button>
   {/if}
 
-  {#if has('bullet-list') || has('ordered-list') || has('checklist') || has('blockquote') || has('horizontal-rule') || has('toggle')}
-  <div class="w-px h-6 bg-border mx-0.5"></div>
+    </div>
   {/if}
 
+  {#if has('bullet-list') || has('ordered-list') || has('checklist') || has('blockquote') || has('horizontal-rule') || has('toggle')}
   <!-- Lists & Blocks -->
+  <div class="hce-toolbar-group">
   {#if has('bullet-list')}
   <button
     type="button"
@@ -442,11 +473,12 @@
   </button>
   {/if}
 
-  {#if has('link') || has('image') || has('pdf') || has('youtube') || has('video') || has('file')}
-  <div class="w-px h-6 bg-border mx-0.5"></div>
+    </div>
   {/if}
 
-  <!-- Media -->
+  {#if has('link') || has('image') || has('pdf') || has('youtube') || has('video') || has('file') || has('columns-2') || has('columns-3') || has('table') || has('code-block')}
+  <!-- Media & Layout -->
+  <div class="hce-toolbar-group">
   {#if has('link')}
   <button
     type="button"
@@ -607,7 +639,7 @@
           </button>
         {:else}
           <p
-            class="px-3 py-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
+            class="px-3 py-1 text-xs font-semibold text-muted-foreground"
           >
             구조
           </p>
@@ -671,7 +703,7 @@
           </button>
           <div class="h-px bg-border my-1"></div>
           <p
-            class="px-3 py-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
+            class="px-3 py-1 text-xs font-semibold text-muted-foreground"
           >
             헤더 / 셀
           </p>
@@ -745,7 +777,7 @@
           </button>
           <div class="h-px bg-border my-1"></div>
           <p
-            class="px-3 py-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground"
+            class="px-3 py-1 text-xs font-semibold text-muted-foreground"
           >
             삭제
           </p>
@@ -797,70 +829,31 @@
   </div>
   {/if}
 
-  <!-- Code block menu -->
+  <!-- Code block -->
   {#if has('code-block')}
-  <div bind:this={codeMenuEl} class="relative">
-    <button
-      type="button"
-      onclick={() => (codeMenuOpen = !codeMenuOpen)}
-      data-tooltip="코드 블록"
-      aria-label="코드 블록"
-      class={cn(
-        "flex items-center gap-0.5 p-1.5 rounded-md transition-colors",
-        editor.isActive("codeBlock")
-          ? "bg-primary/10 text-primary"
-          : "text-muted-foreground hover:bg-muted hover:text-foreground",
-      )}
-    >
-      <Code2 size={iconSize} />
-      <ChevronDown size={12} />
-    </button>
-    {#if codeMenuOpen}
-      <div
-        class="absolute top-full left-0 mt-1 bg-popover border border-border rounded-lg shadow-lg z-50 py-1"
-        style="min-width: 130px"
-      >
-        <button
-          type="button"
-          class="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors"
-          onclick={() => {
-            editor.chain().focus().setCodeBlock({ language: "cpp" }).run();
-            codeMenuOpen = false;
-          }}
-        >
-          C++
-        </button>
-        <button
-          type="button"
-          class="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors"
-          onclick={() => {
-            editor.chain().focus().setCodeBlock({ language: "python" }).run();
-            codeMenuOpen = false;
-          }}
-        >
-          Python
-        </button>
-        <div class="h-px bg-border my-1"></div>
-        <button
-          type="button"
-          class="w-full text-left px-3 py-2 text-sm hover:bg-muted transition-colors"
-          onclick={() => {
-            editor.chain().focus().setCodeBlock({ language: "" }).run();
-            codeMenuOpen = false;
-          }}
-        >
-          일반 코드
-        </button>
-      </div>
-    {/if}
-  </div>
+  <button
+    type="button"
+    onclick={() => editor.chain().focus().setCodeBlock({ language: 'cpp' }).run()}
+    data-tooltip="코드 블록"
+    aria-label="코드 블록"
+    class={cn(
+      "p-1.5 rounded-md transition-colors",
+      editor.isActive("codeBlock")
+        ? "bg-primary/10 text-primary"
+        : "text-muted-foreground hover:bg-muted hover:text-foreground",
+    )}
+  >
+    <Code2 size={iconSize} />
+  </button>
   {/if}
 
-  {#if has('undo') || has('redo')}
-  <div class="w-px h-6 bg-border mx-0.5"></div>
+    </div>
   {/if}
 
+  {#if has('undo') || has('redo')}
   <!-- Undo / Redo -->
+  <div class="hce-toolbar-group">
+
   {#if has('undo')}
   <button
     type="button"
@@ -892,10 +885,13 @@
   </button>
   {/if}
 
+  </div>
+  {/if}
+
   <!-- Modals -->
   {#if modalState?.type === "link"}
     <InputModal
-      data-tooltip="링크 URL 입력"
+      title="링크 URL 입력"
       placeholder="https://example.com"
       defaultValue={editor.isActive("link") ? editor.getAttributes("link").href || "" : ""}
       onConfirm={(url) => {
@@ -912,7 +908,7 @@
   {/if}
   {#if modalState?.type === "image"}
     <InputModal
-      data-tooltip="이미지 URL 입력"
+      title="이미지 URL 입력"
       placeholder="https://example.com/image.png"
       onConfirm={(url) => {
         editor.chain().focus().setImage({ src: url }).run();
@@ -963,3 +959,30 @@
     </div>
   {/if}
 </div>
+
+<style>
+  /* 툴바 버튼 기본 리셋 (Tailwind preflight 비활성화 상태라 UA 기본값 제거) */
+  .hce-toolbar :global(button) {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  .hce-toolbar :global(button:disabled) {
+    cursor: default;
+  }
+
+  .hce-toolbar-group {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 3px;
+    border-radius: var(--radius-xl, 8px);
+    background: color-mix(in srgb, var(--muted, #f6f7f9) 55%, transparent);
+  }
+
+  .hce-toolbar-group :global(button) {
+    flex-shrink: 0;
+  }
+</style>

package/dist/components/FixedToolbar.svelte.d.ts

@@ -1,11 +1,13 @@
 import type { Editor } from "@tiptap/core";
-import type { ToolbarFeature } from "../types";
+import type { ToolbarFeature, PromptHandler } from "../types";
 type $$ComponentProps = {
     editor: Editor;
     features: Set<ToolbarFeature>;
     onPdfClick: () => void;
     onFileClick?: () => void;
     onVideoClick?: () => void;
+    onPromptLink?: PromptHandler;
+    onPromptImage?: PromptHandler;
 };
 declare const FixedToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
 type FixedToolbar = ReturnType<typeof FixedToolbar>;

package/dist/components/FixedToolbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FixedToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FixedToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA4C3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE9C,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAymBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FixedToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FixedToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA4C3C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAonBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/InputModal.svelte

@@ -55,44 +55,47 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-  class="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
+  class="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
   onclick={handleBackdropClick}
 >
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    class="bg-background border border-border rounded-lg shadow-lg p-4 w-80"
+    class="bg-background border border-border rounded-xl shadow-xl p-5 w-[360px] max-w-[90vw]"
     onclick={(e) => e.stopPropagation()}
   >
-    <div class="flex items-center justify-between mb-3">
-      <span class="text-sm font-medium">{title}</span>
-      <button
-        type="button"
-        class="p-0.5 rounded hover:bg-muted text-muted-foreground"
-        onclick={onCancel}
-      >
-        <X size={14} />
-      </button>
-    </div>
+    {#if title}
+      <div class="flex items-center justify-between mb-3">
+        <span class="text-sm font-semibold">{title}</span>
+        <button
+          type="button"
+          class="p-1 rounded-md hover:bg-muted text-muted-foreground"
+          onclick={onCancel}
+          aria-label="닫기"
+        >
+          <X size={14} />
+        </button>
+      </div>
+    {/if}
     <input
       bind:this={inputEl}
       type="text"
-      class="w-full border border-border rounded px-3 py-1.5 text-sm bg-background focus:outline-none focus:ring-1 focus:ring-primary"
+      class="w-full border border-border rounded-md px-3 py-2 text-sm bg-background focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary"
       {placeholder}
       bind:value
       onkeydown={handleKeydown}
     />
-    <div class="flex justify-end gap-2 mt-3">
+    <div class="flex justify-end gap-2 mt-4">
       <button
         type="button"
-        class="px-3 py-1 text-sm rounded border border-border hover:bg-muted"
+        class="px-3.5 py-1.5 text-sm rounded-md border border-border hover:bg-muted transition-colors"
         onclick={onCancel}
       >
         취소
       </button>
       <button
         type="button"
-        class="px-3 py-1 text-sm rounded bg-primary text-primary-foreground hover:opacity-90"
+        class="px-3.5 py-1.5 text-sm rounded-md bg-primary text-primary-foreground hover:opacity-90 transition-opacity"
         onclick={handleSubmit}
       >
         확인

package/dist/components/InputModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/InputModal.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA2EJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/InputModal.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA6EJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}