edit/ を settings/ に統合

Author: nakaterm

web/app/edit/layout.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { MdEdit } from "react-icons/md";
+import { useAboutMe } from "~/api/user";
+import { Card } from "~/components/Card";
+import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
+import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
+import TopNavigation from "~/components/common/TopNavigation";
+
+export default function SettingsProfile() {
+  const { state } = useAboutMe();
+  const data = state.data;
+  const error = state.current === "error" ? state.error : null;
+  const loading = state.current === "loading";
+  const [back, setBack] = useState<boolean>(false);
+
+  return (
+    <NavigateByAuthState type="toLoginForUnauthenticated">
+      {loading ? (
+        <FullScreenCircularProgress />
+      ) : error ? (
+        <p className="text-error">エラーが発生しました。{error.message}</p>
+      ) : !data ? (
+        <p>データがありません。</p>
+      ) : (
+        <div className="flex flex-col p-2">
+          <TopNavigation title="あなたのカード" />
+          <div className="flex flex-1 flex-col items-center">
+            <div className="flex w-full justify-end">
+              <Link
+                className="btn btn-sm flex items-center border-none bg-white px-1 text-primary shadow-none"
+                href={back ? "/settings/courses" : "/settings/profile"}
+                style={{
+                  // (画面幅 - カード幅) / 2 - profile の padding
+                  marginRight:
+                    "calc(calc(calc(100vw - min(40dvh, 87.5vw)) / 2) - 8px)",
+                }}
+              >
+                <MdEdit className="text-lg" />
+                編集する
+              </Link>
+            </div>
+            <Card
+              displayedUser={data}
+              currentUser={data}
+              onFlip={(back) => setBack(back)}
+            />
+          </div>
+        </div>
+      )}
+    </NavigateByAuthState>
+  );
+}

web/app/edit/profile/page.tsx

@@ -26,10 +26,10 @@ export default function EditCourses() {
         <p>データがありません。</p>
       )}
       <div className="mt-5 flex justify-between">
-        <Link href="/settings/profile" className="btn">
+        <Link href="/settings" className="btn">
           設定画面に戻る
         </Link>
-        <Link href="/edit/profile" className="btn btn-primary">
+        <Link href="/settings/profile" className="btn btn-primary">
           プロフィール編集へ
         </Link>
       </div>

web/app/settings/card/page.tsx

@@ -70,7 +70,7 @@ export default function EditInterest() {
       subAlertMessage: "本当にページを移動しますか？",
       yesMessage: "移動",
       clickYes: () => {
-        router.push("/settings/profile");
+        router.push("/settings");
       },
     });
   }

web/app/edit/courses/page.tsx web/app/settings/courses/page.tsxweb/app/edit/courses/page.tsx renamed to web/app/settings/courses/page.tsx

@@ -28,8 +28,10 @@ export default function Settings() {
       <div className="flex flex-col justify-start">
         <h2 className="p-4 pb-2 text-gray-500 text-xs">基本情報</h2>
         <ul className="w-full">
-          <Item href="/settings/profile" title="あなたのカード" />
-          <Item href="/edit/interests" title="興味分野の設定" />
+          <Item href="/settings/profile" title="プロフィール" />
+          <Item href="/settings/courses" title="授業" />
+          <Item href="/settings/interests" title="興味分野" />
+          <Item href="/settings/card" title="カードのプレビュー" />
         </ul>
         <h2 className="p-4 py-2 text-gray-500 text-xs">その他</h2>
         <ul className="w-full">