feat: 태그 컴포넌트 추가 및 스타일 개선

Author: jjangminii

src/pages/index.tsx

@@ -1,3 +1,4 @@
+import Tag from '@/shared/components/tag/Tag';
 import { Icon } from '@/shared/icons';
 
 export default function Home() {
@@ -9,6 +10,9 @@ export default function Home() {
             초기 세팅 완료
             <Icon name='User' color='mint-600' />
           </h1>
+          <Tag label='리스트로 보기' icon='MapPin_' variant='toggle' />
+          <Tag label='지도로 보기' icon='FadersHorizontal' variant='toggle' />
+          <Tag label='#데이트' variant='hash' />
           <Icon name='CalendarBlank' size={200} color='gray-900' />
           <Icon name='User' size={200} color='blue-400' />
           <Icon name='User' size={200} color='red-300' />

src/shared/components/tag/Tag.tsx

@@ -1,22 +1,40 @@
-import { Icon } from '@/shared/icons';
-import { cn } from '@/shared/lib';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/shared/lib';
+import { Icon } from '@/shared/icons';
+import type { IconName } from '@/shared/icons/iconNames';
 
-interface HeaderProps {}
+interface Props {
+  label: string;
+  icon?: IconName;
+  className?: string;
+  onClick?: () => void;
+  variant?: VariantProps<typeof tagStyle>['variant'];
+}
 
-const TagStyle = cva('px-[1.2rem] py-[0.5rem] ', {
+const tagStyle = cva('flex items-center rounded-[500px] text-gray-50 ', {
   variants: {
-    color: {
-      toggleTag: 'bg-pink-300 text-label-md',
-      hashTag: 'bg-mint-600 text-title-sm',
+    variant: {
+      hash: 'bg-mint-600 text-title-sm px-[1.2rem] py-[0.3rem]',
+      toggle:
+        'bg-pink-300 w-[10rem] text-label-md gap-2 justify-center py-[0.5rem]',
     },
   },
   defaultVariants: {
-    color: 'hashTag',
+    variant: 'hash',
   },
 });
-const Tag = ({}: HeaderProps) => {
-  return <></>;
+
+const Tag = ({ label, icon, variant, className, onClick }: Props) => {
+  return (
+    <button
+      type='button'
+      className={cn(tagStyle({ variant }), className)}
+      onClick={onClick}
+    >
+      {icon && <Icon name={icon} size={14} color='gray-50' />}
+      <span className='truncate'>{label}</span>
+    </button>
+  );
 };
 
 export default Tag;