[온보딩] 썸네일 미리보기 이미지 짤리는 현상 (#395)

* feat: svg 확장자는 전부 이미지 업로드 불가하여 accept에서 제거 * feat: 이미지의 크기가 매우 작은 경우를 대비하여 height 100% 설정 * fix: 썸네일 부분 height값 삭제 * feat: 이미지 특정 height 값 이하일 때 미리보기 안되게 구현 * feat: 이미지 최소 height 변경 (추후 논의 필요) * feat: image accept에 heic 추가
SWEET-DEVELOPERS · Feb 23, 2024 · f891ca7 · f891ca7
1 parent 5981989
commit f891ca7
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) {