ユーザー画像アップロード

app/(v2)/settings/IconUpdateController.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import IconUpdateController from "./IconUpdateController";
+import { mockUpdateIconSucceeded } from "./IconUpdateModal.stories";
+
+const meta = {
+  component: IconUpdateController,
+  args: {
+    style: {
+      width: 640,
+      height: 500,
+    },
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        primary: [mockUpdateIconSucceeded],
+      },
+    },
+  },
+} satisfies Meta<typeof IconUpdateController>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Primary: Story = {};

app/(v2)/settings/IconUpdateController.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import clsx from "clsx";
+import React, { useState } from "react";
+import Dropzone from "react-dropzone";
+
+import useToaster from "~/components/Toaster/useToaster";
+import { graphql } from "~/gql";
+
+import IconUpdateModal from "./IconUpdateModal";
+
+export const UpdateProfileIconMutation = graphql(`
+  mutation SettingsPage_ChangeUserIcon($changeTo: File!) {
+    changeUserIcon(changeTo: $changeTo) {
+      __typename
+      ... on ChangeUserIconSucceededSuccess {
+        user {
+          id
+          icon
+        }
+      }
+    }
+  }
+`);
+export default function IconUpdateController({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  const [original, setOriginal] = useState<string | null>(null);
+  const toast = useToaster();
+
+  return (
+    <>
+      <Dropzone
+        accept={{
+          "image/jpeg": [],
+          "image/png": [],
+        }}
+        onDrop={(acceptedFiles: File[]) => {
+          if (acceptedFiles.length === 1) {
+            setOriginal(URL.createObjectURL(acceptedFiles[0]));
+          }
+        }}
+      >
+        {({ getRootProps, getInputProps }) => (
+          <div {...getRootProps()}>
+            <input {...getInputProps()} />
+            <p className={clsx("text-snow-primary")}>アイコンを選択</p>
+          </div>
+        )}
+      </Dropzone>
+      {original && (
+        <div
+          className={clsx(
+            "fixed left-0 top-0 z-infinity flex h-[100vh] w-[100vw] items-center justify-center"
+          )}
+        >
+          <div
+            role="button"
+            onClick={() => {
+              setOriginal(null);
+            }}
+            className={clsx("absolute inset-0 z-0 bg-black/75")}
+          ></div>
+          <IconUpdateModal
+            original={original}
+            handleSuccess={() => {
+              toast("アイコンを変更しました");
+              setOriginal(null);
+            }}
+            handleFailed={() => {
+              toast("アイコンの変更に失敗しました", { type: "error" });
+            }}
+            handleCancel={() => {
+              setOriginal(null);
+            }}
+            className={clsx("relative z-1 h-[360px] w-[480px]")}
+          />
+        </div>
+      )}
+    </>
+  );
+}

app/(v2)/settings/IconUpdateModal.stories.tsx

@@ -0,0 +1,50 @@
+import { action } from "@storybook/addon-actions";
+import { Meta, StoryObj } from "@storybook/react";
+import { within } from "@storybook/test";
+import { graphql as mswGql } from "msw";
+
+import IconUpdateModal, { UpdateProfileIconMutation } from "./IconUpdateModal";
+
+export const mockUpdateIconSucceeded = mswGql.mutation(
+  UpdateProfileIconMutation,
+  (req, res, ctx) =>
+    res(
+      ctx.data({
+        changeUserIcon: {
+          __typename: "ChangeUserIconSucceededSuccess",
+          user: {
+            id: "user:1",
+            icon: "/icon.png",
+          },
+        },
+      })
+    )
+);
+
+const meta = {
+  component: IconUpdateModal,
+  args: {
+    style: {
+      width: 640,
+      height: 500,
+    },
+    original: "/icon.png",
+    handleSuccess: action("success"),
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        primary: [mockUpdateIconSucceeded],
+      },
+    },
+  },
+  excludeStories: /^mock/,
+} satisfies Meta<typeof IconUpdateModal>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Primary: Story = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+  },
+};

app/(v2)/settings/IconUpdateModal.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import clsx from "clsx";
+import React from "react";
+import Cropper, { CropperProps } from "react-easy-crop";
+import { useForm } from "react-hook-form";
+import { useMutation } from "urql";
+
+import Button from "~/components/Button";
+import { PlusPictogram } from "~/components/Pictogram";
+import { graphql } from "~/gql";
+import cropImage from "~/utils/crop";
+
+export const UpdateProfileIconMutation = graphql(`
+  mutation SettingsPage_ChangeUserIcon($changeTo: File!) {
+    changeUserIcon(changeTo: $changeTo) {
+      __typename
+      ... on ChangeUserIconSucceededSuccess {
+        user {
+          id
+          icon
+        }
+      }
+    }
+  }
+`);
+export default function IconUpdateModal({
+  className,
+  style,
+  original,
+  handleSuccess,
+  handleFailed,
+  handleCancel,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+  original: string;
+  handleSuccess(): void;
+  handleFailed(): void;
+  handleCancel(): void;
+}) {
+  const [{ fetching }, mutate] = useMutation(UpdateProfileIconMutation);
+
+  const { setValue, handleSubmit } = useForm<{ changeTo: File }>({});
+
+  const [crop, setCrop] = React.useState<CropperProps["crop"]>({ x: 0, y: 0 });
+  const [zoom, setZoom] = React.useState<CropperProps["zoom"]>(1);
+
+  return (
+    <form
+      onSubmit={handleSubmit(async ({ changeTo }) => {
+        const data = await mutate({ changeTo });
+        if (
+          !data ||
+          data.data?.changeUserIcon.__typename !==
+            "ChangeUserIconSucceededSuccess"
+        )
+          return handleFailed();
+        return handleSuccess();
+      })}
+      style={style}
+      className={clsx(
+        className,
+        "flex flex-col gap-y-4 rounded-md border border-obsidian-lighter bg-obsidian-primary p-4"
+      )}
+    >
+      <div className={clsx("relative w-full grow")}>
+        <Cropper
+          image={original}
+          crop={crop}
+          zoom={zoom}
+          aspect={1}
+          cropShape="round"
+          showGrid={false}
+          onCropChange={setCrop}
+          onZoomChange={setZoom}
+          onCropComplete={async (_, c2) => {
+            const file = await cropImage(original, c2);
+            if (file) setValue("changeTo", file);
+          }}
+          classes={{
+            containerClassName: "",
+          }}
+        />
+      </div>
+      <div className={clsx("flex shrink-0 gap-x-2")}>
+        <Button
+          onClick={handleCancel}
+          color="red"
+          size="medium"
+          text="キャンセル"
+          disabled={fetching}
+          className={clsx("shrink-0")}
+        />
+        <Button
+          submit
+          color="blue"
+          size="medium"
+          Pictogram={PlusPictogram}
+          text="変更"
+          disabled={fetching}
+          className={clsx("grow")}
+        />
+      </div>
+    </form>
+  );
+}

app/(v2)/settings/page.tsx

@@ -1,6 +1,7 @@
 import { withPageAuthRequired } from "@auth0/nextjs-auth0";
 import clsx from "clsx";
 
+import IconUpdateController from "./IconUpdateController";
 import RenameForm from "./RenameForm";
 
 export default withPageAuthRequired(async function Page() {
@@ -24,6 +25,16 @@ export default withPageAuthRequired(async function Page() {
           </h2>
           <RenameForm className={clsx("w-full")} />
         </section>
+        <section
+          className={clsx(
+            "flex w-full flex-col gap-y-2 border-l border-l-obsidian-lighter px-8 py-6"
+          )}
+        >
+          <h2 className={clsx("text-lg font-bold text-snow-primary")}>
+            ユーザーアイコンを変える
+          </h2>
+          <IconUpdateController className={clsx("w-full")} />
+        </section>
       </main>
     </div>
   );

app/globals.css

@@ -1,3 +1,5 @@
+@import "react-image-crop/dist/ReactCrop.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

codegen.ts

@@ -11,6 +11,7 @@ const config: CodegenConfig = {
         dedupeFragments: true, // https://zenn.dev/link/comments/94104de0ddecfc
         scalars: {
           DateTime: "string",
+          File: "File",
         },
       },
       presetConfig: {},

package.json

@@ -48,6 +48,8 @@
     "pixi.js": "^7.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-easy-crop": "^5.0.4",
     "react-hook-form": "7.49.2",
     "react-use": "^17.4.0",
     "sass": "^1.69.5",