{"id":25122855,"url":"https://github.com/f-lab-edu/design-hub","last_synced_at":"2025-04-02T16:29:57.572Z","repository":{"id":218991508,"uuid":"747650031","full_name":"f-lab-edu/design-hub","owner":"f-lab-edu","description":"hj-design-system","archived":false,"fork":false,"pushed_at":"2024-04-24T14:05:56.000Z","size":1980,"stargazers_count":2,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-08T07:15:27.511Z","etag":null,"topics":["component-ui","design-system","hj-design-system"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/f-lab-edu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-01-24T11:15:25.000Z","updated_at":"2024-06-28T02:43:15.000Z","dependencies_parsed_at":"2024-02-28T13:29:29.033Z","dependency_job_id":"d6e82ed1-ce1b-4ad4-9a29-9141dd611729","html_url":"https://github.com/f-lab-edu/design-hub","commit_stats":null,"previous_names":["f-lab-edu/design-hub"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f-lab-edu%2Fdesign-hub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f-lab-edu%2Fdesign-hub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f-lab-edu%2Fdesign-hub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f-lab-edu%2Fdesign-hub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/f-lab-edu","download_url":"https://codeload.github.com/f-lab-edu/design-hub/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246850603,"owners_count":20844106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-ui","design-system","hj-design-system"],"created_at":"2025-02-08T07:15:29.901Z","updated_at":"2025-04-02T16:29:57.555Z","avatar_url":"https://github.com/f-lab-edu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# design-hub\n\n\u003cimg src=\"https://img.shields.io/badge/Pnpm-%23F69220?style=flat-square\u0026logo=Pnpm\u0026logoColor=white\"/\u003e\n\npnpm 을 사용하여 hj-design-system과 playground 두 개의 주요 디렉토리로 가진 모노레포로 구성하였습니다.   \n\u003cimg width=\"200\" alt=\"architecture\" src=\"https://github.com/f-lab-edu/design-hub/assets/84058944/a5b0ea9c-34ca-4c24-8802-c101e0af27ef\"\u003e\n\n\u003cbr/\u003e\n\n## 🎨 hj-design-system (hds)\n\u003cdiv\u003e\n\u003cimg src=\"https://img.shields.io/badge/Typescript-3178C6?style=flat-square\u0026logo=Typescript\u0026logoColor=white\"/\u003e\n\u003cimg src=\"https://img.shields.io/badge/Vitest-%236E9F18?style=flat-square\u0026logo=Vitest\u0026logoColor=white\"/\u003e\n\u003cimg src=\"https://img.shields.io/badge/testing_library_react-%23E33332?style=flat-square\u0026logo=testinglibrary\u0026logoColor=white\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/Storybook-%23FF4785?style=flat-square\u0026logo=Storybook\u0026logoColor=white\"/\u003e\n\u003c/div\u003e\n\n\nUI 컴포넌트 라이브러리 개발에 중점을 두고 있으며, 여기에는 컴포넌트, 훅, 테마 등의 UI 구성 요소가 포함되어 있습니다. 각 컴포넌트는 재사용 가능하고 일관된 디자인을 목표로 하며, 스토리북을 통해 독립적으로 문서화 및 시각화됩니다.  \n\n\n[Chakra UI](https://chakra-ui.com/)의 Foundations를 기반으로 하여 개발했습니다.  \n강력한 다형성을 지원하는 `as` prop을 통해 유연하고 확장 가능한 컴포넌트 설계를 가능하게 합니다.\n\n\n### 특징\n\n- **pnpm**: 효율적이고 빠른 의존성 관리를 위해 pnpm을 사용합니다.\n- **@emotion/react**: 컴포넌트 스타일링을 위해 @emotion/react를 사용합니다. 이를 통해 강력한 CSS-in-JS 기능을 제공합니다.\n- **Storybook**: 컴포넌트를 독립적으로 개발하고 문서화하기 위해 Storybook을 사용합니다.\n- **Vitest**: 단위 테스트를 위해 Vitest를 사용합니다. 이를 통해 안정성 있는 코드 베이스를 유지합니다.\n- **다형성 지원**: `as` prop을 통해 다형성을 지원합니다. 이를 통해 하나의 컴포넌트로 다양한 HTML 요소를 표현할 수 있습니다.\n\n\u003cbr/\u003e\n\n\n## 🤹🏻‍♀️ playground\n\u003cimg src=\"https://img.shields.io/badge/next.js-%23000000?style=flat-square\u0026logo=Next.js\u0026logoColor=white\" /\u003e\nNext.js 프레임워크를 기반으로 하고 있으며, 실제 애플리케이션 환경에서 hj-design-system에 정의된 컴포넌트들의 통합과 상호 작용을 테스트하는 역할을 합니다.   \nhj-design-system에서 개발된 컴포넌트들을 실시간으로 임포트하여 애플리케이션 환경에서 어떻게 상호 작용하고 표현되는지를 확인하고, 사용자 경험을 검증하는 데 중점을 둡니다.  \n\n하지만, playground는 프로젝트의 핵심적인 부분은 아니므로, 버전 관리 시스템에서는 추적되지 않습니다. 이는 로컬 개발 환경에서만 유용하며, 실제 제품 배포에는 포함되지 않습니다. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff-lab-edu%2Fdesign-hub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ff-lab-edu%2Fdesign-hub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff-lab-edu%2Fdesign-hub/lists"}