Fix runtime error in Slider storybook (#2488)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->
close #2312 
## Summary

<!-- Please brief explanation of the changes made -->
- I processed value props to prevent type error.

## Details

<!-- Please elaborate description of the changes -->
<details>
<summary>First commit</summary>

- I don't like it, but using a `Template` was the solution I thought of.
- The control that inputs the `array` in storybook requires `object`
input.
- Maybe, I can create a custom control using a `decorator`. I'm not sure
because I haven't tried it yet. We also need to discuss how to use this
to receive input.
```typescript
const Template: StoryFn<SliderProps> = (args) => {
  const processedArgs = getProcessedArgs(args)
  return <Slider {...processedArgs} />
}

export const Primary = Template.bind({})
Primary.args = {
  width: 285,
  defaultValue: [5],
  value: undefined,
  disabled: false,
  guide: [5],
  min: 0,
  max: 10,
  step: 1,
  disableTooltip: false,
}

```
- Set existing args and manipulate necessary props in the template.
- I'd like to be able to manipulate specific props into the desired
format in `argTypes`, but I don't know how. I couldn't find this in the
docs.
```typescript
const getProcessedArgs = (args: SliderProps): SliderProps => {
  return { ...args, value: getProcessedValue(args.value) }
}

const getProcessedValue = (
  value: undefined | Record<number, number> | number[]
) => {
  if (value === undefined) {
    return undefined
  }
  if (Array.isArray(value) && value.every((item) => typeof item === 'number')) {
    return value
  }
  if (typeof value === 'object' && value !== null) {
    return Object.values(value)
  }
  return value
}
```
- The function was separated into two to prepare for props that require
additional processing in the future.
- If JSON is `number[]` or `undefined`, this func returns original
value.
- If JSON is `object`, this func returns value of object.
- In other cases, it returns as is and not reflect in the storybook.
- There will be stricter guards and various cases, but I think this will
need to be discussed because the code structure will be dirty (and I
think it still is to some extent 🤣).
- For example, there is logic that verifies whether an object's key is a
consecutive number starting from 0.

</details>

- Split stories into primary(controlled) & uncontrolled.
- In controlled, user can set `value` not 'defaultValue'.
- In uncontrolled, user can set 'defaultValue' not 'value'.
- Set common args in `meta` of Slider such as width, min, max ...
- Show args conditionally in production env using `argTypes.if`.

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->
No

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->
- #2312 
-
[Template](https://storybook.js.org/docs/writing-stories/stories-for-multiple-components#creating-a-template-component)
- [ControlType](https://storybook.js.org/docs/api/arg-types#controltype)
-
[CSF3](https://storybook.js.org/docs/api/csf#upgrading-from-csf-2-to-csf-3)

packages/bezier-react/src/components/Slider/Slider.stories.tsx

@@ -1,15 +1,10 @@
-import { type Meta } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 
 import { Slider } from './Slider'
 
 const meta: Meta<typeof Slider> = {
   component: Slider,
   argTypes: {
-    value: {
-      control: {
-        type: 'object',
-      },
-    },
     minStepsBetweenThumbs: {
       control: {
         type: 'number',
@@ -21,15 +16,21 @@ const meta: Meta<typeof Slider> = {
     onValueCommit: {
       action: 'onValueCommit',
     },
+    value: {
+      if: {
+        exists: true,
+        arg: 'value',
+      },
+    },
+    defaultValue: {
+      if: {
+        exists: true,
+        arg: 'defaultValue',
+      },
+    },
   },
-}
-export default meta
-
-export const Primary = {
   args: {
     width: 285,
-    defaultValue: [5],
-    value: undefined,
     disabled: false,
     guide: [5],
     min: 0,
@@ -38,3 +39,16 @@ export const Primary = {
     disableTooltip: false,
   },
 }
+export default meta
+
+export const Primary = {
+  args: {
+    value: [5],
+  },
+} satisfies StoryObj<typeof meta>
+
+export const Uncontrolled = {
+  args: {
+    defaultValue: [5],
+  },
+} satisfies StoryObj<typeof meta>