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

src/features/inbox/ui/InboxList.tsx

@@ -3,10 +3,12 @@ import { cn } from '@/shared/lib/cn';
 
 interface InboxListProps {
   thoughts: RecentThought[];
+  onCompleteThought: (thought: RecentThought) => void;
+  onDeleteThought: (thought: RecentThought) => void;
   className?: string;
 }
 
-export const InboxList = ({ thoughts, className }: InboxListProps) => {
+export const InboxList = ({ thoughts, onCompleteThought, onDeleteThought, className }: InboxListProps) => {
   if (thoughts.length === 0) {
     return (
       <p
@@ -25,12 +27,40 @@ export const InboxList = ({ thoughts, className }: InboxListProps) => {
       {thoughts.slice(0, 10).map((thought) => (
         <li
           key={thought.id}
-          className="rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3"
+          className="group relative rounded-2xl border border-white/14 bg-white/7 px-3.5 py-3 pr-24"
         >
-          <p className="text-sm leading-relaxed text-white/88">{thought.text}</p>
+          <p
+            className={cn(
+              'text-sm leading-relaxed',
+              thought.isCompleted ? 'text-white/58 line-through' : 'text-white/88',
+            )}
+          >
+            {thought.text}
+          </p>
           <p className="mt-1.5 text-[11px] text-white/54">
             {thought.roomName} · {thought.capturedAt}
           </p>
+          <div className="absolute right-2 top-2 flex items-center gap-1 opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100">
+            <button
+              type="button"
+              onClick={() => onCompleteThought(thought)}
+              className={cn(
+                'inline-flex h-6 items-center rounded-full border px-2 text-[10px] transition-colors',
+                thought.isCompleted
+                  ? 'border-emerald-200/36 bg-emerald-200/18 text-emerald-100'
+                  : 'border-white/20 bg-white/8 text-white/76 hover:bg-white/14',
+              )}
+            >
+              {thought.isCompleted ? '완료됨' : '완료'}
+            </button>
+            <button
+              type="button"
+              onClick={() => onDeleteThought(thought)}
+              className="inline-flex h-6 items-center rounded-full border border-rose-200/30 bg-rose-200/10 px-2 text-[10px] text-rose-100/88 transition-colors hover:bg-rose-200/18"
+            >
+              삭제
+            </button>
+          </div>
         </li>
       ))}
     </ul>