@jcjeon/integration-cli 0.2.0

package/apps/web/src/app/test/page.tsx

@@ -0,0 +1,298 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+
+import type { DiffFile } from "@/features/diff/ui/DiffFileRow";
+import { DiffFileRow } from "@/features/diff/ui/DiffFileRow";
+
+// ─── Mock Data ────────────────────────────────────────────────────────────────
+
+const MOCK_FILES: DiffFile[] = [
+  {
+    filePath: "src/features/auth/hooks/useLogin.ts",
+    changeType: "added",
+    additions: 42,
+    deletions: 0,
+    lines: [
+      { type: "hunk", content: "@@ -0,0 +1,42 @@" },
+      { type: "added", content: '"use client";', newLineNo: 1 },
+      { type: "added", content: "", newLineNo: 2 },
+      { type: "added", content: "import { useState } from \"react\";", newLineNo: 3 },
+      { type: "added", content: "", newLineNo: 4 },
+      { type: "added", content: "export function useLogin() {", newLineNo: 5 },
+      { type: "added", content: "  const [loading, setLoading] = useState(false);", newLineNo: 6 },
+      { type: "added", content: "  const [error, setError] = useState<string | null>(null);", newLineNo: 7 },
+      { type: "added", content: "", newLineNo: 8 },
+      { type: "added", content: "  const login = async (email: string, password: string) => {", newLineNo: 9 },
+      { type: "added", content: "    setLoading(true);", newLineNo: 10 },
+      { type: "added", content: "    try {", newLineNo: 11 },
+      { type: "added", content: "      await authApi.login({ email, password });", newLineNo: 12 },
+      { type: "added", content: "    } catch (e) {", newLineNo: 13 },
+      { type: "added", content: "      setError(e instanceof Error ? e.message : \"로그인 실패\");", newLineNo: 14 },
+      { type: "added", content: "    } finally {", newLineNo: 15 },
+      { type: "added", content: "      setLoading(false);", newLineNo: 16 },
+      { type: "added", content: "    }", newLineNo: 17 },
+      { type: "added", content: "  };", newLineNo: 18 },
+      { type: "added", content: "", newLineNo: 19 },
+      { type: "added", content: "  return { loading, error, login };", newLineNo: 20 },
+      { type: "added", content: "}", newLineNo: 21 },
+    ],
+  },
+  {
+    filePath: "src/features/auth/ui/LoginForm.tsx",
+    changeType: "modified",
+    additions: 15,
+    deletions: 8,
+    lines: [
+      { type: "hunk", content: "@@ -12,18 +12,25 @@" },
+      { type: "context", content: "export function LoginForm() {", oldLineNo: 12, newLineNo: 12 },
+      { type: "context", content: "  const { loading, error, login } = useLogin();", oldLineNo: 13, newLineNo: 13 },
+      { type: "context", content: "", oldLineNo: 14, newLineNo: 14 },
+      { type: "removed", content: "  const [email, setEmail] = useState(\"\");", oldLineNo: 15 },
+      { type: "removed", content: "  const [password, setPassword] = useState(\"\");", oldLineNo: 16 },
+      { type: "added",   content: "  const [form, setForm] = useState({ email: \"\", password: \"\" });", newLineNo: 15 },
+      { type: "added",   content: "", newLineNo: 16 },
+      { type: "added",   content: "  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {", newLineNo: 17 },
+      { type: "added",   content: "    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));", newLineNo: 18 },
+      { type: "added",   content: "  };", newLineNo: 19 },
+      { type: "context", content: "", oldLineNo: 17, newLineNo: 20 },
+      { type: "context", content: "  const handleSubmit = async (e: React.FormEvent) => {", oldLineNo: 18, newLineNo: 21 },
+      { type: "context", content: "    e.preventDefault();", oldLineNo: 19, newLineNo: 22 },
+      { type: "removed", content: "    await login(email, password);", oldLineNo: 20 },
+      { type: "added",   content: "    await login(form.email, form.password);", newLineNo: 23 },
+      { type: "context", content: "  };", oldLineNo: 21, newLineNo: 24 },
+    ],
+  },
+  {
+    filePath: "src/features/auth/api/auth.api.ts",
+    changeType: "modified",
+    additions: 6,
+    deletions: 2,
+    lines: [
+      { type: "hunk", content: "@@ -28,10 +28,14 @@" },
+      { type: "context", content: "export async function login(dto: LoginDto) {", oldLineNo: 28, newLineNo: 28 },
+      { type: "context", content: "  const res = await fetch(`${SERVER_URL}/auth/login`, {", oldLineNo: 29, newLineNo: 29 },
+      { type: "context", content: "    method: \"POST\",", oldLineNo: 30, newLineNo: 30 },
+      { type: "removed", content: "    body: JSON.stringify(dto),", oldLineNo: 31 },
+      { type: "added",   content: "    headers: { \"Content-Type\": \"application/json\" },", newLineNo: 31 },
+      { type: "added",   content: "    body: JSON.stringify(dto),", newLineNo: 32 },
+      { type: "context", content: "  });", oldLineNo: 32, newLineNo: 33 },
+      { type: "removed", content: "  if (!res.ok) throw new Error(\"HTTP \" + res.status);", oldLineNo: 33 },
+      { type: "added",   content: "  if (!res.ok) {", newLineNo: 34 },
+      { type: "added",   content: "    const body = await res.json().catch(() => ({}));", newLineNo: 35 },
+      { type: "added",   content: "    throw new Error(body.message ?? `HTTP ${res.status}`);", newLineNo: 36 },
+      { type: "added",   content: "  }", newLineNo: 37 },
+      { type: "context", content: "  return res.json();", oldLineNo: 34, newLineNo: 38 },
+      { type: "context", content: "}", oldLineNo: 35, newLineNo: 39 },
+    ],
+  },
+  {
+    filePath: "src/features/auth/utils/validators.ts",
+    changeType: "deleted",
+    additions: 0,
+    deletions: 18,
+    lines: [
+      { type: "hunk", content: "@@ -1,18 +0,0 @@" },
+      { type: "removed", content: "export function validateEmail(email: string) {", oldLineNo: 1 },
+      { type: "removed", content: "  return /^[^@]+@[^@]+\\.[^@]+$/.test(email);", oldLineNo: 2 },
+      { type: "removed", content: "}", oldLineNo: 3 },
+      { type: "removed", content: "", oldLineNo: 4 },
+      { type: "removed", content: "export function validatePassword(password: string) {", oldLineNo: 5 },
+      { type: "removed", content: "  return password.length >= 8;", oldLineNo: 6 },
+      { type: "removed", content: "}", oldLineNo: 7 },
+    ],
+  },
+  {
+    filePath: "src/features/auth/utils/validation.ts",
+    changeType: "renamed",
+    additions: 4,
+    deletions: 0,
+    lines: [
+      { type: "hunk", content: "@@ -0,0 +1,12 @@ (validators.ts → validation.ts)" },
+      { type: "context", content: "export function validateEmail(email: string) {", oldLineNo: 1, newLineNo: 1 },
+      { type: "context", content: "  return /^[^@]+@[^@]+\\.[^@]+$/.test(email);", oldLineNo: 2, newLineNo: 2 },
+      { type: "context", content: "}", oldLineNo: 3, newLineNo: 3 },
+      { type: "context", content: "", oldLineNo: 4, newLineNo: 4 },
+      { type: "context", content: "export function validatePassword(password: string) {", oldLineNo: 5, newLineNo: 5 },
+      { type: "context", content: "  return password.length >= 8;", oldLineNo: 6, newLineNo: 6 },
+      { type: "context", content: "}", oldLineNo: 7, newLineNo: 7 },
+      { type: "added",   content: "", newLineNo: 8 },
+      { type: "added",   content: "export function validateRequired(value: string) {", newLineNo: 9 },
+      { type: "added",   content: "  return value.trim().length > 0;", newLineNo: 10 },
+      { type: "added",   content: "}", newLineNo: 11 },
+    ],
+  },
+];
+
+const STATS = MOCK_FILES.reduce(
+  (acc, f) => ({ additions: acc.additions + f.additions, deletions: acc.deletions + f.deletions }),
+  { additions: 0, deletions: 0 },
+);
+
+// ─── DiffSummaryBar ───────────────────────────────────────────────────────────
+
+function DiffSummaryBar() {
+  const total = STATS.additions + STATS.deletions;
+  const addRatio = total > 0 ? (STATS.additions / total) * 100 : 50;
+
+  return (
+    <div className="flex items-center gap-3">
+      <span className="text-[11px] font-mono text-emerald-600 dark:text-emerald-400">
+        +{STATS.additions}
+      </span>
+      <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-900/[0.06] dark:bg-white/[0.06]">
+        <div
+          className="h-full rounded-full bg-emerald-500"
+          style={{ width: `${addRatio}%` }}
+        />
+      </div>
+      <span className="text-[11px] font-mono text-red-600 dark:text-red-400">
+        -{STATS.deletions}
+      </span>
+    </div>
+  );
+}
+
+// ─── FilterBar ────────────────────────────────────────────────────────────────
+
+type FilterType = "all" | "added" | "modified" | "deleted" | "renamed";
+
+const FILTER_LABELS: Record<FilterType, string> = {
+  all:      "전체",
+  added:    "추가",
+  modified: "수정",
+  deleted:  "삭제",
+  renamed:  "이동",
+};
+
+interface FilterBarProps {
+  active: FilterType;
+  onChange: (f: FilterType) => void;
+}
+
+function FilterBar({ active, onChange }: FilterBarProps) {
+  const filters = (Object.keys(FILTER_LABELS) as FilterType[]);
+  return (
+    <div className="flex gap-1 rounded-lg border border-gray-900/[0.06] bg-gray-900/[0.02] p-0.5 dark:border-white/[0.06] dark:bg-white/[0.02]">
+      {filters.map((f) => (
+        <button
+          key={f}
+          type="button"
+          onClick={() => onChange(f)}
+          className={[
+            "rounded-md px-2.5 py-1 text-[11px] font-medium transition-colors",
+            active === f
+              ? "bg-white text-gray-900/70 shadow-sm dark:bg-white/[0.08] dark:text-white/70"
+              : "text-gray-900/35 hover:text-gray-900/60 dark:text-white/35 dark:hover:text-white/60",
+          ].join(" ")}
+        >
+          {FILTER_LABELS[f]}
+          {f !== "all" && (
+            <span className="ml-1 opacity-50">
+              {MOCK_FILES.filter((file) => file.changeType === f).length}
+            </span>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function DiffTestPage() {
+  const [filter, setFilter] = useState<FilterType>("all");
+  const [expandAll, setExpandAll] = useState(false);
+
+  const filtered = filter === "all"
+    ? MOCK_FILES
+    : MOCK_FILES.filter((f) => f.changeType === filter);
+
+  return (
+    <div className="min-h-screen bg-[#faf8f5] px-4 py-8 dark:bg-[#07090e]">
+      <div className="mx-auto max-w-3xl">
+
+        {/* 헤더 */}
+        <div className="mb-6 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Link
+              href="/"
+              className="flex h-7 w-7 items-center justify-center rounded-lg border border-gray-900/[0.08] text-gray-900/30 transition-colors hover:border-gray-900/[0.15] hover:text-gray-900/60 dark:border-white/[0.08] dark:text-white/30 dark:hover:border-white/[0.15] dark:hover:text-white/60"
+            >
+              <svg viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5">
+                <path fillRule="evenodd" d="M9.78 4.22a.75.75 0 010 1.06L7.06 8l2.72 2.72a.75.75 0 11-1.06 1.06L5.47 8.53a.75.75 0 010-1.06l3.25-3.25a.75.75 0 011.06 0z" clipRule="evenodd" />
+              </svg>
+            </Link>
+            <div>
+              <h1 className="text-sm font-semibold text-gray-900/80 dark:text-white/80">
+                Diff 뷰어 테스트
+              </h1>
+              <p className="text-[11px] text-gray-900/30 dark:text-white/30">
+                feat/auth-refactor → main
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1.5 rounded-lg border border-gray-900/[0.07] bg-gray-900/[0.03] px-2.5 py-1.5 dark:border-white/[0.07] dark:bg-white/[0.03]">
+            <span className="text-[11px] text-gray-900/40 dark:text-white/40">
+              {MOCK_FILES.length}개 파일
+            </span>
+            <span className="text-gray-900/10 dark:text-white/10">·</span>
+            <span className="font-mono text-[11px] text-emerald-600 dark:text-emerald-400">
+              +{STATS.additions}
+            </span>
+            <span className="font-mono text-[11px] text-red-600 dark:text-red-400">
+              -{STATS.deletions}
+            </span>
+          </div>
+        </div>
+
+        {/* 통계 바 */}
+        <div className="mb-4 rounded-xl border border-gray-900/[0.07] bg-white/60 p-4 dark:border-white/[0.07] dark:bg-white/[0.03]">
+          <p className="mb-2 text-[11px] font-medium text-gray-900/40 dark:text-white/40">변경 통계</p>
+          <DiffSummaryBar />
+        </div>
+
+        {/* 툴바 */}
+        <div className="mb-3 flex items-center justify-between gap-3">
+          <FilterBar active={filter} onChange={setFilter} />
+          <button
+            type="button"
+            onClick={() => setExpandAll((p) => !p)}
+            className="flex items-center gap-1.5 rounded-lg border border-gray-900/[0.07] px-2.5 py-1 text-[11px] font-medium text-gray-900/35 transition-colors hover:border-gray-900/[0.13] hover:text-gray-900/70 dark:border-white/[0.07] dark:text-white/35 dark:hover:border-white/[0.13] dark:hover:text-white/70"
+          >
+            <svg viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3">
+              {expandAll ? (
+                <path fillRule="evenodd" d="M4.22 6.22a.75.75 0 011.06 0L8 8.94l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L4.22 7.28a.75.75 0 010-1.06z" clipRule="evenodd" />
+              ) : (
+                <path fillRule="evenodd" d="M6.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 010-1.06z" clipRule="evenodd" />
+              )}
+            </svg>
+            {expandAll ? "모두 접기" : "모두 펼치기"}
+          </button>
+        </div>
+
+        {/* 파일 목록 */}
+        {filtered.length === 0 ? (
+          <div className="flex flex-col items-center gap-2 rounded-xl border border-gray-900/[0.06] py-12 text-center dark:border-white/[0.06]">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="h-8 w-8 text-gray-900/15 dark:text-white/15">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12" />
+            </svg>
+            <p className="text-xs text-gray-900/30 dark:text-white/30">해당 유형의 변경사항이 없습니다</p>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-1.5">
+            {filtered.map((file) => (
+              <DiffFileRow
+                key={`${file.filePath}-${String(expandAll)}`}
+                file={file}
+                defaultOpen={expandAll}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/apps/web/src/components/ui/Modal.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  maxWidth?: string;
+  hideClose?: boolean;
+  zIndex?: string;
+}
+
+export function Modal({ open, onClose, title, children, maxWidth = "max-w-lg", hideClose = false, zIndex = "z-50" }: ModalProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (open) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => { document.body.style.overflow = ""; };
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={overlayRef}
+      className={`fixed inset-0 flex items-center justify-center bg-black/50 p-4 backdrop-blur-md dark:bg-black/70 ${zIndex}`}
+      onMouseDown={(e) => { if (e.target === overlayRef.current) onClose(); }}
+    >
+      <div
+        className={[
+          "relative flex w-full flex-col rounded-2xl",
+          "border border-gray-900/[0.08] bg-white dark:border-white/[0.08] dark:bg-[#0a0c10]",
+          "shadow-[0_24px_80px_rgba(0,0,0,0.15)] dark:shadow-[0_24px_80px_rgba(0,0,0,0.7)]",
+          maxWidth,
+        ].join(" ")}
+        style={{ animation: "modal-in 0.18s cubic-bezier(0.16,1,0.3,1) both" }}
+      >
+        {/* 헤더 */}
+        <div className="flex items-center justify-between border-b border-gray-900/[0.06] px-5 py-4 dark:border-white/[0.06]">
+          <h2 className="text-sm font-semibold text-gray-900/85 dark:text-white/85">{title}</h2>
+          {!hideClose && (
+            <button
+              onClick={onClose}
+              className="flex h-6 w-6 items-center justify-center rounded-md text-gray-900/25 transition-colors hover:bg-gray-900/[0.07] hover:text-gray-900/70 dark:text-white/25 dark:hover:bg-white/[0.07] dark:hover:text-white/70"
+              aria-label="닫기"
+            >
+              <svg viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5">
+                <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z" />
+              </svg>
+            </button>
+          )}
+        </div>
+
+        {/* 본문 */}
+        <div className="overflow-y-auto px-5 py-5" style={{ maxHeight: "calc(90vh - 64px)" }}>
+          {children}
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes modal-in {
+          from { opacity: 0; transform: scale(0.96) translateY(6px); }
+          to   { opacity: 1; transform: scale(1)    translateY(0); }
+        }
+      `}</style>
+    </div>
+  );
+}

package/apps/web/src/components/ui/WorkingDirPicker.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+import { useDirBrowser } from "@/features/fs/hooks/useDirBrowser";
+
+interface WorkingDirPickerProps {
+  value: string;
+  onChange: (path: string) => void;
+  /** "inline" = 채팅 푸터용 한 줄 레이아웃, "field" = 모달 내 폼 필드 */
+  variant?: "inline" | "field";
+}
+
+function FolderIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" className={className}>
+      <path d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3H7.5a.25.25 0 01-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75z" />
+    </svg>
+  );
+}
+
+function DirDropdown({
+  currentPath,
+  dirs,
+  loading,
+  direction = "down",
+  onNavigate,
+  onNavigateUp,
+  onSelect,
+}: {
+  currentPath: string;
+  dirs: string[];
+  loading: boolean;
+  direction?: "up" | "down";
+  onNavigate: (path: string) => void;
+  onNavigateUp: () => void;
+  onSelect: () => void;
+}) {
+  const sep = currentPath.includes("/") ? "/" : "\\";
+  const isRoot = !currentPath || currentPath === sep || !currentPath.slice(1).includes(sep);
+  const positionClass = direction === "up" ? "bottom-full mb-1" : "top-full mt-1";
+
+  return (
+    <div className={`absolute left-0 z-50 w-80 rounded-xl border border-gray-900/[0.1] bg-white shadow-lg dark:border-white/[0.1] dark:bg-gray-900 ${positionClass}`}>
+      {/* 현재 경로 + 위로 버튼 */}
+      <div className="flex items-center gap-1.5 border-b border-gray-900/[0.07] px-3 py-2 dark:border-white/[0.07]">
+        <button
+          type="button"
+          onClick={onNavigateUp}
+          disabled={isRoot || loading}
+          title="상위 폴더"
+          className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-gray-900/40 transition-colors hover:bg-gray-900/[0.06] hover:text-gray-900/70 disabled:opacity-30 dark:text-white/40 dark:hover:bg-white/[0.06] dark:hover:text-white/70"
+        >
+          <svg viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5">
+            <path d="M3.22 10.53a.75.75 0 001.06 0L8 6.81l3.72 3.72a.75.75 0 101.06-1.06L8.53 5.22a.75.75 0 00-1.06 0L3.22 9.47a.75.75 0 000 1.06z" />
+          </svg>
+        </button>
+        <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-gray-900/60 dark:text-white/60">
+          {currentPath || "…"}
+        </span>
+      </div>
+
+      {/* 디렉토리 목록 */}
+      <ul className="max-h-52 overflow-y-auto py-1">
+        {loading && (
+          <li className="px-3 py-2 text-xs text-gray-900/30 dark:text-white/30">로딩 중…</li>
+        )}
+        {!loading && dirs.length === 0 && (
+          <li className="px-3 py-2 text-xs text-gray-900/30 dark:text-white/30">하위 폴더 없음</li>
+        )}
+        {!loading &&
+          dirs.map((dir) => (
+            <li key={dir}>
+              <button
+                type="button"
+                onClick={() => onNavigate(`${currentPath}${sep}${dir}`)}
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-gray-900/75 transition-colors hover:bg-gray-900/[0.04] dark:text-white/75 dark:hover:bg-white/[0.05]"
+              >
+                <FolderIcon className="h-3.5 w-3.5 shrink-0 text-gray-900/30 dark:text-white/30" />
+                <span className="truncate">{dir}</span>
+              </button>
+            </li>
+          ))}
+      </ul>
+
+      {/* 선택 확정 */}
+      <div className="border-t border-gray-900/[0.07] px-3 py-2 dark:border-white/[0.07]">
+        <button
+          type="button"
+          onClick={onSelect}
+          disabled={!currentPath}
+          className="w-full rounded-lg bg-orange-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-orange-600 disabled:opacity-40"
+        >
+          여기 선택
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function WorkingDirPicker({ value, onChange, variant = "field" }: WorkingDirPickerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { open, currentPath, dirs, loading, navigate, openBrowser, closeBrowser, navigateUp } =
+    useDirBrowser();
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        closeBrowser();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, closeBrowser]);
+
+  const handleOpenBrowser = () => openBrowser(value || undefined);
+
+  const handleSelect = () => {
+    onChange(currentPath);
+    closeBrowser();
+  };
+
+  const dropdown = open ? (
+    <DirDropdown
+      currentPath={currentPath}
+      dirs={dirs}
+      loading={loading}
+      direction={variant === "inline" ? "up" : "down"}
+      onNavigate={navigate}
+      onNavigateUp={navigateUp}
+      onSelect={handleSelect}
+    />
+  ) : null;
+
+  if (variant === "inline") {
+    return (
+      <div ref={containerRef} className="relative flex items-center gap-1.5">
+        <button
+          type="button"
+          onClick={handleOpenBrowser}
+          title="워크 디렉토리 선택"
+          className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-gray-900/30 transition-colors hover:bg-gray-900/[0.05] hover:text-gray-900/60 dark:text-white/30 dark:hover:bg-white/[0.06] dark:hover:text-white/60"
+        >
+          <FolderIcon className="h-3.5 w-3.5" />
+        </button>
+
+        {value ? (
+          <div className="flex min-w-0 flex-1 items-center gap-1">
+            <span className="min-w-0 truncate font-mono text-[11px] text-orange-600 dark:text-orange-400">
+              {value}
+            </span>
+            <button
+              type="button"
+              onClick={() => onChange("")}
+              title="지우기"
+              className="shrink-0 text-gray-900/20 transition-colors hover:text-gray-900/50 dark:text-white/20 dark:hover:text-white/50"
+            >
+              <svg viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3">
+                <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z" />
+              </svg>
+            </button>
+          </div>
+        ) : (
+          <span className="text-[11px] text-gray-900/25 dark:text-white/25">워크 디렉토리 없음</span>
+        )}
+
+        {dropdown}
+      </div>
+    );
+  }
+
+  // variant === "field"
+  return (
+    <div ref={containerRef} className="relative flex gap-2">
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="~/IdeaProjects/project 또는 IdeaProjects/project"
+        className="flex-1 rounded-xl border border-gray-900/[0.08] bg-gray-900/[0.03] px-3 py-2 font-mono text-sm text-gray-900/65 placeholder-gray-900/20 outline-none transition-colors focus:border-orange-500/50 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white/65 dark:placeholder-white/20"
+      />
+      <button
+        type="button"
+        onClick={handleOpenBrowser}
+        title="디렉토리 선택"
+        className="flex items-center justify-center rounded-xl border border-gray-900/[0.08] bg-gray-900/[0.03] px-3 text-gray-900/40 transition-colors hover:border-gray-900/[0.14] hover:bg-gray-900/[0.05] hover:text-gray-900/70 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white/40 dark:hover:border-white/[0.14] dark:hover:bg-white/[0.05] dark:hover:text-white/70"
+      >
+        <FolderIcon className="h-4 w-4" />
+      </button>
+
+      {dropdown}
+    </div>
+  );
+}

package/apps/web/src/components/ui/__tests__/Modal.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Modal } from "../Modal";
+
+function setup(open = true, onClose = vi.fn()) {
+  render(
+    <Modal open={open} onClose={onClose} title="Test Modal">
+      <p>Modal content</p>
+    </Modal>,
+  );
+  return { onClose };
+}
+
+describe("Modal", () => {
+  it("renders title and children when open", () => {
+    setup();
+    expect(screen.getByText("Test Modal")).toBeInTheDocument();
+    expect(screen.getByText("Modal content")).toBeInTheDocument();
+  });
+
+  it("renders nothing when closed", () => {
+    setup(false);
+    expect(screen.queryByText("Test Modal")).not.toBeInTheDocument();
+  });
+
+  it("calls onClose when close button is clicked", async () => {
+    const user = userEvent.setup();
+    const { onClose } = setup();
+    await user.click(screen.getByRole("button", { name: "닫기" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClose when ESC key is pressed", async () => {
+    const user = userEvent.setup();
+    const { onClose } = setup();
+    await user.keyboard("{Escape}");
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("hides close button when hideClose=true", () => {
+    const onClose = vi.fn();
+    render(
+      <Modal open={true} onClose={onClose} title="No Close" hideClose>
+        content
+      </Modal>,
+    );
+    expect(screen.queryByRole("button", { name: "닫기" })).not.toBeInTheDocument();
+  });
+
+  it("applies custom maxWidth class", () => {
+    render(
+      <Modal open={true} onClose={vi.fn()} title="Wide" maxWidth="max-w-3xl">
+        content
+      </Modal>,
+    );
+    const dialog = screen.getByText("Wide").closest(".max-w-3xl");
+    expect(dialog).toBeInTheDocument();
+  });
+
+  it("does not call onClose when clicking inside the modal content", async () => {
+    const user = userEvent.setup();
+    const { onClose } = setup();
+    await user.click(screen.getByText("Modal content"));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+});