Merge branch 'main' into chore/update-contributing

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@sipe-team/component"]
+  "ignore": ["@sipe-team/package-name"]
 }

.github/CODEOWNERS

@@ -1 +1 @@
-*   @kimdaeyeobbb @hy57in @developerjhp @bae-sh @noahluftyang @froggy1014 @heeji289 @synuns
+*   @kimdaeyeobbb @hy57in @developerjhp @bae-sh @noahluftyang @froggy1014 @heeji289 @synuns @yeojini @SEMIN-97

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,49 @@
+---
+name: "Bug Report"
+about: "Report a bug"
+title: "[BUG] "
+labels: "bug"
+---
+
+## Bug Description
+<!--
+Provide a brief and clear description of the issue that occurred.
+-->
+
+## Steps to Reproduce
+<!--
+Explain step-by-step how the bug occurred. Be as detailed as possible.
+1. Context: Specify the screen or state where the bug occurred.
+2. Action: Describe the actions that triggered the bug.
+-->
+
+## Actual Result
+<!--
+Describe what actually happened as a result of the bug.
+-->
+
+## Expected Result
+<!--
+Describe what you expected to happen if the bug did not occur.
+-->
+
+## Screenshots and Logs
+<!--
+If possible, attach screenshots or logs to help understand the issue.
+-->
+
+## Environment Information
+<!--
+Provide information about the environment where the issue occurred.
+Fill in the following details:
+-->
+
+- **Browser:**
+- **Operating System:**
+- **Package Versions:**
+- **Others:**
+
+## Additional Notes
+<!--
+Add any other information or context about the issue that might help resolve it.
+-->

.github/ISSUE_TEMPLATE/component_design.md

@@ -0,0 +1,23 @@
+---
+name: "Component Design"
+about: "Define and design a new component"
+labels: "enhancement"
+---
+
+## Component Function Definition
+<!-- Please describe the main functions and use cases of this component. -->
+
+## Design Requirements
+<!-- If there are any design requirements specific to the component, please specify them. -->
+
+## Component Specifications
+<!-- Freely write the interface provided by the component and example usage code. -->
+
+## Technical Considerations
+<!-- If there are any technical considerations or topics that need to be discussed for the implementation of the component, please specify them. -->
+
+## Reference Materials
+<!-- If there are any reference materials that can help with the implementation of the component, please attach them. -->
+
+## Additional Discussion Points
+<!-- If there are any additional points to be aware of, please specify them. -->

.github/ISSUE_TEMPLATE/document_request.md

@@ -0,0 +1,22 @@
+---
+name: Documentation Request
+about: Request new documentation or improvements to existing docs
+title: "[DOCS] "
+labels: documentation
+---
+
+## Documentation Need
+
+<!-- Describe what feature, component, or process needs documentation -->
+
+## Proposed Changes
+
+<!-- List the key points that should be covered -->
+
+## Target Audience
+
+<!-- e.g., End users, developers, new contributors -->
+
+## Additional Context
+
+<!-- Add screenshots, links, or references that help explain the documentation need -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,22 @@
+---
+name: Feature Request
+about: Suggest an idea or enhancement for our package
+title: "[FEATURE] "
+labels: enhancement
+---
+
+## Feature Description
+
+<!-- Describe the feature you'd like. -->
+
+## Proposed Implementation
+
+<!-- Share your thoughts on how this feature could be built (if you have any technical suggestions). -->
+
+## Describe Alternatives
+
+<!-- A clear and concise description of any alternative solutions or features you have considered. -->
+
+## Additional Context
+
+<!-- Add any other context or links about the request here. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,12 +1,12 @@
-## 변경사항
-<!-- 변경사항에 대해 간단히 설명해주세요. -->
+## Changes
+<!-- Please briefly describe the changes. -->
 
-## 시각자료
-<!-- 참고할 수 있는 스크린샷이나 시각자료가 있으면 첨부해주세요. -->
+## Visuals
+<!-- If there are any screenshots or visual materials, please attach them. -->
 
-## 체크리스트
-- [ ] 기능 명세를 작성하였나요?
-- [ ] 테스트 코드를 작성하였나요?
+## Checklist
+- [ ] Have you written the functional specifications?
+- [ ] Have you written the test code?
 
-## 추가 논의사항
-<!-- 추가로 알아야 할 참고사항이 있으면 적어주세요. -->
+## Additional Discussion Points
+<!-- If there are any additional points to be aware of, please specify them. -->

.github/workflows/chromatic.yaml

@@ -11,16 +11,16 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - name: pnpm 설치
+      - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
           run_install: false
-      - name: Node.js 환경 설정
+      - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: .nvmrc
-      - name: 의존성 설치
+      - name: Install dependencies
         run: pnpm install
       - name: Run Chromatic
         uses: chromaui/action@latest

.github/workflows/ci.yaml

@@ -12,22 +12,22 @@ jobs:
       with:
         fetch-depth: 0
         ref: ${{ github.event.pull_request.head.sha }}
-    - name: pnpm 설치
+    - name: Install pnpm
       uses: pnpm/action-setup@v4
       with:
         run_install: false
-    - name: Node.js 환경 설정
+    - name: Setup Node.js environment
       uses: actions/setup-node@v4
       with:
         cache: pnpm
         node-version-file: .nvmrc
-    - name: 의존성 설치
+    - name: Install dependencies
       run: pnpm install
-    - name: 린트
+    - name: Lint
       run: pnpm --filter="...[origin/${{ github.base_ref }}]" "/lint:*/"
-    - name: 테스트
+    - name: Test
       run: pnpm --filter="...[origin/${{ github.base_ref }}]" test
-    - name: 타입 체크
+    - name: Type check
       run: pnpm --filter="...[origin/${{ github.base_ref }}]" typecheck
-    - name: 빌드
+    - name: Build
       run: pnpm --filter="...[origin/${{ github.base_ref }}]" build

.github/workflows/coverage.yaml

@@ -11,20 +11,20 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - name: pnpm 설치
+      - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
           run_install: false
-      - name: Node.js 환경 설정
+      - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: .nvmrc
-      - name: 의존성 설치
+      - name: Install dependencies
         run: pnpm install
-      - name: 테스트
+      - name: Run tests
         run: pnpm run test --coverage
-      - name: 코드커버리지 업로드
+      - name: Upload code coverage
         uses: codecov/codecov-action@v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/release.yaml

@@ -11,25 +11,27 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: pnpm 설치
+      - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
           run_install: false
-      - name: Node.js 환경 설정
+      - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: .nvmrc
           registry-url: https://npm.pkg.github.com
           scope: "@sipe-team"
-      - name: 의존성 설치
+      - name: Install dependencies
         run: pnpm install
       - name: Create Release Pull Request or Publish to Github Package Registry
         id: changesets
         uses: changesets/action@v1
         with:
           version: pnpm changeset version
           publish: pnpm changeset publish
+          commit: "chore(release): version packages"
         env:
+          HUSKY: 0
           GITHUB_TOKEN: ${{ secrets.RELEASE_BOT_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.RELEASE_BOT_TOKEN }}

.husky/commit-msg

@@ -0,0 +1 @@
+pnpm commitlint --edit ${1}

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

.husky/pre-push

@@ -0,0 +1,17 @@
+# Get the current branch name
+BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
+BRANCH_REGEX='^(feat|fix|hotfix|chore|refactor|release|test|docs|ci|build)\/[a-z0-9-]+$'
+
+# Check if the branch name matches the defined regex
+if ! [[ $BRANCH_NAME =~ $BRANCH_REGEX ]]; then
+   echo "Error: Invalid branch name format."
+   echo 
+   echo "Please rename your branch using:"
+   echo "git branch -m <CATEGORY>/<SUBJECT> or git branch -m <CATEGORY>/<ISSUENUMBER>-<SUBJECT>"
+   echo 
+   echo "CATEGORY: feat, fix, hotfix, chore, refactor, release, test, docs, ci, build"
+   echo
+   exit 1
+fi
+
+exit 0

.husky/prepare-commit-msg

@@ -0,0 +1,7 @@
+# git commit -m 명령어를 사용할 때는 스킵
+if [ -z "${2}" ]; then
+  exec < /dev/tty && pnpm cz --hook || {
+    echo "\nCommit has been cancelled."
+    exit 1
+  }
+fi 

.storybook/main.ts

@@ -2,6 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 export default {
   stories: [
+    '../docs/*.mdx',
     '../packages/**/*.mdx',
     '../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
@@ -14,4 +15,7 @@ export default {
     name: '@storybook/react-vite',
     options: {},
   },
+  managerHead: (head) =>
+    `${head}
+<link rel="shortcut icon" href="https://github.com/sipe-team/3-2_side/raw/main/public/assets/favicon.ico" type="image/ico">`,
 } satisfies StorybookConfig;

.storybook/manager.ts

@@ -0,0 +1,16 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming';
+
+addons.setConfig({
+  theme: create({
+    base: 'dark',
+    brandTitle: 'Sipe Design System',
+    brandImage: 'https://github.com/sipe-team/3-2_side/raw/main/public/assets/sipe_brand_logo.png',
+    brandUrl: 'https://sipe.team/',
+    brandTarget: '_self',
+    textColor: '#999999',
+    colorSecondary: '#007043',
+    barSelectedColor: '#007043',
+    barHoverColor: '#00CC7A',
+  }),
+});

.templates/component/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/sipe-team/3-1_sds"
+    "url": "https://github.com/sipe-team/3-2_side"
   },
   "type": "module",
   "exports": "./src/index.ts",
@@ -54,7 +54,8 @@
           "types": "./dist/index.d.cts",
           "default": "./dist/index.cjs"
         }
-      }
+      },
+      "./styles.css": "./dist/index.css"
     }
   },
   "sideEffects": false

.templates/component/src/Component.stories.tsx

@@ -3,7 +3,7 @@ import { Component } from './Component';
 
 const meta = {
   component: Component,
-  title: 'Component',
+  title: 'Components/Component',
   parameters: {
     layout: 'centered',
   },

README.md

@@ -1,7 +1,7 @@
 ![](./public/assets/og-image.png)
 
 # Sipe Design System 
-[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/slash/blob/main/LICENSE) ![Package Manager](https://img.shields.io/badge/pnpm-9.7.1-orange?logo=pnpm) [![Storybook](https://img.shields.io/badge/Storybook-8.4.5-ff4785?logo=storybook)](https://67417e47644abe8d4e63f82f-xvhdismwhu.chromatic.com/?path=/story/input--default) ![Tests](https://img.shields.io/badge/Vitest-2.1.4-green?logo=vitest) [![codecov](https://codecov.io/github/sipe-team/3-1_sds/graph/badge.svg?token=1TNLVUFPXC)](https://codecov.io/github/sipe-team/3-1_sds) <img alt="Github Stars" src="https://badgen.net/github/stars/sipe-team/3-1_sds" /> 
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/sipe-team/3-2_side/blob/main/LICENSE) ![Package Manager](https://img.shields.io/badge/pnpm-9.7.1-orange?logo=pnpm) [![Storybook](https://img.shields.io/badge/Storybook-8.4.7-ff4785?logo=storybook)](https://67417e47644abe8d4e63f82f-lynsfaiqst.chromatic.com) ![Tests](https://img.shields.io/badge/Vitest-2.1.4-green?logo=vitest) [![codecov](https://codecov.io/gh/sipe-team/3-2_side/branch/changeset-release%2Fmain/graph/badge.svg?token=1TNLVUFPXC)](https://codecov.io/gh/sipe-team/3-2_side) <img alt="Github Stars" src="https://badgen.net/github/stars/sipe-team/3-2_side" /> 
 
 Sipe Design System is a monorepo-based component library built to modernize and standardize the official Sipe website. Drawing inspiration from our existing design patterns, we're creating a robust, type-safe, and accessible component system that can be used across all Sipe projects.
 
@@ -17,12 +17,12 @@ This design system is built with:
 
 We maintain our component development roadmap in our [GitHub Project Board](https://github.com/orgs/sipe-team/projects/4). Before contributing, please check:
 
-We warmly welcome contributions from the community, whether you're a Sipe team member or not! Your input helps make this design system better for everyone please read [contributing guidelines](https://github.com/sipe-team/3-1_sds/tree/main/.github/CONTRIBUTING.md) for more details.
+We warmly welcome contributions from the community, whether you're a Sipe team member or not! Your input helps make this design system better for everyone please read [contributing guidelines](https://github.com/sipe-team/3-2_side/tree/main/.github/CONTRIBUTING.md) for more details.
 
 ## Contributors
 
-<a href="https://github.com/sipe-team/3-1_sds/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=sipe-team/3-1_sds" />
+<a href="https://github.com/sipe-team/3-2_side/graphs/contributors">
+  <img alt="Sipe Design System 기여자 목록" src="https://contrib.rocks/image?repo=sipe-team/3-2_side" />
 </a>
 
 ## License