From 4c5ba7667533d011b040372e0b0a60deb92f3ae0 Mon Sep 17 00:00:00 2001
From: Jisung Jeong <ssjeond@naver.com>
Date: Fri, 17 May 2024 18:47:07 +0900
Subject: [PATCH] Fix: Add state for brokenURL

---
 components/Navigation/index.module.css |  2 +-
 components/ShareCards/index.tsx        | 17 ++++++++++++-----
 pages/shared/index.tsx                 |  2 +-
 pages/signin/index.module.css          |  2 +-
 pages/signup/index.module.css          |  2 +-
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/Navigation/index.module.css b/components/Navigation/index.module.css
index fb0cc6ee7..af501dad6 100644
--- 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
index 6f251d22c..713b1ac4b 100644
--- 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
index 2a58950d7..4a01673dd 100644
--- 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
index e26b5e787..71909c8f9 100644
--- 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
index 26c1d2f0e..774a1c9d5 100644
--- 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;