From 924712dd6dd7d07acab6ab0ba10406244bf387ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Tue, 1 Oct 2024 11:04:16 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=ED=86=A0=EA=B8=80=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json                    | 25 +++++++++++
 frontend/package.json                         |  1 +
 .../src/components/ImageWithLabels/index.tsx  | 11 ++---
 frontend/src/components/ui/toggle.tsx         | 44 +++++++++++++++++++
 4 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/ui/toggle.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4aac430..02b883f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.1",
+        "@radix-ui/react-toggle": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.2",
         "@tanstack/react-query": "^5.52.1",
         "axios": "^1.7.5",
@@ -4654,6 +4655,30 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.0.tgz",
+      "integrity": "sha512-gwoxaKZ0oJ4vIgzsfESBuSgJNdc0rv12VhHgcqN0TEJmmZixXG/2XpsLK8kzNWYcnaoRIEEQc0bEi3dIvdUpjw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 261dc5f..6edce64 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tanstack/react-query": "^5.52.1",
     "axios": "^1.7.5",
diff --git a/frontend/src/components/ImageWithLabels/index.tsx b/frontend/src/components/ImageWithLabels/index.tsx
index 2abf13c..8b04122 100644
--- a/frontend/src/components/ImageWithLabels/index.tsx
+++ b/frontend/src/components/ImageWithLabels/index.tsx
@@ -3,7 +3,7 @@ import { Image, Layer, Stage, Line, Rect, Text, Group } from 'react-konva';
 import useImage from 'use-image';
 import { Label, Shape } from '@/types';
 import useCommentListQuery from '@/queries/comments/useCommentListQuery';
-import { Button } from '@/components/ui/button';
+import { Toggle } from '@/components/ui/toggle';
 
 interface ImageWithLabelsProps {
   imagePath: string;
@@ -63,14 +63,15 @@ export default function ImageWithLabels({ imagePath, labelData, projectId, image
 
   return (
     <div>
-      <Button
-        variant="outline"
+      <Toggle
+        variant="default"
         size="sm"
-        onClick={() => setShowComments((prev) => !prev)}
+        pressed={showComments}
+        onPressedChange={(pressed) => setShowComments(pressed)}
         className="mb-4"
       >
         {showComments ? '댓글 숨기기' : '댓글 보기'}
-      </Button>
+      </Toggle>
       <Stage
         width={stageDimensions.width}
         height={stageDimensions.height}
diff --git a/frontend/src/components/ui/toggle.tsx b/frontend/src/components/ui/toggle.tsx
new file mode 100644
index 0000000..00b1472
--- /dev/null
+++ b/frontend/src/components/ui/toggle.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Toggle, toggleVariants };