From 25e371aea82b9a0b55b89fe55261d6d16c1958ec Mon Sep 17 00:00:00 2001
From: winchoose <tmdxor741@naver.com>
Date: Mon, 2 Feb 2026 14:56:43 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20chip,=20dropButton=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/main/main-page.tsx                   | 23 +------
 .../component => widgets/create}/textarea.tsx |  0
 src/widgets/main/dropBotton.tsx               | 14 ++++
 src/widgets/postDetail/chip/chip.tsx          | 58 +++++++++++++++++
 src/widgets/postDetail/chip/chipButton.tsx    | 64 +++++++++++++++++++
 5 files changed, 137 insertions(+), 22 deletions(-)
 rename src/{page/create-page/component => widgets/create}/textarea.tsx (100%)
 create mode 100644 src/widgets/main/dropBotton.tsx
 create mode 100644 src/widgets/postDetail/chip/chip.tsx
 create mode 100644 src/widgets/postDetail/chip/chipButton.tsx

diff --git a/src/page/main/main-page.tsx b/src/page/main/main-page.tsx
index 4c4e1a8..3b8ddf3 100644
--- a/src/page/main/main-page.tsx
+++ b/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;
diff --git a/src/page/create-page/component/textarea.tsx b/src/widgets/create/textarea.tsx
similarity index 100%
rename from src/page/create-page/component/textarea.tsx
rename to src/widgets/create/textarea.tsx
diff --git a/src/widgets/main/dropBotton.tsx b/src/widgets/main/dropBotton.tsx
new file mode 100644
index 0000000..5c765b0
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/widgets/postDetail/chip/chip.tsx b/src/widgets/postDetail/chip/chip.tsx
new file mode 100644
index 0000000..47c4c3c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/widgets/postDetail/chip/chipButton.tsx b/src/widgets/postDetail/chip/chipButton.tsx
new file mode 100644
index 0000000..7cdfeaa
--- /dev/null
+++ b/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>
+  );
+}