feat(WEB-170): edit profile view

app/[lang]/(live)/(protected)/my-pages/profile/@edit/default.tsx

@@ -1,3 +1,3 @@
-export default function DefaultEdit() {
+export default function Default() {
   return null
 }

app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/default.tsx

@@ -1,10 +1,3 @@
-import Button from "@/components/TempDesignSystem/Button";
-
-export default function EditProfile() {
-  return (
-    <>
-      <Button form="edit-profile" type="reset">Cancel</Button>
-      <Button form="edit-profile" type="submit">Save</Button>
-    </>
-  )
+export default function Default() {
+  return null
 }

app/[lang]/(live)/(protected)/my-pages/profile/@edit/edit/page.tsx

@@ -0,0 +1,38 @@
+"use client"
+import { _ } from "@/lib/translation"
+import { profile } from "@/constants/routes/myPages"
+import { useProfileStore } from "@/stores/edit-profile"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default function EditProfile({ params }: PageArgs<LangParams>) {
+  const isPending = useProfileStore((store) => store.pending)
+  const isValid = useProfileStore((store) => store.valid)
+  return (
+    <>
+      <Button
+        aria-label="Cancel"
+        asChild
+        bgcolor="white"
+        form="edit-profile"
+        size="small"
+        type="reset"
+      >
+        <Link href={profile[params.lang]}>{_("Cancel")}</Link>
+      </Button>
+      <Button
+        bgcolor="quarternary"
+        disabled={!isValid || isPending}
+        form="edit-profile"
+        size="small"
+        type="submit"
+        weight="regular"
+      >
+        {_("Save")}
+      </Button>
+    </>
+  )
+}

app/[lang]/(live)/(protected)/my-pages/profile/@edit/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}