code diff 예시

requirement

• emotion, twin macro 를 사용하는 코드 베이스를 tailwind className, cn(libs/design-system/bds-shared-utils/src/lib/cn.ts), twc 를 사용하는 예제로 마이그레이션 하기 위한 프롬프트 문서를 만든다.

Implementation Detail

• .cursor/rules/migrate-twc.md 파일에 문서 내용을 정리해
• 현재 "staged changes” 에 올라와 있는 파일 변경 사항들을 분석해서 motion, twin macro 를 tailwind className, cn(libs/design-system/bds-shared-utils/src/lib/cn.ts), twc 를 사용하는 코드로 변경하는 마이그레이션 패턴을 추상화 해줘
• twc는 twx(libs/design-system/bds-shared-utils/src/lib/twx.ts) 라는 형태로 custom 되어 사용하고 있으니 twc 를 사용해야 하는 맥락에서 import { twx } from '@design-system/bds-shared-utils'; 를 import 해서 사용해줘
• 뱅크샐러드에서 사용되는 디자인 토큰은 tailwind config 로 정의되어 libs/design-system/tailwind-preset/src/index.bds.js 에 정의되어 있어, tailwind class를 사용할 때 이 파일을 참고해서 classname을 처리해줘
• 이 문서는 아래 포맷으로 정리해줘
  • ground rule
    • e.g. px-[12px] 처럼 arbiratry value 를 사용해줘
    • migration 시 전체 케이스에 공통적으로 적용되야 하는 내용의 패턴을 추상화해서 뽑아서 여기에 기록해줘
  • case {name 0}
    • as-is 코드 예시
    • to-be 코드 예시
    • caveat(주의사항) optional
  • case {name 1}
    • as-is 코드 예시
    • to-be 코드 예시
    • caveat(주의사항) optional
• 위 문서 작성시 각 섹션별 리뷰를 거치고 그 다음 섹션을 작성하도록 해줘

Constraint

• 실제 code diff 내용과 무관한 내용이 작성되지 않아야 해, 일반적이고 보편적인 내용을 추론해서 내용을 작성하지 마
• tailwind 기본 classname 을 사용하지 않아야 해. 기 정의된 뱅크샐러드 전용의 design-token 을 써서 구현해줘
• px-[12px] 처럼 arbiratry value 를 사용해줘
• caveat(주의사항) 의 경우 임의로 작성하지 않고 해당 내용을 채워야 한다면 꼭 사용자의 리뷰와 검토를 통해 확인하고 채워

Acceptance Tests

• 수정 사항이 반영된 뒤에 typecheck 를 실행해서 오류가 없어야 해
• 사용자가 승인한 내용으로만 작성해야 해