feat: slideBar를 추가합니다.

src/components/common/slide-bar/SlideBar.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+
+import SlideBar from './';
+
+const SlideBarMeta: Meta<typeof SlideBar> = {
+  title: 'common/SlideBar',
+  component: SlideBar,
+  argTypes: {
+    max_value: {
+      control: {
+        type: 'number',
+      },
+      description: '최대값을 설정합니다.',
+    },
+    current_value: {
+      control: {
+        type: 'number',
+      },
+      description: '현재값을 설정합니다.',
+    },
+  },
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <View style={{ width: 300 }}>
+          <Story />
+        </View>
+      );
+    },
+  ],
+};
+
+export default SlideBarMeta;
+
+export const Primary: StoryObj<typeof SlideBar> = {
+  args: {
+    current_value: 2,
+    max_value: 5,
+  },
+};

src/components/common/slide-bar/index.tsx

@@ -0,0 +1,29 @@
+import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
+
+import { color } from '@/styles/theme';
+
+import * as S from './style';
+
+type Props = {
+  max_value: number;
+  current_value: number;
+};
+
+function SlideBar({ max_value, current_value }: Props) {
+  const slideBarStyle = useAnimatedStyle(() => {
+    return {
+      position: 'absolute',
+      width: withTiming(`${(current_value / max_value) * 100}%`),
+      height: '100%',
+      backgroundColor: color.Primary.Normal,
+    };
+  });
+
+  return (
+    <S.Container>
+      <Animated.View style={slideBarStyle} />
+    </S.Container>
+  );
+}
+
+export default SlideBar;

src/components/common/slide-bar/style.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/native';
+
+export const Container = styled.View`
+  position: relative;
+  width: 100%;
+  height: 4px;
+  overflow: hidden;
+  background: ${({ theme }) => theme.color.Background.Alternative};
+  border-radius: 30px;
+`;