💄 style: UI/UX 디자인 개선

- 섹션 헤더, 배경 효과, 애니메이션 추가 - 스타일 시스템 개선 - 반응형 디자인 수정
gr22nist · Nov 15, 2024 · 39555c6 · 39555c6
1 parent b263711
commit 39555c6
Show file tree

Hide file tree

Showing 28 changed files with 757 additions and 566 deletions.
diff --git a/components/FloatingContact.tsx b/components/FloatingContact.tsx
@@ -15,18 +15,19 @@ export function FloatingContact() {
   if (isProjectDetail) return null
 
   return (
-    <div className="fixed bottom-8 right-8 z-50">
+    <div className="fixed bottom-8 right-8 md:right-12 md:bottom-12 z-100">
       <motion.div
         initial={{ scale: 0 }}
         animate={{ scale: 1 }}
         transition={{ delay: 1 }}
       >
         <Button
-          size="lg"
-          className="rounded-full h-14 w-14 shadow-lg"
+          size="icon"
+          variant="default"
+          className="h-10 w-10 md:h-12 md:w-12 rounded-full"
           onClick={() => setIsOpen(true)}
         >
-          <Mail className="h-6 w-6" />
+          <Mail className="h-4 w-4 md:h-5 md:w-5" />
         </Button>
       </motion.div>
 
@@ -48,7 +49,7 @@ export function FloatingContact() {
             <Button asChild variant="outline" className="w-full">
               <a href="https://open.kakao.com/o/sHj0RZZg" target="_blank" rel="noopener noreferrer">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="22" viewBox="0 0 24 22" fill="currentColor">
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 9.54732C0 4.04892 5.64534 0 11.9753 0C18.3604 0 24 4.0534 24 9.64417C24 15.1426 18.3547 19.1915 12.0247 19.1915C11.4399 19.1915 10.8844 19.1593 10.3348 19.0947L6.01939 21.9516H5.81928C5.81852 21.9518 5.81776 21.952 5.81699 21.9522C5.78749 21.9601 5.74415 21.9708 5.69231 21.98C5.64319 21.9886 5.56367 22 5.46643 22C5.15978 22 4.9202 21.8848 4.84707 21.8489C4.73768 21.7951 4.58425 21.7047 4.44266 21.5657C4.26165 21.3879 4.11724 21.1606 4.03876 20.9037C3.97365 20.6906 3.92955 20.3658 4.05365 20.0209L4.82498 17.2436C1.98989 15.5429 0 12.7982 0 9.54732ZM11.9753 2.34043C6.37235 2.34043 2.35294 5.84543 2.35294 9.54732C2.35294 11.9834 3.99892 14.2547 6.73366 15.6195L7.59739 16.0505L6.90152 18.5562L9.77914 16.6511L10.2289 16.7191C10.8099 16.8068 11.3919 16.8511 12.0247 16.8511C17.6276 16.8511 21.6471 13.3461 21.6471 9.64417C21.6471 5.84096 17.6219 2.34043 11.9753 2.34043Z" />
+                  <path fillRule="evenodd" clipRule="evenodd" d="M0 9.54732C0 4.04892 5.64534 0 11.9753 0C18.3604 0 24 4.0534 24 9.64417C24 15.1426 18.3547 19.1915 12.0247 19.1915C11.4399 19.1915 10.8844 19.1593 10.3348 19.0947L6.01939 21.9516H5.81928C5.81852 21.9518 5.81776 21.952 5.81699 21.9522C5.78749 21.9601 5.74415 21.9708 5.69231 21.98C5.64319 21.9886 5.56367 22 5.46643 22C5.15978 22 4.9202 21.8848 4.84707 21.8489C4.73768 21.7951 4.58425 21.7047 4.44266 21.5657C4.26165 21.3879 4.11724 21.1606 4.03876 20.9037C3.97365 20.6906 3.92955 20.3658 4.05365 20.0209L4.82498 17.2436C1.98989 15.5429 0 12.7982 0 9.54732ZM11.9753 2.34043C6.37235 2.34043 2.35294 5.84543 2.35294 9.54732C2.35294 11.9834 3.99892 14.2547 6.73366 15.6195L7.59739 16.0505L6.90152 18.5562L9.77914 16.6511L10.2289 16.7191C10.8099 16.8068 11.3919 16.8511 12.0247 16.8511C17.6276 16.8511 21.6471 13.3461 21.6471 9.64417C21.6471 5.84096 17.6219 2.34043 11.9753 2.34043Z" />
                 </svg>
                 오픈 채팅 참여하기
               </a>

diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
@@ -9,6 +9,8 @@ import { motion } from 'framer-motion'
 import { ArrowRight } from 'lucide-react'
 import { ProjectStatus, ProjectStatusType } from '@/types/project'
 import type { BadgeProps } from "@/components/ui/badge"
+import { shadowStyles } from '@/lib/styles'
+import { cn } from '@/lib/utils'
 
 interface ProjectCardProps {
   id: string
@@ -29,84 +31,117 @@ export function ProjectCard({ id, title, description, tech, image, status }: Pro
   const router = useRouter()
 
   return (
-    <Card className="group overflow-hidden bg-background/50 backdrop-blur-sm border-border/40 
-                    hover:border-primary/30 transition-all duration-300 hover:shadow-lg">
-      <div 
-        className="aspect-video relative overflow-hidden cursor-pointer"
-        onClick={() => router.push(`/projects/${id}`)}
-        data-cursor=""
-      >
-        <Image
-          src={image}
-          alt={title}
-          width={1920}
-          height={1080}
-          className="object-cover w-full h-full transition-all duration-500 group-hover:scale-105"
-          priority={false}
-          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-        />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/50 to-black/30
-                      opacity-0 group-hover:opacity-100 transition-all duration-300">
-          <div className="absolute inset-0 flex items-center justify-center p-6">
-            <motion.div
-              initial={{ opacity: 0, y: 10 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.2 }}
-            >
-              <Button 
-                variant="outline" 
-                className="bg-background/10 backdrop-blur-md border-white/20 text-white 
-                         hover:bg-white/20 hover:border-white/40 transition-all duration-300
-                         px-6 py-2 rounded-full text-sm font-medium
-                         shadow-[0_0_15px_rgba(0,0,0,0.1)]"
+    <motion.div
+      whileHover={{ y: -5 }}
+      transition={{ type: "spring", stiffness: 300, damping: 20 }}
+    >
+      <Card className={cn(
+        "group overflow-hidden",
+        "bg-background/80 dark:bg-background/40",
+        "backdrop-blur-sm",
+        "transition-all duration-300",
+        "border-transparent",
+        shadowStyles.card.full,
+        "hover:shadow-lg hover:shadow-primary/5"
+      )}>
+        <div 
+          className="aspect-video relative overflow-hidden cursor-pointer"
+          onClick={() => router.push(`/projects/${id}`)}
+          data-cursor=""
+        >
+          <Image
+            src={image}
+            alt={title}
+            width={1920}
+            height={1080}
+            className="object-cover w-full h-full transition-all duration-500 group-hover:scale-105"
+            priority
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          />
+          <motion.div 
+            className="absolute inset-0 bg-gradient-to-t from-foreground/80 via-foreground/50 to-foreground/30"
+            initial={{ opacity: 0 }}
+            whileHover={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+          >
+            <div className="absolute inset-0 flex items-center justify-center p-6">
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ 
+                  duration: 0.4,
+                  ease: "easeOut",
+                  delay: 0.1
+                }}
               >
-                프로젝트 상세보기
-                <ArrowRight className="w-4 h-4 ml-2" />
-              </Button>
-            </motion.div>
-          </div>
+                <Button 
+                  variant="outline" 
+                  className="bg-background/10 backdrop-blur-md border-white/20 text-white 
+                           hover:bg-white/20 hover:border-white/40 
+                           px-6 py-2 rounded-full text-sm font-medium
+                           shadow-[0_0_15px_rgba(0,0,0,0.1)]
+                           transition-all duration-300
+                           hover:scale-105"
+                >
+                  프로젝트 상세보기
+                  <motion.div
+                    className="inline-block ml-2"
+                    whileHover={{ x: 3 }}
+                    transition={{ type: "spring", stiffness: 400, damping: 10 }}
+                  >
+                    <ArrowRight className="w-4 h-4" />
+                  </motion.div>
+                </Button>
+              </motion.div>
+            </div>
+          </motion.div>
         </div>
-      </div>
 
-      <div className="p-6 space-y-5">
-        <div className="flex-1 space-y-2">
-          <div className="flex items-center gap-2">
-            <h3 className="text-lg font-semibold tracking-tight">{title}</h3>
-            <Badge 
-              variant={getStatusVariant(status.main)}
-              className="text-[10px] px-2 py-0.5 font-medium shrink-0"
-            >
-              {status.main}
-            </Badge>
+        <motion.div 
+          className="p-6 space-y-5"
+          initial={{ opacity: 0, y: 10 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3 }}
+        >
+          <div className="flex-1 space-y-2">
+            <div className="flex items-center gap-2">
+              <h3 className="text-lg font-semibold tracking-tight">{title}</h3>
+              <Badge 
+                variant={getStatusVariant(status.main)}
+                className="text-[10px] px-2 py-0.5 font-medium shrink-0"
+              >
+                {status.main}
+              </Badge>
+            </div>
+            <p className="text-sm text-muted-foreground/80 line-clamp-2">
+              {description}
+            </p>
           </div>
-          <p className="text-sm text-muted-foreground/80 line-clamp-2">
-            {description}
-          </p>
-        </div>
 
-        <div className="border-t border-border/40" />
+          <div className="border-t border-transparent" />
 
-        <div className="flex flex-wrap gap-2">
-          {tech.slice(0, 4).map((item) => (
-            <span 
-              key={item} 
-              className="px-2 py-1 rounded-md text-xs font-medium
-                       bg-muted/50 text-muted-foreground/70 
-                       hover:text-muted-foreground/90 transition-colors"
-            >
-              {item}
-            </span>
-          ))}
-          {tech.length > 4 && (
-            <span className="px-2 py-1 rounded-md text-xs font-medium
-                         bg-muted/30 text-muted-foreground/50
-                         hover:text-muted-foreground/70 transition-colors">
-              +{tech.length - 4}
-            </span>
-          )}
-        </div>
-      </div>
-    </Card>
+          <div className="flex flex-wrap gap-2">
+            {tech.slice(0, 4).map((item) => (
+              <span 
+                key={item} 
+                className="px-2 py-1 rounded-md text-xs font-medium
+                         bg-muted/90 text-muted-foreground/70 
+                         hover:text-muted-foreground/90 transition-colors"
+              >
+                {item}
+              </span>
+            ))}
+            {tech.length > 4 && (
+              <span className="px-2 py-1 rounded-md text-xs font-medium
+                           bg-muted/50 text-muted-foreground/50
+                           hover:text-muted-foreground/70 transition-colors">
+                +{tech.length - 4}
+              </span>
+            )}
+          </div>
+        </motion.div>
+      </Card>
+    </motion.div>
   )
 }
 

diff --git a/components/ScrollProgress.tsx b/components/ScrollProgress.tsx
@@ -11,9 +11,9 @@ export const ScrollProgress = () => {
   })
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 h-1 bg-muted z-50">
+    <div className="fixed bottom-0 left-0 right-0 h-1 bg-primary-foreground z-40">
       <motion.div
-        className="h-full bg-primary origin-left"
+        className="h-full bg-accent/80 origin-left"
         style={{ scaleX }}
       />
     </div>