fix: 프로젝트 thumbnail 없는 케이스 적용 (#206)

DNDACADEMY · Oct 19, 2024 · 0c33c51 · 0c33c51
1 parent 5a50e81
commit 0c33c51
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 40 deletions.
diff --git a/apps/web/src/app/projects/[id]/page.tsx b/apps/web/src/app/projects/[id]/page.tsx
@@ -3,7 +3,7 @@ import { notFound } from 'next/navigation';
 
 import ProjectPage from '@/components/pages/ProjectPage';
 import { getProject, getProjects } from '@/lib/apis/project';
-import { DEFAULT_METADATA } from '@/lib/constants/metadata';
+import METADATA, { DEFAULT_METADATA } from '@/lib/constants/metadata';
 
 export const dynamicParams = false;
 
@@ -20,12 +20,12 @@ export function generateMetadata({ params }: Props): Metadata {
     return DEFAULT_METADATA;
   }
 
-  const images = [{
+  const images = project.thumbnail ? [{
     url: project.thumbnail,
     width: 800,
     height: 600,
     alt: project.name,
-  }];
+  }] : METADATA.images;
 
   return {
     title: `${project.name} - DND`,

diff --git a/apps/web/src/components/organisms/ProjectCards/index.tsx b/apps/web/src/components/organisms/ProjectCards/index.tsx
@@ -17,14 +17,16 @@ function ProjectCards({ projects }: Props) {
         flag, id, title, thumbnail, skill: skills, name,
       }) => (
         <Link key={id} className={styles.projectCardWrapper} href={`/projects/${id}`}>
-          <Image
-            src={thumbnail}
-            alt={name}
-            width="0"
-            height="0"
-            sizes="(max-width: 1204px) 50vw, 33vw"
-            className={styles.thumbnail}
-          />
+          {thumbnail && (
+            <Image
+              src={thumbnail}
+              alt={name}
+              width="0"
+              height="0"
+              sizes="(max-width: 1204px) 50vw, 33vw"
+              className={styles.thumbnail}
+            />
+          )}
           <div className={styles.contents}>
             <div className={styles.flag}>{flag}</div>
             <div className={styles.name}>{name}</div>

diff --git a/apps/web/src/components/organisms/ProjectsSlider/index.tsx b/apps/web/src/components/organisms/ProjectsSlider/index.tsx
@@ -3,32 +3,41 @@ import Marquee from 'react-fast-marquee';
 import Image from 'next/image';
 import Link from 'next/link';
 
+import { type Project } from '@dnd-academy/core';
+
 import { getProjects } from '@/lib/apis/project';
 import blurDataUrl from '@/lib/data/blurDataUrl';
 
 import styles from './index.module.scss';
 
+type ThumbnailProject = Project & {
+  thumbnail: string;
+};
+
 function ProjectsSlider() {
   const projects = getProjects();
 
   return (
     <div className={styles.projectsSlider}>
       <Marquee pauseOnHover speed={100} className={styles.marquee}>
         <div className={styles.projectSliderWrapper}>
-          {projects.slice(0, 20).map(({ id, thumbnail, title }) => (
-            <Link key={id} href={`/projects/${id}`} prefetch={false}>
-              <Image
-                key={id}
-                src={thumbnail}
-                alt={title}
-                width={271}
-                height={158}
-                placeholder="blur"
-                blurDataURL={blurDataUrl.projectSlider}
-                className={styles.thumbnail}
-              />
-            </Link>
-          ))}
+          {[...projects]
+            .filter((project): project is ThumbnailProject => Boolean(project?.thumbnail))
+            .slice(0, 20)
+            .map(({ id, thumbnail, title }) => (
+              <Link key={id} href={`/projects/${id}`} prefetch={false}>
+                <Image
+                  key={id}
+                  src={thumbnail}
+                  alt={title}
+                  width={271}
+                  height={158}
+                  placeholder="blur"
+                  blurDataURL={blurDataUrl.projectSlider}
+                  className={styles.thumbnail}
+                />
+              </Link>
+            ))}
         </div>
       </Marquee>
     </div>

diff --git a/apps/web/src/components/pages/ProjectPage/index.tsx b/apps/web/src/components/pages/ProjectPage/index.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 
-import type { Project } from '@dnd-academy/core';
+import { type Project } from '@dnd-academy/core';
 import { Badge, Button, SkillTag } from '@dnd-academy/ui';
 
 import DetailNavigation from '@/components/molecules/DetailNavigation';
@@ -39,20 +39,21 @@ function ProjectPage({ project }: Props) {
       />
       <div className={styles.projectPageContents}>
         <section className={styles.projectDetail}>
-          {project?.pdf ? (
+          {project?.pdf && (
             <div className={styles.pdfWrapper}>
               <PDFViewer url={project.pdf} />
             </div>
-          ) : (
-            <div className={styles.thumbnailWrapper}>
-              <Image
-                fill
-                src={project.thumbnail}
-                alt={project.name}
-                className={styles.thumbnail}
-                sizes="(max-width: 768px) 100vw, 768px"
-              />
-            </div>
+          )}
+          {!project?.pdf && project?.thumbnail && (
+          <div className={styles.thumbnailWrapper}>
+            <Image
+              fill
+              src={project.thumbnail}
+              alt={project.name}
+              className={styles.thumbnail}
+              sizes="(max-width: 768px) 100vw, 768px"
+            />
+          </div>
           )}
           <div className={styles.projectIntroduceTitleWrapper}>
             <div className={styles.header}>

diff --git a/apps/web/src/lib/assets/data/organizers.json b/apps/web/src/lib/assets/data/organizers.json
@@ -717,8 +717,8 @@
       "linkedin": "https://www.linkedin.com/in/seungmin95"
     },
     "career": {
-      "now": ["비마이프렌즈 프론트엔드 개발자"],
-      "previous": ["카사코리아 프론트엔드 개발자"]
+      "now": ["레브잇 프론트엔드 개발자"],
+      "previous": ["비마이프렌즈 프론트엔드 개발자", "카사코리아 프론트엔드 개발자"]
     },
     "mbti": "INFJ",
     "questions": {

diff --git a/packages/core/src/@types/project.ts b/packages/core/src/@types/project.ts
@@ -12,7 +12,7 @@ export interface Project {
   images?: string[];
   flag: ProjectFlag;
   skill: string[];
-  thumbnail: string;
+  thumbnail?: string;
   pdf: string | null;
   projectLinks: ProjectLinks;
 }