feat: CycleChip 컴포넌트 구현

Author: shinjigu

src/page/todo/myTodo/component/CycleChip/CycleChip.css.ts

@@ -0,0 +1,46 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+
+import { colors } from '@/style/token/color.css';
+import { fonts } from '@/style/token/typography.css';
+
+export const chipBase = style({
+  display: 'flex',
+  alignItems: 'center',
+  borderRadius: '8px',
+  textAlign: 'center',
+  ...fonts.subtitle02,
+});
+
+export const selectorChip = styleVariants({
+  selected: {
+    width: '17rem',
+    height: '5.6rem',
+    padding: '1.4rem 2rem',
+    background: colors.gradient04,
+    color: colors.grey11,
+    justifyContent: 'center',
+  },
+  deselected: {
+    width: '17rem',
+    height: '5.6rem',
+    padding: '1.4rem 2rem',
+    background: colors.grey3,
+    color: colors.grey8,
+    justifyContent: 'center',
+    selectors: {
+      '&:hover': {
+        background: colors.grey2,
+        color: colors.grey8,
+      },
+    },
+  },
+});
+
+export const displayChip = style({
+  width: '10.6rem',
+  padding: '1.4rem 2rem',
+  background: colors.grey4,
+  color: colors.grey10,
+  textAlign: 'center',
+  justifyContent: 'center',
+});

src/page/todo/myTodo/component/CycleChip/CycleChip.tsx

@@ -0,0 +1,19 @@
+import { chipBase, selectorChip, displayChip } from './CycleChip.css';
+import type { CycleChipProps } from './CycleChip.types';
+
+const CycleChip = ({ type, value, selected, onClick }: CycleChipProps) => {
+  return type === 'selector' ? (
+    <button
+      type="button"
+      className={`${chipBase} ${selected ? selectorChip.selected : selectorChip.deselected}`}
+      onClick={() => onClick?.(value)}
+      tabIndex={0}
+    >
+      {value}
+    </button>
+  ) : (
+    <span className={`${chipBase} ${displayChip}`}>{value}</span>
+  );
+};
+
+export default CycleChip;

src/page/todo/myTodo/component/CycleChip/CycleChip.types.ts

@@ -0,0 +1,8 @@
+export type CycleType = '매일' | '매주' | '한번';
+
+export interface CycleChipProps {
+  type: 'selector' | 'display';
+  value: CycleType;
+  selected?: boolean;
+  onClick?: (cycle: CycleType) => void;
+}

src/page/todo/myTodo/component/CycleChip/index.ts

@@ -0,0 +1,2 @@
+export { default as CycleChip } from './CycleChip';
+export * from './CycleChip.types';