refactor: 주기 칩 컴포넌트 코드 개선

Author: shinjigu

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

@@ -6,6 +6,7 @@ import { fonts } from '@/style/token/typography.css';
 export const chipBase = style({
   display: 'flex',
   alignItems: 'center',
+  justifyContent: 'center',
   borderRadius: '8px',
   textAlign: 'center',
   ...fonts.subtitle02,
@@ -18,15 +19,13 @@ export const selectorChip = styleVariants({
     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,
@@ -41,6 +40,4 @@ export const displayChip = style({
   padding: '1.4rem 2rem',
   background: colors.grey4,
   color: colors.grey10,
-  textAlign: 'center',
-  justifyContent: 'center',
 });

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

@@ -1,13 +1,20 @@
 import { chipBase, selectorChip, displayChip } from './CycleChip.css';
-import type { CycleChipProps } from './CycleChip.types';
+
+export type CycleType = '매일' | '매주' | '한번';
+
+export interface CycleChipProps {
+  type: 'selector' | 'display';
+  value: CycleType;
+  selected?: boolean;
+  onClick?: (cycle: CycleType) => void;
+}
 
 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>

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

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