SEED React 1 and older

SEED React 2 이전 버전 간 업그레이드 방법을 안내합니다. SEED React 1.2에서 2로 업그레이드하려면 SEED React 2 업그레이드 문서를 참고할 수 있으며, 신규 기능 등 전체 변경사항은 Changelog에서 확인할 수 있습니다.

0.2.0 Stroke 시맨틱 토큰 이름 개편

0.2 이전 버전에서 업그레이드하는 경우 아래 항목을 참고하여 사용하고 있는 stroke 색상 시맨틱 토큰을 사용하는 코드를 업데이트합니다. codemod로 일괄 변경하거나 표를 참고하여 직접 치환할 수 있습니다.

npx @seed-design/codemod@latest replace-semantic-stroke-color <target_path>

자세한 내용은 Available Transforms를 참고해주세요.

1.0으로 업그레이드하기

아래 컴포넌트의 snippet(권장 조합) 변경사항이 있으며, 이외 필요한 코드 변경은 없습니다.

npx @seed-design/cli@latest add-all --seed-react-version 1.0 --on-diff backup ui

• Snackbar: 레이아웃 변경
  • add ui:snackbar
• MannerTemp / MannerTempBadge: 신규 10단계 온도 범위를 반영합니다.
  • add ui:manner-temp ui:manner-temp-badge
  • level을 직접 지정하여 사용하는 코드가 있다면 온도별 범위가 의도에 맞게 표시되는지 확인이 필요합니다.
• SwitchMark / List Header 추가
  • add ui:switch, add ui:list

Snackbar/MannerTemp/MannerTempBadge를 @seed-design/react에서 직접 import해서 사용하는 코드가 있다면 신규 snippet 구성에 맞게 수정합니다.

1.0에서 1.1로 업그레이드하기

1. Page Banner 구성 변경

PageBanner.TextContent가 PageBanner.Content로 이름이 변경되었으며, Box로 스타일링하던 레이아웃을 PageBanner.Body로 교체합니다.

snippet 변경사항이 있어 다시 추가가 필요합니다. snippet 컴포넌트를 사용하는 코드의 변경은 불필요합니다. @seed-design/react에서 PageBanner를 직접 import해서 사용하는 코드가 있다면 신규 snippet 구성에 맞게 수정합니다.

npx @seed-design/cli@latest add --seed-react-version 1.1 --on-diff backup ui:page-banner

2. Text Field size="xlarge" 제거 및 Field 기반 snippet 제공

Text Field snippet 컴포넌트가 내부적으로 Field 컴포넌트를 사용하도록 정리합니다. onValueChange 시그니처를 ((value: string) => void) | undefined에서 ((values: { value: string; graphemes: string[]; slicedValue: string; slicedGraphemes: string[]; }) => void) | undefined로 변경합니다. snippet 변경사항이 있어 다시 추가가 필요합니다. @seed-design/react에서 TextField를 직접 import해서 사용하는 코드가 있다면 신규 snippet 구성에 맞게 수정합니다.

npx @seed-design/cli@latest add --seed-react-version 1.1 --on-diff backup ui:text-field

size="xlarge"가 제거되었습니다. size="large"(기본값)를 사용해주세요.

3. Bottom Sheet를 Drawer 기반으로 전환

Dialog 기반의 Bottom Sheet를 Drawer 기반으로 전환하여 swipe to dismiss 및 snap point 등의 기능을 추가합니다. snippet 변경사항이 있어 다시 추가가 필요합니다. @seed-design/react에서 BottomSheet를 직접 import해서 사용하는 코드가 있다면 신규 snippet 구성에 맞게 수정합니다.

npx @seed-design/cli@latest add --seed-react-version 1.1 --on-diff backup ui:bottom-sheet

snippet 컴포넌트 BottomSheetContent의 hideCloseButton(기본값: false)은 showCloseButton(기본값: true)으로 인터페이스가 변경되었습니다.

<BottomSheetContent hideCloseButton /> 
<BottomSheetContent showCloseButton={false} /> 

4. Error State snippet 변경

Error State snippet이 내부적으로 Action Button(variant="ghost")을 사용하도록 변경되어 다시 추가가 필요합니다.

npx @seed-design/cli@latest add --seed-react-version 1.1 --on-diff backup ui:error-state

snippet 컴포넌트 ErrorState의 secondaryActionProps 타입이 React.ButtonHTMLAttributes<HTMLButtonElement>에서 ActionButtonProps로 변경되었습니다. secondaryActionProps를 사용하는 코드가 있다면 신규 타입에 맞게 수정합니다.

1.1에서 1.2로 업그레이드하기

1. Help Bubble 레이아웃 변경

신규 HelpBubble.Body가 HelpBubble.Title과 HelpBubble.Description을 감싸도록 snippet이 업데이트되었습니다. HelpBubbleTrigger, HelpBubbleAnchor 등 snippet에서 export되는 컴포넌트를 사용하는 코드는 snippet을 다시 받는 것 외에 변경이 불필요합니다. @seed-design/react에서 HelpBubble을 직접 import해서 사용하는 코드가 있다면 신규 snippet 구성에 맞게 수정합니다.

npx @seed-design/cli@latest add --seed-react-version 1.2 --on-diff backup ui:help-bubble

2. MenuSheetItem 레이아웃 변경

MenuSheetItem snippet 컴포넌트에 description을 추가할 수 있도록 개선하며 레이아웃이 변경되었습니다. snippet 변경사항이 있어 다시 추가가 필요합니다. @seed-design/react에서 MenuSheetItem을 직접 import해서 사용하는 코드가 있다면 신규 snippet 구성에 맞게 수정합니다.

npx @seed-design/cli@latest add --seed-react-version 1.2 --on-diff backup ui:menu-sheet

snippet 컴포넌트 MenuSheetItem을 사용하는 코드에서 children 대신 label, <PrefixIcon /> 대신 prefixIcon prop을 사용해주세요.

-<MenuSheetItem>
-  <PrefixIcon svg={<IconHouseLine />} />
-  메뉴 항목
-</MenuSheetItem>;
+<MenuSheetItem prefixIcon={<IconHouseLine />} label="메뉴 항목" />;

3. Bottom Sheet 및 Menu Sheet가 기본적으로 safe area를 갖도록 수정

BottomSheet.Content와 MenuSheet.Content가 기본적으로 하단 safe area만큼 padding을 갖도록 수정합니다. 시트에 직접 safe area padding을 넣고 있었던 경우 제거합니다.

<BottomSheet.Content>
  <VStack paddingBottom="safeArea">...</VStack>
  <VStack>...</VStack>
</BottomSheet.Content>

4. Tag Group 레이아웃 변경

Tag Group Item의 레이아웃을 위해 snippet 컴포넌트를 신규로 제공합니다.

npx @seed-design/cli@latest add --seed-react-version 1.2 --on-diff backup ui:tag-group

@seed-design/react에서 import하는 Tag Group을 snippet(seed-design/ui/tag-group)에서 import하도록 교체하고, children 대신 label, PrefixIcon/SuffixIcon 대신 prefixIcon/suffixIcon prop을 사용해주세요.

import { TagGroupRoot, TagGroupItem } from "@seed-design/react"; 
import { TagGroupRoot, TagGroupItem } from "seed-design/ui/tag-group"; 

<TagGroupRoot>
  <TagGroupItem>
    <PrefixIcon svg={<IconLocationpinFill />} />
    서초4동
  </TagGroupItem>
  <TagGroupItem label="서초4동" prefixIcon={<IconLocationpinFill />} />
</TagGroupRoot>;

아이콘에만 다른 색상을 지정하는 등 커스터마이징이 필요한 경우 @seed-design/react의 TagGroup.Item과 TagGroup.ItemLabel을 병행해서 사용할 수 있습니다.

import { TagGroupRoot } from "seed-design/ui/tag-group";
import { TagGroup as SeedTagGroup } from "@seed-design/react";

<TagGroupRoot>
  {/* ... */}
  <SeedTagGroup.Item>
    <Icon svg={<IconMegaphoneFill />} color="fg.brand" />
    <SeedTagGroup.ItemLabel>광고</SeedTagGroup.ItemLabel>
  </SeedTagGroup.Item>
</TagGroupRoot>;

5. Select Box 레이아웃 변경

snippet 변경사항이 있어 다시 추가가 필요합니다. @seed-design/react에서 Select Box 관련 컴포넌트를 직접 import해서 사용하는 코드가 있다면 신규 snippet 구성에 맞게 수정합니다.

npx @seed-design/cli@latest add --seed-react-version 1.2 --on-diff backup ui:select-box

• CheckSelectBoxGroup / RadioSelectBoxRoot 컴포넌트를 기본적으로 gap이 포함된 그리드 레이아웃으로 변경합니다.
  • 자식을 묶던 VStack을 제거하여 CheckSelectBoxGroup 및 RadioSelectBoxRoot가 직접 아이템들을 감싸도록 변경합니다.
  • VStack에 gap 외 스타일이 있다면 VStack을 CheckSelectBoxGroup / RadioSelectBoxRoot 바깥에 남겨두어 레이아웃을 유지할 수 있습니다.
  • <VStack asChild><CheckSelectBoxGroup>...</CheckSelectBoxGroup></VStack>처럼 asChild로 VStack을 래핑하고 있을 수도 있으니 함께 확인합니다.
• Select Box 내부 Checkmark 또는 Radiomark가 자동으로 표시되지 않도록 변경됩니다.
  • CheckSelectBox / RadioSelectBoxItem에 suffix={<CheckSelectBoxCheckmark />} / suffix={<RadioSelectBoxRadiomark />}를 추가합니다.

import { VStack } from "@seed-design/react"; 
import { CheckSelectBoxGroup, CheckSelectBox } from "seed-design/ui/select-box"; 
import {
  CheckSelectBoxGroup, 
  CheckSelectBox, 
  CheckSelectBoxCheckmark, 
} from "seed-design/ui/select-box"; 

<CheckSelectBoxGroup>
  <VStack gap="spacingY.componentDefault">
    <CheckSelectBox label="옵션 1" />
    <CheckSelectBox label="옵션 2" />
  </VStack>
  <CheckSelectBox label="옵션 1" suffix={<CheckSelectBoxCheckmark />} /> //
  <CheckSelectBox label="옵션 2" suffix={<CheckSelectBoxCheckmark />} /> //
</CheckSelectBoxGroup>;

import { VStack } from "@seed-design/react"; 
import {
  RadioSelectBoxRoot, 
  RadioSelectBoxItem, 
} from "seed-design/ui/select-box"; 
import {
  RadioSelectBoxRoot, 
  RadioSelectBoxItem, 
  RadioSelectBoxRadiomark, 
} from "seed-design/ui/select-box"; 

<RadioSelectBoxRoot defaultValue="option1" aria-label="옵션 선택">
  <VStack gap="spacingY.componentDefault">
    <RadioSelectBoxItem value="option1" label="옵션 1" />
    <RadioSelectBoxItem value="option2" label="옵션 2" />
  </VStack>
  <RadioSelectBoxItem
    value="option1"
    label="옵션 1"
    suffix={<RadioSelectBoxRadiomark />}
  />
  <RadioSelectBoxItem
    value="option2"
    label="옵션 2"
    suffix={<RadioSelectBoxRadiomark />}
  />
</RadioSelectBoxRoot>;

6. Radio Group / Item 관련 변경사항

아래 3개 항목은 서로 영향을 줄 수 있으므로 순서대로 진행합니다.

Radio Item invalid prop 제거

RadioGroupItem, RadioChipItem, RadioSelectBoxItem, ListRadioItem에서 invalid prop을 제거합니다. data-invalid 기반으로 스타일링하는 코드가 있다면 확인이 필요합니다.

SwitchMark 및 RadioMark의 컴포넌트 이름 변경

snippet에서 export되는 이름이 변경되었습니다. snippet을 다시 받아 업데이트할 수 있습니다.

npx @seed-design/cli@latest add --on-diff backup ui:switch ui:radio-group

import { SwitchMark } from "seed-design/ui/switch"; 
import { Switchmark } from "seed-design/ui/switch"; 
import { RadioMark } from "seed-design/ui/radio-group"; 
import { Radiomark } from "seed-design/ui/radio-group"; 

RadioGroup 레이아웃 정리

RadioGroup 관련 snippet 컴포넌트의 레이아웃이 변경되어 다시 추가가 필요합니다. @seed-design/react에서 Radio Group 관련 컴포넌트를 직접 import해서 사용하는 코드가 있다면 신규 snippet 구성에 맞게 수정합니다.

npx @seed-design/cli@latest add --seed-react-version 1.2 --on-diff backup ui:radio-group

• snippet 컴포넌트 RadioGroup이 자체적으로 gap과 100% width를 갖도록 수정합니다.
  • 자식을 묶던 VStack을 제거해주세요.
  • VStack에 gap 외 스타일이 있다면 VStack을 RadioGroup 바깥에 남겨두어 레이아웃을 유지할 수 있습니다.
  • <VStack asChild><RadioGroup>...</RadioGroup></VStack>처럼 asChild로 VStack을 래핑하고 있을 수도 있으니 함께 확인합니다.
• @seed-design/react 컴포넌트 RadioGroup.Root가 radio 관련 동작을 다루지 않도록 수정하고, 자체 스타일이 추가되었습니다.
  • radio 관련 헤드리스 동작이 필요한 경우 @seed-design/react/primitive의 RadioGroup.Root를 사용합니다.

import { RadioGroup } from "@seed-design/react"; 
import { RadioGroup } from "@seed-design/react/primitive";