style: 토글바 컴포넌트 활용

packages/design-system/ToggleBar.stories.tsx

@@ -1,19 +1,18 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { ToggleBar } from "./ToggleBar";
 
-const meta: Meta<typeof ToggleBar> = {
+const meta: Meta = {
   title: "ds/ToggleBar",
-  component: ToggleBar,
   tags: ["autodocs"],
-  argTypes: {
-    onToggle: { action: "onToggle" },
-  },
 };
-
 export default meta;
 
-type Story = StoryObj<typeof ToggleBar>;
-
-export const Default: Story = {
-  render: (args) => <ToggleBar {...args} />,
+export const Default: StoryObj = {
+  render: () => {
+    return (
+      <>
+        <ToggleBar />
+      </>
+    );
+  },
 };

packages/design-system/ToggleBar.tsx

@@ -1,45 +1,41 @@
+import { Flex } from "@repo/ui/Flex";
+import { ToggleButton } from "@repo/ui/ToggleButton";
+import { ToggleButtonGroup } from "@repo/ui/ToggleButtonGroup";
 import { useState } from "react";
-import { Text, textVariants } from "./Text";
+import { Text } from "./Text";
 import { cn } from "./cn";
 
-interface ToggleBarProps {
-  onToggle: (selected: "created" | "updated") => void;
-}
-
-export const ToggleBar: React.FC<ToggleBarProps> = ({ onToggle }) => {
-  const [selected, setSelected] = useState<"created" | "updated">("created");
-
-  const handleToggle = (option: "created" | "updated") => {
-    setSelected(option);
-    onToggle(option);
-  };
+export const ToggleBar: React.FC = () => {
+  const [value, setValue] = useState<string | null>("created");
 
   return (
     <div className={cn("flex justify-between w-full h-[36px] px-4 items-end")}>
       <Text as="h1" variant="title/24_sb">
         독서기록
       </Text>
-      <div className="flex gap-[18px]">
-        <button
-          onClick={() => handleToggle("created")}
-          className={cn(
-            selected === "created" ? "text-gray-500" : "text-gray-300",
-            textVariants({ variant: "body/16_sb" }),
-          )}
-        >
-          생성일 순
-        </button>
+      <ToggleButtonGroup
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue ?? "created");
+        }}
+        allowToggle={false}
+      >
+        <Flex className="gap-x-4">
+          <ToggleButton
+            value="created"
+            className={cn("text-gray-300 data-[state=selected]:text-gray-500")}
+          >
+            생성일 순
+          </ToggleButton>
 
-        <button
-          onClick={() => handleToggle("updated")}
-          className={cn(
-            selected === "updated" ? "text-gray-500" : "text-gray-300",
-            textVariants({ variant: "body/16_sb" }),
-          )}
-        >
-          업데이트 순
-        </button>
-      </div>
+          <ToggleButton
+            value="updated"
+            className={cn("text-gray-300 data-[state=selected]:text-gray-500")}
+          >
+            업데이트 순
+          </ToggleButton>
+        </Flex>
+      </ToggleButtonGroup>
     </div>
   );
 };