샘플

<div className="inline-flex flex-col items-start justify-start gap-4 p-6 bg-white rounded-xl"> <img className="w-12 h-12 rounded-full" src="..." /> <div className="flex flex-col gap-1"> <div className="text-base font-bold text-gray-900">User Name</div> <div className="text-sm text-gray-500">user@example.com</div> </div> </div>

Container( padding: const EdgeInsets.all(24), decoration: BoxDecoration( color: const Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(12), ), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( width: 48, height: 48, decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage(image: NetworkImage('...')), ), ), const SizedBox(height: 16), const Text('User Name', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700)), const SizedBox(height: 4), const Text('user@example.com', style: TextStyle(fontSize: 14, color: Color(0xFF6B7280))), ], ), )

VStack(alignment: .leading, spacing: 16) { Image("avatar") .resizable() .frame(width: 48, height: 48) .clipShape(Circle()) VStack(alignment: .leading, spacing: 4) { Text("User Name") .font(.system(size: 16, weight: .bold)) .foregroundColor(Color(red: 0.07, green: 0.09, blue: 0.16)) Text("user@example.com") .font(.system(size: 14)) .foregroundColor(Color(red: 0.42, green: 0.45, blue: 0.50)) } } .padding(24) .background(Color.white) .cornerRadius(12)

다음 Tailwind JSX를 props 받는 React 컴포넌트로 리팩토링해줘. - name, email, avatarUrl props - TypeScript 타입 정의 - 디자인 토큰(@/design-system/tokens)이 있다면 그것 사용 [Figma to Code 출력 코드 붙여넣기]

import type { FC } from 'react' type UserCardProps = { name: string email: string avatarUrl: string } export const UserCard: FC<UserCardProps> = ({ name, email, avatarUrl }) => ( <div className="inline-flex flex-col items-start gap-4 rounded-xl bg-white p-6"> <img src={avatarUrl} alt={name} className="h-12 w-12 rounded-full" /> <div className="flex flex-col gap-1"> <span className="text-base font-bold text-gray-900">{name}</span> <span className="text-sm text-gray-500">{email}</span> </div> </div> )

검색: bg-[#2563EB] → 치환: bg-brand-500 검색: text-[#111827] → 치환: text-text-primary 검색: text-[#6B7280] → 치환: text-text-secondary