Convention
스타일링 컨벤션
올라핀테크 프론트엔드 프로젝트 내에서 지켜야하는 스타일링 컨벤션을 서술합니다.
스타일링 컨벤션
Tailwind CSS
기본 원칙
- Tailwind CSS 기반 Utility-first 접근 방식 권장
cn()헬퍼 함수 사용 권장 (조건부 클래스)- Prettier 또는 Biome 및 Tailwind 플러그인을 통해 CSS 클래스 자동 정렬 필수
import { cn } from '@/shared/utils/cn'
// ✅ cn() 사용
<motion.div
className={cn(
'fixed inset-x-0 bottom-0 z-50 h-fit overscroll-contain rounded-t-2xl bg-background-default py-4',
{
'overflow-hidden shadow-heavy': !isDrawerOpen,
}
)}
/>반응형 디자인
- Mobile-first 접근
- Breakpoint:
md,lg,xl등 프로젝트별 디자인 시스템에 정의된 Breakpoint 사용
// ✅ Mobile-first
<h2 className="text-title-4 font-semibold max-md:px-7 md:text-title-2 md:font-medium">
첨부한 계좌 사본이 맞는지 확인해주세요
</h2>
<div className="w-full p-0 md:w-[480px] md:p-10">
{/* content */}
</div>Class Variance Authority (CVA)
- 프로젝트 별 variant을 생성하여 cva를 관리함.
import { cva, type VariantProps } from 'class-variance-authority'
const buttonVariants = cva(
'inline-flex items-center justify-center whitespace-nowrap font-medium leading-normal cursor-pointer disabled:cursor-not-allowed',
{
variants: {
variant: {
'primary-solid': 'bg-primary text-label-100 hover:bg-secondary-400',
'secondary-outlined': 'border bg-background-default text-label-800',
},
size: {
lg: 'h-[48px] gap-4 rounded-lg px-6 text-body-2',
md: 'h-[40px] gap-3 rounded-md px-6 text-body-2',
},
},
defaultVariants: {
variant: 'primary-solid',
size: 'md',
},
}
)