feat: 랜덤 이미지 사이즈 변경

Author: anveloper

frontend/src/components/ImageUploader.tsx

@@ -1,8 +1,7 @@
 import { Icon } from '@iconify/react';
+import heic2any from 'heic2any';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { isImageBright, previewImage } from '../atom';
-import heic2jpeg from 'heic2any';
-import heic2any from 'heic2any';
 
 const ImageUploader = () => {
   const setImageSrc = useSetRecoilState(previewImage);

frontend/src/components/UnsplashUploader.tsx

@@ -1,22 +1,23 @@
 import { Icon } from '@iconify/react';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { isImageBright, previewImage, ratioAtom } from '../atom';
+import { useEffect, useRef, useState } from 'react';
+import { useRecoilState } from 'recoil';
+import { isImageBright, previewImage } from '../atom';
 
-const HEIGHT = 280;
+const FIXED_RATIO = 16 / 9;
+const FIXED_HEIGHT = 450;
+const FIXED_WIDTH = FIXED_HEIGHT * FIXED_RATIO; // 고정 값으로 이미지 랜더링
+const RANDOM_URL = `https://picsum.photos/${FIXED_WIDTH}/${FIXED_HEIGHT}`; //
 
 const UnsplashUploader = () => {
   let timer: NodeJS.Timer | null = null;
   const [imageSrc, setImageSrc] = useRecoilState(previewImage);
   const [isBright, setIsBright] = useRecoilState(isImageBright);
-  const previewRatio = useRecoilValue(ratioAtom);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const mounted = useRef(false);
-  const width = useMemo(() => Math.round(HEIGHT * previewRatio), [previewRatio]);
 
   const getRandomImage = async () => {
     if (!timer) {
-      const response = await fetch(`https://picsum.photos/${width}/${HEIGHT}?random=${Date.now()}`);
+      const response = await fetch(`${RANDOM_URL}?random=${Date.now()}`);
       setIsLoading(true);
       timer = setTimeout(function () {
         timer = null;
@@ -25,13 +26,17 @@ const UnsplashUploader = () => {
       }, 1100);
     }
   };
-  const brigthControl = () => {
+
+  const brightControl = () => {
     setIsBright((prev) => !prev);
   };
+
   useEffect(() => {
     if (imageSrc === '') {
-      fetch(`https://picsum.photos/${width}/${HEIGHT}?random=${Date.now()}`).then((response) => {
+      setIsLoading(true);
+      fetch(`${RANDOM_URL}?random=${Date.now()}`).then((response) => {
         setImageSrc(response.url);
+        setIsLoading(false);
       });
     }
     mounted.current = true;
@@ -50,7 +55,7 @@ const UnsplashUploader = () => {
         </div>
       </button>
       <label className={`${isBright ? 'text-darken' : 'text-muted'} flex justify-start items-center mt-3`}>
-        <input defaultChecked={!isBright} className="h-4 w-4" type="checkbox" onClick={brigthControl} />
+        <input defaultChecked={!isBright} className="h-4 w-4" type="checkbox" onClick={brightControl} />
         <span className="ml-[10px]">배경 어둡게</span>
       </label>
     </div>