edit を setting に統合 (#585)

# PRの概要

#572 の通り。

<img width="309" alt="image"
src="https://github.com/user-attachments/assets/7e85858c-118b-4b8a-aebe-c0bd0ee75f85"
/>


## 具体的な変更内容

edit/ を settings/ に統合

## 補足

関係ないエラー修正あり
496d017


## レビューリクエストを出す前にチェック！

- [x] 改めてセルフレビューしたか
- [x] 手動での動作検証を行ったか
- [x] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [x] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [x] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

Author: nakaterm

web/app/edit/layout.tsx

@@ -9,5 +9,5 @@
 }
 
 .cm-li-btn {
-  @apply no-animation h-auto w-full justify-start rounded-none border-none bg-white px-4 py-4 text-left font-normal text-base shadow-none hover:bg-zinc-100 focus:bg-zinc-300;
+  @apply no-animation h-auto w-full justify-start rounded-none border-none bg-white px-6 py-4 text-left font-normal text-base shadow-none hover:bg-zinc-100 focus:bg-zinc-300;
 }

web/app/edit/profile/page.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/globals.css

@@ -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");
       },
     });
   }