fix: 이미지 변경 시 새로 렌더링 되도록 수정 (#126)

* fix: 이미지 변경 시 새로 렌더링 되도록 수정

* chore: fix lint errors

* refactor: improve image fallback handling

* fix: replace right type annotation instead of any

---------

Co-authored-by: Jeongmin Lee <clcl6084@gmail.com>

Author: sudosubin

.script/gSheet.js

@@ -188,7 +188,7 @@ function processPeopleData(peoplesRow, config) {
     const row = it['_rawData'];
 
     const thumbnailId = (row[12] ?? '').match(/\/d\/(.*?)\/view/)?.[1] ?? '';
-    const key = row[0] ?? Math.random().toString(36).substring(2, 15);
+    const key = row[0] || Math.random().toString(36).substring(2, 15);
     const period = row[4];
 
     periodsMap[period].push({

src/components/molecules/GlowArea/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { PropsWithChildren } from 'react';
+import { CSSProperties, PropsWithChildren } from 'react';
 
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion, TargetAndTransition } from 'framer-motion';
 
 import useElementSize from '@/hook/useElementSize';
 import { createSVGMask } from '@/libs/utils/svg';
@@ -21,7 +21,9 @@ function GlowArea({ rx, children }: PropsWithChildren<GlowAreaProps>) {
       <div style={{ position: 'relative' }}>
         <motion.div
           className={styles.border}
-          animate={{ '--border-angle': ['0turn', '1turn'] } as any}
+          animate={
+            { '--border-angle': ['0turn', '1turn'] } as TargetAndTransition
+          }
           transition={{
             repeat: Infinity,
             duration: 6,
@@ -33,7 +35,7 @@ function GlowArea({ rx, children }: PropsWithChildren<GlowAreaProps>) {
               '--area-width': `${width}px`,
               '--area-height': `${height}px`,
               '--svg-mask': `url(${createSVGMask(width + 1, height + 1, rx)})`,
-            } as any
+            } as CSSProperties
           }
         ></motion.div>
         <div className={styles.area} ref={ref}>

src/components/molecules/Image/index.tsx

@@ -1,4 +1,6 @@
-import React, { CSSProperties, ReactNode, useCallback } from 'react';
+'use client';
+
+import { CSSProperties, ReactNode, useCallback } from 'react';
 
 import NextImage, { ImageProps as NextImageProps } from 'next/image';
 
@@ -49,36 +51,28 @@ function Image({
     [fill, width, height, className],
   );
 
-  if (!src) {
-    return (
-      <>
-        {renderFillImage(
-          <NextImage
-            src={'/assets/empty_image.png'}
-            className={defaultClassName}
-            alt="기본 이미지"
-            fill={fill}
-            sizes={defaultSizes}
-            width={fill ? undefined : width}
-            height={fill ? undefined : height}
-            {...rest}
-          />,
-        )}
-      </>
-    );
-  }
+  const fallbackImageSource = '/assets/empty_image.png';
+  const imageSrc = src || fallbackImageSource;
+  const imageAlt = alt || 'Siper Image';
 
   return (
     <>
       {renderFillImage(
         <NextImage
-          src={src}
-          alt={alt}
+          key={imageSrc}
+          src={imageSrc}
+          alt={imageAlt}
           className={defaultClassName}
           fill={fill}
           sizes={defaultSizes}
           width={fill ? undefined : width}
           height={fill ? undefined : height}
+          onError={(e) => {
+            const target = e.target as HTMLImageElement;
+            if (target.src !== fallbackImageSource) {
+              target.src = fallbackImageSource;
+            }
+          }}
           {...rest}
         />,
       )}

src/libs/utils/tick.ts

@@ -5,14 +5,14 @@ export const debounce = <T extends (...args: unknown[]) => unknown>(
   let timer: ReturnType<typeof setTimeout>;
 
   return (...args: Parameters<T>): ReturnType<T> => {
-    let result: any;
+    let result;
     if (timer) {
       clearTimeout(timer);
     }
     timer = setTimeout(() => {
       result = func(...args);
     }, delay);
-    return result;
+    return result as ReturnType<T>;
   };
 };