doctork4 / nextra

Sniper Factory Designkit React

디자인 시스템은 디자인에서 개발(코드) 협업이 아우러지는 스타일 가이드(Style Guide)를 말합니다. 디자이너만 공유하는 스타일 가이드가 아닙니다. 기획자, 디자이너, 개발자, 관리자를 포함한 모든 팀원이 공유하는 가이드를 말합니다. 결과적으로 디자인 시스템은 디자인과 코드를 제공하는 문서로, 역동적이고 재사용 가능하며 실시간으로 유지보수 할 수 있어야 합니다.

스나이퍼팩토리 학습관리시스템 개발 시 필요한 컴포넌트들을 디자인시스템에 맞게 구현한 디자인킷입니다. 이제 더이상 CSS 작업에 시간 쏟지말고, 편리하게 구현되어있는 컴포넌트를 가져다쓰고, 필요한 로직 구현에만 집중하세요.

설치 방법

npm i sfac-designkit-react

실행 및 사용

import “sfac-designkit-react/style.css”

스타일 적용을 위해 사용하려는 컴포넌트 상단에 위 코드를 삽입하여 줍니다.

app/layout.tsx에 해당 코드를 넣어주면, 하위 페이지들은 자동으로 적용됩니다.

스택

컴포넌트별 상세 사용 방법

https://sfac-designkit.vercel.app/

디자인시스템 문서를 통해 컴포넌트별 상세 사용 방법을 작성해두었습니다.