Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yourssu/handy-react
내 주머니속에 쏙 들어오는 유어슈 디자인 시스템 for React
https://github.com/yourssu/handy-react
design-system react styled-components yourssu
Last synced: about 1 month ago
JSON representation
내 주머니속에 쏙 들어오는 유어슈 디자인 시스템 for React
- Host: GitHub
- URL: https://github.com/yourssu/handy-react
- Owner: yourssu
- License: mit
- Created: 2023-08-29T13:36:47.000Z (over 1 year ago)
- Default Branch: develop
- Last Pushed: 2024-07-24T17:40:36.000Z (5 months ago)
- Last Synced: 2024-07-24T20:26:21.179Z (5 months ago)
- Topics: design-system, react, styled-components, yourssu
- Language: TypeScript
- Homepage: https://yds-react-storybook.s3.ap-northeast-2.amazonaws.com/1.1.3/index.html
- Size: 2.64 MB
- Stars: 9
- Watchers: 4
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
## 🎨 YDS란
YDS는 숭실대학교 동아리 유어슈에서 사용하는 디자인 시스템입니다. 뷰 컴포넌트 재사용성을 높여 코드 작성에 걸리는 시간을 단축함과 동시에 일관된 디자인 퀄리티를 보장하기 위해 고안됐습니다.
## 📝 문서
[YDS Wiki](https://yourssu.notion.site/Yourssu-Design-System-00577fab034e46cb8aeb330247376a15)
YDS 문서는 노션 페이지에서 관리됩니다.
컴포넌트 정보와 사용 예시 등을 확인할 수 있습니다.
[YDS Storybook](http://yds-react-storybook.s3-website.ap-northeast-2.amazonaws.com/?path=/docs/foundation-iconcontext--docs)
## 🖌 피그마
[YDS Figma](https://www.figma.com/community/file/1146974544001355129)
## 🛠 사용 방법
1. YDS 패키지 및 styled-components를 설치합니다.
```
npm install @yourssu/design-system-react styled-components
yarn add @yourssu/design-system-react styled-components
pnpm install @yourssu/design-system-react styled-components
```
2. Root Component에 YDSWrapper를 감싸줍니다.
```jsx
ReactDOM.createRoot(document.getElementById("root")!).render(
);
```
## 📱 YDS를 사용해 개발한 프로덕트
[Soomsil-Web](https://github.com/yourssu/Soomsil-Web)
## 💻 타 버전 저장소
[YDS-Android](https://github.com/yourssu/YDS-Android)
[YDS-iOS](https://github.com/yourssu/YDS-iOS)