feat: Sheet 드래그 리사이즈 + 단축URL 말줄임표 + 컬럼 너비 조정

- SheetContent에 resizable prop 추가 — 좌측 드래그 핸들로 너비 조절
- LinkSheet, MemberSheet에 resizable 적용
- 단축 URL을 break-all 대신 truncate(말줄임표)로 변경
- 제목 컬럼 12%, 단축 URL 컬럼 30%로 너비 재배분

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: ImTotem

src/components/common/MemberSheet.tsx

@@ -23,7 +23,7 @@ export function MemberSheet({ memberId, open, onOpenChange }: MemberSheetProps)
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="right" className="overflow-y-auto">
+      <SheetContent side="right" resizable className="overflow-y-auto">
         {isLoading && (
           <>
             <SheetHeader>

src/components/ui/sheet.tsx

@@ -36,28 +36,80 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
   )
 }
 
+function ResizeHandle({
+  side,
+  onResize,
+}: {
+  side: "left" | "right"
+  onResize: (delta: number) => void
+}) {
+  const handlePointerDown = (e: React.PointerEvent) => {
+    e.preventDefault()
+    const startX = e.clientX
+    const onMove = (ev: PointerEvent) => {
+      const delta = side === "right" ? startX - ev.clientX : ev.clientX - startX
+      onResize(delta)
+    }
+    const onUp = () => {
+      document.removeEventListener("pointermove", onMove)
+      document.removeEventListener("pointerup", onUp)
+    }
+    document.addEventListener("pointermove", onMove)
+    document.addEventListener("pointerup", onUp)
+  }
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-y-0 z-50 w-1 cursor-col-resize hover:bg-primary/20 active:bg-primary/30",
+        side === "right" ? "left-0" : "right-0"
+      )}
+      onPointerDown={handlePointerDown}
+    />
+  )
+}
+
 function SheetContent({
   className,
   children,
   side = "right",
   showCloseButton = true,
+  resizable = false,
+  defaultWidth = 384,
+  minWidth = 280,
+  maxWidth = 800,
   ...props
 }: SheetPrimitive.Popup.Props & {
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
+  resizable?: boolean
+  defaultWidth?: number
+  minWidth?: number
+  maxWidth?: number
 }) {
+  const [width, setWidth] = React.useState(defaultWidth)
+  const canResize = resizable && (side === "left" || side === "right")
+
   return (
     <SheetPortal>
       <SheetOverlay />
       <SheetPrimitive.Popup
         data-slot="sheet-content"
         data-side={side}
+        style={canResize ? { width: `${width}px`, maxWidth: "none" } : undefined}
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem]",
+          !canResize && "data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
           className
         )}
         {...props}
       >
+        {canResize && (
+          <ResizeHandle
+            side={side}
+            onResize={(delta) => setWidth((w) => Math.min(maxWidth, Math.max(minWidth, w + delta)))}
+          />
+        )}
         {children}
         {showCloseButton && (
           <SheetPrimitive.Close

src/pages/links/LinkSheet.tsx

@@ -78,7 +78,7 @@ export function LinkSheet({ linkId, open, onOpenChange, onEdit }: LinkSheetProps
   return (
     <>
       <Sheet open={open} onOpenChange={onOpenChange}>
-        <SheetContent side="right" className="overflow-y-auto">
+        <SheetContent side="right" resizable className="overflow-y-auto">
           {isLoading && (
             <>
               <SheetHeader>

src/pages/links/LinksPage.tsx

@@ -66,14 +66,15 @@ export function LinksPage() {
       sortable: true,
       filterType: "text",
       filterParamKey: "title",
+      className: "w-[12%]",
     },
     {
       id: "code",
       header: "단축 URL",
       cell: (l) => (
         <Button
           variant="link"
-          className="h-auto whitespace-normal break-all p-0 text-left text-blue-600"
+          className="h-auto max-w-full truncate p-0 text-blue-600"
           onClick={(e) => {
             e.stopPropagation();
             navigator.clipboard.writeText(shortUrl(l.code));
@@ -86,6 +87,7 @@ export function LinksPage() {
       sortable: true,
       filterType: "text",
       filterParamKey: "code",
+      className: "w-[30%]",
     },
     {
       id: "creatorId",