feat: segmented control 변경

docs/components/example/index.json

@@ -108,10 +108,10 @@
   "inline-banner-with-icon": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\nimport { IconILowercaseSerifCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerWithIcon() {\n  return (\n    <InlineBanner variant=\"informativeWeak\" icon={<IconILowercaseSerifCircleFill />}>\n      다른 사람과 예약된 물품이 있어요.\n    </InlineBanner>\n  );\n}",
   "inline-banner-with-link": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerWithLink() {\n  return (\n    <InlineBanner variant=\"informativeWeak\" link={{ label: \"자세히 보기\", onClick: () => {} }}>\n      다른 사람과 예약된 물품이 있어요.\n    </InlineBanner>\n  );\n}",
   "inline-banner-with-title-text": "import { InlineBanner } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerWithTitleText() {\n  return (\n    <InlineBanner variant=\"informativeWeak\" titleText=\"예약\">\n      다른 사람과 예약된 물품이 있어요.\n    </InlineBanner>\n  );\n}",
-  "segmented-control-fixed-width": "import { SegmentedControl, SegmentedControlOption } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlFixedWidth() {\n  return (\n    <SegmentedControl style={{ width: \"600px\" }}>\n      <SegmentedControlOption value=\"new\">New</SegmentedControlOption>\n      <SegmentedControlOption value=\"hot\">Hot</SegmentedControlOption>\n    </SegmentedControl>\n  );\n}",
-  "segmented-control-long-label-fixed-width": "import { SegmentedControl, SegmentedControlOption } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlLongLabelFixedWidth() {\n  return (\n    <SegmentedControl style={{ width: \"600px\" }}>\n      <SegmentedControlOption value=\"price\">가격 높은 순</SegmentedControlOption>\n      <SegmentedControlOption value=\"discount\">할인율 높은 순</SegmentedControlOption>\n      <SegmentedControlOption value=\"popularity\">인기 많은 순</SegmentedControlOption>\n    </SegmentedControl>\n  );\n}",
-  "segmented-control-long-label": "import { SegmentedControl, SegmentedControlOption } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlLongLabel() {\n  return (\n    <SegmentedControl>\n      <SegmentedControlOption value=\"price\">가격 높은 순</SegmentedControlOption>\n      <SegmentedControlOption value=\"discount\">할인율 높은 순</SegmentedControlOption>\n      <SegmentedControlOption value=\"popularity\">인기 많은 순</SegmentedControlOption>\n    </SegmentedControl>\n  );\n}",
-  "segmented-control-preview": "import { useState } from \"react\";\nimport { SegmentedControl, SegmentedControlOption } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlPreview() {\n  const options = [\"New\", \"Hot\"];\n  const [value, setValue] = useState(\"New\");\n\n  return (\n    <div className=\"flex flex-col gap-3 items-center text-center\">\n      <SegmentedControl value={value} defaultValue=\"New\" onValueChange={setValue}>\n        {options.map((option) => (\n          <SegmentedControlOption key={option} value={option}>\n            {option}\n          </SegmentedControlOption>\n        ))}\n      </SegmentedControl>\n      <div>Selected value: {value}</div>\n    </div>\n  );\n}",
+  "segmented-control-fixed-width": "import { SegmentedControl, SegmentedControlTrigger } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlFixedWidth() {\n  return (\n    <SegmentedControl style={{ width: \"600px\" }}>\n      <SegmentedControlTrigger value=\"new\">New</SegmentedControlTrigger>\n      <SegmentedControlTrigger value=\"hot\">Hot</SegmentedControlTrigger>\n    </SegmentedControl>\n  );\n}",
+  "segmented-control-long-label-fixed-width": "import { SegmentedControl, SegmentedControlTrigger } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlLongLabelFixedWidth() {\n  return (\n    <SegmentedControl style={{ width: \"600px\" }} defaultValue=\"price\">\n      <SegmentedControlTrigger value=\"price\">가격 높은 순</SegmentedControlTrigger>\n      <SegmentedControlTrigger value=\"discount\">할인율 높은 순</SegmentedControlTrigger>\n      <SegmentedControlTrigger value=\"popularity\">인기 많은 순</SegmentedControlTrigger>\n    </SegmentedControl>\n  );\n}",
+  "segmented-control-long-label": "import { SegmentedControl, SegmentedControlTrigger } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlLongLabel() {\n  return (\n    <SegmentedControl>\n      <SegmentedControlTrigger value=\"price\">가격 높은 순</SegmentedControlTrigger>\n      <SegmentedControlTrigger value=\"discount\">할인율 높은 순</SegmentedControlTrigger>\n      <SegmentedControlTrigger value=\"popularity\">인기 많은 순</SegmentedControlTrigger>\n    </SegmentedControl>\n  );\n}",
+  "segmented-control-preview": "import { useState } from \"react\";\nimport { SegmentedControl, SegmentedControlTrigger } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlPreview() {\n  const options = [\"New\", \"Hot\"];\n  const [value, setValue] = useState(\"New\");\n\n  return (\n    <div className=\"flex flex-col gap-3 items-center text-center\">\n      <SegmentedControl value={value} defaultValue=\"New\" onValueChange={setValue}>\n        {options.map((option) => (\n          <SegmentedControlTrigger key={option} value={option}>\n            {option}\n          </SegmentedControlTrigger>\n        ))}\n      </SegmentedControl>\n      <div>Selected value: {value}</div>\n    </div>\n  );\n}",
   "skeleton-wave-activity": "import type { ActivityComponentType } from \"@stackflow/react/future\";\nimport type * as React from \"react\";\n\nimport Layout from \"@/components/stackflow/ActivityLayout\";\nimport { Skeleton } from \"seed-design/ui/skeleton\";\nimport {\n  useSkeletonDuration,\n  useIsRealLoading,\n  useSkeletonLoading,\n  useSkeletonTimingFunction,\n  useSkeletonInitTransitionDuration,\n  useSkeletonGradient,\n} from \"@/stores/skeleton\";\n\ndeclare module \"@stackflow/config\" {\n  interface Register {\n    SkeletonWave: unknown;\n  }\n}\n\nconst Fallback = () => {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"12px\" }}>\n      <Skeleton width=\"100%\" height=\"300px\" borderRadius=\"square\" />\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"4px\" }}>\n        <Skeleton width=\"50px\" height=\"50px\" borderRadius=\"circle\" />\n        <Skeleton width=\"100%\" height=\"20px\" borderRadius=\"rounded\" />\n        <Skeleton width=\"200px\" height=\"20px\" borderRadius=\"rounded\" />\n      </div>\n    </div>\n  );\n};\n\nconst SkeletonWaveActivity: ActivityComponentType<\"SkeletonWave\"> = () => {\n  const isLoading = useSkeletonLoading();\n  const isRealLoading = useIsRealLoading();\n  const animationDuration = useSkeletonDuration();\n  const animationTiming = useSkeletonTimingFunction();\n  const initTransitionDuration = useSkeletonInitTransitionDuration();\n  const gradient = useSkeletonGradient();\n\n  return (\n    <Layout>\n      <div\n        style={\n          {\n            padding: \"16px\",\n            \"--skeleton-gradient\": gradient,\n            \"--skeleton-init-transition-duration\": initTransitionDuration,\n            \"--skeleton-animation-duration\": animationDuration,\n            \"--skeleton-animation-timing-function\": animationTiming,\n          } as React.CSSProperties\n        }\n      >\n        {isLoading ? isRealLoading && <Fallback /> : <div>content</div>}\n      </div>\n    </Layout>\n  );\n};\n\nexport default SkeletonWaveActivity;\n\nSkeletonWaveActivity.displayName = \"SkeletonWaveActivity\";",
   "switch-disabled": "import { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchDisabled() {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 10 }}>\n      <Switch disabled />\n      <Switch checked disabled />\n    </div>\n  );\n}",
   "switch-medium": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchMedium() {\n  const [isChecked, setIsChecked] = useState(false);\n\n  return (\n    <Switch size=\"medium\" checked={isChecked} onCheckedChange={setIsChecked} />\n  );\n}",
@@ -126,7 +126,7 @@
   "tabs-size-medium": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsSizeMedium() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"1\" size=\"medium\">\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\">라벨2</TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content>Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content>Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content>Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
   "tabs-size-small": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsSizeSmall() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"1\" size=\"small\">\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\">라벨2</TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content>Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content>Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content>Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
   "tabs-standalone": "import { useState } from \"react\";\nimport { Tabs, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsStandalone() {\n  const [activeTab, setActiveTab] = useState(\"1\");\n\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"1\" onValueChange={setActiveTab}>\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\">라벨2</TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        {activeTab === \"1\" && (\n          <div>\n            <Content>Content 1</Content>\n          </div>\n        )}\n        {activeTab === \"2\" && (\n          <div>\n            <Content>Content 2</Content>\n          </div>\n        )}\n        {activeTab === \"3\" && (\n          <div>\n            <Content>Content 3</Content>\n          </div>\n        )}\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
-  "tabs-swipeable": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsSwipeable() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"1\" isSwipeable>\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\">라벨2</TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content>Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content>Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content>Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
+  "tabs-swipeable": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsSwipeable() {\n  return (\n    <div style={{ width: \"360px\" }}>\n      <Tabs defaultValue=\"2\" isSwipeable>\n        <TabTriggerList>\n          <TabTrigger value=\"1\">라벨1</TabTrigger>\n          <TabTrigger value=\"2\">라벨2</TabTrigger>\n          <TabTrigger value=\"3\">라벨3</TabTrigger>\n        </TabTriggerList>\n        <TabContentList>\n          <TabContent value=\"1\">\n            <Content>Content 1</Content>\n          </TabContent>\n          <TabContent value=\"2\">\n            <Content>Content 2</Content>\n          </TabContent>\n          <TabContent value=\"3\">\n            <Content>Content 3</Content>\n          </TabContent>\n        </TabContentList>\n      </Tabs>\n    </div>\n  );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        height: \"300px\",\n        backgroundColor: \"var(--seed-color-bg-layer-default)\",\n      }}\n    >\n      {props.children}\n    </div>\n  );\n};",
   "text-button-brand": "import { IconPlusCircleLine } from \"@daangn/react-monochrome-icon\";\nimport { TextButton } from \"seed-design/ui/text-button\";\n\nexport default function TextButtonBrand() {\n  return (\n    <TextButton variant=\"brand\" icon={<IconPlusCircleLine />}>\n      추가\n    </TextButton>\n  );\n}",
   "text-button-danger": "import { IconTrashcanLine } from \"@daangn/react-monochrome-icon\";\nimport { TextButton } from \"seed-design/ui/text-button\";\n\nexport default function TextButtonDanger() {\n  return (\n    <TextButton variant=\"danger\" icon={<IconTrashcanLine />}>\n      삭제\n    </TextButton>\n  );\n}",
   "text-button-disabled": "import { IconPenHorizlineLine } from \"@daangn/react-monochrome-icon\";\nimport { TextButton } from \"seed-design/ui/text-button\";\n\nexport default function TextButtonPreview() {\n  return (\n    <TextButton disabled icon={<IconPenHorizlineLine />}>\n      새 글\n    </TextButton>\n  );\n}",

docs/components/example/segmented-control-fixed-width.tsx

@@ -1,10 +1,10 @@
-import { SegmentedControl, SegmentedControlOption } from "seed-design/ui/segmented-control";
+import { SegmentedControl, SegmentedControlTrigger } from "seed-design/ui/segmented-control";
 
 export default function SegmentedControlFixedWidth() {
   return (
-    <SegmentedControl style={{ width: "600px" }}>
-      <SegmentedControlOption value="new">New</SegmentedControlOption>
-      <SegmentedControlOption value="hot">Hot</SegmentedControlOption>
+    <SegmentedControl style={{ width: "600px" }} defaultValue="new">
+      <SegmentedControlTrigger value="new">New</SegmentedControlTrigger>
+      <SegmentedControlTrigger value="hot">Hot</SegmentedControlTrigger>
     </SegmentedControl>
   );
 }

docs/components/example/segmented-control-long-label-fixed-width.tsx

@@ -1,11 +1,11 @@
-import { SegmentedControl, SegmentedControlOption } from "seed-design/ui/segmented-control";
+import { SegmentedControl, SegmentedControlTrigger } from "seed-design/ui/segmented-control";
 
 export default function SegmentedControlLongLabelFixedWidth() {
   return (
-    <SegmentedControl style={{ width: "600px" }}>
-      <SegmentedControlOption value="price">가격 높은 순</SegmentedControlOption>
-      <SegmentedControlOption value="discount">할인율 높은 순</SegmentedControlOption>
-      <SegmentedControlOption value="popularity">인기 많은 순</SegmentedControlOption>
+    <SegmentedControl style={{ width: "600px" }} defaultValue="price">
+      <SegmentedControlTrigger value="price">가격 높은 순</SegmentedControlTrigger>
+      <SegmentedControlTrigger value="discount">할인율 높은 순</SegmentedControlTrigger>
+      <SegmentedControlTrigger value="popularity">인기 많은 순</SegmentedControlTrigger>
     </SegmentedControl>
   );
 }

docs/components/example/segmented-control-long-label.tsx

@@ -1,11 +1,11 @@
-import { SegmentedControl, SegmentedControlOption } from "seed-design/ui/segmented-control";
+import { SegmentedControl, SegmentedControlTrigger } from "seed-design/ui/segmented-control";
 
 export default function SegmentedControlLongLabel() {
   return (
-    <SegmentedControl>
-      <SegmentedControlOption value="price">가격 높은 순</SegmentedControlOption>
-      <SegmentedControlOption value="discount">할인율 높은 순</SegmentedControlOption>
-      <SegmentedControlOption value="popularity">인기 많은 순</SegmentedControlOption>
+    <SegmentedControl defaultValue="price">
+      <SegmentedControlTrigger value="price">가격 높은 순</SegmentedControlTrigger>
+      <SegmentedControlTrigger value="discount">할인율 높은 순</SegmentedControlTrigger>
+      <SegmentedControlTrigger value="popularity">인기 많은 순</SegmentedControlTrigger>
     </SegmentedControl>
   );
 }

docs/components/example/segmented-control-preview.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { SegmentedControl, SegmentedControlOption } from "seed-design/ui/segmented-control";
+import { SegmentedControl, SegmentedControlTrigger } from "seed-design/ui/segmented-control";
 
 export default function SegmentedControlPreview() {
   const options = ["New", "Hot"];
@@ -11,9 +11,9 @@ export default function SegmentedControlPreview() {
     <div className="flex flex-col gap-3 items-center text-center">
       <SegmentedControl value={value} defaultValue="New" onValueChange={setValue}>
         {options.map((option) => (
-          <SegmentedControlOption key={option} value={option}>
+          <SegmentedControlTrigger key={option} value={option}>
             {option}
-          </SegmentedControlOption>
+          </SegmentedControlTrigger>
         ))}
       </SegmentedControl>
       <div>Selected value: {value}</div>

docs/content/docs/react/components/segmented-control.mdx

@@ -18,18 +18,18 @@ description: 설명 # TODO
   name="SegmentedControlProps"
 />
 
-### `SegmentedControlOption`
+### `SegmentedControlTrigger`
 
 <AutoTypeTable
   path="./registry/ui/segmented-control.tsx"
-  name="SegmentedControlOptionProps"
+  name="SegmentedControlTriggerProps"
 />
 
 ## 예제
 
 ### 최소 너비보다 넓은 옵션 레이블
 
-Pill 형태의 `SegmentControlOption` 한 개는 86px의 최소 너비를 가져요. 제공한 옵션 중 이 너비를 초과하는 옵션이 있다면, 가장 긴 옵션의 너비에 모든 옵션의 너비가 맞춰져요.
+Pill 형태의 `SegmentControlTrigger` 한 개는 86px의 최소 너비를 가져요. 제공한 옵션 중 이 너비를 초과하는 옵션이 있다면, 가장 긴 옵션의 너비에 모든 옵션의 너비가 맞춰져요.
 
 <ComponentExample name="segmented-control-long-label" />