feat: 토글바 컴포넌트

packages/design-system/Text.tsx

@@ -23,6 +23,7 @@ export const textVariants = cva("leading-[150%] tracking-[-2%]", {
       "title/12_sb": "font-semibold text-[12px]",
       "title/12_m": "font-medium text-[12px]",
       "title/12_r": "font-normal text-[12px]",
+      "body/16_sb": "font-semibold text-[16px]",
     },
   },
 });

packages/design-system/ToggleBar.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToggleBar } from "./ToggleBar";
+
+const meta: Meta<typeof ToggleBar> = {
+  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} />,
+};

packages/design-system/ToggleBar.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { Text, textVariants } 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);
+  };
+
+  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>
+
+        <button
+          onClick={() => handleToggle("updated")}
+          className={cn(
+            selected === "updated" ? "text-gray-500" : "text-gray-300",
+            textVariants({ variant: "body/16_sb" }),
+          )}
+        >
+          업데이트 순
+        </button>
+      </div>
+    </div>
+  );
+};

packages/design-system/TopNavigation.tsx

@@ -1,13 +1,13 @@
 import { BackIcon } from "@repo/icon/BackIcon";
-import { type ComponentPropsWithoutRef, type Ref, forwardRef } from "react";
+import { type ComponentPropsWithRef, type Ref, forwardRef } from "react";
 import { Text } from "./Text";
 import { cn } from "./cn";
 
-interface TopNavigationProps extends ComponentPropsWithoutRef<"button"> {
+interface TopNavigationProps extends ComponentPropsWithRef<"button"> {
   title?: string;
 }
 
-export const TopNavigation = forwardRef(function SearchBar(
+export const TopNavigation = forwardRef(function TopNavigation(
   { className, title = "독서기록", ...rest }: TopNavigationProps,
   ref?: Ref<HTMLButtonElement>,
 ) {