From 0c33c512aac56031a2e9d527ae2bca63d17620dd Mon Sep 17 00:00:00 2001
From: Harang <dbd02169@naver.com>
Date: Sat, 19 Oct 2024 21:53:29 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=20thumbnail=20=EC=97=86=EB=8A=94=20=EC=BC=80=EC=9D=B4=EC=8A=A4?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9=20(#206)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/projects/[id]/page.tsx       |  6 +--
 .../organisms/ProjectCards/index.tsx          | 18 +++++----
 .../organisms/ProjectsSlider/index.tsx        | 37 ++++++++++++-------
 .../components/pages/ProjectPage/index.tsx    | 25 +++++++------
 apps/web/src/lib/assets/data/organizers.json  |  4 +-
 packages/core/src/@types/project.ts           |  2 +-
 6 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/apps/web/src/app/projects/[id]/page.tsx b/apps/web/src/app/projects/[id]/page.tsx
index 6ed736da..825dbb0b 100644
--- 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
index be1fd130..0f179bca 100644
--- 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
index 516c7822..76714c6f 100644
--- a/apps/web/src/components/organisms/ProjectsSlider/index.tsx
+++ b/apps/web/src/components/organisms/ProjectsSlider/index.tsx
@@ -3,11 +3,17 @@ 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();
 
@@ -15,20 +21,23 @@ function ProjectsSlider() {
     <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
index 33e1046d..195abdd0 100644
--- 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
index 651e058b..1084f1b5 100644
--- 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
index 8041d614..31967cbc 100644
--- 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;
 }