feat(react): introduce shorthand props and revise layout components #663
Conversation
- Refactored layout properties in ContainerLayoutProps and related components to use more consistent naming conventions (e.g., `flexDirection` to `direction`, `justifyContent` to `justify`). - Deprecated `Columns`, `Column`, and `Inline` components in favor of `HStack`. - Deprecated `Stack` component in favor of `VStack`. - Introduced `VStack` and `HStack` components for better layout management. - Updated utility functions to handle new shorthand properties for padding and other styles. - Improved type definitions for better clarity and consistency across components.
🦋 Changeset detectedLatest commit: 4973ace The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 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 |
## Walkthrough
이번 변경 사항은 레이아웃 및 스타일링 컴포넌트의 API를 대대적으로 개선하는 데 중점을 두었습니다. 새로운 수평/수직 스택 컴포넌트인 `HStack`과 `VStack`이 추가되고, 기존의 `Stack`, `Inline`, `Columns` 컴포넌트는 더 이상 사용하지 않도록(deprecated) 처리되었습니다. 레이아웃 및 flexbox 관련 스타일 프롭에 대한 축약형(shorthand) 프롭(`px`, `py`, `wrap`, `align`, `justify`, `direction` 등)이 도입되었고, `ActionButton`에는 `flexGrow` 프롭이 추가되었습니다. CSS 값 처리 방식도 표준 CSS 값 및 케밥 케이스를 우선하도록 변경되었습니다. 이에 따라 문서, 예제, 코드 생성기, 스타일 유틸리티 등 전반에 걸쳐 관련 API와 예시가 일관성 있게 업데이트되었습니다.
## Changes
| 파일/경로 그룹 | 변경 요약 |
|---|---|
| `packages/react/src/components/Stack/Stack.tsx`, `Stack/index.ts` | `VStack`, `HStack` 컴포넌트 및 타입 추가, 기존 `Stack`은 deprecated 처리 |
| `packages/react/src/components/Inline/Inline.tsx`, `Columns/Columns.tsx`, `Stack/Stack.tsx` | `Stack`, `Inline`, `Columns` 및 관련 타입 deprecated 처리 및 주석 추가 |
| `packages/react/src/components/Flex/Flex.tsx` | `align`, `justify`, `grow`, `shrink`, `direction`, `wrap` 등 shorthand 프롭 추가 및 처리 로직 개선 |
| `packages/react/src/utils/styled.tsx` | 스타일 프롭에 대한 축약형(`bg`, `p`, `px`, `py` 등) 및 string 타입 허용, 케밥 케이스 값 지원, deprecated 값 사용 시 경고 추가, 색상 핸들러 개선 |
| `packages/react/src/components/ActionButton/ActionButton.tsx` | `flexGrow` 프롭 추가 및 `useStyleProps` 훅 사용으로 스타일 프롭 분리 적용 |
| `packages/qvism-preset/src/recipes/action-button.ts`, `packages/css/all.css`, `packages/css/recipes/action-button.css` | `--seed-box-flex-grow` CSS 변수 및 `flex-grow` 속성 추가, 스타일 유연성 향상 |
| `packages/figma/src/codegen/targets/react/frame.ts`, `props.ts` | Figma → React 코드 생성 시 레이아웃 컴포넌트/프롭명 일괄 축약형 및 케밥 케이스로 변경, `Stack`, `Inline`, `Columns` 지원 제거 |
| `docs/components/example/`, `docs/public/__registry__/ui/`, `docs/registry/ui/`, `examples/stackflow-spa/src/`, `tools/figma-mcp/src/ui/App.tsx` 등 | 예제, 문서, 레지스트리, 샘플 앱 등에서 `Stack`, `Inline`, `Columns` → `VStack`, `HStack`으로 대체, 프롭명 축약형(`bg`, `px`, `py`, `align`, `justify` 등)으로 일괄 변경 |
| `docs/content/react/components/(layout)/` | `stack.mdx`, `inline.mdx`, `columns.mdx`에 deprecated 안내 추가, `v-stack.mdx`, `h-stack.mdx` 신규 문서 추가, `meta.json`에 페이지 목록 확장 |
| `docs/content/react/get-started/migration/improvements.mdx` | 레이아웃 컴포넌트 소개 및 문서 링크를 `VStack`, `HStack` 중심으로 갱신 |
| 기타 CSS/문서/예제 파일 | 프롭명 축약, 레이아웃 컴포넌트 대체, deprecated 안내 등 일관성 있게 반영 |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant VStack
participant HStack
participant Flex
participant ActionButton
User->>VStack: 수직 스택 레이아웃 요청 (gap, px, py, align 등)
User->>HStack: 수평 스택 레이아웃 요청 (gap, px, py, align 등)
User->>Flex: 커스텀 flex 레이아웃 요청 (align, justify, direction, wrap 등)
User->>ActionButton: flexGrow 프롭 포함 버튼 렌더링
VStack->>Flex: 내부적으로 flex 레이아웃 위임 (flexDirection="column")
HStack->>Flex: 내부적으로 flex 레이아웃 위임 (flexDirection="row")
ActionButton->>useStyleProps: style 프롭 분리 및 적용
useStyleProps->>ActionButton: style 객체 반환 및 버튼에 style 적용Poem
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🔭 Outside diff range comments (1)
docs/components/example/multiline-text-field-form.tsx (1)
73-73:⚠️ Potential issue필드 에러 초기화 오류
bio 값 변경 시 에러 상태를 초기화하는 부분에서
name필드를 사용하고 있습니다. 이는 존재하지 않는 필드명으로,bio로 수정해야 합니다.- setFieldStates((prev) => ({ ...prev, name: null })); + setFieldStates((prev) => ({ ...prev, bio: null }));
🧹 Nitpick comments (16)
docs/public/rootage/components/help-bubble.json (1)
333-333: 파일 끝 개행 누락 안내
POSIX 표준 및 일부 툴과의 호환성을 위해 파일 마지막에 개행 문자를 추가하는 것을 권장합니다.examples/stackflow-spa/src/activities/ActivityHome.tsx (1)
68-76: AlertDialogFooter layout 변경 및 방향성 검토
기존<Stack gap="x2">가<VStack gap="x2">로 바뀌어 버튼이 세로로 나열됩니다. AlertDialogFooter에서는 일반적으로 버튼이 수평 배치되는 경우가 많으므로, 의도한 레이아웃이 맞는지 검토해보세요. 필요한 경우 HStack 사용을 고려해 주세요.docs/content/react/components/(layout)/columns.mdx (1)
15-18: HStack 대체 사용 예제 추가를 고려하세요
Deprecated 섹션에서HStack사용을 권고하고 있으나, 실제 코드 예제에는 여전히Columns만 등장합니다. 문서 하단에HStack을 사용한 예제를 추가하면 마이그레이션 가이드가 더욱 완성될 것입니다.docs/components/example/stack-preview.tsx (1)
8-8: 축약형 속성명 사용이 적절합니다.
background에서bg로 속성명을 축약하여 코드의 간결성이 향상되었습니다. 다만,Stack컴포넌트가 여전히 사용되고 있는데, 컴포넌트 자체가 deprecated 상태이므로VStack으로 교체하는 것이 일관성 있는 접근법이 될 것입니다.-<Stack bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2"> +<VStack bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">그리고 닫는 태그도 함께 변경:
-</Stack> +</VStack>examples/stackflow-spa/src/activities/ActivityPartialDarkMode.tsx (1)
33-33: VStack 컴포넌트 적용
Stack대신VStack을 사용하여 자식 요소들을 수직으로 배치하도록 개선했습니다. 그러나 현재VStack에는gap같은 속성이 지정되어 있지 않아 요소 간 간격이 없을 수 있습니다. 필요하다면 적절한gap값을 추가하는 것이 좋습니다.Also applies to: 43-43
packages/figma/src/codegen/targets/react/frame.ts (3)
49-54:cloneElement남용으로 불필요한 Element 재생성
isStretch가true인 경우 모든 자식에 대해cloneElement를 호출하여alignSelf를undefined로 덮어씌우고 있습니다.
대부분의 자식은 원래alignSelf를 갖고 있지 않아도 매번 새 Element를 만들게 되므로 렌더‑시간에 불필요한 비용이 발생할 수 있습니다.-const processedChildren = isStretch - ? transformedChildren.map((child) => - child ? cloneElement(child, { alignSelf: undefined }) : child, - ) - : transformedChildren; +const processedChildren = isStretch + ? transformedChildren.map((child) => + child && "props" in child && child.props.alignSelf !== undefined + ? cloneElement(child, { alignSelf: undefined }) + : child, + ) + : transformedChildren;
alignSelf가 정의돼 있을 때에만 clone 하도록 조건을 좁히면 메모리 할당을 줄일 수 있습니다.
58-68: 중복된 분기 로직 간소화 제안
VStack·HStack분기 코드가 거의 동일하여 유지보수가 어렵습니다.
간단한 매핑 테이블을 사용하면 중복을 제거할 수 있습니다.- if (layoutComponent === "VStack") { - const { direction, ...rest } = props; - return createElement("VStack", rest, processedChildren); - } - - if (layoutComponent === "HStack") { - const { direction, ...rest } = props; - return createElement("HStack", rest, processedChildren); - } +if (layoutComponent === "VStack" || layoutComponent === "HStack") { + const { direction, ...rest } = props; + return createElement(layoutComponent, rest, processedChildren); +}기능은 동일하면서 코드량을 줄일 수 있습니다.
70-72:Box분기에서direction제거 필요
Box경로에서는directionprop이 의미가 없는데 그대로 전달될 수 있습니다.
VStack/HStack분기처럼const { direction, ...rest } = props;구문을 쓰거나,
compactObject유틸이 삭제된 만큼 매핑 후undefined정리를 해 주는 편이 안전합니다.packages/react/src/components/Stack/Stack.tsx (2)
12-14:display="flex"속성 중복 설정
Flex컴포넌트가 내부에서 이미display="flex"를 고정값으로 주입하고 있으므로,
여기서 다시"flex"값을 전달할 필요가 없습니다.- return <Flex ref={ref} display="flex" flexDirection="column" {...props} />; + return <Flex ref={ref} flexDirection="column" {...props} />;같은 패턴이
VStack,HStack에도 반복됩니다.
16-26:Stack,VStack,HStack구현 중복 제거 제안세 컴포넌트가 구현이 거의 동일해 코드 중복이 큽니다.
내부 팩토리 함수를 만들어 중복을 줄이면 타입·로직을 한 곳에서 관리할 수 있습니다.function createStack(direction: "row" | "column") { return React.forwardRef<HTMLDivElement, Omit<FlexProps, "flexDirection">>( (props, ref) => <Flex ref={ref} flexDirection={direction} {...props} />, ); } export const Stack = /* deprecated */ createStack("column"); export const VStack = createStack("column"); export const HStack = createStack("row");packages/react/src/components/Flex/Flex.tsx (3)
19-20:wrapprop 타입 허용 범위 불명확현재 타입은
wrap?: BoxProps["flexWrap"] | true로 정의되어 있어
false값을 전달하면 타입 오류가 나지만 런타임에는false가 그대로flexWrap에 전달될 수 있습니다.boolean 값을 허용할 계획이라면
wrap?: BoxProps["flexWrap"] | boolean으로 수정하고,
false일 때는undefined를 넘기도록 처리하는 편이 안전합니다.
31-40:grow와 대비되는shrink의 boolean 처리 불일치
grow는true를1로 변환하는 편의 처리가 있으나shrink에는 동일한 편의 기능이 없습니다.
API 일관성을 위해shrink도 동일한 형태(예:true→1)를 지원하거나,
둘 다 숫자만 허용하도록 통일하는 방안을 고려해 주세요.
44-56: props 전달 순서 주의
display="flex"를 먼저 지정하고...rest를 뒤에 펼치면서
사용자가 전달한display값이 오버라이드될 수 있도록 되어 있습니다.
의도된 동작이라면 주석으로 명시해 두면 혼동을 줄일 수 있습니다.packages/figma/src/codegen/targets/react/props.ts (1)
131-147: 기본값에서p,px,py, 개별 pt/pb… 를 모두0으로 지정할 필요가 없습니다.
createPropsTransformer가 shorthand → longhand 확장을 수행하더라도, 중복된 default 지정은 결국 마지막으로 병합된 값만 유효합니다.
– 코드 길이만 늘어나고 유지보수 비용이 증가합니다.
– 실제로 0 초기값을 유지할 목적이라면 한 곳(p)만 지정해도 충분합니다.defaults: { justify: "flex-start", align: "stretch", wrap: "nowrap", gap: 0, - p: 0, - px: 0, - py: 0, - pb: 0, - pl: 0, - pr: 0, - pt: 0, + p: 0, },packages/react/src/utils/styled.tsx (2)
50-71:handleDisplay매핑 누락으로 Fallback 경로에 의존하고 있습니다.현재 매핑 객체에
"block","inline","inline-flex"등이 포함되지 않아,
이 값들이 들어오면 매핑 결과는undefined가 되어?? display연산자 덕분에 우연히 정상 동작합니다.명시적으로 매핑해 두면
- 타입 자동완성·코드 추적이 쉬워지고
- 오타가 있을 때 조기에 잡을 수 있습니다.
return ( { + block: "block", + inline: "inline", flex: "flex", inlineFlex: "inline-flex", // @deprecated inlineBlock: "inline-block", // @deprecated + "inline-flex": "inline-flex", none: "none", }[display] ?? display );
101-123: 개발 환경에서 동일 경고가 반복 출력되어 콘솔 노이즈가 커질 수 있습니다.
handleJustifyContent내부의console.warn은 함수가 호출될 때마다 실행됩니다.
레이아웃이 자주 리렌더링되는 페이지에서는 수백 회 반복될 수 있어, 실제 문제 파악이 어려워집니다.
Set을 활용해 값당 한 번만 경고를 출력하도록 개선해 보세요.+const warnedValues = new Set<string>(); ... if (process.env["NODE_ENV"] === "development") { - if (...) { console.warn(...); } + if (!warnedValues.has(justifyContent) && deprecatedMap[justifyContent]) { + console.warn(`[SEED Design System] ${justifyContent} is deprecated. Use ${deprecatedMap[justifyContent]} instead.`); + warnedValues.add(justifyContent); + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (111)
.changeset/moody-planets-marry.md(1 hunks).cursor/rules/examples.mdc(1 hunks)docs/components/example/alert-dialog-critical.tsx(2 hunks)docs/components/example/alert-dialog-neutral.tsx(2 hunks)docs/components/example/alert-dialog-preview.tsx(2 hunks)docs/components/example/app-screen-preview.tsx(1 hunks)docs/components/example/app-screen-transparent-bar.tsx(1 hunks)docs/components/example/avatar-badge-circle.tsx(1 hunks)docs/components/example/bottom-sheet-preview.tsx(1 hunks)docs/components/example/box-preview.tsx(1 hunks)docs/components/example/callout-critical.tsx(2 hunks)docs/components/example/callout-informative.tsx(2 hunks)docs/components/example/callout-link-label-as-child.tsx(2 hunks)docs/components/example/callout-magic.tsx(2 hunks)docs/components/example/callout-neutral.tsx(2 hunks)docs/components/example/callout-preview.tsx(1 hunks)docs/components/example/callout-text-only.tsx(1 hunks)docs/components/example/callout-warning.tsx(2 hunks)docs/components/example/callout-with-link-label.tsx(2 hunks)docs/components/example/callout-with-title-text.tsx(2 hunks)docs/components/example/check-select-box-preview.tsx(1 hunks)docs/components/example/check-select-box-react-hook-form.tsx(3 hunks)docs/components/example/checkbox-react-hook-form.tsx(3 hunks)docs/components/example/columns-preview.tsx(1 hunks)docs/components/example/demo/article-detail.tsx(5 hunks)docs/components/example/demo/components/article-author.tsx(2 hunks)docs/components/example/demo/components/article-list-item.tsx(3 hunks)docs/components/example/demo/tabs/recommendations.tsx(5 hunks)docs/components/example/error-state-basement.tsx(2 hunks)docs/components/example/error-state-preview.tsx(2 hunks)docs/components/example/flex-preview.tsx(1 hunks)docs/components/example/h-stack-preview.tsx(1 hunks)docs/components/example/inline-banner-critical-solid.tsx(2 hunks)docs/components/example/inline-banner-critical-weak.tsx(2 hunks)docs/components/example/inline-banner-informative-weak.tsx(3 hunks)docs/components/example/inline-banner-neutral-weak.tsx(3 hunks)docs/components/example/inline-banner-positive-weak.tsx(3 hunks)docs/components/example/inline-banner-preview.tsx(2 hunks)docs/components/example/inline-banner-text-only.tsx(2 hunks)docs/components/example/inline-banner-warning-solid.tsx(3 hunks)docs/components/example/inline-banner-warning-weak.tsx(3 hunks)docs/components/example/inline-banner-with-all.tsx(3 hunks)docs/components/example/inline-banner-with-icon.tsx(3 hunks)docs/components/example/inline-banner-with-title-text.tsx(2 hunks)docs/components/example/inline-preview.tsx(1 hunks)docs/components/example/link-content-color.tsx(2 hunks)docs/components/example/link-content-size.tsx(2 hunks)docs/components/example/manner-temp-badge-preview.tsx(1 hunks)docs/components/example/manner-temp-preview.tsx(1 hunks)docs/components/example/multiline-text-field-disabled.tsx(1 hunks)docs/components/example/multiline-text-field-enabled.tsx(1 hunks)docs/components/example/multiline-text-field-form.tsx(2 hunks)docs/components/example/multiline-text-field-react-hook-form.tsx(2 hunks)docs/components/example/multiline-text-field-read-only.tsx(1 hunks)docs/components/example/pull-to-refresh-preview.tsx(2 hunks)docs/components/example/pull-to-refresh-tabs.tsx(2 hunks)docs/components/example/radio-select-box-preview.tsx(1 hunks)docs/components/example/radio-select-box-react-hook-form.tsx(2 hunks)docs/components/example/skeleton-preview.tsx(1 hunks)docs/components/example/skeleton-radius.tsx(1 hunks)docs/components/example/snackbar-avoid-overlap.tsx(3 hunks)docs/components/example/stack-preview.tsx(1 hunks)docs/components/example/text-field-both-affixes.tsx(1 hunks)docs/components/example/text-field-disabled.tsx(1 hunks)docs/components/example/text-field-enabled.tsx(1 hunks)docs/components/example/text-field-form.tsx(2 hunks)docs/components/example/text-field-prefix.tsx(1 hunks)docs/components/example/text-field-react-hook-form.tsx(2 hunks)docs/components/example/text-field-read-only.tsx(1 hunks)docs/components/example/text-field-suffix.tsx(1 hunks)docs/components/example/v-stack-preview.tsx(1 hunks)docs/content/react/components/(layout)/columns.mdx(2 hunks)docs/content/react/components/(layout)/h-stack.mdx(1 hunks)docs/content/react/components/(layout)/inline.mdx(2 hunks)docs/content/react/components/(layout)/meta.json(1 hunks)docs/content/react/components/(layout)/stack.mdx(2 hunks)docs/content/react/components/(layout)/v-stack.mdx(1 hunks)docs/content/react/get-started/migration/improvements.mdx(1 hunks)docs/public/__registry__/ui/app-screen.json(1 hunks)docs/public/__registry__/ui/error-state.json(1 hunks)docs/public/rootage/components/help-bubble.json(2 hunks)docs/registry/ui/app-bar.tsx(2 hunks)docs/registry/ui/error-state.tsx(4 hunks)docs/stories/Avatar.stories.tsx(1 hunks)examples/rspack-spa/src/App.tsx(1 hunks)examples/stackflow-spa/src/App.tsx(1 hunks)examples/stackflow-spa/src/activities/ActivityAlertDialog.tsx(2 hunks)examples/stackflow-spa/src/activities/ActivityAnimatedTabs.tsx(1 hunks)examples/stackflow-spa/src/activities/ActivityCodegenTest.tsx(3 hunks)examples/stackflow-spa/src/activities/ActivityHome.tsx(2 hunks)examples/stackflow-spa/src/activities/ActivityMixedVersionTest.tsx(3 hunks)examples/stackflow-spa/src/activities/ActivityPartialDarkMode.tsx(2 hunks)examples/stackflow-spa/src/activities/ActivitySegmentedControl.tsx(2 hunks)examples/stackflow-spa/src/activities/ActivitySwipeableTabs.tsx(5 hunks)examples/stackflow-spa/src/activities/ActivityTabs.tsx(2 hunks)examples/stackflow-spa/src/seed-design/stackflow/AppBar.tsx(2 hunks)examples/stackflow-spa/src/seed-design/ui/error-state.tsx(4 hunks)packages/css/all.css(1 hunks)packages/css/recipes/action-button.css(1 hunks)packages/figma/src/codegen/targets/react/frame.ts(1 hunks)packages/figma/src/codegen/targets/react/props.ts(7 hunks)packages/qvism-preset/src/recipes/action-button.ts(1 hunks)packages/react/src/components/ActionButton/ActionButton.tsx(3 hunks)packages/react/src/components/Columns/Columns.tsx(1 hunks)packages/react/src/components/Flex/Flex.tsx(1 hunks)packages/react/src/components/Inline/Inline.tsx(1 hunks)packages/react/src/components/SelectBox/CheckSelectBox.tsx(1 hunks)packages/react/src/components/Stack/Stack.tsx(1 hunks)packages/react/src/components/Stack/index.ts(1 hunks)packages/react/src/utils/styled.tsx(8 hunks)tools/figma-mcp/src/ui/App.tsx(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (33)
docs/components/example/inline-banner-text-only.tsx (1)
docs/registry/ui/inline-banner.tsx (3)
InlineBanner(32-48)ActionableInlineBanner(66-84)DismissibleInlineBanner(108-127)
examples/rspack-spa/src/App.tsx (1)
packages/react/src/components/Box/Box.tsx (1)
Box(9-14)
docs/components/example/skeleton-radius.tsx (1)
packages/react/src/components/Flex/Flex.tsx (1)
Flex(43-59)
docs/components/example/app-screen-preview.tsx (1)
packages/react/src/components/Flex/Flex.tsx (1)
Flex(43-59)
examples/stackflow-spa/src/activities/ActivityMixedVersionTest.tsx (1)
packages/react/src/components/Box/Box.tsx (1)
Box(9-14)
docs/components/example/avatar-badge-circle.tsx (1)
packages/react/src/components/Box/Box.tsx (1)
Box(9-14)
docs/components/example/check-select-box-preview.tsx (2)
packages/react/src/components/SelectBox/CheckSelectBox.tsx (1)
CheckSelectBoxGroup(23-27)docs/registry/ui/select-box.tsx (1)
CheckSelectBox(80-100)
examples/stackflow-spa/src/activities/ActivityPartialDarkMode.tsx (1)
packages/react/src/components/Box/Box.tsx (1)
Box(9-14)
docs/components/example/inline-preview.tsx (2)
packages/react/src/components/Inline/Inline.tsx (1)
Inline(12-24)packages/react/src/components/Box/Box.tsx (1)
Box(9-14)
docs/components/example/check-select-box-react-hook-form.tsx (1)
packages/react/src/components/SelectBox/CheckSelectBox.tsx (1)
CheckSelectBoxGroup(23-27)
docs/components/example/flex-preview.tsx (1)
packages/react/src/components/Flex/Flex.tsx (1)
Flex(43-59)
docs/components/example/text-field-suffix.tsx (2)
docs/components/example/text-field-both-affixes.tsx (1)
TextFieldSuffix(5-21)docs/registry/ui/text-field.tsx (1)
TextField(31-103)
docs/stories/Avatar.stories.tsx (1)
packages/react/src/components/Box/Box.tsx (1)
Box(9-14)
docs/components/example/columns-preview.tsx (1)
packages/react/src/components/Columns/Columns.tsx (2)
Columns(12-23)Column(35-49)
docs/components/example/app-screen-transparent-bar.tsx (1)
packages/react/src/components/Flex/Flex.tsx (1)
Flex(43-59)
docs/components/example/text-field-prefix.tsx (1)
docs/registry/ui/text-field.tsx (1)
TextField(31-103)
packages/react/src/components/Inline/Inline.tsx (1)
packages/react/src/components/Box/Box.tsx (2)
BoxProps(5-7)Box(9-14)
tools/figma-mcp/src/ui/App.tsx (2)
packages/react/src/components/Flex/Flex.tsx (1)
Flex(43-59)packages/react/src/components/Text/Text.tsx (1)
Text(97-139)
docs/components/example/stack-preview.tsx (1)
packages/react/src/components/Box/Box.tsx (1)
Box(9-14)
docs/components/example/text-field-both-affixes.tsx (2)
docs/components/example/text-field-suffix.tsx (1)
TextFieldSuffix(5-16)docs/registry/ui/text-field.tsx (1)
TextField(31-103)
docs/components/example/multiline-text-field-enabled.tsx (1)
docs/registry/ui/text-field.tsx (1)
TextField(31-103)
docs/components/example/v-stack-preview.tsx (1)
packages/react/src/components/Box/Box.tsx (1)
Box(9-14)
docs/components/example/snackbar-avoid-overlap.tsx (1)
packages/react/src/components/Flex/Flex.tsx (1)
Flex(43-59)
docs/components/example/manner-temp-preview.tsx (2)
docs/registry/ui/manner-temp.tsx (1)
MannerTemp(23-36)packages/react/src/components/MannerTemp/MannerTemp.tsx (1)
MannerTemp(17-25)
docs/components/example/h-stack-preview.tsx (1)
packages/react/src/components/Box/Box.tsx (1)
Box(9-14)
docs/components/example/multiline-text-field-read-only.tsx (1)
docs/registry/ui/text-field.tsx (1)
TextField(31-103)
packages/react/src/components/Columns/Columns.tsx (1)
packages/react/src/components/Box/Box.tsx (2)
BoxProps(5-7)Box(9-14)
docs/components/example/multiline-text-field-form.tsx (1)
docs/registry/ui/text-field.tsx (1)
TextField(31-103)
docs/components/example/demo/tabs/recommendations.tsx (2)
packages/react/src/components/Flex/Flex.tsx (1)
Flex(43-59)docs/components/example/demo/components/article-list-item.tsx (1)
ArticleListItem(11-50)
docs/components/example/text-field-form.tsx (1)
docs/registry/ui/text-field.tsx (1)
TextField(31-103)
docs/components/example/multiline-text-field-react-hook-form.tsx (1)
docs/registry/ui/text-field.tsx (1)
TextField(31-103)
packages/react/src/components/ActionButton/ActionButton.tsx (1)
packages/react/src/utils/styled.tsx (2)
StyleProps(148-316)useStyleProps(322-437)
packages/react/src/components/Flex/Flex.tsx (1)
packages/react/src/components/Box/Box.tsx (2)
BoxProps(5-7)Box(9-14)
🔇 Additional comments (195)
docs/public/rootage/components/help-bubble.json (1)
138-140: states 배열의 멀티라인 포맷팅으로 가독성 향상
배열 항목이 하나뿐이지만 멀티라인으로 분리되어 JSON 구조가 읽기 쉬워졌습니다. 기능적 변경은 없으므로 승인합니다..cursor/rules/examples.mdc (1)
13-14:VStack및HStack컴포넌트 항목 추가 확인
@seed-design/react에서 수직/수평 스택 컴포넌트를 명시적으로 가져오도록 변경된 것이 PR 목표와 일치하며, 기존Box,Flex리스트 항목과 동일한 인덴트 및 형식을 잘 유지하고 있습니다.examples/rspack-spa/src/App.tsx (1)
5-5: 코드 변경사항이 깔끔하고 유효합니다.기존
padding속성이 새로운 축약형p속성으로 적절하게 업데이트되었습니다. 이는 PR의 레이아웃 관련 축약형 속성 도입 목표와 일치합니다.docs/components/example/bottom-sheet-preview.tsx (1)
17-17: 주석이 새로운 API 규칙에 맞게 올바르게 업데이트되었습니다.패딩을 제거하기 위한 주석 내용이
paddingX={0}에서 새로운 축약형px={0}으로 정확하게 업데이트되었습니다. 이는 PR의 레이아웃 관련 축약형 속성 도입과 일관성 있게 적용되었습니다.docs/components/example/error-state-preview.tsx (1)
1-1: Stack 컴포넌트가 VStack으로 적절하게 대체되었습니다.deprecated된
Stack컴포넌트 대신 새로운VStack컴포넌트를 사용하도록 변경되었습니다. import 문과 JSX 엘리먼트 모두 일관성 있게 업데이트되었으며, 기존 기능을 그대로 유지하고 있습니다. 이는 PR 목표인 새로운 레이아웃 컴포넌트 도입과 일치합니다.Also applies to: 6-7
examples/stackflow-spa/src/App.tsx (1)
3-5: import 구문 재정렬이 적절하게 이루어졌습니다.import 구문이 좀 더 논리적인 순서로 재정렬되었습니다. 먼저 React의 내장 컴포넌트를 import하고, 그 다음에 로컬 모듈에서 import하는 것은 좋은 관행입니다. 이 변경은 코드 가독성을 향상시키며, 프로젝트의 일관성 있는 코드 스타일을 유지하는 데 도움이 됩니다.
docs/stories/Avatar.stories.tsx (1)
71-71: 배경 속성이 축약형으로 적절하게 업데이트되었습니다.
background속성이 새로운 축약형bg속성으로 변경되었습니다. 이는 PR의 레이아웃 및 스타일링 관련 축약형 속성 도입 목표에 맞게 일관성 있게 적용되었습니다. 코드의 기능은 변경되지 않았으며, 더 간결하고 읽기 쉬운 형태로 개선되었습니다.docs/components/example/avatar-badge-circle.tsx (1)
14-14: 속성 약어 사용으로 코드가 더 간결해졌습니다.
background속성 대신 짧은 형태인bg속성을 사용하여 코드의 간결성을 높였습니다. 이는 전체 코드베이스에서 일관되게 적용되는 스타일 속성 약어화와 일치하며, 가독성을 향상시킵니다.examples/stackflow-spa/src/activities/ActivityMixedVersionTest.tsx (3)
1-1:Stack대신VStack컴포넌트로 적절하게 변경되었습니다.기존의
Stack컴포넌트 대신 수직 레이아웃을 명시적으로 나타내는VStack컴포넌트를 가져오도록 import 문이 변경되었습니다. 이는 PR의 목표에 따라 의미적으로 더 명확한 레이아웃 컴포넌트를 사용하는 방향으로 일관되게 변경된 것입니다.
16-16: 수직 레이아웃을 위해Stack에서VStack으로 마이그레이션되었습니다.기존의
Stack컴포넌트가 의미론적으로 더 명확한VStack컴포넌트로 변경되었습니다. 이제 이 컴포넌트의 목적(수직 스택)이 이름에 더 명확하게 드러나 가독성과 유지보수성이 향상되었습니다.Also applies to: 38-38
35-37: 일관된 스타일 속성 약어화가 적용되었습니다.여러
Box컴포넌트에서background속성이 더 간결한bg속성으로 변경되었습니다. 이러한 변경은 코드베이스 전체에서 일관성을 유지하며 코드의 간결성을 높입니다.docs/components/example/link-content-size.tsx (2)
2-2: 컴포넌트 import가 적절하게 업데이트되었습니다.기존의
Stack컴포넌트 대신 의미적으로 명확한VStack컴포넌트를 import하도록 변경되었습니다. 이는 PR의 목표에 부합하는 변경사항입니다.
6-6: 수직 스택을 위한 적절한 컴포넌트로 변경되었습니다.
Stack컴포넌트가 수직 레이아웃을 위한VStack컴포넌트로 교체되어 코드의 의도가 더 명확해졌습니다. 이는 전체 코드베이스에서 진행 중인 레이아웃 컴포넌트 개선과 일치합니다.Also applies to: 19-19
packages/react/src/components/SelectBox/CheckSelectBox.tsx (1)
21-21: 문서 주석이 새로운 컴포넌트 이름으로 업데이트되었습니다.
CheckSelectBoxGroup컴포넌트의 문서 주석이 업데이트되어 중첩할 컴포넌트로Stack대신VStack을 권장합니다. 이는 전체 코드베이스에서 진행되고 있는 레이아웃 컴포넌트 개선 방향과 일치하며, 사용자가 최신 레이아웃 컴포넌트를 사용하도록 안내합니다.docs/components/example/inline-banner-warning-weak.tsx (1)
2-2:Stack→VStack마이그레이션 적절함
컴포넌트 임포트 및 JSX 래퍼를VStack으로 교체하여 기존 수직 스택 레이아웃을 올바르게 유지하고 있습니다. 간격(gap="x4")과 너비(width="full")도 기대한 대로 동작합니다.Also applies to: 11-11
docs/registry/ui/app-bar.tsx (1)
7-7: 수직 스택 레이아웃 변경 승인
Stack→VStack으로 전환하여 제목과 부제목 래퍼가 수직으로 정렬되도록 일관성 있게 업데이트되었습니다. CSS props(overflowX="auto")도 유효한 값이므로 문제 없습니다.Also applies to: 58-58
examples/stackflow-spa/src/activities/ActivityAlertDialog.tsx (1)
14-14: 레이아웃 방향 확인 필요
원본<Stack>이 기본으로 수직 배치였는지, 버튼의 배치 방향(세로 vs 가로)이 의도된 대로 유지되는지 검토해주세요.
- 만약 버튼들이 가로로 나열되어야 한다면
VStack이 아닌HStack을 사용해야 합니다.Also applies to: 41-48
docs/components/example/callout-with-link-label.tsx (1)
1-1:Stack→VStack전환 적절
콜아웃 컴포넌트들이 수직 방향으로 정렬되며,gap="x4"와width="full"도 예상대로 작동합니다.Also applies to: 6-6
docs/components/example/link-content-color.tsx (1)
2-2: 레이아웃 컴포넌트 교체 승인
Stack에서VStack으로 전환하여 링크 컨텐츠들이 수직으로 올바르게 정렬되고 있습니다. 추가 조정 필요 없습니다.Also applies to: 6-6
docs/components/example/radio-select-box-preview.tsx (1)
1-1: 기존 Stack 컴포넌트를 VStack으로 교체 잘했습니다!
Stack대신 의미적으로 더 명확한VStack을 사용함으로써 컴포넌트의 레이아웃 의도가 명확해졌습니다. 세로 방향 스택을 명시적으로 표현하여 코드 가독성이 향상되었습니다.Also applies to: 7-7, 15-15
docs/components/example/inline-banner-text-only.tsx (1)
1-1: 수직 스택 레이아웃을 VStack으로 명시적 표현 👍
Stack에서VStack으로의 교체는 컴포넌트의 배치 의도를 명확히 보여주는 좋은 변경입니다. 기존의gap="x4"및width="full"속성을 그대로 유지하면서 레이아웃의 의미가 더 명확해졌습니다.Also applies to: 10-10, 14-14
docs/components/example/callout-critical.tsx (1)
1-1: VStack으로 변경하여 레이아웃 의도 명확화
Stack에서VStack으로 변경함으로써 컴포넌트의 수직 배치 의도가 더욱 명확해졌습니다. 기존과 동일한gap="x4"및width="full"속성을 유지하면서 API 일관성을 개선했습니다.Also applies to: 6-6, 19-19
docs/components/example/inline-banner-critical-solid.tsx (1)
3-3: 일관된 VStack 컴포넌트로 교체 적용 완료
Stack에서VStack으로의 변경이 일관되게 적용되었습니다. 이는 PR 목표에 부합하며, 컴포넌트 간의 일관성을 유지하고 레이아웃 의도를 명확히 전달합니다.Also applies to: 7-7, 18-18
docs/components/example/app-screen-preview.tsx (1)
35-35: Flex 컴포넌트의 축약형 속성명 적용 좋습니다
justifyContent와alignItems속성을 더 간결한justify와align으로 변경한 것은 코드 가독성을 높이는 좋은 개선입니다. 이는 PR에서 언급된 축약형 스타일 속성 도입 목표에 부합합니다.docs/components/example/callout-informative.tsx (2)
1-1: Deprecated 컴포넌트 제거 및 새로운 레이아웃 컴포넌트 도입 확인
Stack대신VStack을 정확히 가져왔습니다. 기존 예제 파일에서 사용하고 있던Stack이 더 이상 포함되지 않도록 불필요한 import가 제거됐는지 확인해주세요.
6-19: 레이아웃 래퍼 변경 승인
<VStack gap="x4" width="full">로 vertical 스택이 의도대로 적용됐습니다. 기존Stack사용 시와 동일한 레이아웃이 유지되는지 확인되며, 컴포넌트 구조도 명확해졌습니다.docs/components/example/inline-banner-neutral-weak.tsx (2)
2-2: deprecatedStack제거,VStackimport 적용
기존Stackimport가VStack으로 교체되었습니다. 관련 import만 남아 있는지, 불필요한 import가 없는지 점검하세요.
11-27: VStack으로 vertical 스택 구성 확인
<VStack gap="x4" width="full">로 래퍼가 제대로 적용되었습니다. 레이아웃 방향과 간격이 의도대로 동작하는지 리뷰했고, 문제 없습니다.examples/stackflow-spa/src/seed-design/stackflow/AppBar.tsx (2)
2-2:Stack→VStackimport 전환 검토
@seed-design/react의VStack을 정확히 import했습니다. import 대상이 올바른지 확인되며, deprecated된Stackimport가 모두 제거됐습니다.
40-43: 레이아웃 컨테이너 교체 및 CSS 속성 지원 확인 필요
<VStack overflowX="auto">로 변경되어 텍스트 제목과 부제목이 세로로 스택되며, 가로 스크롤이 활성화됩니다.VStack컴포넌트가overflowXprop을 지원하는지와 CSS prop 전달 방식이 올바른지 한 번 더 검증해주세요.examples/stackflow-spa/src/activities/ActivitySegmentedControl.tsx (2)
5-5: 레이아웃 컴포넌트 import 업데이트
Stack대신VStack으로 래퍼 컴포넌트를 import했습니다. 불필요한 import나 사용되지 않는 컴포넌트가 남아있지 않은지 확인해주세요.
17-23: 세로 정렬 및 align prop 적용 검토
<VStack align="center">로SegmentedControl컨테이너가 세로 스택된 가운데 정렬로 업데이트되었습니다. 기존alignItems="center"와 동일하게 동작하는지 테스트하여 레이아웃이 의도대로 유지되는지 확인해주세요.examples/stackflow-spa/src/activities/ActivityHome.tsx (1)
1-1: 전체 파일 import 점검
Stack대신VStack과 함께useSnackbarAdapter가 import되었습니다. import 순서 및 불필요 import 제거 여부를 확인하세요.docs/content/react/components/(layout)/columns.mdx (1)
2-3: Columns 컴포넌트 제목과 설명에 Deprecated 표시 추가
제목과 설명에(Deprecated)가 적절히 반영되어 있어, 사용자에게 컴포넌트 비권장 상태가 명확히 전달됩니다.docs/components/example/callout-link-label-as-child.tsx (2)
1-1: Stack → VStack로 레이아웃 컴포넌트 교체
Stack대신VStack을 import하여 수직 스택 전용 컴포넌트를 사용하도록 변경되었습니다.
6-7: JSX 래퍼를 VStack으로 업데이트
JSX 래퍼 요소를<VStack gap="x4" width="full">로 변경해 vertical 레이아웃이 명확하게 적용됩니다.docs/components/example/callout-magic.tsx (2)
1-1: Stack → VStack로 레이아웃 컴포넌트 변경
레이아웃 wrapper를Stack에서VStack으로 교체하여 vertical 전용 컴포넌트를 사용하도록 수정되었습니다.
6-7: JSX 래퍼를 VStack으로 업데이트
<VStack gap="x4" width="full">로 감싸면서 일관된 vertical 레이아웃이 적용됩니다.examples/stackflow-spa/src/activities/ActivityAnimatedTabs.tsx (2)
29-31: padding → p 축약형 속성 사용
padding대신p="x2"를 사용해 일관된 디자인 토큰 기반 축약형 props가 적용되었습니다.
34-36: paddingX, paddingY → px, py 축약형 속성 사용
paddingX,paddingY를px="x2",py="x10"로 변경해 코드 가독성과 일관성을 높였습니다.docs/components/example/check-select-box-preview.tsx (2)
1-1: Stack → VStack import 교체
Stack에서VStack으로 변경하여 vertical 레이아웃 전용 컴포넌트를 사용하도록 수정되었습니다.
7-8: JSX 래퍼를 VStack으로 업데이트
<VStack gap="spacingY.componentDefault">로 감싸면서 일관된 vertical 레이아웃과 디자인 토큰 기반 gap 속성이 적용됩니다.docs/components/example/skeleton-radius.tsx (1)
5-5: 단축 프롭 적용 확인
Flex컴포넌트의alignItems="center"에서align="center"로 업데이트가 올바르게 반영되어 중앙 정렬이 유지됩니다.docs/content/react/components/(layout)/stack.mdx (2)
2-3: 문서 Frontmatter에 Deprecated 표기 추가
제목과 설명에(Deprecated)가 정확히 반영되어 있습니다.
15-17: Deprecated 섹션 추가 확인
Stack컴포넌트의 사용 중단 안내와 대체 권장(VStack)이 명확하게 작성되었습니다.docs/components/example/flex-preview.tsx (1)
5-5: Shorthand prop 적용 일관성 확인
모든Flex컴포넌트에서background→bg,paddingX→px,paddingY→py등 축약형 프롭이 일관되게 사용되었습니다. 시각적·동작적 변경 없이 코드가 간결해졌습니다.Also applies to: 8-8, 10-11, 15-15, 18-18, 24-24, 26-27, 31-31, 34-34, 38-38
docs/components/example/inline-banner-critical-weak.tsx (1)
2-2:Stack→VStack전환 확인
import구문과 JSX 렌더링 모두에서Stack이VStack으로 올바르게 교체되었으며,gap·width속성이 의도대로 유지됩니다.Also applies to: 7-7, 18-18
docs/content/react/components/(layout)/inline.mdx (1)
2-3: Inline 컴포넌트 Deprecated 안내 업데이트
Frontmatter 및 본문에Inline컴포넌트의(Deprecated)표기와 대체 제안(HStack+wrap)이 정확하게 반영되었습니다.Also applies to: 15-17
docs/components/example/callout-warning.tsx (1)
1-1: VStack로 대체된 레이아웃 컴포넌트 확인
Stack대신VStack을 임포트하고 JSX 래퍼로 사용한 변경 사항이 전반적인 레이아웃 마이그레이션 전략과 일치합니다.Also applies to: 6-6, 19-19
docs/components/example/inline-banner-preview.tsx (1)
1-1: VStack로 대체된 레이아웃 컴포넌트 확인
Stack에서VStack으로 교체되어 vertical 스택을 명시적으로 표현했고, gap 및 width 프롭 설정도 기존과 일관됩니다.Also applies to: 10-10, 14-14
docs/components/example/callout-neutral.tsx (1)
1-1: VStack로 대체된 레이아웃 컴포넌트 확인
예시 파일 전반에서VStack이 올바르게 임포트되고 래퍼로 사용되어 vertical 스택 레이아웃 마이그레이션이 일관되게 적용되었습니다.Also applies to: 6-6, 19-19
docs/components/example/inline-banner-with-all.tsx (1)
2-2: VStack로 대체된 레이아웃 컴포넌트 확인
모든 인라인 배너 예시에 대해Stack대신VStack을 사용해 vertical 스택 레이아웃을 명시적으로 적용했으며, 기존의 gap·width 설정을 유지했습니다.Also applies to: 11-11, 27-27
docs/components/example/inline-banner-with-icon.tsx (1)
2-2: 컴포넌트 업데이트가 잘 이루어졌습니다.
Stack컴포넌트 대신 새로운VStack컴포넌트를 사용하는 변경이 적절하게 이루어졌습니다. 이는 레이아웃 컴포넌트의 명명을 더 명시적으로 개선하는 전체 리팩토링의 일부로 잘 구현되었습니다.Also applies to: 11-11, 21-21
packages/css/recipes/action-button.css (1)
14-15: flexGrow 속성 추가 구현이 적절합니다.CSS 변수
--seed-box-flex-grow를 통해flex-grow속성을 제어할 수 있게 하는 변경이 잘 이루어졌습니다. 이는ActionButton컴포넌트의 새로운flexGrowprop과 잘 연동되어 레이아웃 내에서 버튼의 유연한 확장을 가능하게 합니다.docs/components/example/pull-to-refresh-preview.tsx (1)
3-3: 컴포넌트 및 prop 이름 업데이트가 잘 이루어졌습니다.
Stack에서VStack으로의 변경과 더불어paddingX대신 축약형 prop인px를 사용하는 변경이 적절하게 이루어졌습니다. 이러한 변경은 새로운 레이아웃 시스템과 일관된 API 사용 패턴을 형성합니다.Also applies to: 36-36, 40-40
docs/components/example/box-preview.tsx (1)
6-7: 스타일 prop 이름의 축약형 사용이 잘 적용되었습니다.다음과 같은 변경이 적절하게 이루어졌습니다:
background→bg로 축약형 사용paddingX→px,paddingY→py로 축약형 사용borderWidth={2}→borderWidth="2px"로 CSS 값 형식 수정이러한 변경은 일관된 스타일링 패턴을 형성하고 CSS 값 처리의 일관성을 개선합니다.
Also applies to: 10-11
docs/components/example/inline-banner-informative-weak.tsx (1)
2-2: 레이아웃 컴포넌트 마이그레이션이 잘 이루어졌습니다.
Stack대신VStack을 사용하도록 변경한 것은 레이아웃 의도를 더 명확하게 전달합니다. 수직 스택을 명시적으로 나타내는 컴포넌트로 마이그레이션이 올바르게 이루어졌습니다.Also applies to: 11-11, 27-27
docs/components/example/inline-banner-warning-solid.tsx (1)
2-2: 레이아웃 컴포넌트 마이그레이션이 잘 이루어졌습니다.
Stack에서VStack으로의 변경이 잘 이루어졌습니다. 이는 레이아웃 의도를 더 명확하게 전달하며, PR의 목표와 일치합니다.Also applies to: 11-11, 27-27
docs/components/example/stack-preview.tsx (2)
3-5: 컴포넌트 사용 중단 표시가 적절합니다.
StackPreview컴포넌트에@deprecatedJSDoc 주석을 추가하여VStack을 대신 사용하도록 안내한 것은 올바른 접근법입니다.
9-9: 축약형 속성명 사용이 일관되게 적용되었습니다.
paddingX와paddingY에서px와py로의 변경이 일관되게 모든Box컴포넌트에 적용되었습니다. 이러한 축약형 속성은 코드의 가독성과 간결성을 향상시킵니다.Also applies to: 12-12, 15-15
docs/components/example/pull-to-refresh-tabs.tsx (3)
1-1: 올바른 컴포넌트 가져오기가 이루어졌습니다.
Stack대신VStack을 가져오도록 변경한 것은 레이아웃 컴포넌트 마이그레이션에 필요한 첫 단계입니다.
39-43: 레이아웃 컴포넌트와 속성명 개선이 적절합니다.
Stack에서VStack으로의 변경과 함께paddingX에서 축약형px속성으로 변경한 것은 코드의 의도와 간결성을 모두 개선합니다. Pull-to-refresh 컨텐츠를 수직으로 쌓는 레이아웃 의도가 더 명확해졌습니다.
48-48: 일관된 컴포넌트 및 속성명 변경이 적용되었습니다.두 번째 탭의 컨텐츠 래퍼도 동일한 패턴으로
VStack과px속성을 사용하도록 변경되었습니다. 이러한 일관성은 코드베이스 전체의 유지보수성을 향상시킵니다.docs/public/__registry__/ui/app-screen.json (1)
19-19: VStack 컴포넌트 도입 적용이 잘 되었습니다이전의 Stack 컴포넌트 대신 새로운 VStack 컴포넌트를 사용하도록 업데이트되었습니다. 이는 PR의 목표와 일치하며, 더 명시적이고 의미적으로 명확한 레이아웃 컴포넌트를 도입하는 개선 방향에 부합합니다.
docs/components/example/app-screen-transparent-bar.tsx (1)
35-35: 축약형 prop 이름으로 변경이 잘 적용되었습니다Flex 컴포넌트에서 기존의 장황한 prop 이름들이 간결한 축약형으로 대체되었습니다:
justifyContent="center"→justify="center"alignItems="center"→align="center"background="palette.gray500"→bg="palette.gray500"이러한 변경은 코드베이스 전반에 걸친 일관성과 가독성을 향상시키며, PR의 목표와 일치합니다.
docs/components/example/text-field-enabled.tsx (1)
1-1: Columns에서 HStack으로의 마이그레이션이 올바르게 이루어졌습니다deprecated된 Columns/Column 컴포넌트 대신 새로운 HStack 컴포넌트를 사용하도록 변경되었습니다. import 문과 컴포넌트 구조가 모두 적절하게 업데이트되었으며, 기존 레이아웃의 동작과 스타일이 유지되었습니다. 이 변경은 PR 목표에 부합하며 더 간결하고 직관적인 레이아웃 API를 제공합니다.
Also applies to: 6-18
examples/stackflow-spa/src/activities/ActivityTabs.tsx (3)
18-18: 축약형 padding prop으로 변경이 잘 적용되었습니다기존
padding="x4"가 더 간결한p="x4"로 변경되었습니다. 이는 PR에서 제시하는 축약형 prop 도입 방향과 일치합니다.
30-30: Box 컴포넌트의 padding prop이 축약형으로 잘 변경되었습니다기존
padding="x2"가 더 간결한p="x2"로 변경되었습니다. 이는 PR의 목표에 부합하며 스타일 prop의 일관성을 향상시킵니다.
36-36: paddingX/paddingY에서 px/py로의 변경이 일관되게 적용되었습니다여러 Box 컴포넌트에서 기존의
paddingX="x2" paddingY="x10"이 더 간결한px="x2" py="x10"로 변경되었습니다. 이러한 변경이 파일 전체에 걸쳐 일관되게 적용되어 코드의 가독성과 유지보수성이 향상되었습니다.Also applies to: 42-42, 47-47, 52-52, 57-57, 62-62
docs/components/example/callout-with-title-text.tsx (1)
1-1:Stack에서VStack으로 올바르게 전환됨
Deprecated된Stack컴포넌트를VStack으로 교체하여 수직 레이아웃의 의도가 더 명확해졌습니다. import 구문과 JSX wrapper 모두 일관되게 업데이트되었습니다.Also applies to: 6-6, 19-19
docs/components/example/manner-temp-preview.tsx (1)
1-1:VStack적용 확인
수직 스택이 필요한 영역에VStack을 적절히 사용하셨습니다. import와 JSX wrapper가 일관되게 변경되어 가독성과 의도가 향상되었습니다.Also applies to: 6-6, 13-13
docs/components/example/callout-preview.tsx (1)
1-1:Stack→VStack교체 완료
레이아웃 컨테이너를Stack에서VStack으로 변경하여 vertical 방향 스택을 명시적으로 표현했습니다. props(gap,width)도 기존과 동일하게 유지되어 레이아웃 의도가 잘 보존되었습니다.Also applies to: 6-6, 10-10
docs/components/example/error-state-basement.tsx (1)
1-1: 수직 스택 레이아웃에VStack사용
기존Stack을VStack으로 교체하여 vertical 레이아웃 컴포넌트를 명확히 구분하셨습니다. import 및 JSX wrapper 모두 올바르게 업데이트되었습니다.Also applies to: 6-6, 18-18
docs/components/example/multiline-text-field-disabled.tsx (1)
1-1: 수평 레이아웃에HStack사용
Deprecated된Columns/Column대신HStack을 적용하여 horizontal 스택 레이아웃을 명시적으로 표현했습니다. import 구문과 JSX wrapper가 의도한 대로 일관되게 업데이트되었습니다.Also applies to: 6-6, 19-19
tools/figma-mcp/src/ui/App.tsx (3)
4-4:Stack에서VStack으로의 변경이 적용되었습니다.이전에 사용하던
Stack컴포넌트에서 새로운VStack컴포넌트로 변경되었습니다. 이 변경은 수직 스택 방향을 명시적으로 표현하여 코드의 가독성을 향상시킵니다.
307-307:paddingX/paddingY대신 단축형px/py프롭 사용으로 개선되었습니다.기존
Stack컴포넌트와 긴 형태의 프롭 이름에서VStack과 단축형 프롭(px,py)으로 변경되었습니다. 이는 코드의 간결성을 높이고 일관된 스타일링 패턴을 적용합니다.Also applies to: 350-350
314-314: CSS 값을 카멜케이스에서 케밥케이스로 변경하고 프롭 이름을 단축했습니다.
alignItems="flexEnd"에서align="flex-end"로 변경되었습니다. 이는:
- 표준 CSS 값(케밥케이스)을 사용하여 일관성을 높임
- 더 짧고 직관적인 프롭 이름 사용(
alignItems→align)이 변경으로 코드가 더 읽기 쉬워지고 CSS 표준에 맞게 정렬됩니다.
docs/components/example/text-field-prefix.tsx (2)
2-2:Columns와Column대신HStack을 사용하도록 변경되었습니다.중첩된
Columns와Column컴포넌트 대신 단일HStack컴포넌트를 가져오도록 변경되었습니다. 이는 코드 구조를 단순화하고 가독성을 향상시킵니다.
7-18: 컴포넌트 계층 구조가 단순화되었습니다.기존의 중첩된 구조(
Columns>Column>TextField)에서 더 평평한 구조(HStack>TextField)로 변경되었습니다. 이 변경으로:
- 중복 래퍼 컴포넌트가 제거되어 코드가 간결해짐
- 구성 요소 간의 관계가 더 명확해짐
- 수평 정렬을 위한 의미가 더 명확한 컴포넌트 이름 사용
이러한 변경은 코드의 유지 관리성을 높이고 다른 개발자들이 구조를 더 쉽게 이해할 수 있게 합니다.
docs/components/example/alert-dialog-critical.tsx (2)
1-1:Columns와Column대신HStack을 사용하도록 변경되었습니다.레이아웃 컴포넌트 가져오기가 간소화되었습니다. 이제 두 개의 컴포넌트(
Columns,Column) 대신 하나의 컴포넌트(HStack)만 필요합니다.
27-38: 버튼 레이아웃 구조가 개선되고flexGrow속성이 추가되었습니다.이전의 중첩된 구조(
Columns>Column>AlertDialogAction)에서 더 평평한 구조(HStack>AlertDialogAction)로 변경되었습니다. 또한 각ActionButton에flexGrow={1}프롭이 추가되어:
- 레이아웃 구조가 단순화되고 더 명확해짐
flexGrow속성을 통해 버튼이 가용 공간을 균등하게 차지하도록 함- 레이아웃 관련 스타일이 버튼 컴포넌트로 직접 이동됨
이러한 변경으로 사용자 인터페이스의 일관성이 향상되고 버튼 배치가 더 균형 있게 표시됩니다.
docs/components/example/inline-preview.tsx (2)
3-5:Inline컴포넌트가 더 이상 사용되지 않음을 표시했습니다.JSDoc 주석을 통해
Inline컴포넌트가 더 이상 사용되지 않으며, 대신HStack을 사용할 것을 권장한다고 명확하게 표시했습니다. 이는 새로운 레이아웃 시스템으로의 마이그레이션을 돕는 중요한 문서화 조치입니다.
8-9: 스타일 프롭 이름이 단축형으로 변경되었습니다.기존의 긴 형태의 프롭 이름에서 단축형으로 변경되었습니다:
background→bgpaddingX→pxpaddingY→py이러한 변경은 코드 일관성을 향상시키고 더 간결한 스타일링 패턴을 제공합니다. 또한 다른 UI 라이브러리의 일반적인 관례와도 일치합니다.
Also applies to: 12-12, 15-15
docs/components/example/inline-banner-positive-weak.tsx (1)
2-2: Stack에서 VStack으로 마이그레이션이 잘 진행되었습니다.기존
Stack컴포넌트에서 새로운VStack컴포넌트로의 변경이 적절하게 이루어졌으며, 기존 레이아웃 속성(gap="x4", width="full")이 보존되었습니다. 이 변경은 PR 목표와 일치하며 더 명확한 레이아웃 의도를 표현합니다.Also applies to: 11-11, 27-27
docs/components/example/callout-text-only.tsx (1)
1-1: VStack으로의 마이그레이션이 일관되게 적용되었습니다.
Stack컴포넌트에서 의미적으로 더 명확한VStack컴포넌트로의 변경이 올바르게 수행되었습니다. 수직 방향 스택의 의도가 명확해졌으며, 기존의 간격과 너비 속성이 그대로 유지되고 있습니다.Also applies to: 6-6, 10-10
docs/components/example/manner-temp-badge-preview.tsx (1)
1-1: VStack 컴포넌트로 마이그레이션 완료.
Stack에서VStack으로의 변경이 일관성 있게 적용되었습니다. 이 변경으로 수직 스택의 의도가 더 명확해졌으며, 기존gap="x1"속성도 제대로 유지되고 있습니다.Also applies to: 6-6, 13-13
packages/qvism-preset/src/recipes/action-button.ts (1)
23-24: ActionButton의 flexGrow 제어 기능 추가가 적절합니다.CSS 변수
--seed-box-flex-grow를 도입하여 ActionButton의 flex-grow 동작을 유연하게 제어할 수 있게 되었습니다. 이 변경으로 ActionButton 컴포넌트가 flexbox 레이아웃 내에서 더 다양한 방식으로 배치될 수 있으며, 특히 HStack 내에서 균등하게 확장되어야 하는 상황에서 유용할 것입니다.docs/components/example/columns-preview.tsx (3)
3-5: 적절한 deprecation 알림 추가됨컴포넌트에 deprecation 알림을 추가하여
HStack으로 마이그레이션하도록 안내하는 것이 좋습니다.
8-9: 간결한 props 네이밍 적용
background→bg,paddingX/paddingY→px/py로 변경하여 일관된 shorthand props를 사용한 것이 좋습니다.
12-15: 간결한 props 네이밍 적용두 개의 Column 컴포넌트에도 일관되게 shorthand props를 적용했습니다.
docs/components/example/demo/components/article-author.tsx (3)
4-4: Inline 대신 HStack 사용deprecated된
Inline컴포넌트 대신 새로운HStack컴포넌트를 import하도록 변경했습니다.
8-8: 새로운 컴포넌트 및 속성 적용
Inline대신HStack을 사용하고,alignItems="center"대신 간결한align="center"로 변경했습니다. 또한flexGrow={1}속성이 추가되었는데, 이로 인해 컴포넌트가 가능한 공간을 모두 차지하게 됩니다.
17-17: 닫는 태그 업데이트
Inline의 닫는 태그를HStack으로 일관되게 변경했습니다.docs/components/example/inline-banner-with-title-text.tsx (2)
1-1: Stack 대신 VStack 사용deprecated된
Stack컴포넌트 대신 새로운VStack컴포넌트를 import하도록 변경했습니다.
10-10: VStack 적용
Stack대신VStack을 사용하되, 기존의gap="x4"및width="full"속성은 그대로 유지했습니다. 이는 수직 방향 스택임을 명시적으로 보여주는 좋은 변경입니다.Also applies to: 14-14
examples/stackflow-spa/src/activities/ActivityPartialDarkMode.tsx (2)
13-13: Stack 대신 VStack 사용deprecated된
Stack컴포넌트 대신 새로운VStack컴포넌트를 import하도록 변경했습니다.
34-34: 간결한 props 네이밍 적용모든 Box 컴포넌트에서
background→bg,padding→p로 변경하여 일관된 shorthand props를 사용했습니다.Also applies to: 37-37, 40-40
docs/components/example/text-field-suffix.tsx (2)
2-2:Columns대신HStack컴포넌트로 변경되었습니다.레이아웃 구성을 위한 새로운 접근 방식에 맞게 임포트가 업데이트되었습니다. 이전의
Columns/Column컴포넌트 대신 간소화된HStack컴포넌트를 사용하는 것은 좋은 변경입니다.
7-14: 레이아웃 구조가HStack으로 간소화되었습니다.복잡한 중첩 구조(
Columns/Column) 대신 더 직관적인HStack을 사용하여 동일한 레이아웃을 구현했습니다. 이 변경은 JSX 구조를 간소화하고 가독성을 향상시킵니다. 두TextField컴포넌트가 직접HStack안에 배치되어 코드가 더 깔끔해졌습니다.packages/react/src/components/Inline/Inline.tsx (3)
4-6:InlineProps인터페이스에 대체 컴포넌트 안내 추가
InlineProps인터페이스에 적절한 JSDoc 주석을 통해 이 컴포넌트가 더 이상 사용되지 않음을 명확히 표시하고, 대신HStack을 사용하도록 안내하는 것은 좋은 개선입니다.
9-11:Inline컴포넌트에 대체 컴포넌트 안내 추가
Inline컴포넌트 자체에도 더 이상 사용되지 않음을 명확히 표시하고, 대체 컴포넌트를 안내하는 주석이 추가되었습니다. 사용자가 새로운 API로 마이그레이션하는 데 도움이 됩니다.
19-20: CSS 값 형식을 표준 CSS 형식으로 수정camelCase 형식의
"flexStart"에서 표준 CSS 형식인"flex-start"로 값이 변경되었습니다. 이는 CSS 명세에 맞게 올바른 값을 사용하도록 수정한 것으로, 웹 표준을 준수하고 예상치 못한 스타일 문제를 방지합니다.docs/components/example/v-stack-preview.tsx (1)
1-17: 새로운VStack컴포넌트 사용 예제 추가새로운
VStack컴포넌트의 사용법을 보여주는 예제가 잘 구현되었습니다. 세 개의Box컴포넌트를 수직으로 쌓는 레이아웃을 명확하게 보여주며, 배경, 간격, 너비, 모서리 둥글기 등 다양한 스타일 속성을 적절히 활용하고 있습니다. 이 예제는 사용자가 새로운VStack컴포넌트를 쉽게 이해하고 적용할 수 있도록 도움을 줍니다.docs/components/example/snackbar-avoid-overlap.tsx (3)
1-1:VStack컴포넌트 임포트 추가기존
Flex컴포넌트와 함께 새로운VStack컴포넌트를 임포트하여 수직 스택 레이아웃을 더 명시적으로 구현할 수 있게 되었습니다.
14-14: 레이아웃 구조를 의미가 명확한VStack으로 개선
Flex direction="column"대신 더 명시적인VStack을 사용하여 수직 스택 레이아웃의 의도를 더 명확하게 표현했습니다. 이는 코드의 가독성과 유지보수성을 향상시키는 좋은 개선입니다.Also applies to: 31-31
27-27: 스타일 속성을 간결한 축약형으로 개선
background,justifyContent,alignItems같은 긴 속성명 대신bg,justify,align과 같은 축약형 속성을 사용하여 코드를 더 간결하게 만들었습니다. 이렇게 하면 JSX가 더 읽기 쉬워지고 일관된 스타일 API를 유지할 수 있습니다.docs/components/example/alert-dialog-preview.tsx (1)
27-38: 이전 레이아웃에서 새로운 HStack으로의 성공적인 마이그레이션기존의 Columns/Column 구조에서 새로운 HStack 컴포넌트로 마이그레이션이 잘 이루어졌습니다. ActionButton에 flexGrow={1} 속성을 추가하여 각 버튼이 가용 공간을 균등하게 차지하도록 한 점이 좋습니다.
docs/components/example/h-stack-preview.tsx (1)
1-17: HStack 컴포넌트 사용 예시 구현 완료새로 도입된 HStack 컴포넌트의 사용법을 잘 보여주는 예제가 구현되었습니다. 가로 방향 레이아웃을 명확하게 표현하고, 간격(gap), 너비(width), 배경색(bg), 테두리 반경(borderRadius) 등의 속성을 적절히 활용하고 있습니다.
docs/components/example/radio-select-box-react-hook-form.tsx (4)
1-1: 새로운 레이아웃 컴포넌트로 임포트 업데이트Stack, Columns 대신 더 명시적인 VStack과 HStack을 임포트하도록 변경되었습니다.
이는 PR 목표에 맞게 레이아웃 컴포넌트를 명확히 구분하는 접근 방식입니다.
34-34: Stack에서 VStack으로 성공적인 마이그레이션폼 컨테이너의 Stack을 VStack으로 변경하여 수직 스택 레이아웃임을 명확히 했습니다.
36-41: 내부 컨테이너의 수직 스택 마이그레이션라디오 아이템 그룹의 Stack을 VStack으로 변경하여 수직 레이아웃임을 명확히 했습니다.
42-56: 버튼 그룹의 레이아웃 개선기존의 복잡한 Columns/Column 구조에서 간결한 HStack으로 변경되었습니다. 제출 버튼에 flexGrow={1} 속성을 추가하여 더 넓은 영역을 차지하도록 한 점이 UI/UX 측면에서 좋은 개선입니다.
docs/components/example/text-field-both-affixes.tsx (2)
2-2: 임포트 문 업데이트Columns, Column 대신 새로운 HStack 컴포넌트를 임포트하도록 변경되었습니다.
7-19: TextField 레이아웃 구조 개선복잡한 Columns/Column 중첩 구조에서 더 간결한 HStack으로 변경되었습니다. TextField 컴포넌트들이 직접 HStack 내에 배치되어 코드 가독성이 향상되었습니다. 원래의 width="full"과 gap="x3" 속성은 유지되어 기존 레이아웃 모양은 동일하게 유지됩니다.
docs/components/example/text-field-disabled.tsx (2)
1-1:HStack컴포넌트로의 마이그레이션 적절히 이루어졌습니다.기존의
Columns/Column컴포넌트 대신 새로운HStack컴포넌트를 임포트하여 사용하는 것으로 변경되었습니다. 이는 PR의 목표인 레이아웃 컴포넌트 개선에 부합합니다.
6-19: 레이아웃 구조가 효과적으로 단순화되었습니다.기존의 중첩된
Columns/Column구조에서 단일HStack컴포넌트로 변경함으로써 코드가 더 간결해졌습니다. 두TextField컴포넌트가 직접HStack의 자식으로 배치되어 불필요한 중첩 구조가 제거되었습니다. 너비와 간격 속성이 그대로 유지되어 레이아웃의 일관성도 유지됩니다.docs/registry/ui/error-state.tsx (4)
3-3:VStack컴포넌트로의 마이그레이션이 적절히 이루어졌습니다.기존의
Box와Stack컴포넌트 대신 의미적으로 더 명확한VStack컴포넌트를 임포트하여 사용하는 것으로 변경되었습니다. 이는 PR의 목표인 레이아웃 컴포넌트 개선에 부합합니다.
55-64: 단축 속성(shorthand props)을 효과적으로 활용하였습니다.기존의 명시적인 flexbox 스타일 속성들(
display,flexDirection,justifyContent,alignItems)이 새로운 단축 속성(justify,align,px,bg)으로 대체되었습니다. 이는 코드를 더 간결하게 만들고 일관된 API를 제공합니다.
66-81: 중첩된Stack이VStack으로 적절하게 변경되었습니다.내부 컨테이너도 새로운
VStack컴포넌트로 일관되게 변경되었습니다. 컴포넌트의 기능적 동작은 유지하면서 새로운 디자인 시스템 패턴을 따릅니다.
83-97: 또 다른 중첩된Stack이VStack으로 적절하게 변경되었습니다.하단 액션 버튼을 포함하는 컨테이너도 새로운
VStack컴포넌트로 일관되게 변경되었습니다. 단축 속성align="center"을 사용하여 가독성이 향상되었습니다.docs/components/example/text-field-read-only.tsx (2)
1-1:HStack컴포넌트로의 마이그레이션 적절히 이루어졌습니다.기존의
Columns/Column컴포넌트 대신 새로운HStack컴포넌트를 임포트하여 사용하는 것으로 변경되었습니다. 이는 PR의 목표인 레이아웃 컴포넌트 개선에 부합합니다.
6-19: 레이아웃 구조가 효과적으로 단순화되었습니다.기존의 중첩된
Columns/Column구조에서 단일HStack컴포넌트로 변경함으로써 코드가 더 간결해졌습니다. 두TextField컴포넌트가 직접HStack의 자식으로 배치되어 불필요한 중첩 구조가 제거되었습니다. 너비와 간격 속성이 그대로 유지되어 레이아웃의 일관성도 유지됩니다.docs/components/example/alert-dialog-neutral.tsx (2)
1-1:HStack컴포넌트로의 마이그레이션 적절히 이루어졌습니다.기존의
Columns/Column컴포넌트 대신 새로운HStack컴포넌트를 임포트하여 사용하는 것으로 변경되었습니다. 이는 PR의 목표인 레이아웃 컴포넌트 개선에 부합합니다.
27-38: 버튼 레이아웃이 효과적으로 개선되었습니다.기존의 중첩된
Columns/Column구조에서 단일HStack컴포넌트로 변경함으로써 코드가 더 간결해졌습니다. 두AlertDialogAction컴포넌트가 직접HStack의 자식으로 배치되어 불필요한 중첩 구조가 제거되었습니다.또한 각
ActionButton에flexGrow={1}속성이 추가되어 버튼이 가용 공간을 균등하게 차지하도록 개선되었습니다. 이는 PR 목표 중 하나인ActionButton컴포넌트에flexGrow속성 추가와 일치합니다.packages/css/all.css (1)
810-813: flexGrow 속성 지원을 위한 CSS 변수 추가ActionButton 컴포넌트에 flexGrow 속성을 지원하기 위한 CSS 변수와 스타일 적용이 잘 구현되었습니다. CSS 변수 패턴이 기존 코드베이스의 스타일과 일관성 있게 작성되었습니다.
docs/content/react/components/(layout)/h-stack.mdx (3)
1-14: HStack 컴포넌트 문서화 잘 되었습니다HStack 컴포넌트에 대한 기본적인 문서 구조가 잘 작성되었습니다. 제목, 설명, 예제 코드 참조가 모두 적절하게 포함되어 있습니다.
16-24: Usage 섹션 명확하게 작성됨Import 문과 기본 사용법이 간결하고 명확하게 작성되었습니다.
26-28: Props 섹션이 자동 생성되도록 잘 구성됨Props 테이블이 소스 코드에서 자동으로 생성되도록 설정되어 있어 문서의 일관성과 유지보수성이 확보됩니다.
packages/react/src/components/Columns/Columns.tsx (2)
4-6: 적절한 deprecated 태그 추가Columns와 Column 컴포넌트에 대해
@deprecatedJSDoc 태그를 통해 명확하게 HStack으로 대체해야 함을 안내하고 있습니다. 이는 사용자들이 새로운 컴포넌트로 마이그레이션하도록 올바르게 안내합니다.Also applies to: 9-11, 25-27, 32-34
19-19: CSS 값 표준화
justifyContent속성값을 camelCase인 "flexStart"에서 CSS 표준 kebab-case인 "flex-start"로 수정한 것은 올바른 접근입니다. 이는 PR 목표와 일치하게 CSS 값을 표준화하는 작업입니다.docs/components/example/multiline-text-field-enabled.tsx (2)
1-1: 적절한 import 수정Columns/Column 대신 HStack을 import 하도록 변경되었습니다.
6-18: 레이아웃 구조 개선기존의 중첩된 Columns/Column 구조 대신 HStack을 사용하여 레이아웃을 더 간결하고 명확하게 구성했습니다. width와 gap 속성을 통해 적절한 간격과 너비 제어가 가능해졌습니다.
packages/react/src/components/Stack/index.ts (1)
1-8: VStack와 HStack 컴포넌트 추가가 적절하게 이루어졌습니다.새로운 VStack, HStack 컴포넌트와 해당 타입들이 기존 Stack 컴포넌트와 함께 적절하게 내보내기 되었습니다. 이는 PR의 목적인 보다 명시적인 레이아웃 컴포넌트 도입에 부합합니다.
docs/content/react/components/(layout)/v-stack.mdx (4)
1-4: 문서 제목과 설명이 명확합니다.VStack 컴포넌트의 제목과 설명이 목적에 맞게 잘 작성되었습니다. 세로 레이아웃 구성과 디자인 토큰을 JSX에서 사용하는 점을 명확히 언급하고 있습니다.
6-13: 예제 컴포넌트가 잘 포함되었습니다.v-stack-preview 예제 컴포넌트가 적절하게 참조되어 있어 사용자가 실제 사용법을 확인할 수 있습니다.
16-24: 사용법이 명확하게 제시되었습니다.임포트 방법과 기본 사용법이 간결하게 제시되어 있습니다.
26-28: Props 문서화가 적절합니다.VStackProps 타입에서 자동 생성되는 Props 테이블을 포함시켜 사용자가 사용 가능한 모든 속성을 확인할 수 있게 했습니다.
docs/components/example/skeleton-preview.tsx (2)
1-1: VStack 임포트로 변경 적용기존 Flex 대신 VStack 컴포넌트를 적절하게 임포트하여 레이아웃 컴포넌트 개선 목적에 부합합니다.
5-11: 레이아웃 구조가 VStack으로 일관되게 변경되었습니다.기존 Flex 컴포넌트를 VStack으로 대체하고, 속성들도 새로운 네이밍 컨벤션(align="center" 등)을 따르도록 적절하게 수정되었습니다. 중첩된 레이아웃도 일관되게 VStack을 사용하여 구성하고 있습니다.
docs/components/example/multiline-text-field-read-only.tsx (2)
1-1: HStack 임포트 적용Column/Columns 대신 HStack 컴포넌트를 임포트하여 새로운 레이아웃 시스템으로의 전환이 잘 이루어졌습니다.
6-19: 레이아웃 구조 간소화기존의 복잡한 Columns/Column 중첩 구조에서 단일 HStack으로 레이아웃을 간소화했습니다. TextField 컴포넌트들이 직접 HStack 내에 배치되어 코드가 더 깔끔해졌으며, 기존 속성(width="full", gap="x3")은 유지되어 일관된 UI를 제공합니다.
docs/components/example/check-select-box-react-hook-form.tsx (4)
1-1: 컴포넌트 임포트가 적절하게 업데이트되었습니다.레이아웃 컴포넌트가
Stack,Columns,Column에서 새로운VStack과HStack으로 대체되었습니다. 이는 더 직관적인 레이아웃 패턴을 제공합니다.
33-33: 수직 스택 레이아웃이 적절하게 업데이트되었습니다.기존의
Stack컴포넌트가 의미가 더 명확한VStack으로 변경되었습니다.
35-35: 체크박스 그룹 래퍼가 적절하게 업데이트되었습니다.체크박스를 감싸는 컴포넌트가
Stack에서VStack으로 변경되어 수직 정렬 의도가 더 명확해졌습니다.Also applies to: 52-52
54-64: 버튼 레이아웃이 개선되었습니다.버튼 그룹이
Columns와 중첩된Column대신 단일HStack으로 변경되어 더 간결하고 명확한 구조를 제공합니다. 제출 버튼에flexGrow={1}속성이 추가되어 수평 스택 내에서 확장됩니다.packages/react/src/components/ActionButton/ActionButton.tsx (4)
14-14: 스타일 유틸리티를 적절하게 임포트했습니다.스타일 속성 처리를 위해
useStyleProps와StyleProps타입을 임포트했습니다.
20-20: ActionButton 컴포넌트의 인터페이스가 확장되었습니다.
StyleProps에서flexGrow속성을 가져와ActionButton에서 사용할 수 있도록 타입이 확장되었습니다. 이는 레이아웃 컴포넌트 내에서 버튼 크기 조정을 더 유연하게 만듭니다.
30-30: 스타일 속성이 모듈화되었습니다.
useStyleProps훅을 사용하여 스타일 관련 속성과 기타 속성을 분리함으로써 코드의 가독성과 유지보수성이 향상됩니다.
44-44: 스타일 및 기타 속성이 적절하게 적용되었습니다.
style객체가 버튼 요소에 직접 적용되고, 나머지 비스타일 속성들은restProps를 통해 전달됩니다. 이는 코드의 일관성과 명확성을 개선합니다.Also applies to: 46-46
docs/components/example/text-field-react-hook-form.tsx (4)
1-1: 컴포넌트 임포트가 적절하게 업데이트되었습니다.레이아웃 컴포넌트가
Stack,Columns,Column에서 새로운VStack과HStack으로 대체되었습니다.
52-52: 폼 컨테이너가 명확한 수직 스택으로 업데이트되었습니다.기존의
Stack컴포넌트가 의미가 더 명확한VStack으로 변경되었습니다.
53-78: 입력 필드 레이아웃이 개선되었습니다.두 입력 필드("이름"과 "주소")가 별도의 열 대신 단일
HStack내에 나란히 배치되어 코드가 더 간결해졌습니다.
79-86: 버튼 그룹 레이아웃이 개선되었습니다.버튼 그룹이
Columns와 중첩된Column대신 단일HStack으로 변경되었습니다. 제출 버튼에flexGrow={1}속성이 추가되어 수평 스택 내에서 확장됩니다.docs/components/example/checkbox-react-hook-form.tsx (4)
1-1: 컴포넌트 임포트가 적절하게 업데이트되었습니다.레이아웃 컴포넌트가
Stack,Columns,Column에서 새로운VStack과HStack으로 대체되었습니다.
33-33: 폼 컨테이너가 명확한 수직 스택으로 업데이트되었습니다.기존의
Stack컴포넌트가 의미가 더 명확한VStack으로 변경되었습니다.
34-34: 체크박스 리스트 래퍼가 적절하게 업데이트되었습니다.체크박스 목록을 감싸는 컴포넌트가
Stack에서VStack으로 변경되어 수직 정렬 의도가 더 명확해졌습니다.Also applies to: 50-50
51-66: 버튼 레이아웃이 개선되었습니다.버튼 그룹이
Columns와 중첩된Column대신 단일HStack으로 변경되었습니다. "mango 선택"과 "제출" 버튼 모두에flexGrow={1}속성이 추가되어 수평 스택 내에서 균등하게 확장됩니다.docs/content/react/get-started/migration/improvements.mdx (3)
582-583: 레이아웃 컴포넌트 업데이트된 임포트 구문이 추가되었습니다.새로운 레이아웃 컴포넌트인
VStack과HStack이 소개되었으며, 기존의Stack,Inline,Columns를 대체합니다. 이러한 변경은 시맨틱한 네이밍을 통해 코드의 가독성을 향상시킵니다.
586-589: 새로운 레이아웃 컴포넌트에 대한 설명이 업데이트되었습니다.
Flex: 명확한 설명으로 업데이트VStack: 수직 방향으로 요소를 쌓는 새로운 컴포넌트HStack: 수평 방향으로 요소를 쌓는 새로운 컴포넌트이러한 변경은 개발자에게 더 직관적인 레이아웃 컴포넌트 선택을 제공합니다.
591-592: 새로운 레이아웃 컴포넌트에 대한 문서 링크가 추가되었습니다.
VStack과HStack컴포넌트의 문서 페이지로 연결되는 링크가 적절히 추가되었습니다.examples/stackflow-spa/src/seed-design/ui/error-state.tsx (4)
3-3: import 구문이 새로운 레이아웃 컴포넌트를 반영하도록 업데이트되었습니다.기존
Stack대신 더 명확한 시맨틱을 가진VStack을 사용하도록 import 구문이 변경되었습니다.
54-63: 메인 컨테이너가 VStack으로 업데이트되었고 간결한 속성명을 사용합니다.기존
Box/Stack컴포넌트에서VStack으로 변경되었으며, 더 간결한 속성명을 사용합니다:
justify="center"(기존justifyContent="center")align="center"(기존alignItems="center")px="x14"(기존paddingX="x14")bg={bg[variant]}(기존background={bg[variant]})이러한 변경은 코드의 간결성과 일관성을 향상시킵니다.
65-76: 내부 스택 컴포넌트가 VStack으로 업데이트되었습니다.타이틀과 설명을 포함하는 내부 컨테이너가
VStack으로 변경되었습니다. 이는 수직 방향으로 요소를 배치하는 시맨틱을 명확히 합니다.
78-89: 액션 버튼 컨테이너가 VStack으로 업데이트되었습니다.기본 및 보조 액션 버튼을 포함하는 컨테이너가
VStack으로 변경되었습니다. 이는 버튼들을 수직으로 배치한다는 의도를 명확히 전달합니다.docs/components/example/demo/tabs/recommendations.tsx (5)
4-4: 레이아웃 컴포넌트 임포트가 업데이트되었습니다.기존
Stack,Inline대신 새로운HStack과VStack컴포넌트를 사용하도록 임포트 구문이 변경되었습니다.
80-80: 메인 컨테이너가 VStack으로 변경되었습니다.기존
Stack컴포넌트 대신 명확한 수직 레이아웃을 위한VStack으로 변경되었으며, 간결한 패딩 속성(pt,pb)을 사용합니다.
85-85: Flex 컴포넌트의 패딩 속성이 축약형으로 업데이트되었습니다.기존
paddingX대신 더 간결한px속성을 사용하도록 변경되었습니다.
128-136: 아티클 리스트 컨테이너가 VStack으로 변경되었습니다.기존
Stack에서VStack으로 변경되어 수직 레이아웃의 의도가 더 명확해졌습니다.
167-183: 필터 칩 컨테이너가 HStack으로 변경되었습니다.기존
Inline컴포넌트에서HStack으로 변경되었으며,wrap속성을 사용하여 필요시 줄바꿈이 되도록 유지했습니다.docs/components/example/multiline-text-field-react-hook-form.tsx (4)
1-1: 레이아웃 컴포넌트 임포트가 업데이트되었습니다.기존
Stack,Columns,Column대신 새로운HStack과VStack컴포넌트를 사용하도록 임포트 구문이 변경되었습니다.
63-63: 폼 컨테이너가 VStack으로 변경되었습니다.기존
Stack대신VStack을 사용하여 폼 요소들이 수직으로 배치됩니다.
64-89: 텍스트 필드 컨테이너가 HStack으로 변경되었습니다.기존
Columns와Column구조에서 더 간결한HStack으로 변경되었습니다. 두 개의 텍스트 필드가 수평으로 나란히 배치됩니다.
90-97: 액션 버튼 컨테이너가 HStack으로 변경되고 flexGrow가 추가되었습니다.기존 컬럼 기반 레이아웃에서
HStack으로 변경되었으며, 제출 버튼에flexGrow={1}속성이 추가되어 사용 가능한 공간을 확장하도록 설정되었습니다.docs/components/example/text-field-form.tsx (2)
1-1: 레이아웃 컴포넌트 업데이트 적용 확인
Stack,Columns,Column대신 새로운VStack과HStack컴포넌트로 변경한 것이 확인됩니다. 이는 PR의 목적에 맞게 잘 수정되었습니다.
82-116: 폼 레이아웃 구조 개선이 잘 적용되었습니다.기존의 복잡한 중첩 구조(
Stack,Columns,Column)에서 더 명확하고 직관적인VStack과HStack구조로 변경되었습니다. 레이아웃 의도가 코드에서 더 명확하게 드러나며,flexGrow={1}을 제출 버튼에 적용하여 비율 조정도 적절히 이루어졌습니다.docs/components/example/demo/components/article-list-item.tsx (3)
17-24: 레이아웃 shorthand prop 적용이 잘 되었습니다.
paddingX,paddingY대신px,py축약형 속성으로 변경한 것이 PR 목적에 맞게 잘 수정되었습니다.
25-27: CSS 값 표기법 변경이 잘 적용되었습니다.camelCase 형태의
spaceBetween값이 표준 CSS 값인space-between으로 변경되었습니다. 이는 PR 목적에 맞는 적절한 변경입니다.
28-47: 중첩 레이아웃 컴포넌트의 변경이 잘 적용되었습니다.기존의
Stack,Inline대신 의미가 명확한VStack과HStack컴포넌트를 사용하여 레이아웃 의도가 코드에서 더 잘 드러납니다.docs/components/example/multiline-text-field-form.tsx (1)
1-1: 레이아웃 컴포넌트 업데이트 적용 확인
Stack,Columns,Column대신 새로운VStack과HStack컴포넌트로 변경한 것이 확인됩니다. 이는 PR의 목적에 맞게 잘 수정되었습니다..changeset/moody-planets-marry.md (1)
1-13: 변경 사항이 명확하게 문서화되었습니다.changeset 파일에 이번 PR의 주요 변경 사항들이 잘 정리되어 있습니다:
- 레이아웃 및 flex 관련 축약 prop 추가
- ActionButton에 flexGrow prop 추가
- VStack, HStack 컴포넌트 추가
- 기존 컴포넌트 deprecated 처리
- CSS 값 표기법 개선
문서화가 명확하게 되어 있어 변경 사항의 추적과 이해가 용이합니다.
docs/components/example/demo/article-detail.tsx (4)
11-11: 새로운 레이아웃 컴포넌트로 적절하게 업데이트되었습니다!
Stack,Columns,Column대신 더 명확한 의미의VStack과HStack을 가져오는 것으로 변경한 것이 좋습니다. 이 변경은 PR의 핵심 목표인 레이아웃 컴포넌트 개선과 일치합니다.
57-57: 중첩 레이아웃 구조가 더 명확해졌습니다.기존의 일반적인
Stack컴포넌트 대신VStack을 사용함으로써 컴포넌트의 목적이 더 명확해졌습니다. 또한paddingX와 같은 긴 prop 이름 대신px와 같은 축약형을 사용하여 코드의 가독성도 향상되었습니다.Also applies to: 67-68
74-92: 수직 및 수평 레이아웃 구조가 개선되었습니다.기존의
Stack과Columns/Column구조 대신VStack과HStack을 사용하여 레이아웃 의도가 더 명확해졌습니다. 특히 저자 정보와 메타데이터를 배치하는 방식이 단순화되어 중첩 수준이 감소했습니다.
94-119: 일관된 스타일링 prop 사용으로 가독성이 향상되었습니다.모든 레이아웃 컴포넌트에서 일관된 축약형 prop(
px,py,pb등)을 사용하고 있어 코드의 가독성이 향상되었습니다. 또한Box의padding이py로 변경되어 다른 컴포넌트와 일관성이 유지되었습니다.examples/stackflow-spa/src/activities/ActivityCodegenTest.tsx (4)
7-7: 새로운 레이아웃 컴포넌트로 적절하게 업데이트되었습니다!
VStack과HStack을 가져오는 것으로 변경하여, 더 명확하고 의미 있는 컴포넌트를 사용할 수 있게 되었습니다. 이 변경은 PR의 핵심 목표인 레이아웃 컴포넌트 개선과 일치합니다.
16-19: 레이아웃 스타일링이 더 명확해졌습니다.
VStack과HStack을 사용하고 축약형 prop(bg,align,p,justify,grow)을 적용하여 코드의 가독성과 일관성이 향상되었습니다. 특히growprop은 레이아웃 조정에 유용한 추가 기능입니다.
22-46: 중첩 레이아웃 구조가 명확하게 개선되었습니다.기존의 중첩된 레이아웃 컴포넌트를
VStack과HStack으로 일관되게 변경하여 코드의 가독성이 향상되었습니다. 또한 축약형 prop(gap,pr,grow,align)을 사용하여 스타일링 일관성이 유지되었습니다.
47-75: 수평 정렬과 래핑 기능이 개선되었습니다.
HStack의wrap={true}prop을 사용하여 내용이 화면 크기에 따라 자연스럽게 줄바꿈될 수 있도록 했습니다. 또한align="center"를 일관되게 적용하여 수직 정렬이 잘 유지되도록 했습니다.examples/stackflow-spa/src/activities/ActivitySwipeableTabs.tsx (4)
1-1: 새로운 레이아웃 컴포넌트로 적절하게 업데이트되었습니다!
VStack과HStack을 가져오는 것으로 변경하여, 더 명확하고 의미 있는 컴포넌트를 사용할 수 있게 되었습니다. 이는 PR의 목표인 레이아웃 컴포넌트 개선과 일치합니다.
40-52: 탭 콘텐츠 레이아웃이 개선되었습니다.두 탭의 콘텐츠 컨테이너가 일관되게
VStack으로 변경되었습니다. 이로써 수직 스택의 의도가 더 명확해지고 코드의 일관성이 향상되었습니다.Also applies to: 56-68
78-84: Feed 컴포넌트의 레이아웃 구조가 개선되었습니다.
Feed컴포넌트가VStack으로 변경되고, 패딩 prop이 축약형(px,py)으로 업데이트되었습니다. 이로써 코드의 가독성과 일관성이 향상되었습니다.
85-99: 중첩 레이아웃 구조가 명확하게 개선되었습니다.
Feed컴포넌트 내부의 중첩된 레이아웃이VStack과HStack으로 일관되게 변경되었습니다. 이로써 수직 및 수평 배치의 의도가 더 명확해졌고,align="center"와gapprop을 통해 일관된 정렬과 간격이 유지되었습니다.docs/public/__registry__/ui/error-state.json (1)
13-13: ErrorState 컴포넌트가 새 레이아웃 시스템으로 적절하게 업데이트되었습니다.
Box와Stack대신VStack을 사용하도록 컴포넌트가 리팩토링되었습니다. 또한 레이아웃 관련 prop들이 새로운 축약형 API(justify,align,gap,px,bg,height,flexGrow)를 사용하도록 업데이트되었습니다. 이 변경은 디자인 시스템의 일관성을 유지하면서 컴포넌트 인터페이스를 단순화합니다.packages/figma/src/codegen/targets/react/frame.ts (1)
23-33:directionprop 누락 시 잘못된 레이아웃 추론 가능성
inferLayoutComponent는props.direction값이"column"일 때만VStack을 선택합니다.
containerLayout()이 기본값인"row"에 대해서는direction을 반환하지 않는다면, 수평/수직 정보를layoutMode에서 바로 읽는 현재 로직(isFlex)과 불일치가 생길 수 있습니다.예) Figma 노드가
VERTICAL인데containerLayout()이direction: "column"을 생략하면,inferLayoutComponent는"HStack"을 리턴하게 됩니다.
layoutMode를 직접 사용하거나,containerLayout()이 항상direction을 반환하도록 보장해 주는 쪽으로 한 번 더 확인 부탁드립니다.packages/react/src/utils/styled.tsx (1)
409-416: Shorthand 우선순위가 코드에 명확히 드러납니다 – Good!
padding계열 값을full → shorthand → longhand우선순위로 합성해 CSS 변수에 넣은 접근은 예상 가능한 동작을 제공합니다.
유지보수성 측면에서도 👍🏻 입니다.
Deploying seed-design-v3 with
|
| Latest commit: |
4973ace
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://26a14498.seed-design.pages.dev |
| Branch Preview URL: | https://shorthand-props.seed-design.pages.dev |
Summary by CodeRabbit
New Features
HStack,VStack컴포넌트가 추가되었습니다.px,py,wrap,align,justify,direction등 새로운 단축 속성이 도입되었습니다.ActionButton에flexGrow속성이 추가되어 버튼의 유연한 확장이 가능합니다.Bug Fixes
Refactor
Stack,Inline,Columns컴포넌트가 더 명확한 방향성의VStack,HStack으로 대체되었습니다.Documentation
Stack,Inline,Columns컴포넌트가 사용 중단(Deprecated)으로 명시되고, 대체 컴포넌트(VStack,HStack)의 문서와 예제가 추가되었습니다.Style
bg,p,px,py등)으로 변경되었습니다.Chores