Feat: Chip, DropButton 컴포넌트 구현

[winchoose]

📌 Summary

• [Feature]: Chip, dropButton 컴포넌트 구현 #43

• dropDown.tsx
• chp.tsx, chipButton.tsx
• 파일이동

📚 Tasks

creat페이지에서만 사용하는 textarea wdgets/create로 이동했습니다.

interface ChipButtonProps {
  label: string;
  variant: 'approve' | 'reject';
  active: boolean;
  disabled?: boolean;
  onClick?: () => void;
}

variant는 승인 / 거절 상태를 구분하기 위한 용도이고 active는 현재 선택된 상태인지 여부, disabled는 클릭 가능 여부를 제어하기 위해 추가했습니다.

또한 Chip 컴포넌트에서는 일반 사용자와 게시글 작성자를 구분해 인터랙션 가능 여부를 나누기 위해
mode를 display / action 두 가지로 분리했습니다.

export type ApprovalStatus = 'approved' | 'rejected' | 'pending';

interface BaseChipProps {
  status: ApprovalStatus;
}

interface DisplayChipProps extends BaseChipProps {
  mode: 'display';
}

interface ActionChipProps extends BaseChipProps {
  mode: 'action';
  onChange: (status: Exclude<ApprovalStatus, 'pending'>) => void;
}

export type ChipProps = DisplayChipProps | ActionChipProps;

이 구조는 Discriminated Union을 잘 활용한 패턴으로 mode에 따라 필요한 props를 타입 레벨에서 명확히 분리할 수 있습니다.

📸 Screenshot

해당 작업에 대한 스크린샷 및 자료를 첨부해 주세요.