💄 fix: 반응형 레이아웃 개선

- 프로젝트 디테일 브레이크 포인트 변경 - 모바일에서 커스텀 커서 제거 - 프로젝트 디테일 섹션 구조 변경
gr22nist · Nov 15, 2024 · ccb0a05 · ccb0a05
1 parent 15f08ae
commit ccb0a05
Show file tree

Hide file tree

Showing 10 changed files with 180 additions and 97 deletions.
diff --git a/components/CustomCursor.tsx b/components/CustomCursor.tsx
@@ -2,6 +2,7 @@
 
 import { motion, useMotionValue, useSpring } from "framer-motion"
 import { useEffect, useState } from "react"
+import { useMediaQuery } from "@/hooks/useMediaQuery"
 
 export function CustomCursor() {
   const [isHovered, setIsHovered] = useState(false)
@@ -10,14 +11,15 @@ export function CustomCursor() {
   const cursorSize = useMotionValue(16)
   const cursorX = useMotionValue(-100)
   const cursorY = useMotionValue(-100)
+  const isMobile = useMediaQuery('(max-width: 768px)')
 
   const springConfig = { damping: 25, stiffness: 200 }
   const cursorXSpring = useSpring(cursorX, springConfig)
   const cursorYSpring = useSpring(cursorY, springConfig)
   const cursorSizeSpring = useSpring(cursorSize, springConfig)
 
   useEffect(() => {
-    if (typeof window === 'undefined') return
+    if (typeof window === 'undefined' || isMobile) return
 
     const moveCursor = (e: MouseEvent) => {
       cursorX.set(e.clientX)
@@ -76,7 +78,9 @@ export function CustomCursor() {
       window.removeEventListener("mouseup", handleMouseUp)
       observer.disconnect()
     }
-  }, [cursorX, cursorY, cursorSize, isHovered])
+  }, [cursorX, cursorY, cursorSize, isHovered, isMobile])
+
+  if (isMobile) return null
 
   return (
     <motion.div

diff --git a/components/ProjectCard.tsx b/components/ProjectCard.tsx
@@ -15,7 +15,7 @@ import { cn } from '@/lib/utils'
 interface ProjectCardProps {
   id: string
   title: string
-  description: string
+  description: string | string[]
   tech: string[]
   image: string
   links: {
@@ -113,9 +113,21 @@ export function ProjectCard({ id, title, description, tech, image, status }: Pro
                 {status.main}
               </Badge>
             </div>
-            <p className="text-sm text-muted-foreground/80 line-clamp-2">
-              {description}
-            </p>
+            <div className="text-muted-foreground">
+              {Array.isArray(description) ? (
+                description.map((desc, index) => (
+                  <p key={index} className="leading-relaxed">
+                    {desc}
+                  </p>
+                ))
+              ) : (
+                description.split('\n').map((desc, index) => (
+                  <p key={index} className="leading-relaxed">
+                    {desc}
+                  </p>
+                ))
+              )}
+            </div>
           </div>
 
           <div className="border-t border-transparent" />

diff --git a/components/project/Features.tsx b/components/project/Features.tsx
@@ -1,11 +1,10 @@
 "use client"
 
 import { Section } from "./Section"
-import { Badge } from "@/components/ui/badge"
 
 interface Feature {
   title: string
-  description: string
+  description: string | string[]
   tags?: string[]
 }
 
@@ -20,13 +19,21 @@ export function Features({ features }: FeaturesProps) {
         {features.map((feature, index) => (
           <div key={index} className="space-y-4">
             <h3 className="text-xl font-semibold">{feature.title}</h3>
-            <p className="text-muted-foreground">{feature.description}</p>
-            {feature.tags && (
+            <div className="text-muted-foreground">
+              {Array.isArray(feature.description) ? (
+                feature.description.map((desc, i) => (
+                  <p key={i} className="mt-1">{desc}</p>
+                ))
+              ) : (
+                <p>{feature.description}</p>
+              )}
+            </div>
+            {feature.tags && feature.tags.length > 0 && (
               <div className="flex flex-wrap gap-2">
-                {feature.tags.map((tag) => (
-                  <Badge key={tag} variant="outline">
-                    {tag}
-                  </Badge>
+                {feature.tags.map((tag, i) => (
+                  <span key={i} className="text-sm text-muted-foreground">
+                    #{tag}
+                  </span>
                 ))}
               </div>
             )}

diff --git a/components/project/ProjectBackground.tsx b/components/project/ProjectBackground.tsx
@@ -7,7 +7,7 @@ export const ProjectBackground = () => (
           dark:from-gray-950 dark:via-slate-950 dark:to-gray-950 opacity-40 dark:opacity-70" 
       />
       <div 
-        className="absolute inset-0 [mask-image:url(/noise.svg)] [mask-size:100px] 
+        className="absolute inset-0 [mask-image:url(/images/noise.svg)] [mask-size:100px] 
           mix-blend-soft-light opacity-30"
       />
   </div>

diff --git a/components/project/ProjectDetailClient.tsx b/components/project/ProjectDetailClient.tsx
@@ -10,7 +10,6 @@ import { ProjectSkeleton } from './ProjectSkeleton'
 import { ScrollToTop } from '@/components/ScrollToTop'
 import Footer from '../layout/Footer'
 
-// 동적 임포트로 변경
 const ProjectOverview = dynamic(() => import('./ProjectOverview').then(mod => mod.ProjectOverview), {
   loading: () => <ProjectSkeleton />
 })
@@ -53,9 +52,17 @@ export function ProjectDetailClient({ project }: ProjectDetailClientProps) {
             {/* 1. 프로젝트 소개 */}
             <div className="space-y-4">
               <h1 className="text-4xl font-bold text-center">{project.title}</h1>
-              <p className="text-lg text-muted-foreground text-center max-w-2xl mx-auto">
-                {project.description}
-              </p>
+              <div className="text-lg text-muted-foreground text-center max-w-2xl mx-auto">
+                {Array.isArray(project.description) ? (
+                  project.description.map((desc, index) => (
+                    <p key={index}>{desc}</p>
+                  ))
+                ) : (
+                  project.description.split('\n').map((desc, index) => (
+                    <p key={index}>{desc}</p>
+                  ))
+                )}
+              </div>
             </div>
 
             {/* 2. 갤러리 */}
@@ -72,10 +79,10 @@ export function ProjectDetailClient({ project }: ProjectDetailClientProps) {
             )}
 
             {/* 3. 프로젝트 상세 정보 */}
-            <div className="grid xl:grid-cols-2 gap-6">
+            <div className="grid lg:grid-cols-2 gap-6">
               {/* 왼쪽: 프로젝트 개요 */}
               <div className="order-first">
-                <div className="xl:sticky xl:top-20">
+                <div className="lg:sticky lg:top-20">
                   <Suspense fallback={<ProjectSkeleton />}>
                     <div className="p-6 rounded-lg border bg-card/80 backdrop-blur-sm">
                       <ProjectOverview 

diff --git a/components/project/TechStacks.tsx b/components/project/TechStacks.tsx
@@ -1,30 +1,44 @@
-import { Badge } from "../ui/badge"
 import { Section } from "./Section"
+import { Badge } from "../ui/badge"
+
+interface TechStack {
+  name: string
+  reason: string
+  description?: string | string[]
+}
 
 interface TechStacksProps {
-  stacks: {
-    name: string
-    reason: string
-    description?: string
-  }[]
+  stacks: TechStack[]
 }
 
 export function TechStacks({ stacks }: TechStacksProps) {
   return (
-    <Section title="기술 스택 선정 이유">
-      <div className="grid gap-8">
+    <Section title="기술 선정 이유">
+      <div className="grid gap-4">
         {stacks.map((stack, index) => (
-          <div key={index} className="relative">
-            <div className="flex items-center gap-3 mb-4">
-              <h3 className="text-xl font-semibold">{stack.name}</h3>
-              <Badge variant="outline">{stack.name}</Badge>
-            </div>
-            <div className="space-y-3 pl-4 border-l-2 border-border">
-              <p className="text-muted-foreground">{stack.reason}</p>
-              {stack.description && (
-                <p className="text-sm text-muted-foreground/80">{stack.description}</p>
-              )}
+          <div 
+            key={index}
+            className="p-4 rounded-lg bg-foreground/5"
+          >
+            <div className="flex flex-wrap items-center gap-3 mb-3">
+              <h3 className="text-lg font-semibold">{stack.name}</h3>
+              <Badge variant="secondary">
+                {stack.reason}
+              </Badge>
             </div>
+            {stack.description && (
+              <div className="text-muted-foreground">
+                {Array.isArray(stack.description) ? (
+                  <ul className="space-y-1.5 list-disc list-inside">
+                    {stack.description.map((desc, i) => (
+                      <li key={i} className="leading-relaxed">{desc}</li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p className="leading-relaxed">{stack.description}</p>
+                )}
+              </div>
+            )}
           </div>
         ))}
       </div>