HOTFIX: 리스트 수정 아이템 스탭 미리보기 이미지 오류 해결 및 헤더 컴포넌트 높이 수정 (#32)

* Fix: 아이템 이미지 미리보기에 String 타입 URL 로직도 추가 및 import 방식 오류 해결 * Design: 헤더 높이 변경에 따른 CSS 수정 * Fix: 타입 대문자 소문자로 수정
8-Sprinters · Feb 15, 2024 · 74fa3ca · 74fa3ca
1 parent 9b8a57c
commit 74fa3ca
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/src/app/list/create/_components/item/Items.tsx b/src/app/list/create/_components/item/Items.tsx
@@ -179,7 +179,7 @@ export default function Items({ disabled }: ItemsProps) {
                           watchItems[index]?.imageUrl !== '' && (
                             <Preview
                               type="image"
-                              imageFile={watchItems[index]?.imageUrl?.[0]}
+                              imageFile={watchItems[index]?.imageUrl}
                               handleClearButtonClick={() => {
                                 setValue(`items.${index}.imageUrl`, '');
                               }}

diff --git a/src/app/list/create/_components/item/Preview.tsx b/src/app/list/create/_components/item/Preview.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Image from 'next/image';
 
 import ClearBlackIcon from '/public/icons/clear_x_black.svg';
@@ -18,7 +18,7 @@ type LinkProps = PreviewBaseProps & {
 
 type ImageProps = PreviewBaseProps & {
   type: 'image';
-  imageFile: File;
+  imageFile: FileList | string;
 };
 
 type PreviewProps = LinkProps | ImageProps;
@@ -31,13 +31,21 @@ export default function Preview(props: PreviewProps) {
     props.handleClearButtonClick();
   };
 
-  if (props.type === 'image' && props.imageFile) {
-    const reader = new FileReader();
-    reader.onloadend = () => {
-      setPreview(reader.result as string);
-    };
-    reader.readAsDataURL(props.imageFile);
-  }
+  useEffect(() => {
+    if (props.type === 'image' && props.imageFile) {
+      if (typeof props.imageFile === 'string') {
+        // URL인 경우
+        setPreview(props.imageFile);
+      } else {
+        // FileList인 경우 FileReader를 사용하여 처리 로직
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          setPreview(reader.result as string);
+        };
+        reader.readAsDataURL(props.imageFile[0] as File);
+      }
+    }
+  }, [props]);
 
   return (
     <div
@@ -57,7 +65,7 @@ export default function Preview(props: PreviewProps) {
           <p className={styles.domainText}>{props.domain}</p>
         </>
       )}
-      {props.type === 'image' && (
+      {preview !== null && (
         <Image className={styles.previewImage} src={preview || '/icons/attach_image.svg'} alt="첨부 이미지" fill />
       )}
       <button className={styles.clearButton} onClick={handleClearClick}>

diff --git a/src/components/Header/Header.css.ts b/src/components/Header/Header.css.ts
@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const header = style({
   width: '100%',
-  height: '90px',
+  height: '70px',
   paddingLeft: '20px',
   paddingRight: '20px',