feat/course-button

Author: skyblue1232

src/pages/map/index.tsx

@@ -0,0 +1,35 @@
+import CummonButton from '@/shared/components/button/CommonButton';
+import { useState } from 'react';
+
+export default function CourseSettingPreview() {
+  const [active, setActive] = useState<string | null>(null);
+
+  const buttons = [
+    { id: 'family', label: '가족여행' },
+    { id: 'friends', label: '우정여행' },
+    { id: 'date', label: '데이트' },
+    { id: 'solo', label: '당일치기' },
+    { id: 'oneNight', label: '1박2일' },
+    { id: 'twoNight', label: '2박3일' },
+    { id: 'walk', label: '도보' },
+    { id: 'transit', label: '대중교통' },
+    { id: 'car', label: '자가차' },
+  ];
+
+  return (
+    // 스타일은 다 수정할 거에요 버튼만 봐주세요~  // CommonButton.tsx 저것만 확인해주세요
+    <div className="flex flex-col items-center gap-6 py-10">
+      <h1 className="text-title-lg text-gray-700 mb-4">코스 버튼 임시 화면</h1>
+      <div className="flex flex-wrap justify-center gap-4 max-w-[400px]">  
+        {buttons.map(({ id, label }) => (
+          <CummonButton
+            key={id}
+            label={label}
+            variant={active === id ? 'active' : 'default'}
+            onClick={() => setActive(active === id ? null : id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

src/shared/components/button/CommonButton.tsx

@@ -0,0 +1,47 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/shared/lib';
+
+interface CummonButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonStyle> {
+  label: string;
+}
+
+const buttonStyle = cva(
+  `
+  text-center rounded-[2rem] text-title-md tracking-[0.015em]
+  py-[1rem] w-[11.3rem] border border-[1px]
+  transition-colors duration-150 flex justify-center items-center
+  select-none focus:outline-none focus:ring-0 active:outline-none
+  `,
+  {
+    variants: {
+      variant: {
+        default: 'bg-gray-100 border-gray-200 text-gray-400',
+        active: 'bg-mint-100 border-mint-200 text-mint-700',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const CummonButton = ({
+  label,
+  variant,
+  className,
+  ...props
+}: CummonButtonProps) => {
+  return (
+    <button
+      type="button"
+      className={cn(buttonStyle({ variant }), className)}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default CummonButton;