From f891ca78d370a5159eec031429f6f8906eab5bc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=A5=EC=A0=95=EC=95=88?=
 <126966681+ExceptAnyone@users.noreply.github.com>
Date: Fri, 23 Feb 2024 15:56:56 +0900
Subject: [PATCH] =?UTF-8?q?[=EC=98=A8=EB=B3=B4=EB=94=A9]=20=EC=8D=B8?=
 =?UTF-8?q?=EB=84=A4=EC=9D=BC=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=A7=A4=EB=A6=AC=EB=8A=94=20?=
 =?UTF-8?q?=ED=98=84=EC=83=81=20=20(#395)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: svg 확장자는 전부 이미지 업로드 불가하여 accept에서 제거

* feat: 이미지의 크기가 매우 작은 경우를 대비하여 height 100% 설정

* fix: 썸네일 부분 height값 삭제

* feat: 이미지 특정 height 값 이하일 때 미리보기 안되게 구현

* feat: 이미지 최소 height 변경 (추후 논의 필요)

* feat: image accept에 heic 추가
---
 .../OnBoardingSteps/Step02/Step02.tsx         |  2 +-
 .../OnBoardingSteps/Step06/Step06.tsx         |  1 -
 src/hooks/common/usePreviewImage.tsx          | 31 ++++++++++++++-----
 src/pages/Participants/ParticipantsView.tsx   |  5 ---
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/OnBoardingSteps/Step02/Step02.tsx b/src/components/OnBoardingSteps/Step02/Step02.tsx
index c94ab165..bbf18d45 100644
--- a/src/components/OnBoardingSteps/Step02/Step02.tsx
+++ b/src/components/OnBoardingSteps/Step02/Step02.tsx
@@ -51,7 +51,7 @@ const ThumbnailInput = React.memo((props: ThumbnailInputProps) => {
       <S.IcEmptyThumbnailWrapper>
         <input
           type='file'
-          accept='.jpg, .jpeg, .png, .svg'
+          accept='image/jpeg, image/png, image/gif, image/heic '
           style={{ display: 'none' }}
           id='imgInput'
           onChange={handleImageUpload}
diff --git a/src/components/OnBoardingSteps/Step06/Step06.tsx b/src/components/OnBoardingSteps/Step06/Step06.tsx
index 2db20450..8d75c86e 100644
--- a/src/components/OnBoardingSteps/Step06/Step06.tsx
+++ b/src/components/OnBoardingSteps/Step06/Step06.tsx
@@ -36,7 +36,6 @@ const OnboardingFinal = (props: OnboardingFinalProps) => {
     <>
       <OnboardingFinalHeader />
       <S.OnboardingFinalWrapper>
-        {/* TODO presignedUrl이 null 또는 빈 스트링일 경우 엠티 뷰 보이기 / 값이 있으면 저장되어있는 imageUrl 보이기 */}
         <div>
           <S.GradientImg>
             <img src={onboardingInfo.imageUrl} style={{ width: '100%' }} />
diff --git a/src/hooks/common/usePreviewImage.tsx b/src/hooks/common/usePreviewImage.tsx
index b35c0875..0f94134c 100644
--- a/src/hooks/common/usePreviewImage.tsx
+++ b/src/hooks/common/usePreviewImage.tsx
@@ -6,21 +6,36 @@ const usePreviewImage = () => {
   const [imageName, setImageName] = useState<string>('');
   const [file, setFile] = useState<File | null>(null);
 
+  /**@todo 이미지 최소 height 상의 필요*/
+  const MIN_IMAGE_HEIGHT = 300;
+
   const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { files } = event.target;
 
     if (files && files.length > 0) {
       const selectedFiles = files as FileList;
-
-      /**@todo 이미지 파싱 추가 */
       const imageName = files[0].name.trim();
 
-      setFile(selectedFiles[0]);
-
-      setPreviewImage(URL.createObjectURL(selectedFiles[0]));
-      setIsImageUploaded(!!selectedFiles?.[0]);
-
-      setImageName(imageName);
+      const img = new Image();
+      img.onload = function () {
+        if (img.height <= MIN_IMAGE_HEIGHT) {
+          //  이미지 너비가  어느 수준  이하일 때 업로드 x
+          alert(
+            `이미지 세로길이가 너무 작습니다. ${MIN_IMAGE_HEIGHT}px 이상인 이미지를 선택해주세요.`,
+          );
+          setIsImageUploaded(false);
+          setFile(null);
+          setPreviewImage(null);
+          setImageName('');
+        } else {
+          //  이미지 너비가 허용된 범위  내에 있을 때
+          setFile(selectedFiles[0]);
+          setPreviewImage(URL.createObjectURL(selectedFiles[0]));
+          setIsImageUploaded(true);
+          setImageName(imageName);
+        }
+      };
+      img.src = URL.createObjectURL(selectedFiles[0]);
     }
   };
 
diff --git a/src/pages/Participants/ParticipantsView.tsx b/src/pages/Participants/ParticipantsView.tsx
index 4c4192be..f7c61bf0 100644
--- a/src/pages/Participants/ParticipantsView.tsx
+++ b/src/pages/Participants/ParticipantsView.tsx
@@ -84,8 +84,6 @@ const ParticipantsView = () => {
    * token의 값이 있든 없든 항상 토큰이 있는 값을 보여주고 있음. 처리 필요 */
 
   useEffect(() => {
-
-
     setIsToken(localStorage.getItem('EXIT_LOGIN_TOKEN') !== null);
     // if (localStorage.getItem('EXIT_LOGIN_TOKEN') === null) {
     //   setIsToken(false);
@@ -103,9 +101,6 @@ const ParticipantsView = () => {
     // }
   }, []);
 
- 
-
-
   const handleClickRoom = async (body: string | null) => {
     console.log('입장 버튼 클릭! 그리고 초대 코드', invitationCode);
     if (body === null) {