From dd4930d97aeae15e608c980ce82dc3f496bd463e Mon Sep 17 00:00:00 2001
From: Youjiiin <yujinjang24@gmail.com>
Date: Fri, 10 Jan 2025 22:48:31 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=ED=86=A0=EA=B8=80=EB=B0=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design-system/Text.tsx              |  1 +
 packages/design-system/ToggleBar.stories.tsx | 19 +++++++++
 packages/design-system/ToggleBar.tsx         | 45 ++++++++++++++++++++
 packages/design-system/TopNavigation.tsx     |  6 +--
 4 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 packages/design-system/ToggleBar.stories.tsx
 create mode 100644 packages/design-system/ToggleBar.tsx

diff --git a/packages/design-system/Text.tsx b/packages/design-system/Text.tsx
index 9c09e31..abc876b 100644
--- a/packages/design-system/Text.tsx
+++ b/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]",
     },
   },
 });
diff --git a/packages/design-system/ToggleBar.stories.tsx b/packages/design-system/ToggleBar.stories.tsx
new file mode 100644
index 0000000..258630a
--- /dev/null
+++ b/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} />,
+};
diff --git a/packages/design-system/ToggleBar.tsx b/packages/design-system/ToggleBar.tsx
new file mode 100644
index 0000000..5e8d85b
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/design-system/TopNavigation.tsx b/packages/design-system/TopNavigation.tsx
index 1d3be8f..0487aa8 100644
--- a/packages/design-system/TopNavigation.tsx
+++ b/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>,
 ) {

From 23011b85130adcdd758515ebb983f91481eb1f30 Mon Sep 17 00:00:00 2001
From: Youjiiin <yujinjang24@gmail.com>
Date: Sat, 11 Jan 2025 22:46:58 +0900
Subject: [PATCH 2/2] =?UTF-8?q?style:=20=ED=86=A0=EA=B8=80=EB=B0=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=99=9C=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design-system/ToggleBar.stories.tsx | 19 +++----
 packages/design-system/ToggleBar.tsx         | 60 +++++++++-----------
 2 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/packages/design-system/ToggleBar.stories.tsx b/packages/design-system/ToggleBar.stories.tsx
index 258630a..4ab1863 100644
--- a/packages/design-system/ToggleBar.stories.tsx
+++ b/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 />
+      </>
+    );
+  },
 };
diff --git a/packages/design-system/ToggleBar.tsx b/packages/design-system/ToggleBar.tsx
index 5e8d85b..4d3ad60 100644
--- a/packages/design-system/ToggleBar.tsx
+++ b/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>
   );
 };