Merge pull request #82 from SOPT-36-NINEDOT/feat/#81/toggle

[Feat/#81] 토글버튼

Author: Leeyoonji23

src/page/mandal/component/Toggle/Toggle.css.ts

@@ -0,0 +1,45 @@
+import { style } from '@vanilla-extract/css';
+
+import { colors } from '@/style/token';
+import { fonts } from '@/style/token/typography.css';
+
+export const toggleWrapper = style({
+  display: 'flex',
+  width: '16rem',
+  height: '4.2rem',
+  borderRadius: '0.8rem',
+  backgroundColor: colors.grey3,
+});
+
+export const toggleButton = style([
+  fonts.body01,
+  {
+    display: 'flex',
+    width: '50%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: colors.white01,
+    cursor: 'pointer',
+    border: 'none',
+    backgroundColor: 'transparent',
+  },
+]);
+
+const activeButtonBase = style({
+  backgroundImage: colors.gradient05,
+});
+
+export const leftActiveButton = style([
+  activeButtonBase,
+  {
+    borderRadius: '8px 0 0 8px',
+  },
+]);
+
+export const rightActiveButton = style([
+  activeButtonBase,
+  {
+    borderRadius: '0 8px 8px 0',
+  },
+]);

src/page/mandal/component/Toggle/Toggle.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import Toggle from './Toggle';
+
+const meta = {
+  title: 'Mandal/Toggle',
+  component: Toggle,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    defaultValue: {
+      control: 'radio',
+      options: ['onlygoal', 'whole'],
+    },
+    onChange: { action: 'changed' },
+  },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OnlyGoal: Story = {
+  name: '목표만',
+  args: {
+    defaultValue: 'onlygoal',
+  },
+};
+
+export const Whole: Story = {
+  name: '전체',
+  args: {
+    defaultValue: 'whole',
+  },
+};

src/page/mandal/component/Toggle/Toggle.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+
+import * as styles from './Toggle.css';
+
+type ToggleType = 'onlygoal' | 'whole';
+
+interface ToggleProps {
+  defaultValue?: ToggleType;
+  onChange?: (type: ToggleType) => void;
+}
+
+const Toggle = ({ defaultValue = 'onlygoal', onChange }: ToggleProps) => {
+  const [activeType, setActiveType] = useState<ToggleType>(defaultValue);
+
+  const handleClick = (type: ToggleType) => {
+    setActiveType(type);
+    onChange?.(type);
+  };
+
+  return (
+    <div className={styles.toggleWrapper}>
+      <button
+        type="button"
+        className={`${styles.toggleButton} ${
+          activeType === 'onlygoal' ? styles.leftActiveButton : ''
+        }`}
+        onClick={() => handleClick('onlygoal')}
+      >
+        목표만
+      </button>
+      <button
+        type="button"
+        className={`${styles.toggleButton} ${
+          activeType === 'whole' ? styles.rightActiveButton : ''
+        }`}
+        onClick={() => handleClick('whole')}
+      >
+        전체
+      </button>
+    </div>
+  );
+};
+
+export default Toggle;

src/page/mandal/component/Toggle/index.ts

@@ -0,0 +1 @@
+export { default } from './Toggle';