refactor(control-center): Quick Controls 재디자인 및 플랜/잠금 결제 동선 정리

src/widgets/space-tools-dock/ui/panels/InboxToolPanel.tsx

@@ -1,25 +1,67 @@
+import { useState } from 'react';
 import type { RecentThought } from '@/entities/session';
 import { InboxList } from '@/features/inbox';
 
 interface InboxToolPanelProps {
   thoughts: RecentThought[];
+  onCompleteThought: (thought: RecentThought) => void;
+  onDeleteThought: (thought: RecentThought) => void;
   onClear: () => void;
 }
 
-export const InboxToolPanel = ({ thoughts, onClear }: InboxToolPanelProps) => {
+export const InboxToolPanel = ({
+  thoughts,
+  onCompleteThought,
+  onDeleteThought,
+  onClear,
+}: InboxToolPanelProps) => {
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
   return (
-    <div className="space-y-3.5">
+    <div className="relative space-y-3.5">
       <div className="flex items-center justify-between gap-2">
         <p className="text-xs text-white/58">나중에 모아보는 읽기 전용 인박스</p>
         <button
           type="button"
-          onClick={onClear}
+          onClick={() => setConfirmOpen(true)}
           className="rounded-full border border-white/20 bg-white/8 px-2.5 py-1 text-[11px] text-white/74 transition-colors hover:bg-white/14 hover:text-white"
         >
           모두 비우기
         </button>
       </div>
-      <InboxList thoughts={thoughts} />
+      <InboxList
+        thoughts={thoughts}
+        onCompleteThought={onCompleteThought}
+        onDeleteThought={onDeleteThought}
+      />
+
+      {confirmOpen ? (
+        <div className="absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-slate-950/70 px-3 backdrop-blur-sm">
+          <div className="w-full max-w-[272px] rounded-2xl border border-white/14 bg-slate-900/92 p-3.5 shadow-xl shadow-slate-950/45">
+            <p className="text-sm font-medium text-white/92">정말 인박스를 비울까요?</p>
+            <p className="mt-1 text-[11px] text-white/60">실수라면 토스트에서 실행취소할 수 있어요.</p>
+            <div className="mt-3 flex justify-end gap-1.5">
+              <button
+                type="button"
+                onClick={() => setConfirmOpen(false)}
+                className="rounded-full border border-white/20 bg-white/8 px-2.5 py-1 text-[11px] text-white/74 transition-colors hover:bg-white/14 hover:text-white"
+              >
+                취소
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  onClear();
+                  setConfirmOpen(false);
+                }}
+                className="rounded-full border border-rose-200/34 bg-rose-200/16 px-2.5 py-1 text-[11px] text-rose-100/92 transition-colors hover:bg-rose-200/24"
+              >
+                비우기
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 };