feat(flex): add flex component #82
Conversation
- Introduced a new Flex component for the Sipe Design System - Created accompanying Storybook stories for visual testing and documentation - Added unit tests using Vitest to ensure component functionality
- Exported Flex component in src/index.ts for accessibility within the side package
synuns
requested review from
kimdaeyeobbb,
hy57in,
developerjhp,
bae-sh,
noahluftyang,
froggy1014,
heeji289,
yeojini and
SEMIN-97
as code owners
🦋 Changeset detectedLatest commit: 032f84b The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the 개요Walkthrough이 풀 리퀘스트는 Changes
가능한 관련 PR
제안된 라벨
제안된 리뷰어
시퀀스 다이어그램sequenceDiagram
participant User
participant FlexComponent
participant StorybookUI
User->>StorybookUI: Flex 컴포넌트 탐색
StorybookUI->>FlexComponent: 다양한 props로 렌더링
FlexComponent-->>StorybookUI: 레이아웃 및 스타일 표시
User->>FlexComponent: 다양한 속성 상호작용
시 (토끼의 관점에서)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
packages/flex/src/Flex.tsx (2)
3-16: FlexProps 인터페이스가 명확하게 정의되었습니다.
각 속성이 CSS 표준 속성을 그대로 따라가도록 되어 있어 학습비용이 낮고 직관적입니다. 다만css속성 명이 혹시 혼동을 줄 수 있으니styleOverride등 다른 이름 고려도 가능합니다.
18-57: Flex 컴포넌트의 forwardRef 구현과 props 적용 방식이 적절합니다.
inline여부에 따라display를 동적으로 설정하는 로직이 깔끔합니다.- 각각의 Flex 관련 속성(
align,justify,wrap등)을 직관적으로 코드에 반영하고 있어 유지보수가 용이해 보입니다.
추가로, margin/padding 같은 레이아웃 속성이 props로 확장될 가능성이 있다면, 유사한 구조로 더 확장할 수 있도록 미리 구조를 대비해두어도 좋겠습니다.packages/flex/src/Flex.stories.tsx (2)
47-49: Meta 기본 내보내기 확인
export default meta;구문은 Storybook에서 컴포넌트를 인식하도록 하는 필수 코드입니다. 추가적인 설정이 필요한지 여부를 한번 더 검토해 주세요.
61-72: Direction 스토리
direction값을 어떻게 변경하면 레이아웃이 달라지는지 확인할 수 있으므로, 예시 수준이 적절합니다. 필요하다면row-reverse,column-reverse등 추가 예시도 고려해볼 수 있습니다.packages/flex/src/Flex.test.tsx (1)
162-179:shrinkprop 테스트
flexShrink에 대해서도 동일하게 0, 1, 2로 테스트하고 있습니다. grow와 마찬가지로 음수값 고려가 필요한지 확인 부탁드립니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (13)
packages/flex/.storybook/main.ts(1 hunks)packages/flex/.storybook/preview.ts(1 hunks)packages/flex/package.json(1 hunks)packages/flex/src/Flex.stories.tsx(1 hunks)packages/flex/src/Flex.test.tsx(1 hunks)packages/flex/src/Flex.tsx(1 hunks)packages/flex/src/index.ts(1 hunks)packages/flex/tsconfig.json(1 hunks)packages/flex/tsup.config.ts(1 hunks)packages/flex/vitest.config.ts(1 hunks)packages/flex/vitest.setup.ts(1 hunks)packages/side/package.json(2 hunks)packages/side/src/index.ts(1 hunks)
✅ Files skipped from review due to trivial changes (6)
- packages/flex/tsconfig.json
- packages/flex/vitest.setup.ts
- packages/flex/.storybook/preview.ts
- packages/flex/src/index.ts
- packages/flex/tsup.config.ts
- packages/flex/package.json
🔇 Additional comments (24)
packages/flex/vitest.config.ts (1)
1-11: 프로젝트별 Vitest 환경설정이 잘 합쳐졌습니다.
import { defineProject, mergeConfig }구문과defaultConfig를 병합하여 사용하는 방식이 합리적으로 보입니다.setupFiles옵션으로 테스트 초기화 로직을 구분하는 점도 구조적으로 좋습니다.packages/side/src/index.ts (1)
10-10: 새로운 플렉스 컴포넌트를 내보내는 추가 구문입니다.
@sipe-team/flex가 정상적으로 내보내지고 있으므로 문제 없으며, 프로젝트 구조와 일관성도 잘 유지되고 있습니다.packages/flex/.storybook/main.ts (1)
1-15: Storybook 설정이 명확하고 완전하게 구성되었습니다.
@storybook/react-vite프레임워크를 사용하며, 필요한 애드온들도 잘 나열되었습니다.stories패턴 지정도 적절합니다.packages/flex/src/Flex.stories.tsx (7)
1-4: 컴포넌트 및 타입 임포트 구조 확인 필요
해당 라인에서는Card컴포넌트와Flex컴포넌트를 가져오고 있습니다. 프로젝트 전반에서 이 컴포넌트들이 정상 동작하는지, 혹은 import 순서를 변경할 필요가 있는지 확인해 주세요.
5-44: Storybook Meta 설정이 적절하게 구성되었습니다
argTypes에 다양한 옵션이 있어 사용자가 Storybook에서 편리하게 UI를 조정할 수 있을 것으로 보입니다. Props 설명도 잘 기재되어 있습니다.
45-46: 타입 선언으로 Story 타입을 구체화
Meta<typeof Flex>와StoryObj<typeof meta>를 사용하는 패턴이 Storybook v6+ 형태에 맞게 잘 적용되어 있습니다.
50-59: Basic 스토리 구성
간단하게 gap만 설정하여 기본 배치를 확인할 수 있네요. 사용자 입장에서 동작 테스트 용도로 충분히 알맞습니다.
74-95: Align 스토리
서로 다른 높이의Card를 사용해 정렬 상태를 한눈에 확인할 수 있어 유용합니다. 이 스토리를 통해 다양한 alignment 사례를 명확히 확인할 수 있습니다.
96-121: Justify 스토리
여러Flex를 겹쳐서 justify 옵션들을 명확히 시각화한 점이 좋습니다. 컴포넌트 사용자가 각 모드를 쉽게 이해할 수 있을 것 같습니다.
123-134: Wrap 스토리
wrap옵션 시나리오를 간단한 카드들로 잘 보여주고 있습니다. 특히maxWidth를 좁게 설정해 wrap 동작을 직관적으로 확인할 수 있네요.packages/flex/src/Flex.test.tsx (12)
1-6: 테스트 라이브러리 및 도구 임포트
@faker-js/faker,@testing-library/react,vitest등을 구조적으로 잘 임포트하고 있습니다. Vitest 환경 구성이 제대로 되었는지 최종 확인만 부탁드립니다.
7-19: 기본 렌더링 및 display: flex 테스트
expect(flexContainer).toHaveStyle({ display: 'flex' })구문을 통해 기본 값 검증을 명확히 하고 있습니다. 아주 깔끔합니다.
21-25: className 주입 테스트
faker를 이용해 임의 클래스를 생성하고, 정상적으로 적용되는지도 확인하여 잘 작성되었습니다.
27-51:justifyprop 테스트
it.each구문으로 반복 테스트가 간결하게 작성되었습니다. 가능한 모든 옵션을 확인해 props 테스트 범위가 충분히 넓습니다.
52-72:alignprop 테스트
alignItems값을 반복적으로 확인하여 대응되는 CSS 속성을 정확히 검증하고 있습니다. 테스트 범위를 유지하며 코드 중복을 잘 줄였습니다.
75-94:wrapprop 테스트
wrap,nowrap,wrap-reverse에 대한 반복 테스트를 통해 놓칠 수 있는 시나리오까지 커버하고 있습니다.
96-117:directionprop 테스트
여러 방향(row, column 등)에 대한 테스트가 잘 구성되어 있고, 중복되는column-reverse항목이 두 번 명시되어 있는데, 이는 의도된 것인지 확인 부탁드립니다.
118-141:basisprop 테스트
다양한 단위(px, %, rem, content 등)로 테스트하는 부분이 유효성 검사에 큰 도움이 됩니다.
143-160:growprop 테스트
flexGrow값에 대한 테스트 범위가 0, 1, 2로 설정되어 있는데, 필요한 한계값(예: 음수)이 더 있는지 확인해볼 수 있습니다.
181-193:inlineprop 테스트
display: inline-flex로 변환되는지 체크하는 기능이 빠짐없이 잘 구현되었습니다.
195-211:gapprop 테스트
toHaveStyle사용 시에도 실제 값이 반영되는지 여부를 더 구체적으로 확인해볼 수 있으나, 이 정도 수준으로도 충분히 테스트 범위를 커버하는 것으로 보입니다.
213-236:cssprop 테스트
비교적 자유로운 CSS 속성(props)을 케이스별로 테스트하여 안정성을 높였습니다.packages/side/package.json (2)
12-12:files필드 축약
단일 라인 변경으로 보이므로, 빌드 산출물이 정상적으로 포함되는지 확인해 주세요.
27-28: 새로운 Flex 의존성 추가
"@sipe-team/flex": "workspace:*"가 성공적으로 추가되었습니다. 프로젝트 다른 패키지에서도 정상적으로 동작하는지, 호환성 테스트를 권장드립니다.
- Added '@radix-ui/react-slot' and 'clsx' as dependencies in package.json. - Updated Flex component to use 'style' prop instead of 'css' for styling. - Enhanced Flex component stories to include new 'space-evenly' justification option. - Improved unit tests to reflect changes in props and styling. - Refactored Flex component to support polymorphic rendering with 'asChild' prop.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
packages/flex/src/Flex.module.css (1)
1-11: CSS 커스텀 프로퍼티에 기본값 추가 필요일부 CSS 커스텀 프로퍼티에 기본값이 없어 예상치 못한 동작이 발생할 수 있습니다. 아래와 같이 기본값을 추가하는 것을 권장드립니다:
.flex { display: var(--flex-display, flex); - flex-direction: var(--flex-direction); - align-items: var(--flex-align); - justify-content: var(--flex-justify); - flex-wrap: var(--flex-wrap); - gap: var(--flex-gap); - flex-basis: var(--flex-basis); - flex-grow: var(--flex-grow); - flex-shrink: var(--flex-shrink); + flex-direction: var(--flex-direction, row); + align-items: var(--flex-align, stretch); + justify-content: var(--flex-justify, flex-start); + flex-wrap: var(--flex-wrap, nowrap); + gap: var(--flex-gap, 0); + flex-basis: var(--flex-basis, auto); + flex-grow: var(--flex-grow, 0); + flex-shrink: var(--flex-shrink, 1); }packages/flex/src/Flex.tsx (2)
39-40: ref 타입을 더 구체적으로 지정 필요
ForwardedRef<any>대신 더 구체적인 타입을 사용하면 타입 안전성을 높일 수 있습니다.- ref: ForwardedRef<any>, + ref: ForwardedRef<HTMLDivElement>,
22-66: 컴포넌트 JSDoc 문서화 추가 필요컴포넌트와 props에 대한 JSDoc 문서화를 추가하면 개발자들이 컴포넌트를 더 쉽게 이해하고 사용할 수 있습니다.
+/** + * Flex 컴포넌트는 flexbox 레이아웃을 쉽게 구현할 수 있게 해주는 컴포넌트입니다. + * @param props - Flex 컴포넌트 props + * @param props.align - align-items 속성 + * @param props.justify - justify-content 속성 + * @param props.wrap - flex-wrap 속성 + * @param props.direction - flex-direction 속성 + * @param props.basis - flex-basis 속성 + * @param props.grow - flex-grow 속성 + * @param props.shrink - flex-shrink 속성 + * @param props.inline - inline-flex 사용 여부 + * @param props.gap - gap 속성 + * @param props.className - 추가 클래스명 + * @param props.style - 추가 스타일 + * @param props.children - 자식 요소 + * @param props.asChild - Radix UI Slot 사용 여부 + */ export const Flex = forwardRef(function Flex(packages/flex/package.json (1)
32-47: 카탈로그 의존성 버전 명시 필요
catalog:대신 명시적인 버전을 사용하면 패키지 설치 시 예측 가능성이 높아집니다.- "@storybook/addon-essentials": "catalog:", - "@storybook/addon-interactions": "catalog:", - "@storybook/addon-links": "catalog:", - "@storybook/blocks": "catalog:", - "@storybook/react": "catalog:", - "@storybook/react-vite": "catalog:", - "@storybook/test": "catalog:", - "@testing-library/jest-dom": "catalog:", - "@testing-library/react": "catalog:", + "@storybook/addon-essentials": "^7.6.7", + "@storybook/addon-interactions": "^7.6.7", + "@storybook/addon-links": "^7.6.7", + "@storybook/blocks": "^7.6.7", + "@storybook/react": "^7.6.7", + "@storybook/react-vite": "^7.6.7", + "@storybook/test": "^7.6.7", + "@testing-library/jest-dom": "^6.1.6", + "@testing-library/react": "^14.1.2",packages/flex/src/Flex.stories.tsx (2)
54-58: Basic 스토리에 시각적 구분 추가 필요카드들의 시각적 구분을 위해 다른 색상이나 텍스트를 추가하면 좋을 것 같습니다.
children: [ - <Card key="1" style={{ height: '20px', width: '100%' }} />, - <Card key="2" style={{ height: '20px', width: '100%' }} />, - <Card key="3" style={{ height: '20px', width: '100%' }} />, + <Card key="1" style={{ height: '20px', width: '100%', backgroundColor: '#E5F6FD' }}>Item 1</Card>, + <Card key="2" style={{ height: '20px', width: '100%', backgroundColor: '#FFF3E0' }}>Item 2</Card>, + <Card key="3" style={{ height: '20px', width: '100%', backgroundColor: '#F3E5F5' }}>Item 3</Card>,
5-46: 메타데이터에 스토리 설명 추가 필요각 스토리의 용도와 사용 사례를 더 잘 이해할 수 있도록 parameters에 설명을 추가하면 좋을 것 같습니다.
const meta = { title: 'Flex', component: Flex, tags: ['autodocs'], + parameters: { + docs: { + description: { + component: 'Flex 컴포넌트는 flexbox 레이아웃을 쉽게 구현할 수 있게 해주는 컴포넌트입니다.', + }, + }, + }, argTypes: {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
packages/flex/package.json(1 hunks)packages/flex/src/Flex.module.css(1 hunks)packages/flex/src/Flex.stories.tsx(1 hunks)packages/flex/src/Flex.test.tsx(1 hunks)packages/flex/src/Flex.tsx(1 hunks)packages/flex/src/global.d.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/flex/src/global.d.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/flex/src/Flex.test.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: chromatic
|
논의 내용들 쭉 반영해서 업데이트 해두었습니다!
네분씩이나 리뷰를 받을 수 있어서 너무 행복합니다... |
Codecov ReportAll modified and coverable lines are covered by tests ✅
|
- Updated FlexProps to extend ComponentProps<'div'>, allowing for additional div attributes. - Refactored imports in Flex.tsx for improved readability.
- Changed repository URL in package.json to reflect new project structure. - Simplified tsup configuration by importing default settings. - Modified Flex.module.css to remove unnecessary variable for display property. - Cleaned up FlexProps interface in Flex.tsx by removing unused props. - Moved unused global.d.ts file to package root path
|
@noahluftyang 엄청 놓친게 많았구만... 패키지 수호자 의현이형에게 감사를 표합니다 |
|
구웃~ conflict난 것만 해결해주면 바로 approve할게! |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/flex/global.d.ts(1 hunks)packages/flex/package.json(1 hunks)packages/flex/src/Flex.module.css(1 hunks)packages/flex/src/Flex.tsx(1 hunks)packages/flex/tsup.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/flex/global.d.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/flex/tsup.config.ts
- packages/flex/src/Flex.module.css
🔇 Additional comments (6)
packages/flex/src/Flex.tsx (3)
11-22: 잘 정의된 타입 인터페이스입니다!Chakra UI의 Flex 컴포넌트 스펙을 잘 따르고 있으며, TypeScript 타입이 명확하게 정의되어 있습니다.
24-42: 컴포넌트 정의가 모범 사례를 잘 따르고 있습니다!forwardRef를 사용한 ref 전달과 props 분해가 깔끔하게 구현되어 있습니다.
58-68: 컴포넌트 렌더링 로직이 깔끔합니다!Radix UI의 Slot 패턴을 잘 활용하고 있으며, props 전달이 적절하게 구현되어 있습니다.
packages/flex/package.json (3)
1-12: 패키지 메타데이터가 잘 구성되어 있습니다!버전 관리는 changeset을 통해 자동으로 처리되므로 현재 설정이 적절합니다.
50-68: 배포 설정이 최신 패키지 배포 방식을 잘 따르고 있습니다!ESM과 CommonJS를 모두 지원하며, CSS 파일도 적절하게 export되어 있습니다.
23-49: 의존성 버전 확인이 필요합니다.
catalog:버전을 사용하는 패키지들의 실제 버전을 확인해주세요.다음 스크립트로 의존성 버전을 확인할 수 있습니다:
✅ Verification successful
catalog:버전 참조가 정상적으로 확인되었습니다.workspace 설정에서 다음과 같이 실제 버전이 정의되어 있습니다:
- Storybook 관련 패키지: ^8.4.5
- 테스트 라이브러리:
- @testing-library/jest-dom: ^6.6.3
- @testing-library/react: ^16.0.1
- 개발 도구:
- typescript: ^5.6.3
- vitest: ^2.1.8
- tsup: ^8.3.5
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: 프로젝트의 실제 의존성 버전 확인 # package.json에서 catalog: 버전을 사용하는 패키지 목록 추출 jq -r '.devDependencies | to_entries[] | select(.value == "catalog:") | .key' packages/flex/package.json | while read pkg; do # 각 패키지의 실제 버전 정보 조회 if [ -f "package.json" ]; then echo "Checking version for $pkg:" jq --arg pkg "$pkg" '.dependencies[$pkg] // .devDependencies[$pkg]' package.json fi doneLength of output: 3315
Script:
#!/bin/bash # Description: 워크스페이스 구성 및 락 파일 확인 echo "=== Checking for lock files ===" if [ -f "yarn.lock" ]; then echo "Found yarn.lock" # catalog: 버전을 사용하는 패키지들의 실제 버전 확인 for pkg in "@storybook/addon-essentials" "@storybook/react" "@testing-library/jest-dom" "typescript" "vitest"; do echo "=== Version for $pkg ===" grep -A 1 "^\"$pkg@" yarn.lock done elif [ -f "package-lock.json" ]; then echo "Found package-lock.json" for pkg in "@storybook/addon-essentials" "@storybook/react" "@testing-library/jest-dom" "typescript" "vitest"; do echo "=== Version for $pkg ===" jq --arg pkg "$pkg" '.packages[""].dependencies[$pkg] // .packages[""].devDependencies[$pkg]' package-lock.json done fi echo -e "\n=== Checking workspace configuration ===" for file in pnpm-workspace.yaml package.json; do if [ -f "$file" ]; then echo "Found $file:" cat "$file" fi doneLength of output: 2689
| const flexStyle = { | ||
| '--flex-display': inline ? 'inline-flex' : 'flex', | ||
| '--flex-direction': direction, | ||
| '--flex-align': align, | ||
| '--flex-justify': justify, | ||
| '--flex-wrap': wrap, | ||
| '--flex-gap': gap, | ||
| '--flex-basis': basis, | ||
| '--flex-grow': grow, | ||
| '--flex-shrink': shrink, | ||
| ...style, | ||
| } as React.CSSProperties; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
CSS 변수 사용 방식의 개선이 필요합니다.
현재 인라인 스타일로 CSS 변수를 적용하고 있는데, 이는 다음과 같은 문제가 있을 수 있습니다:
- 사용자 정의 스타일로 덮어쓰기가 어려움
- 반응형 스타일 적용이 제한적
- 스타일 우선순위 문제 발생 가능성
CSS 모듈에서 변수를 정의하고 클래스로 스타일을 적용하는 방식을 추천드립니다:
- const flexStyle = {
- '--flex-display': inline ? 'inline-flex' : 'flex',
- '--flex-direction': direction,
- '--flex-align': align,
- '--flex-justify': justify,
- '--flex-wrap': wrap,
- '--flex-gap': gap,
- '--flex-basis': basis,
- '--flex-grow': grow,
- '--flex-shrink': shrink,
- ...style,
- } as React.CSSProperties;
+ const classes = {
+ display: inline ? styles.inlineFlex : styles.flex,
+ direction: direction ? styles[`direction-${direction}`] : undefined,
+ align: align ? styles[`align-${align}`] : undefined,
+ justify: justify ? styles[`justify-${justify}`] : undefined,
+ // ... 나머지 속성들도 같은 방식으로 적용
+ };Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.changeset/ninety-icons-invite.md (1)
6-6: 변경사항에 대한 자세한 설명 추가 필요커밋 메시지는 컨벤션을 잘 따르고 있지만, 다음과 같은 세부 정보를 추가하면 좋을 것 같습니다:
- Flex 컴포넌트의 주요 기능
- 지원하는 속성들
- 사용 예시
예시:
-feat(flex): add flex component +feat(flex): add flex component + +Flex 컴포넌트는 다음과 같은 기능을 제공합니다: +- flexbox 레이아웃 구성을 위한 기본 속성 지원 +- CSS 모듈을 통한 스타일링 +- asChild 기능으로 유연한 렌더링 + +자세한 사용법은 Storybook 문서를 참고해주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (1)
.changeset/ninety-icons-invite.md(1 hunks)
🔇 Additional comments (1)
.changeset/ninety-icons-invite.md (1)
1-4: 버전 범프가 적절합니다!새로운 Flex 컴포넌트 기능 추가에 대해 마이너 버전 업데이트를 하는 것이 적절합니다.
|
수정해서 올렸더니 브랜치가 없어져 있어서 엥 뭐지,.. 했는데 의현이형이 먼저 작업했구나 ㅋㅋㅋㅋ |
변경사항
시각자료
스토리북 스크린샷
체크리스트
추가 논의사항
Summary by CodeRabbit
릴리즈 노트
새로운 기능
개선 사항
의존성
@sipe-team/side패키지에 Flex 컴포넌트 통합@sipe-team/flex패키지 의존성 추가