feat-fe: 평가 필터 팝오버 컴포넌트 구현

frontend/.storybook/main.ts

@@ -10,6 +10,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
+    '@storybook/addon-actions',
     'storybook-addon-remix-react-router',
   ],
   framework: {

frontend/package.json

@@ -30,6 +30,7 @@
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.6.0",
     "@playwright/test": "^1.47.2",
+    "@storybook/addon-actions": "^8.3.5",
     "@storybook/addon-essentials": "^8.2.1",
     "@storybook/addon-interactions": "^8.2.1",
     "@storybook/addon-links": "^8.2.1",

frontend/src/components/_common/atoms/Slider/Slider.stories.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+import { action } from '@storybook/addon-actions';
+import { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import Slider from '.';
+
+const meta: Meta<typeof Slider> = {
+  title: 'Common/Atoms/Slider',
+  component: Slider,
+  argTypes: {
+    onRangeChange: { action: 'rangeChanged' },
+  },
+  decorators: [
+    (Story, context) => {
+      const [range, setRange] = useState({
+        min: context.args.initialMin,
+        max: context.args.initialMax,
+      });
+
+      const handleRangeChange = (min: number, max: number) => {
+        setRange({ min, max });
+        action('rangeChanged')(`최대값은 ${max}, 최소값은 ${min}`);
+      };
+
+      return (
+        <div style={{ width: '300px' }}>
+          <Story
+            args={{
+              ...context.args,
+              onRangeChange: handleRangeChange,
+            }}
+          />
+          <div style={{ marginTop: '20px' }}>
+            Current Range: {range.min.toFixed(2)} - {range.max.toFixed(2)}
+          </div>
+        </div>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  args: {
+    min: 0,
+    max: 5,
+    step: 0.5,
+    initialMin: 0,
+    initialMax: 5,
+  },
+};
+
+export const DecimalStep: Story = {
+  args: {
+    min: 0,
+    max: 5,
+    step: 0.1,
+    initialMin: 0,
+    initialMax: 5,
+  },
+};
+
+export const NarrowRange: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    step: 1,
+    initialMin: 40,
+    initialMax: 60,
+  },
+};
+
+export const CustomRange: Story = {
+  args: {
+    min: -50,
+    max: 50,
+    step: 5,
+    initialMin: -25,
+    initialMax: 25,
+  },
+};

frontend/src/components/_common/atoms/Slider/index.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import S from './style';
+
+interface SliderProps {
+  min: number;
+  max: number;
+  step: number;
+  initialMin: number;
+  initialMax: number;
+  onRangeChange: (min: number, max: number) => void;
+}
+
+export default function Slider({ min, max, step, initialMin, initialMax, onRangeChange }: SliderProps) {
+  const [minValue, setMinValue] = useState(initialMin);
+  const [maxValue, setMaxValue] = useState(initialMax);
+
+  const handleMinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newMinValue = Math.min(Number(e.target.value), Number(maxValue - step));
+    setMinValue(newMinValue);
+    onRangeChange(newMinValue, maxValue);
+  };
+
+  const handleMaxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newMaxValue = Math.max(Number(e.target.value), Number(minValue + step));
+    setMaxValue(newMaxValue);
+    onRangeChange(minValue, newMaxValue);
+  };
+
+  const sliderRangeLeft = ((minValue - min) / (max - min)) * 100;
+  const sliderRangeRight = 100 - ((maxValue - min) / (max - min)) * 100;
+
+  return (
+    <S.SliderContainer>
+      <S.SliderTrack />
+      <S.SliderRange
+        left={sliderRangeLeft}
+        right={sliderRangeRight}
+      />
+      <S.SliderThumb
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={minValue}
+        onChange={handleMinChange}
+      />
+      <S.SliderThumb
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={maxValue}
+        onChange={handleMaxChange}
+      />
+    </S.SliderContainer>
+  );
+}

frontend/src/components/_common/atoms/Slider/style.ts

@@ -0,0 +1,78 @@
+import styled from '@emotion/styled';
+
+const SliderContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: 2rem;
+`;
+
+const SliderTrack = styled.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+
+  width: 100%;
+  height: 0.6rem;
+  border-radius: 0.3rem;
+
+  background-color: ${({ theme }) => theme.baseColors.grayscale[200]};
+`;
+
+const SliderRange = styled.div<{ left: number; right: number }>`
+  position: absolute;
+  top: 50%;
+  left: ${({ left }) => `${left}%`};
+  right: ${({ right }) => `${right}%`};
+  transform: translateY(-50%);
+
+  height: 0.6rem;
+  border-radius: 0.3rem;
+  background-color: ${({ theme }) => theme.baseColors.purplescale[200]};
+`;
+
+const SliderThumb = styled.input`
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  height: 0;
+  background: transparent;
+  pointer-events: none;
+
+  -webkit-appearance: none;
+  appearance: none;
+
+  &::-moz-range-thumb {
+    width: 1.6rem;
+    aspect-ratio: 1/1;
+    background: ${({ theme }) => theme.baseColors.grayscale[50]};
+    cursor: pointer;
+    pointer-events: auto;
+
+    border: 0.4rem solid ${({ theme }) => theme.baseColors.purplescale[700]};
+    border-radius: 100%;
+  }
+
+  &::-webkit-slider-thumb {
+    width: 1.6rem;
+    aspect-ratio: 1/1;
+    background: ${({ theme }) => theme.baseColors.grayscale[50]};
+    cursor: pointer;
+    border-radius: 100%;
+    pointer-events: auto;
+
+    border: 0.4rem solid ${({ theme }) => theme.baseColors.purplescale[700]};
+    border-radius: 100%;
+
+    -webkit-appearance: none;
+    appearance: none;
+  }
+`;
+
+const S = {
+  SliderContainer,
+  SliderTrack,
+  SliderRange,
+  SliderThumb,
+};
+
+export default S;