Update トリミングを行い貼り付けまでできるよう修正

src/atom/sticker.ts

@@ -4,3 +4,8 @@ export const stickerState = atom<string>({
   key: "stickerState",
   default: ""
 })
+
+export const stickerIsCircleState = atom<boolean>({
+  key: "stickerIsCircleState",
+  default: false
+})

src/components/modal/trimModal.tsx

@@ -2,6 +2,9 @@ import React, { useCallback, useEffect, useState } from "react"
 import { RoundedButton, RoundedDivSize } from "../Button/RoundButton"
 import Cropper from "react-easy-crop"
 import Modal from "react-modal"
+import { stickerIsCircleState } from "../../atom/sticker"
+import { useSetRecoilState } from "recoil"
+import { Sticker } from "../../pages/sticker-select"
 
 type props = {
   isOpen: boolean
@@ -38,9 +41,7 @@ export const TrimModal: React.FC<props> = ({
   const [crop, setCrop] = useState<Coordinate>({ x: 0, y: 0 })
   const aspect = 1
   const [isCircle, setIsCircle] = useState<boolean>(false)
-  const [croppedImageIsCircle, setCroppedImageIsCircle] = useState<boolean>(false)
   const [croppedAreaPixels, setCroppedAreaPixels] = useState(null)
-  const [croppedImage, setCroppedImage] = useState(null)
 
   // Cropperに渡す関数
   const onZoomChange = (zoom) => {
@@ -149,17 +150,17 @@ export const TrimModal: React.FC<props> = ({
   const cropImage = useCallback(async () => {
     try {
       const croppedImage = await getCroppedImg(image, croppedAreaPixels, rotation)
-      setCroppedImage(croppedImage)
-      imageSetter(croppedImage)
+      const croppedImageSticker: Sticker = {
+        src: croppedImage as string,
+        isCircle: isCircle
+      }
+      imageSetter(croppedImageSticker)
       isOpenSetter(false)
+      setIsCircle(false)
     } catch (e) {
       console.error(e)
     }
-  }, [croppedAreaPixels, rotation])
-
-  useEffect(() => {
-    setCroppedImageIsCircle(isCircle)
-  }, [croppedImage])
+  }, [croppedAreaPixels, rotation, isCircle])
 
   return (
     <Modal isOpen={isOpen}>

src/pages/settlement/index.tsx

@@ -194,7 +194,7 @@ const CardForm: React.VFC<{}> = () => {
       setLoading(false)
       return
     } else {
-      router.replace({ pathname: "/sticker-edit", query: { settlement: true } })
+      router.push({ pathname: "/sticker-edit", query: { settlement: true } })
       console.log("決済完了")
     }
 

src/pages/sticker-edit/index.tsx

@@ -3,39 +3,23 @@ import { useInteractJS } from "../../hooks"
 import { RoundedButton, RoundedDivSize } from "../../components/Button/RoundButton"
 import NextImage from "next/image"
 import { Toast, ToastType } from "../../components/toast"
-import { auth } from "../../utils/firebase"
 import Header from "../../components/header"
 import { Footer } from "../../components/Footer"
-import { useRecoilState, useRecoilValue } from "recoil"
-import { stickerState } from "../../atom/sticker"
+import { useRecoilValue } from "recoil"
+import { stickerIsCircleState, stickerState } from "../../atom/sticker"
 import { useRouter } from "next/router"
 
 const Index: React.VFC<{}> = () => {
   //TODO: FIXME
   const sticker = useRecoilValue(stickerState)
+  const stickerIsCircle = useRecoilValue(stickerIsCircleState)
   const router = useRouter()
   const [toastMessage, setToastMessage] = useState<string>("")
   const [toastType, setToastType] = useState<ToastType>(ToastType.Notification)
   const [toastState, setToastState] = useState<boolean>(false)
-
-  useEffect(() => {
-    if (router.query.settlement) {
-      setToastType(ToastType.Notification)
-      setToastMessage("決済が完了しました")
-      setToastState(true)
-    }
-  }, [])
-
-  useEffect(() => {
-    console.log(auth.currentUser)
-  })
-
   const interact = useInteractJS()
-  const [preview, setPreview] = useState("/logo/logo.svg")
-  const handleChangeFile = (e) => {
-    const { files } = e.target
-    setPreview(window.URL.createObjectURL(files[0]))
-  }
+  const [preview, setPreview] = useState(sticker)
+
   // contextを状態として持つ
   const [context, setContext] = useState(null)
   // コンポーネントの初期化完了後コンポーネント状態にコンテキストを登録
@@ -49,6 +33,14 @@ const Index: React.VFC<{}> = () => {
     console.log(sticker)
   }, [])
 
+  useEffect(() => {
+    if (router.query.settlement) {
+      setToastType(ToastType.Notification)
+      setToastMessage("決済が完了しました")
+      setToastState(true)
+    }
+  }, [])
+
   const createImage = (url) =>
     new Promise<HTMLImageElement>((resolve, reject) => {
       const image = new Image()
@@ -78,17 +70,33 @@ const Index: React.VFC<{}> = () => {
     const img = new Image()
     img.src = preview
     img.onload = () => {
+      context.save()
       let e = document.getElementById("scope")
       const scopeWidth = parseFloat(window.getComputedStyle(e).width)
 
       const diff = (interact.width - scopeWidth) / 2
+
+      if (stickerIsCircle) {
+        context.strokeStyle = "rgba(100, 100, 100, 0)"
+        const radius = interact.width / 2
+        const x = (interact.position.x * 816) / canvasWidth - diff + radius
+        const y = (interact.position.y * 571) / canvasHeight - diff + radius
+        context.beginPath()
+        context.arc(x, y, radius, 0, 2 * Math.PI)
+        context.stroke()
+        context.clip()
+      }
+
       context.drawImage(
         img,
         (interact.position.x * 816) / canvasWidth - diff,
         (interact.position.y * 571) / canvasHeight - diff,
         interact.width,
         interact.height
       )
+
+      context.restore()
+      console.log("restore")
     }
   }
 
@@ -159,7 +167,13 @@ const Index: React.VFC<{}> = () => {
 
             <div className="shadow-lg rounded-lg relative w-32 h-32 flex items-center justify-center">
               <div className="w-20 h-20 m-auto">
-                <img src={preview} width={80} height={80} />
+                <img
+                  src={preview}
+                  width={80}
+                  height={80}
+                  className={stickerIsCircle ? "rounded-full" : ""}
+                  alt="ステッカー"
+                />
               </div>
             </div>
           </div>

src/pages/sticker-select/index.tsx

@@ -1,25 +1,27 @@
 import React, { ChangeEvent, useEffect, useState } from "react"
 import Image from "next/image"
-import { RoundedButton, RoundedDivSize } from "../../components/Button/RoundButton"
+import { RoundedButton, RoundedDiv, RoundedDivSize } from "../../components/Button/RoundButton"
 import Header from "../../components/header"
 import { Footer } from "../../components/Footer"
 import { TrimModal } from "../../components/modal/trimModal"
-import { stickerState } from "../../atom/sticker"
-import { useRecoilValue, useSetRecoilState } from "recoil"
-import { useRouter } from "next/router"
+import { stickerIsCircleState, stickerState } from "../../atom/sticker"
+import { useSetRecoilState } from "recoil"
+import Link from "next/link"
 
-const Index: React.VFC<{}> = () => {
-  const router = useRouter()
-  const inputOnChange = () => {}
+export type Sticker = {
+  src: string
+  isCircle: boolean
+}
 
+const Index: React.VFC<{}> = () => {
   const [image, setImage] = useState<string>()
   const [index, setIndex] = useState(0)
   const [croppedImage, setCroppedImage] = useState()
-  const [imageList, setImageList] = useState<Array<string>>([])
+  const [imageList, setImageList] = useState<Array<Sticker>>([])
   const [isOpen, setIsOpen] = useState<boolean>(false)
 
   const setSticker = useSetRecoilState(stickerState)
-  const sticker = useRecoilValue(stickerState)
+  const setStickerIsCircle = useSetRecoilState(stickerIsCircleState)
 
   useEffect(() => {
     if (croppedImage != undefined) {
@@ -45,11 +47,12 @@ const Index: React.VFC<{}> = () => {
     }
   }
 
-  const settlementOnClick = () => {
-    // TODO: FIXME
-    setSticker(imageList[index])
-    router.push("/settlement")
-  }
+  useEffect(() => {
+    if (imageList.length > 0) {
+      setSticker(imageList[index].src)
+      setStickerIsCircle(imageList[index].isCircle)
+    }
+  }, [imageList, index])
 
   return (
     <>
@@ -76,7 +79,12 @@ const Index: React.VFC<{}> = () => {
                     }}
                   >
                     <div className="w-20 h-20 m-auto">
-                      <img src={img} width={80} height={80} />
+                      <img
+                        src={img.src}
+                        width={80}
+                        height={80}
+                        className={img.isCircle ? "rounded-full" : ""}
+                      />
                     </div>
 
                     <div className="absolute w-8 h-8 -top-3 -left-3">
@@ -91,7 +99,12 @@ const Index: React.VFC<{}> = () => {
                     }}
                   >
                     <div className="w-20 h-20 m-auto">
-                      <img src={img} width={80} height={80} />
+                      <img
+                        src={img.src}
+                        width={80}
+                        height={80}
+                        className={img.isCircle ? "rounded-full" : ""}
+                      />
                     </div>
                   </div>
                 )
@@ -125,14 +138,11 @@ const Index: React.VFC<{}> = () => {
             </div>
           </div>
           {/*end upload button*/}
-
-          <div className="xl:w-1/3 lg:w-1/2 md:w-2/3 w-full mx-auto flex justify-between">
-            <RoundedButton
-              size={RoundedDivSize.M}
-              onClick={() => settlementOnClick()}
-              text={"決済へ進む"}
-            />
-          </div>
+          <Link href="/settlement">
+            <div className="xl:w-1/3 lg:w-1/2 md:w-2/3 w-full mx-auto flex justify-between">
+              <RoundedDiv size={RoundedDivSize.M} text={"決済へ進む"} isDisabled={false} />
+            </div>
+          </Link>
         </div>
 
         <TrimModal

src/pages/supporters/index.tsx

@@ -2,8 +2,9 @@ import React from "react"
 import Header from "../../components/header"
 import { SupportersList } from "../../components/SupportersList"
 import { SupporterMock } from "../test/supportersList"
-import { RoundedButton, RoundedDivSize } from "../../components/Button/RoundButton"
+import { RoundedButton, RoundedDiv, RoundedDivSize } from "../../components/Button/RoundButton"
 import { Footer } from "../../components/Footer"
+import Link from "next/link"
 
 const Index: React.VFC = () => {
   return (
@@ -19,9 +20,11 @@ const Index: React.VFC = () => {
             好きなデザインを作って応援できます
           </p>
           <div className="flex justify-center">
-            <div className="mx-auto xl:w-1/3 lg:w-1/2 md:w-2/3 w-full">
-              <RoundedButton size={RoundedDivSize.M} onClick={() => {}} text="応援する" />
-            </div>
+            <Link href="/sticker-select">
+              <div className="mx-auto xl:w-1/3 lg:w-1/2 md:w-2/3 w-full">
+                <RoundedDiv size={RoundedDivSize.M} text="応援する" isDisabled={false} />
+              </div>
+            </Link>
           </div>
         </div>
         <SupportersList users={SupporterMock} />