fix: 이미지 다운로드 테스트용 페이지 모바일에서 안뜨는 현상 해결 (#1725)

* fix: 이미지 다운로드 로직에서 document 접근시 window 객체 확인 * fix: 이미지 테스트 페이지에서 버그 유발 로직 제거
sopt-makers · Jan 23, 2025 · 90b049d · 90b049d
1 parent 324cff2
commit 90b049d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 28 deletions.
diff --git a/src/components/resolution/read/hooks/useImageDownload.ts b/src/components/resolution/read/hooks/useImageDownload.ts
@@ -3,42 +3,42 @@ import { useRef } from 'react';
 
 const useImageDownload = (fileName: string) => {
   const ref = useRef<HTMLDivElement>(null);
+  const style = typeof window !== 'undefined' ? document.createElement('style') : null;
 
   const removePaddingCss = `
-  body > div:last-child > span + img {
-    display: inline !important;
-  }
-`;
-
-  const style = document.createElement('style');
+    body > div:last-child > span + img {
+      display: inline !important;
+    }
+  `;
 
   const createStyle = (css: string) => {
+    if (!style) return;
     style.appendChild(document.createTextNode(css));
     document.head.appendChild(style);
   };
 
   const removeStyle = () => {
-    if (style.parentNode) {
+    if (style?.parentNode) {
       style.parentNode.removeChild(style);
     }
   };
 
   const onClick = () => {
+    if (typeof window === 'undefined') return;
+
     createStyle(removePaddingCss);
     html2canvas(ref.current as HTMLDivElement, {
       backgroundColor: null,
       scale: 4,
     })
-      .then((canvas: HTMLCanvasElement) => {
+      .then((canvas) => {
         removeStyle();
         const link = document.createElement('a');
         link.href = canvas.toDataURL('image/png');
         link.download = `${fileName}.png`;
         link.click();
       })
-      .catch((error: Error) => {
-        console.error(error);
-      });
+      .catch(console.error);
   };
 
   return { ref, onClick };

diff --git a/src/pages/test/image/index.tsx b/src/pages/test/image/index.tsx
@@ -1,33 +1,24 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { FC, useEffect, useState } from 'react';
 
 import { ModalButton } from '@/components/common/Modal/parts';
 import useImageDownload from '@/components/resolution/read/hooks/useImageDownload';
 import ResolutionMessage from '@/components/resolution/read/ResolutionMessage';
 
-const Image: FC<{}> = () => {
-  const [isDocumentLoadded, setIsDocumentLoadded] = useState(false);
-
-  useEffect(() => {
-    window.onload = () => {
-      setIsDocumentLoadded(true);
-    };
-  }, []);
-
-  return isDocumentLoadded ? <ImageContent /> : null;
-};
-
 function ImageContent() {
   const { ref: imageRef, onClick: onDownloadButtonClick } = useImageDownload('now-sopt');
 
   return (
-    <Content ref={imageRef}>
-      <ResolutionMessage />
+    <>
+      <Content ref={imageRef}>
+        <ResolutionWrapper>
+          <ResolutionMessage />
+        </ResolutionWrapper>
+      </Content>
       <Footer align='stretch'>
         <ModalButton onClick={onDownloadButtonClick}>이미지로 저장하기</ModalButton>
       </Footer>
-    </Content>
+    </>
   );
 }
 
@@ -38,6 +29,10 @@ const Content = styled.div`
   padding: 20px;
 `;
 
+const ResolutionWrapper = styled.div`
+  width: fit-content;
+`;
+
 const Footer = styled.div<{ align: 'left' | 'right' | 'stretch'; stack?: 'horizontal' | 'vertical' }>`
   display: grid;
   margin-top: 24px;
@@ -54,4 +49,4 @@ const Footer = styled.div<{ align: 'left' | 'right' | 'stretch'; stack?: 'horizo
   }
 `;
 
-export default Image;
+export default ImageContent;