초기 커밋

바이브 > 스포티파이
2025-11-28 16:12:32 +09:00
commit ae33fb9bce
90 changed files with 16401 additions and 0 deletions
--- a/src/components/features/service/ServiceCard.tsx
+++ b/src/components/features/service/ServiceCard.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+import { Card, CardContent } from "../../ui/card";
+import { Button } from "../../ui/button";
+import { ImageWithFallback } from "../../common/ImageWithFallback";
+import { Badge } from "../../ui/badge";
+import { motion } from "motion/react";
+
+interface ServiceCardProps {
+  name: string;
+  icon: string;
+  color: string;
+  imageUrl?: string;
+  onClick: () => void;
+  index?: number;
+}
+
+export const ServiceCard = React.forwardRef<HTMLDivElement, ServiceCardProps>(
+  ({ name, icon, color, imageUrl, onClick, index = 0 }, ref) => {
+    return (
+      <motion.div
+        ref={ref}
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          duration: 0.4,
+          delay: index * 0.1,
+          ease: [0.25, 0.1, 0.25, 1]
+        }}
+        whileHover={{
+          y: -8,
+          transition: { duration: 0.2 }
+        }}
+        whileTap={{ scale: 0.98 }}
+        onClick={onClick}
+        className="cursor-pointer"
+      >
+      <Card className="hover:shadow-2xl transition-all duration-300 border hover:border-primary/20 h-full bg-gradient-to-br from-white to-gray-50/50 dark:from-gray-900 dark:to-gray-800/50 backdrop-blur-sm overflow-hidden group">
+        <CardContent className="p-6 flex flex-col items-center gap-4 relative">
+          <div className="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-primary/5 dark:to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+          
+          <motion.div 
+            className="w-20 h-20 rounded-2xl flex items-center justify-center shadow-md overflow-hidden relative z-10 ring-2 ring-white"
+            style={{ backgroundColor: imageUrl ? 'transparent' : color }}
+            whileHover={{ rotate: [0, -3, 3, -3, 0], scale: 1.1 }}
+            transition={{ duration: 0.5 }}
+          >
+            {imageUrl ? (
+              <ImageWithFallback
+                src={imageUrl}
+                alt={name}
+                className="w-full h-full object-cover"
+              />
+            ) : (
+              <span className="text-4xl">{icon}</span>
+            )}
+          </motion.div>
+          
+          <div className="relative z-10 text-center">
+            <h3 className="mb-1">{name}</h3>
+            <Badge variant="secondary" className="text-xs opacity-0 group-hover:opacity-100 transition-opacity">
+              클릭하여 연결
+            </Badge>
+          </div>
+        </CardContent>
+      </Card>
+    </motion.div>
+    );
+  }
+);
+ServiceCard.displayName = "ServiceCard";