refactor: Home에 존재하던 기존 상태 DownloadQRCode로 분리

Largopie · Nov 24, 2024 · 9d27455 · 9d27455
1 parent 3b58c3a
commit 9d27455
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 46 deletions.
diff --git a/src/components/QRCode/DownloadQRCode.tsx b/src/components/QRCode/DownloadQRCode.tsx
@@ -1,15 +1,50 @@
-import type QRCodeStyling from 'qr-code-styling';
-import PreviewQRCode from './PreviewQRCode';
-import useDownload from '../../hooks/qrcode/useDownload';
+import { useEffect, useMemo } from 'react';
+import { useAtomValue } from 'jotai';
 import styled from 'styled-components';
-import Button from '../_common/Button/Button';
+
 import { colorPalette } from '../../styles/colorPalette';
 
-interface DownloadQRCodeProps {
-  qrCode: QRCodeStyling;
-}
+import QRCodeStyling from 'qr-code-styling';
+import useDownload from '../../hooks/qrcode/useDownload';
+
+import PreviewQRCode from './PreviewQRCode';
+import Button from '../_common/Button/Button';
+
+import { mainOptionAtom } from '../../store/client/mainOption';
+import { dotsOptionAtom } from '../../store/client/dotsOption';
+import { cornersDotOptionAtom, cornerSquaresOptionAtom } from '../../store/client/cornerSquaresOption';
+import { backgroundOptionAtom } from '../../store/client/backgroundOption';
+import { imageOptionAtom } from '../../store/client/imageOption';
+
+const DownloadQRCode = () => {
+  const mainOption = useAtomValue(mainOptionAtom);
+  const dotsOption = useAtomValue(dotsOptionAtom);
+  const cornerSquaresOption = useAtomValue(cornerSquaresOptionAtom);
+  const cornerDotsOption = useAtomValue(cornersDotOptionAtom);
+  const backgroundOption = useAtomValue(backgroundOptionAtom);
+  const imageOption = useAtomValue(imageOptionAtom);
+
+  const qrCode = useMemo(() => {
+    return new QRCodeStyling({
+      ...mainOption,
+      type: 'canvas',
+      dotsOptions: dotsOption,
+      cornersSquareOptions: cornerSquaresOption,
+      cornersDotOptions: cornerDotsOption,
+      backgroundOptions: backgroundOption,
+      imageOptions: {
+        ...imageOption,
+        crossOrigin: 'anonymous',
+      },
+    });
+  }, [mainOption, cornerDotsOption, cornerSquaresOption, dotsOption, backgroundOption, imageOption]);
+
+  useEffect(() => {
+    qrCode.update({
+      ...mainOption,
+    });
+  }, [qrCode, mainOption]);
 
-const DownloadQRCode = ({ qrCode }: DownloadQRCodeProps) => {
   const { fileExt, onDownloadClick, onExtensionChange } = useDownload(qrCode);
 
   return (

diff --git a/src/components/QRCode/QRCode.tsx b/src/components/QRCode/QRCode.tsx
@@ -0,0 +1,27 @@
+// import React, { useEffect } from 'react'
+
+// const QRCode = () => {
+
+//   const qrCode = useMemo(() => {
+//     return new QRCodeStyling({
+//       ...mainDataForQRCode,
+//       type: 'canvas',
+//       dotsOptions: dots,
+//       cornersSquareOptions: cornersSquare,
+//       cornersDotOptions: cornersDot,
+//       backgroundOptions: background,
+//       imageOptions: {
+//         ...imageForQRCode,
+//         crossOrigin: 'anonymous',
+//       },
+//     });
+//   }, [mainDataForQRCode, cornersDot, cornersSquare, dots, background, imageForQRCode]);
+
+//   useEffect(() => {
+//     qrCode.update({
+//       ...mainDataForQRCode,
+//     });
+//   }, [qrCode, mainDataForQRCode]);
+// }
+
+// export default QRCode
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -1,50 +1,13 @@
-import { useEffect, useMemo } from 'react';
 import * as S from './Home.style';
 
-import QRCodeStyling from 'qr-code-styling';
-
 import DownloadQRCode from '../../components/QRCode/DownloadQRCode';
-import { useAtomValue } from 'jotai';
-import { mainOptionAtom } from '../../store/client/mainOption';
 import MainOption from '../../components/options/MainOption/MainOption';
 import DotsOption from '../../components/options/DotsOption/DotsOption';
-import { dotsOptionAtom } from '../../store/client/dotsOption';
-import { cornersDotOptionAtom, cornerSquaresOptionAtom } from '../../store/client/cornerSquaresOption';
 import CornerSquaresOption from '../../components/options/CornerSquaresOption/CornerSquaresOption';
 import BackgroundOption from '../../components/options/BackgroundOption/BackgroundOption';
-import { backgroundOptionAtom } from '../../store/client/backgroundOption';
-import { imageOptionAtom } from '../../store/client/imageOption';
 import ImageOption from '../../components/options/ImageOption/ImageOption';
 
 export default function Home() {
-  const mainOption = useAtomValue(mainOptionAtom);
-  const dotsOption = useAtomValue(dotsOptionAtom);
-  const cornerSquaresOption = useAtomValue(cornerSquaresOptionAtom);
-  const cornerDotsOption = useAtomValue(cornersDotOptionAtom);
-  const backgroundOption = useAtomValue(backgroundOptionAtom);
-  const imageOption = useAtomValue(imageOptionAtom);
-
-  const qrCode = useMemo(() => {
-    return new QRCodeStyling({
-      ...mainOption,
-      type: 'canvas',
-      dotsOptions: dotsOption,
-      cornersSquareOptions: cornerSquaresOption,
-      cornersDotOptions: cornerDotsOption,
-      backgroundOptions: backgroundOption,
-      imageOptions: {
-        ...imageOption,
-        crossOrigin: 'anonymous',
-      },
-    });
-  }, [mainOption, cornerDotsOption, cornerSquaresOption, dotsOption, backgroundOption, imageOption]);
-
-  useEffect(() => {
-    qrCode.update({
-      ...mainOption,
-    });
-  }, [qrCode, mainOption]);
-
   return (
     <S.MainContainer>
       <S.MainWrapper>
@@ -56,7 +19,7 @@ export default function Home() {
           <ImageOption />
         </S.OptionsContainer>
         <S.PreviewContainer>
-          <DownloadQRCode qrCode={qrCode} />
+          <DownloadQRCode />
         </S.PreviewContainer>
       </S.MainWrapper>
     </S.MainContainer>