Fix: Add state for brokenURL

codeit-bootcamp-frontend · May 17, 2024 · 4c5ba76 · 4c5ba76
1 parent d7e115e
commit 4c5ba76
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/components/Navigation/index.module.css b/components/Navigation/index.module.css
@@ -3,7 +3,7 @@
   justify-content: center;
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 99;
   width: 100%;
   background-color: var(--light-blue);
 }

diff --git a/components/ShareCards/index.tsx b/components/ShareCards/index.tsx
@@ -2,7 +2,7 @@ import { useFetch } from '@/hooks/useFetch';
 import { formatDate, generateTimeText } from '@/utils/date';
 import styles from '@/components/ShareCards/index.module.css';
 import Image from 'next/image';
-import { SyntheticEvent } from 'react';
+import { SyntheticEvent, useState } from 'react';
 import thumbnail from '@/public/thumbnail.svg';
 import Link from 'next/link';
 
@@ -24,9 +24,12 @@ interface FolderData {
 function ShareCards({ url }: { url: string }) {
   const Card = useFetch<FolderData>(url);
   const CardDatas = Card?.folder.links;
+  const [imageErrors, setImageErrors] = useState<{ [key: string]: boolean }>(
+    {}
+  );
 
-  const AddThumbnail = (e: SyntheticEvent<HTMLImageElement, Event>) => {
-    e.currentTarget.src = '/thumbnail.svg';
+  const handleImageError = (id: string) => {
+    setImageErrors((prev) => ({ ...prev, [id]: true }));
   };
 
   return (
@@ -41,10 +44,14 @@ function ShareCards({ url }: { url: string }) {
                 <Image
                   width="320"
                   height="200"
-                  src={CardData.imageSource ? CardData.imageSource : thumbnail}
+                  src={
+                    imageErrors[CardData.id]
+                      ? thumbnail
+                      : CardData.imageSource || thumbnail
+                  }
                   className={styles.card_img}
                   alt={CardData.imageSource ? CardData.title : '썸네일'}
-                  onError={AddThumbnail}
+                  onError={() => handleImageError(CardData.id)}
                 />
               </div>
               <div className={styles.card_txt_div}>

diff --git a/pages/shared/index.tsx b/pages/shared/index.tsx
@@ -13,7 +13,7 @@ function SharedPage() {
     <>
       <Navigation />
       <FolderData />
-      <div className={styles.PageDisplay}>
+      <div className={styles.pageDisplay}>
         <SearchBar />
         <ShareCards url={BASE_URL_FOLDER_SAMPLE} />
       </div>

diff --git a/pages/signin/index.module.css b/pages/signin/index.module.css
@@ -4,7 +4,7 @@
   align-items: center;
   padding: 238px 0 253px;
   background-color: var(--light-blue);
-  height: 100%;
+  height: 100vh;
 
   @media (max-width: 1200px) {
     padding: 200px 0 291px;

diff --git a/pages/signup/index.module.css b/pages/signup/index.module.css
@@ -4,7 +4,7 @@
   align-items: center;
   padding: 238px 0 253px;
   background-color: var(--light-blue);
-  height: 100%;
+  height: 100vh;
 
   @media (max-width: 1200px) {
     padding: 200px 0 291px;