feat(phase3b): 마이페이지 음악 영상화 신청·상태 + 모달 트랙 연결

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AAtcmKKtqDUe4NyVgy1aLQ

app/components/BankTransferModal.tsx

@@ -19,6 +19,7 @@ interface Props {
   product: { id: string; name: string; price: number };
   isOpen: boolean;
   onClose: () => void;
+  musicTrackId?: string;
 }
 
 type AuthState = 'checking' | 'guest' | 'user';
@@ -29,7 +30,7 @@ interface SuccessInfo {
   reused: boolean;
 }
 
-export default function BankTransferModal({ product, isOpen, onClose }: Props) {
+export default function BankTransferModal({ product, isOpen, onClose, musicTrackId }: Props) {
   const [authState, setAuthState] = useState<AuthState>('checking');
   const [depositorName, setDepositorName] = useState('');
   const [agreed, setAgreed] = useState(false);
@@ -98,7 +99,11 @@ export default function BankTransferModal({ product, isOpen, onClose }: Props) {
         const res = await fetch('/api/orders', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ productId: product.id, depositorName: name }),
+          body: JSON.stringify({
+            productId: product.id,
+            depositorName: name,
+            ...(musicTrackId ? { musicTrackId } : {}),
+          }),
         });
         const data = await res.json().catch(() => ({}));
         if (!res.ok) {
@@ -122,7 +127,7 @@ export default function BankTransferModal({ product, isOpen, onClose }: Props) {
         setSubmitting(false);
       }
     },
-    [depositorName, agreed, submitting, product.id],
+    [depositorName, agreed, submitting, product.id, musicTrackId],
   );
 
   if (!isOpen) return null;