💄 style: 태블릿 레이아웃 일부 개선

gr22nist · Nov 17, 2024 · f17663b · f17663b
1 parent 439375e
commit f17663b
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 29 deletions.
diff --git a/components/FloatingContact.tsx b/components/FloatingContact.tsx
@@ -33,7 +33,7 @@ export function FloatingContact() {
       </motion.div>
 
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent className="max-w-sm sm:max-w-lg">
+        <DialogContent className="max-w-xs sm:max-w-lg">
           <DialogHeader>
             <DialogTitle>연락하기</DialogTitle>
             <DialogDescription>
@@ -43,7 +43,7 @@ export function FloatingContact() {
           <div className="grid gap-4 py-4">
             <Button asChild variant="outline" className="w-full">
               <a href="mailto:[email protected]">
-                <Mail className="mr-2 h-4 w-4" />
+                <Mail className="h-4 w-4" />
                 이메일 보내기
               </a>
             </Button>

diff --git a/components/project/Gallery.tsx b/components/project/Gallery.tsx
@@ -32,7 +32,7 @@ export function Gallery({
       className
     )}>
       <div className={cn(
-        "aspect-[16/9] md:aspect-[21/9]",
+        "aspect-video",
         isModal && "aspect-auto max-h-[80vh]",
         "relative"
       )}>
@@ -49,9 +49,10 @@ export function Gallery({
               src={images[currentIndex]}
               alt={`${title} 스크린샷 ${currentIndex + 1}`}
               fill
-              className="object-cover"
-              priority={currentIndex === 0}
-              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              className="object-contain"
+              quality={85}
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw" 
+              priority
             />
           </motion.div>
         </AnimatePresence>

diff --git a/components/project/ProjectDetailClient.tsx b/components/project/ProjectDetailClient.tsx
@@ -41,8 +41,8 @@ export function ProjectDetailClient({ project }: ProjectDetailClientProps) {
     <div className="min-h-screen text-foreground">
       <ProjectBackground />
       <ProjectHeader />
-      <main className="py-12">
-        <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+      <main className="py-10">
+        <div className="max-w-screen-xl mx-auto flex flex-col gap-8 px-4 sm:px-6 lg:px-8">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}

diff --git a/components/project/ProjectOverview.tsx b/components/project/ProjectOverview.tsx
@@ -9,10 +9,10 @@ type BadgeVariant = NonNullable<BadgeProps["variant"]>
 
 export function ProjectOverview({ overview, tech, role, links, status, period }: ProjectOverviewProps) {
   return (
-    <div className="space-y-8">
-      <Section title="프로젝트 개요">
-        <div className="space-y-8">
-          <div className="flex flex-wrap items-center gap-3">
+    <>
+      <Section title="프로젝트 정보">
+        <div className="flex flex-col gap-8">
+          <div className="flex flex-wrap items-center gap-2">
             <Badge variant={getStatusVariant(status.main)}>
               {status.main}
             </Badge>
@@ -49,7 +49,7 @@ export function ProjectOverview({ overview, tech, role, links, status, period }:
           <div className="space-y-3">
             <h4 className="text-lg font-semibold">담당 역할</h4>
             <div className="space-y-3">
-              <div className="flex items-center gap-2">
+              <div className="flex flex-col sm:flex-row items-start gap-2">
                 <span className="font-medium">{role.main}</span>
                 <Badge>참여율 {role.participation}%</Badge>
               </div>
@@ -79,7 +79,7 @@ export function ProjectOverview({ overview, tech, role, links, status, period }:
           </div>
         </div>
       </Section>
-    </div>
+    </>
   )
 }
 

diff --git a/components/sections/HeroSection.tsx b/components/sections/HeroSection.tsx
@@ -104,7 +104,7 @@ export default function HeroSection() {
   const FileNameLabel = memo(function FileNameLabel() {
     return (
       <span 
-        className="text-xs text-muted-foreground ml-2 select-none hidden sm:inline-block"
+        className="text-xs text-primary ml-2 select-none hidden sm:inline-block"
         aria-hidden="true"
       >
         devin-down.js
@@ -148,12 +148,12 @@ export default function HeroSection() {
                   </div>
                   <FileNameLabel />
                 </div>
-                <div className="text-xs text-muted-foreground">
-                  <span className="px-2 py-1 rounded-md bg-primary/10">main</span>
+                <div className="text-xs text-primary">
+                  <span className="px-2 py-1 rounded-md bg-background/80">main</span>
                 </div>
               </div>
 
-              <div className="p-4 sm:p-6 space-y-4 font-mono text-sm sm:text-base overflow-x-auto">
+              <div className="p-4 sm:p-6 space-y-4 font-mono text-xs sm:text-sm overflow-x-auto">
                 <motion.div className="group whitespace-nowrap sm:whitespace-normal">
                   <span className="text-zinc-800 dark:text-white">{importText}</span>
                 </motion.div>

diff --git a/data/projects.ts b/data/projects.ts
@@ -132,10 +132,9 @@ export const projects: Project[] = [
     },
     image: "/images/dd-thumbnail.svg",
     gallery: [
-      "/images/project/project1.jpg",
-      "/images/project/project1.jpg",
-      "/images/project/project1.jpg",
-      "/images/project/project1.jpg"
+      "/images/project/dd-01.jpg",
+      "/images/project/dd-02.jpg",
+      "/images/project/dd-03.jpg",
     ],
     performance: {
       desktop: {
@@ -315,8 +314,9 @@ export const projects: Project[] = [
     },
     image: "/images/sqool-thumbnail.svg",
     gallery: [
-      "/images/project/sqool-01.png",
-      "/images/project/sqool-02.png",
+      "/images/project/sqool-01.jpg",
+      "/images/project/sqool-02.jpg",
+      "/images/project/sqool-03.jpg",
     ],
     performance: {
       desktop: {
@@ -344,8 +344,9 @@ export const projects: Project[] = [
         main: "프론트엔드 개발 (개인 프로젝트)",
         tasks: [
           "IndexedDB를 활용한 클라이언트 사이드 데이터 저장 구현",
-          "Zustand를 활용한 상태 관리 및 실시간 미리보기 기능 개발",
           "자동 저장, 내보내기/가져오기 시스템 구축",
+          "Zustand를 활용한 상태 관리",
+          "실시간 미리보기 및 디자인 테마 개발 진행 중"
         ],
         participation: 100
       },
@@ -472,10 +473,8 @@ export const projects: Project[] = [
     },
     image: "/images/myr-thumbnail.svg",
     gallery: [
-      "/images/project/project1.jpg",
-      "/images/project/project1.jpg",
-      "/images/project/project1.jpg",
-      "/images/project/project1.jpg"
+      "/images/project/myr-01.jpg",
+      "/images/project/myr-02.jpg",
     ],
     performance: undefined
   }