Feat: Chip, DropButton 컴포넌트 구현

src/page/main/main-page.tsx

@@ -1,25 +1,4 @@
-import BottomSheet from '@widgets/main/bottom-sheet/bottom-sheet';
-import { RadioContent } from '@widgets/main/bottom-sheet/contents/radio/radio-content';
-import { useState } from 'react';
-
-export type SortType = 'latest' | 'near';
-
 const MainPage = () => {
-  const [isOpen, setIsOpen] = useState(true);
-  const [sortType, setSortType] = useState<SortType>('latest');
-
-  return (
-    <div>
-      <BottomSheet.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <BottomSheet.Overlay />
-        <BottomSheet.Container size="sm">
-          <BottomSheet.Header title="정렬" />
-          <BottomSheet.Content>
-            <RadioContent value={sortType} onChange={setSortType} />
-          </BottomSheet.Content>
-        </BottomSheet.Container>
-      </BottomSheet.Root>
-    </div>
-  );
+  return <div>mainPage</div>;
 };
 export default MainPage;

src/widgets/main/dropBotton.tsx

@@ -0,0 +1,14 @@
+import ChevronDown from '@shared/assets/icon/chevron-down.svg?react';
+interface DropButtonProps {
+  label: string;
+  onClick: () => void;
+}
+
+export function DropButton({ label, onClick }: DropButtonProps) {
+  return (
+    <button className="flex w-[8.9rem] h-[4rem] items-center justify-center border border-gray-200 rounded-[12px] gap-[0.4rem]">
+      <span className="typo-body1">{label}</span>
+      <ChevronDown onClick={onClick} width={'2rem'} height={'2rem'} />
+    </button>
+  );
+}

src/widgets/postDetail/chip/chip.tsx

@@ -0,0 +1,58 @@
+import { ChipButton } from '@widgets/postDetail/chip/chipButton';
+
+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;
+
+export function Chip(props: ChipProps) {
+  const { status } = props;
+
+  if (props.mode === 'display') {
+    return (
+      <div className="flex gap-[0.8rem]">
+        <ChipButton
+          label="승인"
+          variant="approve"
+          active={status === 'approved'}
+          disabled
+        />
+        <ChipButton
+          label="거절"
+          variant="reject"
+          active={status === 'rejected'}
+          disabled
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-[0.8rem]">
+      <ChipButton
+        label="승인"
+        variant="approve"
+        active={status === 'approved'}
+        onClick={() => props.onChange('approved')}
+      />
+      <ChipButton
+        label="거절"
+        variant="reject"
+        active={status === 'rejected'}
+        onClick={() => props.onChange('rejected')}
+      />
+    </div>
+  );
+}

src/widgets/postDetail/chip/chipButton.tsx

@@ -0,0 +1,64 @@
+import { cn } from '@shared/utils/cn';
+import { cva } from 'class-variance-authority';
+
+interface ChipButtonProps {
+  label: string;
+  variant: 'approve' | 'reject';
+  active: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export const chipButtonVariants = cva(
+  'w-[4.5rem] h-[2.6rem] rounded-[8px] border typo-caption transition-colors',
+  {
+    variants: {
+      variant: {
+        approve: '',
+        reject: '',
+      },
+      active: {
+        true: '',
+        false: 'text-gray-300 border-gray-200',
+      },
+      disabled: {
+        true: 'cursor-default',
+        false: 'cursor-pointer',
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'approve',
+        active: true,
+        className: 'border-primary',
+      },
+      {
+        variant: 'reject',
+        active: true,
+        className: 'border-red',
+      },
+    ],
+    defaultVariants: {
+      active: false,
+      disabled: false,
+    },
+  },
+);
+
+export function ChipButton({
+  label,
+  variant,
+  active,
+  disabled,
+  onClick,
+}: ChipButtonProps) {
+  return (
+    <button
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(chipButtonVariants({ variant, active, disabled }))}
+    >
+      {label}
+    </button>
+  );
+}