Merge pull request #325 from CheckMate-sookmyung/fix/uploadbox

#324 design: 업로드 박스 디자인 변경
CheckMate-sookmyung · Sep 22, 2024 · 252fa1c · 252fa1c
2 parents 1911fd1 + fc194f3
commit 252fa1c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/src/components/UploadBox/UploadBox.jsx b/src/components/UploadBox/UploadBox.jsx
@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import * as S from './UploadBox.style';
-import FileButton from '../../pages/RegisterPage/RegisterComponents/Button/FileButton';
-
-//미리보기 선택 시 전체 프리뷰 기능 미구현
 
 // FileInfo 컴포넌트
 const FileInfo = ({ uploadedInfo }) => {
@@ -15,17 +12,20 @@ const FileInfo = ({ uploadedInfo }) => {
 
   return (
     <S.PreviewWrapper>
-      <S.PreviewBox
-        style={{
-          backgroundImage: `url(${uploadedInfo.previewURL})`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }}
-      >
-        <S.PreviewLabel onClick={handlePreviewClick}>미리보기</S.PreviewLabel>
-      </S.PreviewBox>
-      {uploadedInfo.name !== null && (
-        <FileButton content={uploadedInfo.name} type={'white'} />
+      {uploadedInfo.previewURL ? (
+        <S.PreviewBox
+          style={{
+            backgroundImage: `url(${uploadedInfo.previewURL})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        >
+          <S.PreviewLabel onClick={handlePreviewClick}>미리보기</S.PreviewLabel>
+        </S.PreviewBox>
+      ) : (
+        <S.NoPreviewMsg>
+          엑셀 파일은 미리보기를 제공하지 않습니다.
+        </S.NoPreviewMsg>
       )}
     </S.PreviewWrapper>
   );
@@ -43,9 +43,14 @@ const UploadBox = ({ defaultImageUrl, accept, onFileUpload }) => {
   };
 
   const setFileInfo = (file) => {
-    const name = file.name;
-    const previewURL = URL.createObjectURL(file);
-    setUploadedInfo({ name, previewURL });
+    let previewURL = null;
+
+    // 이미지 파일만 미리보기 URL 생성
+    if (file.type.startsWith('image/')) {
+      previewURL = URL.createObjectURL(file);
+    }
+
+    setUploadedInfo({ previewURL });
     if (onFileUpload) {
       onFileUpload(file);
     }

diff --git a/src/components/UploadBox/UploadBox.style.js b/src/components/UploadBox/UploadBox.style.js
@@ -46,7 +46,8 @@ export const PreviewWrapper = styled.div`
   height: 100%;
   width: 100%;
   align-items: end;
-  justify-content: space-between;
+  justify-content: center;
+  align-items: center;
 `;
 
 export const PreviewBox = styled.div`
@@ -58,6 +59,10 @@ export const PreviewBox = styled.div`
   height: 100%;
 `;
 
+export const NoPreviewMsg = styled.div`
+  font-size: 18px;
+`;
+
 export const PreviewLabel = styled.button`
   display: flex;
   justify-content: center;