From 4b28d498907c281e8608e9227302a2c77c650526 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Sun, 2 Aug 2026 22:24:30 +0900
Subject: [PATCH 01/18] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1,=20=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80(=EC=9E=84=EC=8B=9C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(protected)/profile/edit/page.tsx         |  14 ++
 .../(customer)/(protected)/profile/page.tsx   |  13 +-
 .../(protected)/mover/profile/edit/page.tsx   |  14 ++
 .../(protected)/mover/profile/page.tsx        |  13 +-
 .../profile/CustomerProfileForm.tsx           | 152 ++++++++++++++
 src/components/profile/MoverProfileForm.tsx   | 195 ++++++++++++++++++
 src/components/profile/ProfileChipGroup.tsx   |  89 ++++++++
 src/components/profile/ProfileFieldHeader.tsx |  59 ++++++
 .../profile/ProfileImageUploader.tsx          |  87 ++++++++
 src/components/profile/ProfilePageHeader.tsx  |  35 ++++
 .../profile/ProfileSelectableChip.tsx         |  38 ++++
 src/icons/gallery.svg                         |   6 +
 src/icons/index.ts                            |   1 +
 src/lib/constants/appRoutes.ts                |   4 +-
 src/lib/schemas/customerProfileSchema.ts      |  35 ++++
 src/lib/schemas/moverProfileSchema.ts         |  34 +++
 src/types/profileFormMode.ts                  |   1 +
 17 files changed, 767 insertions(+), 23 deletions(-)
 create mode 100644 src/app/(customer)/(protected)/profile/edit/page.tsx
 create mode 100644 src/app/(mover)/(protected)/mover/profile/edit/page.tsx
 create mode 100644 src/components/profile/CustomerProfileForm.tsx
 create mode 100644 src/components/profile/MoverProfileForm.tsx
 create mode 100644 src/components/profile/ProfileChipGroup.tsx
 create mode 100644 src/components/profile/ProfileFieldHeader.tsx
 create mode 100644 src/components/profile/ProfileImageUploader.tsx
 create mode 100644 src/components/profile/ProfilePageHeader.tsx
 create mode 100644 src/components/profile/ProfileSelectableChip.tsx
 create mode 100644 src/icons/gallery.svg
 create mode 100644 src/lib/schemas/customerProfileSchema.ts
 create mode 100644 src/lib/schemas/moverProfileSchema.ts
 create mode 100644 src/types/profileFormMode.ts

diff --git a/src/app/(customer)/(protected)/profile/edit/page.tsx b/src/app/(customer)/(protected)/profile/edit/page.tsx
new file mode 100644
index 00000000..2b71c008
--- /dev/null
+++ b/src/app/(customer)/(protected)/profile/edit/page.tsx
@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+import CustomerProfileForm from "@/components/profile/CustomerProfileForm";
+
+export const metadata: Metadata = {
+  title: "프로필 수정 | 무빙",
+  description: "무빙 고객 프로필 수정",
+};
+
+const CustomerProfileEditPage = () => {
+  return <CustomerProfileForm mode="edit" />;
+};
+
+export default CustomerProfileEditPage;
diff --git a/src/app/(customer)/(protected)/profile/page.tsx b/src/app/(customer)/(protected)/profile/page.tsx
index f621275c..949d2d2e 100644
--- a/src/app/(customer)/(protected)/profile/page.tsx
+++ b/src/app/(customer)/(protected)/profile/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import { Text } from "@/components/common/Text";
+import CustomerProfileForm from "@/components/profile/CustomerProfileForm";
 
 export const metadata: Metadata = {
   title: "프로필 등록 | 무빙",
@@ -8,16 +8,7 @@ export const metadata: Metadata = {
 };
 
 const CustomerProfilePage = () => {
-  return (
-    <div className="flex flex-1 flex-col items-center justify-center px-24 py-80">
-      <Text as="h1" variant="2lg-bold" className="text-text-primary">
-        고객 프로필 등록
-      </Text>
-      <Text as="p" variant="md-medium" className="text-text-description mt-12">
-        프로필 등록 UI는 추후 연결됩니다.
-      </Text>
-    </div>
-  );
+  return <CustomerProfileForm mode="create" />;
 };
 
 export default CustomerProfilePage;
diff --git a/src/app/(mover)/(protected)/mover/profile/edit/page.tsx b/src/app/(mover)/(protected)/mover/profile/edit/page.tsx
new file mode 100644
index 00000000..be56b8e1
--- /dev/null
+++ b/src/app/(mover)/(protected)/mover/profile/edit/page.tsx
@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+import MoverProfileForm from "@/components/profile/MoverProfileForm";
+
+export const metadata: Metadata = {
+  title: "기사 프로필 수정 | 무빙",
+  description: "무빙 기사님 프로필 수정",
+};
+
+const MoverProfileEditPage = () => {
+  return <MoverProfileForm mode="edit" />;
+};
+
+export default MoverProfileEditPage;
diff --git a/src/app/(mover)/(protected)/mover/profile/page.tsx b/src/app/(mover)/(protected)/mover/profile/page.tsx
index 57c6cec9..a37b68a8 100644
--- a/src/app/(mover)/(protected)/mover/profile/page.tsx
+++ b/src/app/(mover)/(protected)/mover/profile/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import { Text } from "@/components/common/Text";
+import MoverProfileForm from "@/components/profile/MoverProfileForm";
 
 export const metadata: Metadata = {
   title: "기사 프로필 등록 | 무빙",
@@ -8,16 +8,7 @@ export const metadata: Metadata = {
 };
 
 const MoverProfilePage = () => {
-  return (
-    <div className="flex flex-1 flex-col items-center justify-center px-24 py-80">
-      <Text as="h1" variant="2lg-bold" className="text-text-primary">
-        기사님 프로필 등록
-      </Text>
-      <Text as="p" variant="md-medium" className="text-text-description mt-12">
-        프로필 등록 UI는 추후 연결됩니다.
-      </Text>
-    </div>
-  );
+  return <MoverProfileForm mode="create" />;
 };
 
 export default MoverProfilePage;
diff --git a/src/components/profile/CustomerProfileForm.tsx b/src/components/profile/CustomerProfileForm.tsx
new file mode 100644
index 00000000..e07ec34e
--- /dev/null
+++ b/src/components/profile/CustomerProfileForm.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+
+import Button from "@/components/common/Button/Button";
+import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
+import ProfileFieldHeader from "@/components/profile/ProfileFieldHeader";
+import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
+import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
+import { MOVE_TYPE_OPTIONS } from "@/lib/constants/moveType";
+import { REGION_OPTIONS, type RegionId } from "@/lib/constants/region";
+import {
+  customerProfileSchema,
+  type CustomerProfileFormValues,
+} from "@/lib/schemas/customerProfileSchema";
+import type { ProfileFormMode } from "@/types/profileFormMode";
+import type { MoveType } from "@/types/move";
+
+interface CustomerProfileFormProps {
+  mode?: ProfileFormMode;
+  defaultValues?: Partial<CustomerProfileFormValues>;
+  initialImageUrl?: string | null;
+}
+
+const COPY: Record<ProfileFormMode, { title: string; description: string; submitLabel: string }> = {
+  create: {
+    title: "프로필 등록",
+    description: "추가 정보를 입력하여 회원가입을 완료해주세요.",
+    submitLabel: "시작하기",
+  },
+  edit: {
+    title: "프로필 수정",
+    description: "프로필 정보를 수정할 수 있어요.",
+    submitLabel: "수정하기",
+  },
+};
+
+const CustomerProfileForm = ({
+  mode = "create",
+  defaultValues,
+  initialImageUrl = null,
+}: CustomerProfileFormProps) => {
+  const copy = COPY[mode];
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isValid, isSubmitting },
+  } = useForm<CustomerProfileFormValues>({
+    resolver: zodResolver(customerProfileSchema),
+    mode: "onChange",
+    defaultValues: {
+      imageFile: null,
+      serviceTypes: [],
+      regionId: null,
+      ...defaultValues,
+    },
+  });
+
+  const onSubmit = handleSubmit((values) => {
+    // Phase A: API 연동 전 — 제출 값 확인용
+    console.log("[CustomerProfileForm]", mode, values);
+  });
+
+  return (
+    <form
+      className="px-margin-mobile mx-auto flex w-full max-w-[640px] flex-col gap-40 py-32 md:px-72 md:py-40 lg:px-0 lg:pt-56 lg:pb-70"
+      onSubmit={onSubmit}
+      noValidate
+    >
+      <ProfilePageHeader title={copy.title} description={copy.description} />
+
+      <div className="flex w-full flex-col gap-32">
+        <section className="flex w-full flex-col gap-32">
+          <div className="flex flex-col gap-16 md:gap-20">
+            <ProfileFieldHeader label="프로필 이미지" htmlFor="customer-profile-image" />
+            <Controller
+              name="imageFile"
+              control={control}
+              render={({ field }) => (
+                <ProfileImageUploader
+                  value={field.value ?? null}
+                  initialPreviewUrl={initialImageUrl}
+                  onChange={field.onChange}
+                  error={errors.imageFile?.message}
+                />
+              )}
+            />
+          </div>
+          <div className="border-border-subtle w-full border-b" aria-hidden="true" />
+        </section>
+
+        <section className="flex w-full flex-col gap-32">
+          <div className="flex flex-col gap-16 md:gap-24">
+            <ProfileFieldHeader
+              label="이용 서비스"
+              hint="*이용 서비스는 중복 선택 가능하며, 언제든 수정 가능해요!"
+            />
+            <Controller
+              name="serviceTypes"
+              control={control}
+              render={({ field }) => (
+                <ProfileChipGroup<MoveType>
+                  selectionMode="multiple"
+                  options={MOVE_TYPE_OPTIONS}
+                  value={field.value}
+                  onChange={field.onChange}
+                  error={errors.serviceTypes?.message}
+                />
+              )}
+            />
+          </div>
+          <div className="border-border-subtle w-full border-b" aria-hidden="true" />
+        </section>
+
+        <section className="flex w-full flex-col gap-16 md:gap-24">
+          <ProfileFieldHeader
+            label="내가 사는 지역"
+            hint="*내가 사는 지역은 언제든 수정 가능해요!"
+          />
+          <Controller
+            name="regionId"
+            control={control}
+            render={({ field }) => (
+              <ProfileChipGroup<RegionId>
+                selectionMode="single"
+                options={REGION_OPTIONS}
+                value={field.value ?? null}
+                onChange={field.onChange}
+                error={errors.regionId?.message}
+                className="max-w-[277px] gap-x-8 gap-y-12 md:max-w-none"
+              />
+            )}
+          />
+        </section>
+      </div>
+
+      <Button
+        type="submit"
+        variant="solid"
+        size="auth"
+        fullWidth
+        disabled={!isValid || isSubmitting}
+      >
+        {copy.submitLabel}
+      </Button>
+    </form>
+  );
+};
+
+export default CustomerProfileForm;
diff --git a/src/components/profile/MoverProfileForm.tsx b/src/components/profile/MoverProfileForm.tsx
new file mode 100644
index 00000000..5ca5bb55
--- /dev/null
+++ b/src/components/profile/MoverProfileForm.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+
+import Button from "@/components/common/Button/Button";
+import Input from "@/components/common/Input/Input";
+import Textarea from "@/components/common/Input/Textarea";
+import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
+import type { ProfileFormMode } from "@/types/profileFormMode";
+import ProfileFieldHeader from "@/components/profile/ProfileFieldHeader";
+import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
+import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
+import { MOVE_TYPE_OPTIONS } from "@/lib/constants/moveType";
+import { REGION_OPTIONS, type RegionId } from "@/lib/constants/region";
+import { moverProfileSchema, type MoverProfileFormValues } from "@/lib/schemas/moverProfileSchema";
+import type { MoveType } from "@/types/move";
+
+interface MoverProfileFormProps {
+  mode?: ProfileFormMode;
+  defaultValues?: Partial<MoverProfileFormValues>;
+  initialImageUrl?: string | null;
+}
+
+const COPY: Record<ProfileFormMode, { title: string; description: string; submitLabel: string }> = {
+  create: {
+    title: "기사님 프로필 등록",
+    description: "추가 정보를 입력하여 회원가입을 완료해주세요.",
+    submitLabel: "시작하기",
+  },
+  edit: {
+    title: "기사님 프로필 수정",
+    description: "프로필 정보를 수정할 수 있어요.",
+    submitLabel: "수정하기",
+  },
+};
+
+const MoverProfileForm = ({
+  mode = "create",
+  defaultValues,
+  initialImageUrl = null,
+}: MoverProfileFormProps) => {
+  const copy = COPY[mode];
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors, isValid, isSubmitting },
+  } = useForm<MoverProfileFormValues>({
+    resolver: zodResolver(moverProfileSchema),
+    mode: "onChange",
+    defaultValues: {
+      imageFile: null,
+      nickname: "",
+      career: "",
+      shortIntro: "",
+      description: "",
+      serviceTypes: [],
+      regionIds: [],
+      ...defaultValues,
+    },
+  });
+
+  const onSubmit = handleSubmit((values) => {
+    // Phase A: API 연동 전 — 제출 값 확인용
+    console.log("[MoverProfileForm]", mode, values);
+  });
+
+  return (
+    <form
+      className="px-margin-mobile mx-auto flex w-full max-w-[1120px] flex-col gap-40 py-32 md:gap-48 md:px-72 md:py-40 lg:px-0 lg:pt-56 lg:pb-70"
+      onSubmit={onSubmit}
+      noValidate
+    >
+      <ProfilePageHeader title={copy.title} description={copy.description} />
+
+      <div className="flex w-full flex-col gap-32 lg:flex-row lg:items-start lg:justify-between lg:gap-[120px]">
+        <div className="flex w-full flex-col gap-32 lg:w-[500px]">
+          <div className="flex flex-col gap-16 md:gap-20">
+            <ProfileFieldHeader label="프로필 이미지" />
+            <Controller
+              name="imageFile"
+              control={control}
+              render={({ field }) => (
+                <ProfileImageUploader
+                  value={field.value ?? null}
+                  initialPreviewUrl={initialImageUrl}
+                  onChange={field.onChange}
+                  error={errors.imageFile?.message}
+                />
+              )}
+            />
+          </div>
+
+          <div className="flex flex-col gap-10">
+            <ProfileFieldHeader label="별명" htmlFor="nickname" required />
+            <Input
+              id="nickname"
+              size="md"
+              placeholder="사이트에 노출될 별명을 입력해 주세요"
+              error={errors.nickname?.message}
+              {...register("nickname")}
+            />
+          </div>
+
+          <div className="flex flex-col gap-10">
+            <ProfileFieldHeader label="경력" htmlFor="career" required />
+            <Input
+              id="career"
+              size="md"
+              placeholder="기사님의 경력을 입력해 주세요"
+              error={errors.career?.message}
+              {...register("career")}
+            />
+          </div>
+
+          <div className="flex flex-col gap-10">
+            <ProfileFieldHeader label="한 줄 소개" htmlFor="shortIntro" required />
+            <Input
+              id="shortIntro"
+              size="md"
+              placeholder="한 줄 소개를 입력해 주세요"
+              error={errors.shortIntro?.message}
+              {...register("shortIntro")}
+            />
+          </div>
+        </div>
+
+        <div className="flex w-full flex-col gap-32 lg:w-[500px]">
+          <div className="flex flex-col gap-10">
+            <ProfileFieldHeader label="상세 설명" htmlFor="description" required />
+            <Textarea
+              id="description"
+              placeholder="상세 내용을 입력해 주세요"
+              error={errors.description?.message}
+              {...register("description")}
+            />
+          </div>
+
+          <div className="flex flex-col gap-16 md:gap-24">
+            <ProfileFieldHeader label="제공 서비스" required />
+            <Controller
+              name="serviceTypes"
+              control={control}
+              render={({ field }) => (
+                <ProfileChipGroup<MoveType>
+                  selectionMode="multiple"
+                  options={MOVE_TYPE_OPTIONS}
+                  value={field.value}
+                  onChange={field.onChange}
+                  error={errors.serviceTypes?.message}
+                />
+              )}
+            />
+          </div>
+
+          <div className="flex flex-col gap-16 md:gap-24">
+            <ProfileFieldHeader label="서비스 가능 지역" required />
+            <Controller
+              name="regionIds"
+              control={control}
+              render={({ field }) => (
+                <ProfileChipGroup<RegionId>
+                  selectionMode="multiple"
+                  options={REGION_OPTIONS}
+                  value={field.value}
+                  onChange={field.onChange}
+                  error={errors.regionIds?.message}
+                  className="max-w-[277px] gap-x-8 gap-y-12 md:max-w-none"
+                />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex w-full justify-end">
+        <div className="w-full lg:w-[500px]">
+          <Button
+            type="submit"
+            variant="solid"
+            size="auth"
+            fullWidth
+            disabled={!isValid || isSubmitting}
+          >
+            {copy.submitLabel}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default MoverProfileForm;
diff --git a/src/components/profile/ProfileChipGroup.tsx b/src/components/profile/ProfileChipGroup.tsx
new file mode 100644
index 00000000..fd808b69
--- /dev/null
+++ b/src/components/profile/ProfileChipGroup.tsx
@@ -0,0 +1,89 @@
+import ProfileSelectableChip from "@/components/profile/ProfileSelectableChip";
+import { Text } from "@/components/common/Text";
+import { cn } from "@/lib/utils/cn";
+
+export interface ProfileChipOption<T extends string | number> {
+  value: T;
+  label: string;
+}
+
+interface ProfileChipGroupBaseProps<T extends string | number> {
+  options: ProfileChipOption<T>[];
+  className?: string;
+  chipClassName?: string;
+  error?: string;
+}
+
+interface ProfileChipGroupSingleProps<
+  T extends string | number,
+> extends ProfileChipGroupBaseProps<T> {
+  selectionMode: "single";
+  value: T | null;
+  onChange: (value: T | null) => void;
+}
+
+interface ProfileChipGroupMultipleProps<
+  T extends string | number,
+> extends ProfileChipGroupBaseProps<T> {
+  selectionMode: "multiple";
+  value: T[];
+  onChange: (value: T[]) => void;
+}
+
+type ProfileChipGroupProps<T extends string | number> =
+  ProfileChipGroupSingleProps<T> | ProfileChipGroupMultipleProps<T>;
+
+const isSelected = <T extends string | number>(
+  props: ProfileChipGroupProps<T>,
+  optionValue: T,
+): boolean => {
+  if (props.selectionMode === "single") {
+    return props.value === optionValue;
+  }
+  return props.value.includes(optionValue);
+};
+
+const handleSelect = <T extends string | number>(
+  props: ProfileChipGroupProps<T>,
+  optionValue: T,
+): void => {
+  if (props.selectionMode === "single") {
+    props.onChange(props.value === optionValue ? null : optionValue);
+    return;
+  }
+
+  if (props.value.includes(optionValue)) {
+    props.onChange(props.value.filter((item) => item !== optionValue));
+    return;
+  }
+
+  props.onChange([...props.value, optionValue]);
+};
+
+/** 프로필 서비스·지역 Chip 선택 그룹 */
+const ProfileChipGroup = <T extends string | number>(props: ProfileChipGroupProps<T>) => {
+  const { options, className, chipClassName, error } = props;
+
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <div className={cn("flex flex-wrap gap-8 md:gap-12", className)} role="group">
+        {options.map((option) => (
+          <ProfileSelectableChip
+            key={String(option.value)}
+            label={option.label}
+            selected={isSelected(props, option.value)}
+            onClick={() => handleSelect(props, option.value)}
+            className={chipClassName}
+          />
+        ))}
+      </div>
+      {error ? (
+        <Text as="p" role="alert" variant="xs-regular" className="text-text-error">
+          {error}
+        </Text>
+      ) : null}
+    </div>
+  );
+};
+
+export default ProfileChipGroup;
diff --git a/src/components/profile/ProfileFieldHeader.tsx b/src/components/profile/ProfileFieldHeader.tsx
new file mode 100644
index 00000000..71883f1e
--- /dev/null
+++ b/src/components/profile/ProfileFieldHeader.tsx
@@ -0,0 +1,59 @@
+import { Text } from "@/components/common/Text";
+import { cn } from "@/lib/utils/cn";
+
+interface ProfileFieldHeaderProps {
+  label: string;
+  htmlFor?: string;
+  required?: boolean;
+  hint?: string;
+  className?: string;
+}
+
+/** 프로필 필드 라벨 + 필수 표시 + 안내 문구 */
+const ProfileFieldHeader = ({
+  label,
+  htmlFor,
+  required = false,
+  hint,
+  className,
+}: ProfileFieldHeaderProps) => {
+  return (
+    <div className={cn("flex w-full flex-col gap-4", className)}>
+      {htmlFor ? (
+        <Text
+          as="label"
+          htmlFor={htmlFor}
+          variant="fieldLabel"
+          className="text-text-tertiary flex items-center gap-4"
+        >
+          {label}
+          {required ? (
+            <Text as="span" variant="fieldLabel" className="text-text-brand" aria-hidden="true">
+              *
+            </Text>
+          ) : null}
+        </Text>
+      ) : (
+        <Text as="p" variant="fieldLabel" className="text-text-tertiary flex items-center gap-4">
+          {label}
+          {required ? (
+            <Text as="span" variant="fieldLabel" className="text-text-brand" aria-hidden="true">
+              *
+            </Text>
+          ) : null}
+        </Text>
+      )}
+      {hint ? (
+        <Text
+          as="p"
+          variant={{ base: "xs-regular", md: "lg-regular" }}
+          className="text-text-subtle"
+        >
+          {hint}
+        </Text>
+      ) : null}
+    </div>
+  );
+};
+
+export default ProfileFieldHeader;
diff --git a/src/components/profile/ProfileImageUploader.tsx b/src/components/profile/ProfileImageUploader.tsx
new file mode 100644
index 00000000..f1018d38
--- /dev/null
+++ b/src/components/profile/ProfileImageUploader.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useId, useMemo, useRef, type ChangeEvent } from "react";
+
+import { Text } from "@/components/common/Text";
+import { GalleryIcon } from "@/icons";
+import { cn } from "@/lib/utils/cn";
+
+interface ProfileImageUploaderProps {
+  value?: File | null;
+  /** 수정 모드 등 기존 이미지 URL */
+  initialPreviewUrl?: string | null;
+  onChange: (file: File | null) => void;
+  error?: string;
+  className?: string;
+}
+
+/** 프로필 이미지 업로드 트리거 (Figma profile/image-uploader) */
+const ProfileImageUploader = ({
+  value,
+  initialPreviewUrl = null,
+  onChange,
+  error,
+  className,
+}: ProfileImageUploaderProps) => {
+  const inputId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const objectUrl = useMemo(() => {
+    if (!value) return null;
+    return URL.createObjectURL(value);
+  }, [value]);
+
+  useEffect(() => {
+    return () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [objectUrl]);
+
+  const previewUrl = objectUrl ?? initialPreviewUrl;
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0] ?? null;
+    onChange(file);
+  };
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      <input
+        ref={inputRef}
+        id={inputId}
+        type="file"
+        accept="image/*"
+        className="sr-only"
+        aria-invalid={Boolean(error)}
+        onChange={handleChange}
+      />
+      <button
+        type="button"
+        aria-label="프로필 이미지 선택"
+        onClick={() => inputRef.current?.click()}
+        className={cn(
+          "bg-background-muted rounded-6 relative flex items-center justify-center overflow-hidden",
+          "size-100 md:size-160",
+          "focus-visible:ring-border-brand focus-visible:ring-2 focus-visible:outline-none",
+        )}
+      >
+        {previewUrl ? (
+          // blob/원격 URL 모두 대응 — Next Image 도메인 제한 회피
+          // eslint-disable-next-line @next/next/no-img-element
+          <img src={previewUrl} alt="" className="absolute inset-0 size-full object-cover" />
+        ) : (
+          <GalleryIcon className="text-icon-subtle size-24 md:size-40" aria-hidden="true" />
+        )}
+      </button>
+      {error ? (
+        <Text as="p" role="alert" variant="xs-regular" className="text-text-error">
+          {error}
+        </Text>
+      ) : null}
+    </div>
+  );
+};
+
+export default ProfileImageUploader;
diff --git a/src/components/profile/ProfilePageHeader.tsx b/src/components/profile/ProfilePageHeader.tsx
new file mode 100644
index 00000000..afc65343
--- /dev/null
+++ b/src/components/profile/ProfilePageHeader.tsx
@@ -0,0 +1,35 @@
+import { Text } from "@/components/common/Text";
+import { cn } from "@/lib/utils/cn";
+
+interface ProfilePageHeaderProps {
+  title: string;
+  description: string;
+  className?: string;
+}
+
+/** 프로필 등록·수정 페이지 상단 타이틀 영역 */
+const ProfilePageHeader = ({ title, description, className }: ProfilePageHeaderProps) => {
+  return (
+    <header className={cn("flex w-full flex-col gap-16 md:gap-28", className)}>
+      <div className="flex flex-col gap-8 md:gap-16">
+        <Text
+          as="h1"
+          variant={{ base: "2lg-semibold", md: "3xl-semibold" }}
+          className="text-text-secondary"
+        >
+          {title}
+        </Text>
+        <Text
+          as="p"
+          variant={{ base: "xs-regular", md: "xl-regular" }}
+          className="text-text-description"
+        >
+          {description}
+        </Text>
+      </div>
+      <div className="border-border-subtle w-full border-b" aria-hidden="true" />
+    </header>
+  );
+};
+
+export default ProfilePageHeader;
diff --git a/src/components/profile/ProfileSelectableChip.tsx b/src/components/profile/ProfileSelectableChip.tsx
new file mode 100644
index 00000000..bf856fcb
--- /dev/null
+++ b/src/components/profile/ProfileSelectableChip.tsx
@@ -0,0 +1,38 @@
+import { Text } from "@/components/common/Text";
+import { cn } from "@/lib/utils/cn";
+
+interface ProfileSelectableChipProps {
+  label: string;
+  selected?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+/** 프로필 폼용 선택 Chip (Figma chip/basic) */
+const ProfileSelectableChip = ({
+  label,
+  selected = false,
+  onClick,
+  className,
+}: ProfileSelectableChipProps) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={selected}
+      className={cn(
+        "inline-flex items-center justify-center rounded-full border px-12 py-6 transition-colors md:px-20 md:py-10",
+        selected
+          ? "border-border-brand bg-background-brand-muted text-text-brand"
+          : "border-border-muted bg-background-subtle text-text-secondary hover:border-border-brand",
+        className,
+      )}
+    >
+      <Text as="span" variant={{ base: "md-regular", md: "2lg-regular" }} className="text-center">
+        {label}
+      </Text>
+    </button>
+  );
+};
+
+export default ProfileSelectableChip;
diff --git a/src/icons/gallery.svg b/src/icons/gallery.svg
new file mode 100644
index 00000000..470f0d83
--- /dev/null
+++ b/src/icons/gallery.svg
@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="35.8333" height="35.8333" viewBox="0 0 35.8333 35.8333" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Vector">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5833 9.16667C23.4327 9.16667 22.5 10.0994 22.5 11.25C22.5 12.4006 23.4327 13.3333 24.5833 13.3333C25.7339 13.3333 26.6667 12.4006 26.6667 11.25C26.6667 10.0994 25.7339 9.16667 24.5833 9.16667ZM20 11.25C20 8.7187 22.052 6.66667 24.5833 6.66667C27.1146 6.66667 29.1667 8.7187 29.1667 11.25C29.1667 13.7813 27.1146 15.8333 24.5833 15.8333C22.052 15.8333 20 13.7813 20 11.25Z" fill="#C4C4C4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.821 3.52567e-07H18.0123C21.8596 -2.11051e-05 24.8747 -3.80973e-05 27.2272 0.316244C29.6351 0.639977 31.5351 1.31554 33.0264 2.80689C34.5178 4.29824 35.1934 6.19828 35.5171 8.60618C35.8334 10.9587 35.8334 13.9737 35.8333 17.821V18.0123C35.8334 21.8596 35.8334 24.8747 35.5171 27.2272C35.1934 29.6351 34.5178 31.5351 33.0264 33.0264C31.5351 34.5178 29.6351 35.1934 27.2272 35.5171C24.8747 35.8334 21.8596 35.8334 18.0123 35.8333H17.821C13.9737 35.8334 10.9587 35.8334 8.60618 35.5171C6.19828 35.1934 4.29824 34.5178 2.80689 33.0264C1.31554 31.5351 0.639977 29.6351 0.316244 27.2272C-3.80973e-05 24.8747 -2.11051e-05 21.8596 3.52567e-07 18.0123V17.821C-2.11051e-05 13.9737 -3.80973e-05 10.9587 0.316244 8.60618C0.639977 6.19828 1.31554 4.29824 2.80689 2.80689C4.29824 1.31554 6.19828 0.639977 8.60618 0.316244C10.9587 -3.80973e-05 13.9737 -2.11051e-05 17.821 3.52567e-07ZM4.57466 31.2587C3.62523 30.3092 3.08041 29.0247 2.79395 26.894C2.53816 24.9915 2.50493 22.5642 2.50064 19.3169L4.99244 17.1366C6.01597 16.241 7.55858 16.2924 8.52026 17.254L15.6698 24.4036C17.2447 25.9785 19.7238 26.1932 21.5461 24.9126L22.0431 24.5633C23.4734 23.5581 25.4085 23.6746 26.7079 24.844L32.0805 29.6793C32.1389 29.732 32.201 29.7781 32.2658 29.8177C31.9964 30.3858 31.6645 30.8529 31.2587 31.2587C30.3092 32.2081 29.0247 32.7529 26.894 33.0394C24.7274 33.3307 21.8804 33.3333 17.9167 33.3333C13.953 33.3333 11.1059 33.3307 8.93929 33.0394C6.80862 32.7529 5.52409 32.2081 4.57466 31.2587ZM8.93929 2.79395C6.80862 3.08041 5.52409 3.62523 4.57466 4.57466C3.62523 5.52409 3.08041 6.80862 2.79395 8.93929C2.55206 10.7385 2.5092 13.0068 2.50163 15.9941L3.34618 15.2551C5.36022 13.4929 8.39568 13.5939 10.288 15.4863L17.4376 22.6358C18.1534 23.3517 19.2803 23.4493 20.1086 22.8672L20.6056 22.5179C22.9894 20.8426 26.2146 21.0367 28.3803 22.9858L33.0036 27.1468C33.0159 27.0639 33.0279 26.9796 33.0394 26.894C33.3307 24.7274 33.3333 21.8804 33.3333 17.9167C33.3333 13.953 33.3307 11.1059 33.0394 8.93929C32.7529 6.80862 32.2081 5.52409 31.2587 4.57466C30.3092 3.62523 29.0247 3.08041 26.894 2.79395C24.7274 2.50266 21.8804 2.5 17.9167 2.5C13.953 2.5 11.1059 2.50266 8.93929 2.79395Z" fill="#C4C4C4"/>
+</g>
+</svg>
diff --git a/src/icons/index.ts b/src/icons/index.ts
index 50f7e693..ad39854d 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -12,6 +12,7 @@ export { default as ClipIcon } from "./clip.svg";
 export { default as CloseIcon } from "./close.svg";
 export { default as ConfirmedCheckIcon } from "./confirmed-estimate.svg";
 export { default as DocumentIcon } from "./document.svg";
+export { default as GalleryIcon } from "./gallery.svg";
 // 2026.07.25 정슬기 - [추가] 견적 상세 profile-hero 배경 장식(Figma SVG → TSX)
 export { default as HeroDecorationLeftIcon } from "./hero-decoration-left";
 export { default as HeroDecorationRightIcon } from "./hero-decoration-right";
diff --git a/src/lib/constants/appRoutes.ts b/src/lib/constants/appRoutes.ts
index 23417dcd..84f543a2 100644
--- a/src/lib/constants/appRoutes.ts
+++ b/src/lib/constants/appRoutes.ts
@@ -21,8 +21,10 @@ export const APP_ROUTES = {
   MOVER_PROFILE: "/mover/profile",
   /** 견적 요청 */
   ESTIMATE_REQUEST: "/estimate-request",
-  /** 프로필 수정 — 추후 페이지 연동 */
+  /** 고객 프로필 수정 */
   PROFILE_EDIT: "/profile/edit",
+  /** 기사님 프로필 수정 */
+  MOVER_PROFILE_EDIT: "/mover/profile/edit",
   // 2026.07.27 정슬기 - [추가] 기사님 찾기·상세 페이지 경로
   MOVERS: {
     ROOT: "/movers",
diff --git a/src/lib/schemas/customerProfileSchema.ts b/src/lib/schemas/customerProfileSchema.ts
new file mode 100644
index 00000000..24d385d2
--- /dev/null
+++ b/src/lib/schemas/customerProfileSchema.ts
@@ -0,0 +1,35 @@
+import { z } from "zod";
+
+const moveTypeSchema = z.enum(["SMALL", "HOME", "OFFICE"]);
+const regionIdSchema = z.union([
+  z.literal(1),
+  z.literal(2),
+  z.literal(3),
+  z.literal(4),
+  z.literal(5),
+  z.literal(6),
+  z.literal(7),
+  z.literal(8),
+  z.literal(9),
+  z.literal(10),
+  z.literal(11),
+  z.literal(12),
+  z.literal(13),
+  z.literal(14),
+  z.literal(15),
+  z.literal(16),
+  z.literal(17),
+]);
+
+export const customerProfileSchema = z
+  .object({
+    imageFile: z.custom<File | null>().nullable().optional(),
+    serviceTypes: z.array(moveTypeSchema).min(1, "이용 서비스를 선택해 주세요"),
+    regionId: regionIdSchema.nullable(),
+  })
+  .refine((data) => data.regionId !== null, {
+    message: "내가 사는 지역을 선택해 주세요",
+    path: ["regionId"],
+  });
+
+export type CustomerProfileFormValues = z.infer<typeof customerProfileSchema>;
diff --git a/src/lib/schemas/moverProfileSchema.ts b/src/lib/schemas/moverProfileSchema.ts
new file mode 100644
index 00000000..b7d2b265
--- /dev/null
+++ b/src/lib/schemas/moverProfileSchema.ts
@@ -0,0 +1,34 @@
+import { z } from "zod";
+
+const moveTypeSchema = z.enum(["SMALL", "HOME", "OFFICE"]);
+const regionIdSchema = z.union([
+  z.literal(1),
+  z.literal(2),
+  z.literal(3),
+  z.literal(4),
+  z.literal(5),
+  z.literal(6),
+  z.literal(7),
+  z.literal(8),
+  z.literal(9),
+  z.literal(10),
+  z.literal(11),
+  z.literal(12),
+  z.literal(13),
+  z.literal(14),
+  z.literal(15),
+  z.literal(16),
+  z.literal(17),
+]);
+
+export const moverProfileSchema = z.object({
+  imageFile: z.custom<File | null>().nullable().optional(),
+  nickname: z.string().trim().min(1, "별명을 입력해 주세요"),
+  career: z.string().trim().min(1, "경력을 입력해 주세요"),
+  shortIntro: z.string().trim().min(1, "한 줄 소개를 입력해 주세요"),
+  description: z.string().trim().min(1, "상세 설명을 입력해 주세요"),
+  serviceTypes: z.array(moveTypeSchema).min(1, "제공 서비스를 선택해 주세요"),
+  regionIds: z.array(regionIdSchema).min(1, "서비스 가능 지역을 선택해 주세요"),
+});
+
+export type MoverProfileFormValues = z.infer<typeof moverProfileSchema>;
diff --git a/src/types/profileFormMode.ts b/src/types/profileFormMode.ts
new file mode 100644
index 00000000..1b987303
--- /dev/null
+++ b/src/types/profileFormMode.ts
@@ -0,0 +1 @@
+export type ProfileFormMode = "create" | "edit";

From 8c2c92d85cd605cc3351b7f3dd6a1b4e122bb3a5 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Mon, 3 Aug 2026 00:10:51 +0900
Subject: [PATCH 02/18] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C,=20=EC=88=98=EC=A0=95=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80,=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EC=9E=84=EC=8B=9C=20=EC=B6=94=EA=B0=80,=20refactor?=
 =?UTF-8?q?:=20type=20=ED=95=98=EB=82=98=EB=A1=9C=20=EB=B3=91=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(protected)/profile/edit/page.tsx         |   4 +-
 .../(protected)/mover/profile/edit/page.tsx   |   4 +-
 .../profile/CustomerProfileEditView.tsx       |  47 +++++++
 .../profile/CustomerProfileForm.tsx           |  60 +++++++--
 .../profile/MoverProfileEditView.tsx          |  43 ++++++
 src/components/profile/MoverProfileForm.tsx   |  54 +++++++-
 src/hooks/profile/useCreateCustomerProfile.ts |  20 +++
 src/hooks/profile/useCreateMoverProfile.ts    |  20 +++
 src/hooks/profile/useCustomerProfileMe.ts     |  11 ++
 src/hooks/profile/useMoverProfileMe.ts        |  11 ++
 src/hooks/profile/useUpdateCustomerProfile.ts |  20 +++
 src/hooks/profile/useUpdateMoverProfile.ts    |  20 +++
 src/hooks/useMoverAuthReady.ts                |  26 ++++
 src/lib/api/profile.ts                        | 124 +++++++++---------
 src/lib/api/profileImage.ts                   |  28 ++++
 src/lib/constants/apiRoutes.ts                |   3 +
 src/lib/constants/queryKeys.ts                |   7 +
 .../profile/toCustomerProfileFormValues.ts    |  12 ++
 src/lib/profile/toMoverProfileFormValues.ts   |  17 +++
 src/lib/profile/uploadProfileImage.ts         |  55 ++++++++
 src/lib/schemas/moverProfileSchema.ts         |   8 +-
 src/types/profile.ts                          | 109 +++++++++++++++
 src/types/profileFormMode.ts                  |   1 -
 23 files changed, 619 insertions(+), 85 deletions(-)
 create mode 100644 src/components/profile/CustomerProfileEditView.tsx
 create mode 100644 src/components/profile/MoverProfileEditView.tsx
 create mode 100644 src/hooks/profile/useCreateCustomerProfile.ts
 create mode 100644 src/hooks/profile/useCreateMoverProfile.ts
 create mode 100644 src/hooks/profile/useCustomerProfileMe.ts
 create mode 100644 src/hooks/profile/useMoverProfileMe.ts
 create mode 100644 src/hooks/profile/useUpdateCustomerProfile.ts
 create mode 100644 src/hooks/profile/useUpdateMoverProfile.ts
 create mode 100644 src/hooks/useMoverAuthReady.ts
 create mode 100644 src/lib/api/profileImage.ts
 create mode 100644 src/lib/profile/toCustomerProfileFormValues.ts
 create mode 100644 src/lib/profile/toMoverProfileFormValues.ts
 create mode 100644 src/lib/profile/uploadProfileImage.ts
 create mode 100644 src/types/profile.ts
 delete mode 100644 src/types/profileFormMode.ts

diff --git a/src/app/(customer)/(protected)/profile/edit/page.tsx b/src/app/(customer)/(protected)/profile/edit/page.tsx
index 2b71c008..442621b1 100644
--- a/src/app/(customer)/(protected)/profile/edit/page.tsx
+++ b/src/app/(customer)/(protected)/profile/edit/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import CustomerProfileForm from "@/components/profile/CustomerProfileForm";
+import CustomerProfileEditView from "@/components/profile/CustomerProfileEditView";
 
 export const metadata: Metadata = {
   title: "프로필 수정 | 무빙",
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 };
 
 const CustomerProfileEditPage = () => {
-  return <CustomerProfileForm mode="edit" />;
+  return <CustomerProfileEditView />;
 };
 
 export default CustomerProfileEditPage;
diff --git a/src/app/(mover)/(protected)/mover/profile/edit/page.tsx b/src/app/(mover)/(protected)/mover/profile/edit/page.tsx
index be56b8e1..cb6f4e1d 100644
--- a/src/app/(mover)/(protected)/mover/profile/edit/page.tsx
+++ b/src/app/(mover)/(protected)/mover/profile/edit/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import MoverProfileForm from "@/components/profile/MoverProfileForm";
+import MoverProfileEditView from "@/components/profile/MoverProfileEditView";
 
 export const metadata: Metadata = {
   title: "기사 프로필 수정 | 무빙",
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 };
 
 const MoverProfileEditPage = () => {
-  return <MoverProfileForm mode="edit" />;
+  return <MoverProfileEditView />;
 };
 
 export default MoverProfileEditPage;
diff --git a/src/components/profile/CustomerProfileEditView.tsx b/src/components/profile/CustomerProfileEditView.tsx
new file mode 100644
index 00000000..ab3bd7f3
--- /dev/null
+++ b/src/components/profile/CustomerProfileEditView.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import CustomerProfileForm from "@/components/profile/CustomerProfileForm";
+import { Text } from "@/components/common/Text";
+import { useCustomerAuthReady } from "@/hooks/useCustomerAuthReady";
+import { useCustomerProfileMe } from "@/hooks/profile/useCustomerProfileMe";
+import { toCustomerProfileFormValues } from "@/lib/profile/toCustomerProfileFormValues";
+
+const CustomerProfileEditView = () => {
+  const { canFetch, isPending: isAuthPending } = useCustomerAuthReady();
+  const {
+    data: customerProfile,
+    isPending: isProfilePending,
+    isError,
+  } = useCustomerProfileMe(canFetch);
+
+  if (isAuthPending || isProfilePending) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center px-24">
+        <Text as="p" variant="md-medium" className="text-text-description">
+          프로필을 불러오는 중입니다.
+        </Text>
+      </div>
+    );
+  }
+
+  if (isError || !customerProfile) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center px-24">
+        <Text as="p" role="alert" variant="md-medium" className="text-text-error">
+          프로필을 불러오지 못했습니다.
+        </Text>
+      </div>
+    );
+  }
+
+  return (
+    <CustomerProfileForm
+      key={customerProfile.id}
+      mode="edit"
+      defaultValues={toCustomerProfileFormValues(customerProfile)}
+      initialImageUrl={customerProfile.imageUrl}
+    />
+  );
+};
+
+export default CustomerProfileEditView;
diff --git a/src/components/profile/CustomerProfileForm.tsx b/src/components/profile/CustomerProfileForm.tsx
index e07ec34e..2efb56ef 100644
--- a/src/components/profile/CustomerProfileForm.tsx
+++ b/src/components/profile/CustomerProfileForm.tsx
@@ -1,21 +1,29 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import Button from "@/components/common/Button/Button";
+import { Text } from "@/components/common/Text";
 import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
 import ProfileFieldHeader from "@/components/profile/ProfileFieldHeader";
 import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
 import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
+import { useCreateCustomerProfile } from "@/hooks/profile/useCreateCustomerProfile";
+import { useUpdateCustomerProfile } from "@/hooks/profile/useUpdateCustomerProfile";
+import { getApiErrorMessage } from "@/lib/api/getApiErrorMessage";
+import { getRoleHomePath } from "@/lib/auth/redirect";
 import { MOVE_TYPE_OPTIONS } from "@/lib/constants/moveType";
 import { REGION_OPTIONS, type RegionId } from "@/lib/constants/region";
+import { uploadProfileImageIfNeeded } from "@/lib/profile/uploadProfileImage";
 import {
   customerProfileSchema,
   type CustomerProfileFormValues,
 } from "@/lib/schemas/customerProfileSchema";
-import type { ProfileFormMode } from "@/types/profileFormMode";
 import type { MoveType } from "@/types/move";
+import type { ProfileFormMode } from "@/types/profile";
 
 interface CustomerProfileFormProps {
   mode?: ProfileFormMode;
@@ -41,7 +49,11 @@ const CustomerProfileForm = ({
   defaultValues,
   initialImageUrl = null,
 }: CustomerProfileFormProps) => {
+  const router = useRouter();
   const copy = COPY[mode];
+  const createCustomerProfile = useCreateCustomerProfile();
+  const updateCustomerProfile = useUpdateCustomerProfile();
+  const [submitError, setSubmitError] = useState<string | null>(null);
 
   const {
     control,
@@ -58,9 +70,35 @@ const CustomerProfileForm = ({
     },
   });
 
-  const onSubmit = handleSubmit((values) => {
-    // Phase A: API 연동 전 — 제출 값 확인용
-    console.log("[CustomerProfileForm]", mode, values);
+  const isPending =
+    isSubmitting || createCustomerProfile.isPending || updateCustomerProfile.isPending;
+
+  const onSubmit = handleSubmit(async (formValues) => {
+    setSubmitError(null);
+
+    try {
+      if (formValues.regionId === null) {
+        setSubmitError("내가 사는 지역을 선택해 주세요");
+        return;
+      }
+
+      const imageUrl = await uploadProfileImageIfNeeded(formValues.imageFile);
+      const profileInput = {
+        ...(imageUrl ? { imageUrl } : {}),
+        regionIds: [formValues.regionId],
+        serviceTypes: formValues.serviceTypes,
+      };
+
+      if (mode === "create") {
+        await createCustomerProfile.mutateAsync(profileInput);
+        router.replace(getRoleHomePath("CUSTOMER"));
+        return;
+      }
+
+      await updateCustomerProfile.mutateAsync(profileInput);
+    } catch (error) {
+      setSubmitError(getApiErrorMessage(error, "프로필 저장에 실패했습니다."));
+    }
   });
 
   return (
@@ -136,13 +174,13 @@ const CustomerProfileForm = ({
         </section>
       </div>
 
-      <Button
-        type="submit"
-        variant="solid"
-        size="auth"
-        fullWidth
-        disabled={!isValid || isSubmitting}
-      >
+      {submitError ? (
+        <Text as="p" role="alert" variant="md-medium" className="text-text-error text-center">
+          {submitError}
+        </Text>
+      ) : null}
+
+      <Button type="submit" variant="solid" size="auth" fullWidth disabled={!isValid || isPending}>
         {copy.submitLabel}
       </Button>
     </form>
diff --git a/src/components/profile/MoverProfileEditView.tsx b/src/components/profile/MoverProfileEditView.tsx
new file mode 100644
index 00000000..70e5e5b3
--- /dev/null
+++ b/src/components/profile/MoverProfileEditView.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import MoverProfileForm from "@/components/profile/MoverProfileForm";
+import { Text } from "@/components/common/Text";
+import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
+import { useMoverProfileMe } from "@/hooks/profile/useMoverProfileMe";
+import { toMoverProfileFormValues } from "@/lib/profile/toMoverProfileFormValues";
+
+const MoverProfileEditView = () => {
+  const { canFetch, isPending: isAuthPending } = useMoverAuthReady();
+  const { data: moverProfile, isPending: isProfilePending, isError } = useMoverProfileMe(canFetch);
+
+  if (isAuthPending || isProfilePending) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center px-24">
+        <Text as="p" variant="md-medium" className="text-text-description">
+          프로필을 불러오는 중입니다.
+        </Text>
+      </div>
+    );
+  }
+
+  if (isError || !moverProfile) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center px-24">
+        <Text as="p" role="alert" variant="md-medium" className="text-text-error">
+          프로필을 불러오지 못했습니다.
+        </Text>
+      </div>
+    );
+  }
+
+  return (
+    <MoverProfileForm
+      key={moverProfile.id}
+      mode="edit"
+      defaultValues={toMoverProfileFormValues(moverProfile)}
+      initialImageUrl={moverProfile.imageUrl}
+    />
+  );
+};
+
+export default MoverProfileEditView;
diff --git a/src/components/profile/MoverProfileForm.tsx b/src/components/profile/MoverProfileForm.tsx
index 5ca5bb55..ce3791a9 100644
--- a/src/components/profile/MoverProfileForm.tsx
+++ b/src/components/profile/MoverProfileForm.tsx
@@ -1,20 +1,28 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import Button from "@/components/common/Button/Button";
 import Input from "@/components/common/Input/Input";
 import Textarea from "@/components/common/Input/Textarea";
+import { Text } from "@/components/common/Text";
 import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
-import type { ProfileFormMode } from "@/types/profileFormMode";
 import ProfileFieldHeader from "@/components/profile/ProfileFieldHeader";
 import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
 import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
+import { useCreateMoverProfile } from "@/hooks/profile/useCreateMoverProfile";
+import { useUpdateMoverProfile } from "@/hooks/profile/useUpdateMoverProfile";
+import { getApiErrorMessage } from "@/lib/api/getApiErrorMessage";
+import { getRoleHomePath } from "@/lib/auth/redirect";
 import { MOVE_TYPE_OPTIONS } from "@/lib/constants/moveType";
 import { REGION_OPTIONS, type RegionId } from "@/lib/constants/region";
+import { uploadProfileImageIfNeeded } from "@/lib/profile/uploadProfileImage";
 import { moverProfileSchema, type MoverProfileFormValues } from "@/lib/schemas/moverProfileSchema";
 import type { MoveType } from "@/types/move";
+import type { ProfileFormMode } from "@/types/profile";
 
 interface MoverProfileFormProps {
   mode?: ProfileFormMode;
@@ -40,7 +48,11 @@ const MoverProfileForm = ({
   defaultValues,
   initialImageUrl = null,
 }: MoverProfileFormProps) => {
+  const router = useRouter();
   const copy = COPY[mode];
+  const createMoverProfile = useCreateMoverProfile();
+  const updateMoverProfile = useUpdateMoverProfile();
+  const [submitError, setSubmitError] = useState<string | null>(null);
 
   const {
     register,
@@ -62,9 +74,33 @@ const MoverProfileForm = ({
     },
   });
 
-  const onSubmit = handleSubmit((values) => {
-    // Phase A: API 연동 전 — 제출 값 확인용
-    console.log("[MoverProfileForm]", mode, values);
+  const isPending = isSubmitting || createMoverProfile.isPending || updateMoverProfile.isPending;
+
+  const onSubmit = handleSubmit(async (formValues) => {
+    setSubmitError(null);
+
+    try {
+      const imageUrl = await uploadProfileImageIfNeeded(formValues.imageFile);
+      const profileInput = {
+        nickname: formValues.nickname,
+        career: Number(formValues.career),
+        shortIntro: formValues.shortIntro,
+        description: formValues.description,
+        regionIds: formValues.regionIds,
+        serviceTypes: formValues.serviceTypes,
+        ...(imageUrl ? { imageUrl } : {}),
+      };
+
+      if (mode === "create") {
+        await createMoverProfile.mutateAsync(profileInput);
+        router.replace(getRoleHomePath("MOVER"));
+        return;
+      }
+
+      await updateMoverProfile.mutateAsync(profileInput);
+    } catch (error) {
+      setSubmitError(getApiErrorMessage(error, "프로필 저장에 실패했습니다."));
+    }
   });
 
   return (
@@ -109,6 +145,8 @@ const MoverProfileForm = ({
             <Input
               id="career"
               size="md"
+              inputMode="numeric"
+              numericOnly
               placeholder="기사님의 경력을 입력해 주세요"
               error={errors.career?.message}
               {...register("career")}
@@ -175,6 +213,12 @@ const MoverProfileForm = ({
         </div>
       </div>
 
+      {submitError ? (
+        <Text as="p" role="alert" variant="md-medium" className="text-text-error text-center">
+          {submitError}
+        </Text>
+      ) : null}
+
       <div className="flex w-full justify-end">
         <div className="w-full lg:w-[500px]">
           <Button
@@ -182,7 +226,7 @@ const MoverProfileForm = ({
             variant="solid"
             size="auth"
             fullWidth
-            disabled={!isValid || isSubmitting}
+            disabled={!isValid || isPending}
           >
             {copy.submitLabel}
           </Button>
diff --git a/src/hooks/profile/useCreateCustomerProfile.ts b/src/hooks/profile/useCreateCustomerProfile.ts
new file mode 100644
index 00000000..43a1d843
--- /dev/null
+++ b/src/hooks/profile/useCreateCustomerProfile.ts
@@ -0,0 +1,20 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useApiMutation } from "@/hooks/queries/useApiMutation";
+import { createCustomerProfile } from "@/lib/api/profile";
+import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+import type { CreateCustomerProfileInput } from "@/types/profile";
+
+export const useCreateCustomerProfile = () => {
+  const queryClient = useQueryClient();
+
+  return useApiMutation({
+    mutationFn: (input: CreateCustomerProfileInput) => createCustomerProfile(input),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.CUSTOMER_ME }),
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.CUSTOMER_STATUS }),
+      ]);
+    },
+  });
+};
diff --git a/src/hooks/profile/useCreateMoverProfile.ts b/src/hooks/profile/useCreateMoverProfile.ts
new file mode 100644
index 00000000..b73f535c
--- /dev/null
+++ b/src/hooks/profile/useCreateMoverProfile.ts
@@ -0,0 +1,20 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useApiMutation } from "@/hooks/queries/useApiMutation";
+import { createMoverProfile } from "@/lib/api/profile";
+import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+import type { CreateMoverProfileInput } from "@/types/profile";
+
+export const useCreateMoverProfile = () => {
+  const queryClient = useQueryClient();
+
+  return useApiMutation({
+    mutationFn: (input: CreateMoverProfileInput) => createMoverProfile(input),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.MOVER_ME }),
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.MOVER_STATUS }),
+      ]);
+    },
+  });
+};
diff --git a/src/hooks/profile/useCustomerProfileMe.ts b/src/hooks/profile/useCustomerProfileMe.ts
new file mode 100644
index 00000000..6b7398a3
--- /dev/null
+++ b/src/hooks/profile/useCustomerProfileMe.ts
@@ -0,0 +1,11 @@
+import { useApiQuery } from "@/hooks/queries/useApiQuery";
+import { getCustomerProfileMe } from "@/lib/api/profile";
+import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+
+export const useCustomerProfileMe = (enabled: boolean) => {
+  return useApiQuery({
+    queryKey: QUERY_KEYS.PROFILES.CUSTOMER_ME,
+    queryFn: getCustomerProfileMe,
+    enabled,
+  });
+};
diff --git a/src/hooks/profile/useMoverProfileMe.ts b/src/hooks/profile/useMoverProfileMe.ts
new file mode 100644
index 00000000..45e44ed3
--- /dev/null
+++ b/src/hooks/profile/useMoverProfileMe.ts
@@ -0,0 +1,11 @@
+import { useApiQuery } from "@/hooks/queries/useApiQuery";
+import { getMoverProfileMe } from "@/lib/api/profile";
+import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+
+export const useMoverProfileMe = (enabled: boolean) => {
+  return useApiQuery({
+    queryKey: QUERY_KEYS.PROFILES.MOVER_ME,
+    queryFn: getMoverProfileMe,
+    enabled,
+  });
+};
diff --git a/src/hooks/profile/useUpdateCustomerProfile.ts b/src/hooks/profile/useUpdateCustomerProfile.ts
new file mode 100644
index 00000000..c30949a9
--- /dev/null
+++ b/src/hooks/profile/useUpdateCustomerProfile.ts
@@ -0,0 +1,20 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useApiMutation } from "@/hooks/queries/useApiMutation";
+import { updateCustomerProfile } from "@/lib/api/profile";
+import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+import type { UpdateCustomerProfileInput } from "@/types/profile";
+
+export const useUpdateCustomerProfile = () => {
+  const queryClient = useQueryClient();
+
+  return useApiMutation({
+    mutationFn: (input: UpdateCustomerProfileInput) => updateCustomerProfile(input),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.CUSTOMER_ME }),
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.CUSTOMER_STATUS }),
+      ]);
+    },
+  });
+};
diff --git a/src/hooks/profile/useUpdateMoverProfile.ts b/src/hooks/profile/useUpdateMoverProfile.ts
new file mode 100644
index 00000000..67ee93bf
--- /dev/null
+++ b/src/hooks/profile/useUpdateMoverProfile.ts
@@ -0,0 +1,20 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useApiMutation } from "@/hooks/queries/useApiMutation";
+import { updateMoverProfile } from "@/lib/api/profile";
+import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+import type { UpdateMoverProfileInput } from "@/types/profile";
+
+export const useUpdateMoverProfile = () => {
+  const queryClient = useQueryClient();
+
+  return useApiMutation({
+    mutationFn: (input: UpdateMoverProfileInput) => updateMoverProfile(input),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.MOVER_ME }),
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.MOVER_STATUS }),
+      ]);
+    },
+  });
+};
diff --git a/src/hooks/useMoverAuthReady.ts b/src/hooks/useMoverAuthReady.ts
new file mode 100644
index 00000000..10e119dd
--- /dev/null
+++ b/src/hooks/useMoverAuthReady.ts
@@ -0,0 +1,26 @@
+"use client";
+
+import { useAuthStore } from "@/stores/useAuthStore";
+
+/**
+ * 기사 전용 API·화면용 인증 준비 상태
+ * AuthProvider의 checkAuth가 끝나기 전에는 canFetch=false 로 보호 API 호출을 막습니다.
+ */
+export const useMoverAuthReady = () => {
+  const hasHydrated = useAuthStore((state) => state.hasHydrated);
+  const isCheckingAuth = useAuthStore((state) => state.isCheckingAuth);
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const user = useAuthStore((state) => state.user);
+
+  const isPending = !hasHydrated || isCheckingAuth;
+  const isCustomer = user?.role === "CUSTOMER";
+  const canFetch = !isPending && isAuthenticated && !isCustomer;
+
+  return {
+    isPending,
+    isAuthenticated,
+    isCustomer,
+    canFetch,
+    user,
+  };
+};
diff --git a/src/lib/api/profile.ts b/src/lib/api/profile.ts
index c0b27081..ddd462e5 100644
--- a/src/lib/api/profile.ts
+++ b/src/lib/api/profile.ts
@@ -1,63 +1,36 @@
 import type { AuthUser } from "@/lib/api/auth";
 import fetchInstance, { type FetchRequestOptions } from "@/lib/api/fetchInstance";
 import { API_ROUTES } from "@/lib/constants/apiRoutes";
-import type { RegionId } from "@/lib/constants/region";
 import { ApiError } from "@/types/api";
-import type { MoveType } from "@/types/move";
-
-export interface CustomerProfileStatus {
-  isProfileCompleted: boolean;
-}
-
-interface CustomerProfileRegion {
-  id: RegionId;
-  name: string;
-}
-
-/**
- * GET /profiles/customer/me 원본(data)
- * name/email/phone·regions·serviceTypes가 이미 펼쳐진 형태
- */
-export interface CustomerProfileMeResponse {
-  id: string | number;
-  userId: string;
-  name: string;
-  email: string;
-  phone: string | null;
-  imageUrl: string | null;
-  regions: CustomerProfileRegion[];
-  serviceTypes: MoveType[];
-  createdAt: string;
-  updatedAt: string;
-}
-
-export type CustomerProfileMe = CustomerProfileMeResponse & {
-  id: string;
-};
-
-export interface MoverProfileMeResponse {
-  id: string | number;
-  userId: string;
-  name: string;
-  email: string;
-  phone: string | null;
-  imageUrl: string | null;
-  regions: CustomerProfileRegion[];
-  serviceTypes: MoveType[];
-  createdAt: string;
-  updatedAt: string;
-}
-
-export type MoverProfileMe = MoverProfileMeResponse & {
-  id: string;
-};
+import type {
+  CreateCustomerProfileInput,
+  CreateMoverProfileInput,
+  CustomerProfileMe,
+  CustomerProfileMeResponse,
+  MoverProfileMe,
+  MoverProfileMeResponse,
+  ProfileStatus,
+  UpdateCustomerProfileInput,
+  UpdateMoverProfileInput,
+} from "@/types/profile";
+
+export type {
+  CreateCustomerProfileInput,
+  CreateMoverProfileInput,
+  CustomerProfileMe,
+  CustomerProfileMeResponse,
+  MoverProfileMe,
+  MoverProfileMeResponse,
+  ProfileStatus,
+  UpdateCustomerProfileInput,
+  UpdateMoverProfileInput,
+} from "@/types/profile";
+
+/** @deprecated ProfileStatus 사용 */
+export type CustomerProfileStatus = ProfileStatus;
 
-/**
- * customer 프로필 status 조회
- *
- */
 export const getCustomerProfileStatus = (options?: FetchRequestOptions) =>
-  fetchInstance.get<CustomerProfileStatus>(API_ROUTES.PROFILES.CUSTOMER_STATUS, options);
+  fetchInstance.get<ProfileStatus>(API_ROUTES.PROFILES.CUSTOMER_STATUS, options);
 
 export const mapCustomerProfileMeResponse = (
   profile: CustomerProfileMeResponse,
@@ -88,6 +61,18 @@ export const getCustomerProfileMe = async (): Promise<CustomerProfileMe> => {
   return mapCustomerProfileMeResponse(profile);
 };
 
+export const createCustomerProfile = (input: CreateCustomerProfileInput) =>
+  fetchInstance.post<CustomerProfileMeResponse, CreateCustomerProfileInput>(
+    API_ROUTES.PROFILES.CUSTOMER,
+    input,
+  );
+
+export const updateCustomerProfile = (input: UpdateCustomerProfileInput) =>
+  fetchInstance.patch<CustomerProfileMeResponse, UpdateCustomerProfileInput>(
+    API_ROUTES.PROFILES.CUSTOMER_ME,
+    input,
+  );
+
 /** Header·auth store용 — AuthUser.id = userId */
 export const toAuthUserFromCustomerProfile = (profile: CustomerProfileMe): AuthUser => ({
   id: profile.userId,
@@ -97,16 +82,12 @@ export const toAuthUserFromCustomerProfile = (profile: CustomerProfileMe): AuthU
   role: "CUSTOMER",
 });
 
-/**
- * mover 프로필 status 조회
- *
- */
 export const getMoverProfileStatus = (options?: FetchRequestOptions) =>
-  fetchInstance.get<CustomerProfileStatus>(API_ROUTES.PROFILES.MOVER_STATUS, options);
+  fetchInstance.get<ProfileStatus>(API_ROUTES.PROFILES.MOVER_STATUS, options);
 
 export const mapMoverProfileMeResponse = (profile: MoverProfileMeResponse): MoverProfileMe => {
-  if (!profile?.name) {
-    throw new ApiError("고객 프로필 응답 형식이 올바르지 않습니다.");
+  if (!profile?.nickname) {
+    throw new ApiError("기사 프로필 응답 형식이 올바르지 않습니다.");
   }
 
   return {
@@ -115,7 +96,14 @@ export const mapMoverProfileMeResponse = (profile: MoverProfileMeResponse): Move
     name: profile.name,
     email: profile.email,
     phone: profile.phone,
+    nickname: profile.nickname,
     imageUrl: profile.imageUrl,
+    career: profile.career,
+    shortIntro: profile.shortIntro,
+    description: profile.description,
+    confirmedCount: profile.confirmedCount,
+    averageRating: profile.averageRating,
+    reviewCount: profile.reviewCount,
     regions: profile.regions ?? [],
     serviceTypes: profile.serviceTypes ?? [],
     createdAt: profile.createdAt,
@@ -129,11 +117,23 @@ export const getMoverProfileMe = async (): Promise<MoverProfileMe> => {
   return mapMoverProfileMeResponse(profile);
 };
 
+export const createMoverProfile = (input: CreateMoverProfileInput) =>
+  fetchInstance.post<MoverProfileMeResponse, CreateMoverProfileInput>(
+    API_ROUTES.PROFILES.MOVER,
+    input,
+  );
+
+export const updateMoverProfile = (input: UpdateMoverProfileInput) =>
+  fetchInstance.patch<MoverProfileMeResponse, UpdateMoverProfileInput>(
+    API_ROUTES.PROFILES.MOVER_ME,
+    input,
+  );
+
 /** Header·auth store용 — AuthUser.id = userId */
 export const toAuthUserFromMoverProfile = (profile: MoverProfileMe): AuthUser => ({
   id: profile.userId,
   name: profile.name,
-  email: profile.email,
+  email: profile.email ?? "",
   phone: profile.phone,
   role: "MOVER",
 });
diff --git a/src/lib/api/profileImage.ts b/src/lib/api/profileImage.ts
new file mode 100644
index 00000000..554033a0
--- /dev/null
+++ b/src/lib/api/profileImage.ts
@@ -0,0 +1,28 @@
+import fetchInstance from "@/lib/api/fetchInstance";
+import { API_ROUTES } from "@/lib/constants/apiRoutes";
+import { ApiError } from "@/types/api";
+import type { ProfileImageUploadUrlRequest, ProfileImageUploadUrlResult } from "@/types/profile";
+
+export const requestProfileImageUploadUrl = (body: ProfileImageUploadUrlRequest) =>
+  fetchInstance.post<ProfileImageUploadUrlResult, ProfileImageUploadUrlRequest>(
+    API_ROUTES.PROFILES.IMAGE_UPLOAD_URL,
+    body,
+  );
+
+/**
+ * Presigned URL로 S3에 파일을 업로드합니다.
+ * Authorization/JSON Content-Type을 붙이면 signature가 깨지므로 fetchInstance를 쓰지 않습니다.
+ */
+export const uploadFileToPresignedUrl = async (uploadUrl: string, file: File): Promise<void> => {
+  const response = await fetch(uploadUrl, {
+    method: "PUT",
+    headers: {
+      "Content-Type": file.type,
+    },
+    body: file,
+  });
+
+  if (!response.ok) {
+    throw new ApiError("이미지 업로드에 실패했습니다.");
+  }
+};
diff --git a/src/lib/constants/apiRoutes.ts b/src/lib/constants/apiRoutes.ts
index 7180821d..ac727696 100644
--- a/src/lib/constants/apiRoutes.ts
+++ b/src/lib/constants/apiRoutes.ts
@@ -16,8 +16,11 @@ export const API_ROUTES = {
   },
   PROFILES: {
     ROOT: "/profiles",
+    IMAGE_UPLOAD_URL: "/profiles/image/upload-url",
+    CUSTOMER: "/profiles/customer",
     CUSTOMER_STATUS: "/profiles/customer/status",
     CUSTOMER_ME: "/profiles/customer/me",
+    MOVER: "/profiles/mover",
     MOVER_STATUS: "/profiles/mover/status",
     MOVER_ME: "/profiles/mover/me",
   },
diff --git a/src/lib/constants/queryKeys.ts b/src/lib/constants/queryKeys.ts
index ee1cdb19..6f46d445 100644
--- a/src/lib/constants/queryKeys.ts
+++ b/src/lib/constants/queryKeys.ts
@@ -59,6 +59,13 @@ export const QUERY_KEYS = {
     DETAIL: (userId: string) => ["users", userId],
   },
 
+  PROFILES: {
+    CUSTOMER_ME: ["profiles", "customer", "me"] as const,
+    CUSTOMER_STATUS: ["profiles", "customer", "status"] as const,
+    MOVER_ME: ["profiles", "mover", "me"] as const,
+    MOVER_STATUS: ["profiles", "mover", "status"] as const,
+  },
+
   MOVERS: {
     ALL: ["movers"] as const,
     LIST: ["movers", "list"] as const,
diff --git a/src/lib/profile/toCustomerProfileFormValues.ts b/src/lib/profile/toCustomerProfileFormValues.ts
new file mode 100644
index 00000000..826d7925
--- /dev/null
+++ b/src/lib/profile/toCustomerProfileFormValues.ts
@@ -0,0 +1,12 @@
+import type { CustomerProfileFormValues } from "@/lib/schemas/customerProfileSchema";
+import type { CustomerProfileMe } from "@/types/profile";
+
+export const toCustomerProfileFormValues = (
+  customerProfile: CustomerProfileMe,
+): Partial<CustomerProfileFormValues> => {
+  return {
+    imageFile: null,
+    serviceTypes: customerProfile.serviceTypes,
+    regionId: customerProfile.regions[0]?.id ?? null,
+  };
+};
diff --git a/src/lib/profile/toMoverProfileFormValues.ts b/src/lib/profile/toMoverProfileFormValues.ts
new file mode 100644
index 00000000..bf8c4162
--- /dev/null
+++ b/src/lib/profile/toMoverProfileFormValues.ts
@@ -0,0 +1,17 @@
+import type { MoverProfileFormValues } from "@/lib/schemas/moverProfileSchema";
+import type { MoverProfileMe } from "@/types/profile";
+import type { RegionId } from "@/lib/constants/region";
+
+export const toMoverProfileFormValues = (
+  moverProfile: MoverProfileMe,
+): Partial<MoverProfileFormValues> => {
+  return {
+    imageFile: null,
+    nickname: moverProfile.nickname,
+    career: String(moverProfile.career),
+    shortIntro: moverProfile.shortIntro,
+    description: moverProfile.description,
+    serviceTypes: moverProfile.serviceTypes,
+    regionIds: moverProfile.regions.map((region) => region.id as RegionId),
+  };
+};
diff --git a/src/lib/profile/uploadProfileImage.ts b/src/lib/profile/uploadProfileImage.ts
new file mode 100644
index 00000000..c5133ccd
--- /dev/null
+++ b/src/lib/profile/uploadProfileImage.ts
@@ -0,0 +1,55 @@
+import { requestProfileImageUploadUrl, uploadFileToPresignedUrl } from "@/lib/api/profileImage";
+import { ApiError } from "@/types/api";
+import { PROFILE_IMAGE_CONTENT_TYPES, type ProfileImageContentType } from "@/types/profile";
+
+/**
+ * S3 배포 전이면 false.
+ * true로 바꾸면 presigned 발급 → PUT → public imageUrl 생성을 실행합니다.
+ */
+export const IS_PROFILE_IMAGE_UPLOAD_ENABLED = false;
+
+const isProfileImageContentType = (value: string): value is ProfileImageContentType => {
+  return (PROFILE_IMAGE_CONTENT_TYPES as readonly string[]).includes(value);
+};
+
+export const buildProfileImagePublicUrl = (key: string): string => {
+  const baseUrl = process.env.NEXT_PUBLIC_PROFILE_IMAGE_BASE_URL?.replace(/\/$/, "");
+
+  if (!baseUrl) {
+    throw new ApiError("프로필 이미지 공개 URL 설정이 없습니다.");
+  }
+
+  return `${baseUrl}/${key}`;
+};
+
+/**
+ * 이미지 파일이 있으면:
+ * - flag ON  → presigned 발급 → S3 PUT → public imageUrl
+ * - flag OFF → undefined (이미지 없이 프로필 저장, UI 미리보기만 유지)
+ */
+export const uploadProfileImageIfNeeded = async (
+  imageFile: File | null | undefined,
+): Promise<string | undefined> => {
+  if (!imageFile) {
+    return undefined;
+  }
+
+  if (!IS_PROFILE_IMAGE_UPLOAD_ENABLED) {
+    // 임시: S3 미배포 — 업로드 스킵
+    return undefined;
+  }
+
+  // --- S3 준비 후 IS_PROFILE_IMAGE_UPLOAD_ENABLED = true 로 활성화 ---
+  if (!isProfileImageContentType(imageFile.type)) {
+    throw new ApiError("지원하지 않는 이미지 형식입니다.");
+  }
+
+  const uploadResult = await requestProfileImageUploadUrl({
+    contentType: imageFile.type,
+    size: imageFile.size,
+  });
+
+  await uploadFileToPresignedUrl(uploadResult.uploadUrl, imageFile);
+
+  return buildProfileImagePublicUrl(uploadResult.key);
+};
diff --git a/src/lib/schemas/moverProfileSchema.ts b/src/lib/schemas/moverProfileSchema.ts
index b7d2b265..27f64ac2 100644
--- a/src/lib/schemas/moverProfileSchema.ts
+++ b/src/lib/schemas/moverProfileSchema.ts
@@ -23,8 +23,12 @@ const regionIdSchema = z.union([
 
 export const moverProfileSchema = z.object({
   imageFile: z.custom<File | null>().nullable().optional(),
-  nickname: z.string().trim().min(1, "별명을 입력해 주세요"),
-  career: z.string().trim().min(1, "경력을 입력해 주세요"),
+  nickname: z.string().trim().min(2, "별명은 2자 이상 입력해 주세요"),
+  career: z
+    .string()
+    .trim()
+    .min(1, "경력을 입력해 주세요")
+    .regex(/^\d+$/, "경력은 숫자만 입력해 주세요"),
   shortIntro: z.string().trim().min(1, "한 줄 소개를 입력해 주세요"),
   description: z.string().trim().min(1, "상세 설명을 입력해 주세요"),
   serviceTypes: z.array(moveTypeSchema).min(1, "제공 서비스를 선택해 주세요"),
diff --git a/src/types/profile.ts b/src/types/profile.ts
new file mode 100644
index 00000000..2ce256e9
--- /dev/null
+++ b/src/types/profile.ts
@@ -0,0 +1,109 @@
+import type { RegionId } from "@/lib/constants/region";
+import type { MoveType } from "@/types/move";
+
+/** 프로필 등록·수정 화면 모드 */
+export type ProfileFormMode = "create" | "edit";
+
+export interface ProfileRegion {
+  id: RegionId;
+  name: string;
+}
+
+export interface ProfileStatus {
+  isProfileCompleted: boolean;
+}
+
+/**
+ * GET /profiles/customer/me 원본(data)
+ */
+export interface CustomerProfileMeResponse {
+  id: string | number;
+  userId: string;
+  name: string;
+  email: string;
+  phone: string | null;
+  imageUrl: string | null;
+  regions: ProfileRegion[];
+  serviceTypes: MoveType[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export type CustomerProfileMe = CustomerProfileMeResponse & {
+  id: string;
+};
+
+/**
+ * GET /profiles/mover/me 원본(data)
+ */
+export interface MoverProfileMeResponse {
+  id: string | number;
+  userId: string;
+  name: string;
+  email?: string;
+  phone: string | null;
+  nickname: string;
+  imageUrl: string | null;
+  career: number;
+  shortIntro: string;
+  description: string;
+  confirmedCount?: number;
+  averageRating?: number;
+  reviewCount?: number;
+  regions: ProfileRegion[];
+  serviceTypes: MoveType[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export type MoverProfileMe = Omit<MoverProfileMeResponse, "id" | "userId"> & {
+  id: string;
+  userId: string;
+};
+
+export interface CreateCustomerProfileInput {
+  imageUrl?: string;
+  regionIds: number[];
+  serviceTypes: MoveType[];
+}
+
+export interface UpdateCustomerProfileInput {
+  imageUrl?: string | null;
+  regionIds?: number[];
+  serviceTypes?: MoveType[];
+}
+
+export interface CreateMoverProfileInput {
+  nickname: string;
+  imageUrl?: string;
+  career: number;
+  shortIntro: string;
+  description: string;
+  regionIds: number[];
+  serviceTypes: MoveType[];
+}
+
+export interface UpdateMoverProfileInput {
+  nickname?: string;
+  imageUrl?: string | null;
+  career?: number;
+  shortIntro?: string;
+  description?: string;
+  regionIds?: number[];
+  serviceTypes?: MoveType[];
+}
+
+export const PROFILE_IMAGE_CONTENT_TYPES = ["image/jpeg", "image/png", "image/webp"] as const;
+
+export type ProfileImageContentType = (typeof PROFILE_IMAGE_CONTENT_TYPES)[number];
+
+export interface ProfileImageUploadUrlRequest {
+  contentType: ProfileImageContentType;
+  size: number;
+}
+
+export interface ProfileImageUploadUrlResult {
+  uploadUrl: string;
+  key: string;
+  expiresIn: number;
+}
diff --git a/src/types/profileFormMode.ts b/src/types/profileFormMode.ts
deleted file mode 100644
index 1b987303..00000000
--- a/src/types/profileFormMode.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type ProfileFormMode = "create" | "edit";

From e634f83ad66fc9afb1b61539d3dc87988b3958d8 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Mon, 3 Aug 2026 01:01:23 +0900
Subject: [PATCH 03/18] =?UTF-8?q?fix:=20formField=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=ED=99=95=EC=9E=A5=20=EB=B0=8F=20profile=20formField=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/FormField/FormField.tsx | 60 ++++++++++++++++---
 .../profile/CustomerProfileForm.tsx           | 26 ++++----
 src/components/profile/MoverProfileForm.tsx   | 37 +++++-------
 src/components/profile/ProfileFieldHeader.tsx | 59 ------------------
 src/lib/api/profileImage.ts                   |  1 -
 5 files changed, 76 insertions(+), 107 deletions(-)
 delete mode 100644 src/components/profile/ProfileFieldHeader.tsx

diff --git a/src/components/common/FormField/FormField.tsx b/src/components/common/FormField/FormField.tsx
index 36fd0d47..71e185ab 100644
--- a/src/components/common/FormField/FormField.tsx
+++ b/src/components/common/FormField/FormField.tsx
@@ -5,11 +5,15 @@ import { cn } from "@/lib/utils/cn";
 
 interface FormFieldProps {
   label: string;
-  labelFor: string;
+  /** 연결할 input id. Chip 그룹처럼 단일 input이 없으면 생략 */
+  labelFor?: string;
   children: ReactNode;
   className?: string;
   /** 기본: fieldLabel. auth: 로그인·회원가입 label */
   variant?: "default" | "auth";
+  required?: boolean;
+  /** 라벨 아래 부가 안내 문구 */
+  description?: string;
 }
 
 const FormField = ({
@@ -18,19 +22,57 @@ const FormField = ({
   children,
   className,
   variant = "default",
+  required = false,
+  description,
 }: FormFieldProps) => {
   const isAuth = variant === "auth";
+  const labelClassName = isAuth ? "text-text-secondary" : "text-text-tertiary";
+  const labelVariant = isAuth
+    ? ({ base: "md-regular", md: "xl-regular" } as const)
+    : ("fieldLabel" as const);
+
+  const labelContent = (
+    <>
+      {label}
+      {required ? (
+        <Text as="span" variant={labelVariant} className="text-text-brand" aria-hidden="true">
+          *
+        </Text>
+      ) : null}
+    </>
+  );
 
   return (
     <div className={cn("flex flex-col gap-10", className)}>
-      <Text
-        as="label"
-        htmlFor={labelFor}
-        variant={isAuth ? { base: "md-regular", md: "xl-regular" } : "fieldLabel"}
-        className={isAuth ? "text-text-secondary" : "text-text-primary"}
-      >
-        {label}
-      </Text>
+      <div className="flex w-full flex-col gap-4">
+        {labelFor ? (
+          <Text
+            as="label"
+            htmlFor={labelFor}
+            variant={labelVariant}
+            className={cn(labelClassName, "flex items-center gap-4")}
+          >
+            {labelContent}
+          </Text>
+        ) : (
+          <Text
+            as="p"
+            variant={labelVariant}
+            className={cn(labelClassName, "flex items-center gap-4")}
+          >
+            {labelContent}
+          </Text>
+        )}
+        {description ? (
+          <Text
+            as="p"
+            variant={{ base: "xs-regular", md: "lg-regular" }}
+            className="text-text-subtle"
+          >
+            {description}
+          </Text>
+        ) : null}
+      </div>
       {children}
     </div>
   );
diff --git a/src/components/profile/CustomerProfileForm.tsx b/src/components/profile/CustomerProfileForm.tsx
index 2efb56ef..400b669a 100644
--- a/src/components/profile/CustomerProfileForm.tsx
+++ b/src/components/profile/CustomerProfileForm.tsx
@@ -6,9 +6,9 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import Button from "@/components/common/Button/Button";
+import FormField from "@/components/common/FormField/FormField";
 import { Text } from "@/components/common/Text";
 import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
-import ProfileFieldHeader from "@/components/profile/ProfileFieldHeader";
 import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
 import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
 import { useCreateCustomerProfile } from "@/hooks/profile/useCreateCustomerProfile";
@@ -111,8 +111,7 @@ const CustomerProfileForm = ({
 
       <div className="flex w-full flex-col gap-32">
         <section className="flex w-full flex-col gap-32">
-          <div className="flex flex-col gap-16 md:gap-20">
-            <ProfileFieldHeader label="프로필 이미지" htmlFor="customer-profile-image" />
+          <FormField label="프로필 이미지" labelFor="customer-profile-image">
             <Controller
               name="imageFile"
               control={control}
@@ -125,16 +124,15 @@ const CustomerProfileForm = ({
                 />
               )}
             />
-          </div>
+          </FormField>
           <div className="border-border-subtle w-full border-b" aria-hidden="true" />
         </section>
 
         <section className="flex w-full flex-col gap-32">
-          <div className="flex flex-col gap-16 md:gap-24">
-            <ProfileFieldHeader
-              label="이용 서비스"
-              hint="*이용 서비스는 중복 선택 가능하며, 언제든 수정 가능해요!"
-            />
+          <FormField
+            label="이용 서비스"
+            description="*이용 서비스는 중복 선택 가능하며, 언제든 수정 가능해요!"
+          >
             <Controller
               name="serviceTypes"
               control={control}
@@ -148,15 +146,11 @@ const CustomerProfileForm = ({
                 />
               )}
             />
-          </div>
+          </FormField>
           <div className="border-border-subtle w-full border-b" aria-hidden="true" />
         </section>
 
-        <section className="flex w-full flex-col gap-16 md:gap-24">
-          <ProfileFieldHeader
-            label="내가 사는 지역"
-            hint="*내가 사는 지역은 언제든 수정 가능해요!"
-          />
+        <FormField label="내가 사는 지역" description="*내가 사는 지역은 언제든 수정 가능해요!">
           <Controller
             name="regionId"
             control={control}
@@ -171,7 +165,7 @@ const CustomerProfileForm = ({
               />
             )}
           />
-        </section>
+        </FormField>
       </div>
 
       {submitError ? (
diff --git a/src/components/profile/MoverProfileForm.tsx b/src/components/profile/MoverProfileForm.tsx
index ce3791a9..8116c051 100644
--- a/src/components/profile/MoverProfileForm.tsx
+++ b/src/components/profile/MoverProfileForm.tsx
@@ -6,11 +6,11 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import Button from "@/components/common/Button/Button";
+import FormField from "@/components/common/FormField/FormField";
 import Input from "@/components/common/Input/Input";
 import Textarea from "@/components/common/Input/Textarea";
 import { Text } from "@/components/common/Text";
 import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
-import ProfileFieldHeader from "@/components/profile/ProfileFieldHeader";
 import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
 import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
 import { useCreateMoverProfile } from "@/hooks/profile/useCreateMoverProfile";
@@ -113,8 +113,7 @@ const MoverProfileForm = ({
 
       <div className="flex w-full flex-col gap-32 lg:flex-row lg:items-start lg:justify-between lg:gap-[120px]">
         <div className="flex w-full flex-col gap-32 lg:w-[500px]">
-          <div className="flex flex-col gap-16 md:gap-20">
-            <ProfileFieldHeader label="프로필 이미지" />
+          <FormField label="프로필 이미지">
             <Controller
               name="imageFile"
               control={control}
@@ -127,10 +126,9 @@ const MoverProfileForm = ({
                 />
               )}
             />
-          </div>
+          </FormField>
 
-          <div className="flex flex-col gap-10">
-            <ProfileFieldHeader label="별명" htmlFor="nickname" required />
+          <FormField label="별명" labelFor="nickname" required>
             <Input
               id="nickname"
               size="md"
@@ -138,10 +136,9 @@ const MoverProfileForm = ({
               error={errors.nickname?.message}
               {...register("nickname")}
             />
-          </div>
+          </FormField>
 
-          <div className="flex flex-col gap-10">
-            <ProfileFieldHeader label="경력" htmlFor="career" required />
+          <FormField label="경력" labelFor="career" required>
             <Input
               id="career"
               size="md"
@@ -151,10 +148,9 @@ const MoverProfileForm = ({
               error={errors.career?.message}
               {...register("career")}
             />
-          </div>
+          </FormField>
 
-          <div className="flex flex-col gap-10">
-            <ProfileFieldHeader label="한 줄 소개" htmlFor="shortIntro" required />
+          <FormField label="한 줄 소개" labelFor="shortIntro" required>
             <Input
               id="shortIntro"
               size="md"
@@ -162,22 +158,20 @@ const MoverProfileForm = ({
               error={errors.shortIntro?.message}
               {...register("shortIntro")}
             />
-          </div>
+          </FormField>
         </div>
 
         <div className="flex w-full flex-col gap-32 lg:w-[500px]">
-          <div className="flex flex-col gap-10">
-            <ProfileFieldHeader label="상세 설명" htmlFor="description" required />
+          <FormField label="상세 설명" labelFor="description" required>
             <Textarea
               id="description"
               placeholder="상세 내용을 입력해 주세요"
               error={errors.description?.message}
               {...register("description")}
             />
-          </div>
+          </FormField>
 
-          <div className="flex flex-col gap-16 md:gap-24">
-            <ProfileFieldHeader label="제공 서비스" required />
+          <FormField label="제공 서비스" required>
             <Controller
               name="serviceTypes"
               control={control}
@@ -191,10 +185,9 @@ const MoverProfileForm = ({
                 />
               )}
             />
-          </div>
+          </FormField>
 
-          <div className="flex flex-col gap-16 md:gap-24">
-            <ProfileFieldHeader label="서비스 가능 지역" required />
+          <FormField label="서비스 가능 지역" required>
             <Controller
               name="regionIds"
               control={control}
@@ -209,7 +202,7 @@ const MoverProfileForm = ({
                 />
               )}
             />
-          </div>
+          </FormField>
         </div>
       </div>
 
diff --git a/src/components/profile/ProfileFieldHeader.tsx b/src/components/profile/ProfileFieldHeader.tsx
deleted file mode 100644
index 71883f1e..00000000
--- a/src/components/profile/ProfileFieldHeader.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { cn } from "@/lib/utils/cn";
-
-interface ProfileFieldHeaderProps {
-  label: string;
-  htmlFor?: string;
-  required?: boolean;
-  hint?: string;
-  className?: string;
-}
-
-/** 프로필 필드 라벨 + 필수 표시 + 안내 문구 */
-const ProfileFieldHeader = ({
-  label,
-  htmlFor,
-  required = false,
-  hint,
-  className,
-}: ProfileFieldHeaderProps) => {
-  return (
-    <div className={cn("flex w-full flex-col gap-4", className)}>
-      {htmlFor ? (
-        <Text
-          as="label"
-          htmlFor={htmlFor}
-          variant="fieldLabel"
-          className="text-text-tertiary flex items-center gap-4"
-        >
-          {label}
-          {required ? (
-            <Text as="span" variant="fieldLabel" className="text-text-brand" aria-hidden="true">
-              *
-            </Text>
-          ) : null}
-        </Text>
-      ) : (
-        <Text as="p" variant="fieldLabel" className="text-text-tertiary flex items-center gap-4">
-          {label}
-          {required ? (
-            <Text as="span" variant="fieldLabel" className="text-text-brand" aria-hidden="true">
-              *
-            </Text>
-          ) : null}
-        </Text>
-      )}
-      {hint ? (
-        <Text
-          as="p"
-          variant={{ base: "xs-regular", md: "lg-regular" }}
-          className="text-text-subtle"
-        >
-          {hint}
-        </Text>
-      ) : null}
-    </div>
-  );
-};
-
-export default ProfileFieldHeader;
diff --git a/src/lib/api/profileImage.ts b/src/lib/api/profileImage.ts
index 554033a0..77eaca5e 100644
--- a/src/lib/api/profileImage.ts
+++ b/src/lib/api/profileImage.ts
@@ -11,7 +11,6 @@ export const requestProfileImageUploadUrl = (body: ProfileImageUploadUrlRequest)
 
 /**
  * Presigned URL로 S3에 파일을 업로드합니다.
- * Authorization/JSON Content-Type을 붙이면 signature가 깨지므로 fetchInstance를 쓰지 않습니다.
  */
 export const uploadFileToPresignedUrl = async (uploadUrl: string, file: File): Promise<void> => {
   const response = await fetch(uploadUrl, {

From d7830b9a551458f4b6d22d5c1a3db319aa00d8b6 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Mon, 3 Aug 2026 01:53:29 +0900
Subject: [PATCH 04/18] =?UTF-8?q?fix:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=A9=EC=8B=9D=20=EB=B0=8F=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(customer)/(protected)/profile/page.tsx   |   2 +-
 .../(protected)/mover/basic/edit/page.tsx     |  14 +
 .../(protected)/mover/profile/page.tsx        |   2 +-
 src/components/common/Header/Header.tsx       |   3 +-
 .../profile/CustomerProfileEditForm.tsx       | 246 ++++++++++++++++++
 .../profile/CustomerProfileEditView.tsx       |  10 +-
 .../profile/CustomerProfileForm.tsx           |  43 +--
 .../profile/MoverBasicInfoEditForm.tsx        | 163 ++++++++++++
 .../profile/MoverBasicInfoEditView.tsx        |  42 +++
 .../profile/MoverProfileEditForm.tsx          | 191 ++++++++++++++
 .../profile/MoverProfileEditView.tsx          |   5 +-
 src/components/profile/MoverProfileForm.tsx   |  47 +---
 src/components/profile/ProfileFormActions.tsx |  55 ++++
 src/components/profile/ProfilePageHeader.tsx  |  18 +-
 src/hooks/profile/useUpdateMoverBasicInfo.ts  |  20 ++
 src/lib/api/profile.ts                        |   8 +
 src/lib/constants/apiRoutes.ts                |   1 +
 src/lib/constants/appRoutes.ts                |   2 +
 .../toCustomerProfileEditFormValues.ts        |  17 ++
 .../profile/toMoverBasicInfoEditFormValues.ts |  14 +
 src/lib/schemas/customerProfileEditSchema.ts  |  44 ++++
 src/lib/schemas/moverBasicInfoEditSchema.ts   |  17 ++
 src/lib/schemas/passwordChangeFields.ts       |  68 +++++
 src/types/profile.ts                          |  16 +-
 24 files changed, 957 insertions(+), 91 deletions(-)
 create mode 100644 src/app/(mover)/(protected)/mover/basic/edit/page.tsx
 create mode 100644 src/components/profile/CustomerProfileEditForm.tsx
 create mode 100644 src/components/profile/MoverBasicInfoEditForm.tsx
 create mode 100644 src/components/profile/MoverBasicInfoEditView.tsx
 create mode 100644 src/components/profile/MoverProfileEditForm.tsx
 create mode 100644 src/components/profile/ProfileFormActions.tsx
 create mode 100644 src/hooks/profile/useUpdateMoverBasicInfo.ts
 create mode 100644 src/lib/profile/toCustomerProfileEditFormValues.ts
 create mode 100644 src/lib/profile/toMoverBasicInfoEditFormValues.ts
 create mode 100644 src/lib/schemas/customerProfileEditSchema.ts
 create mode 100644 src/lib/schemas/moverBasicInfoEditSchema.ts
 create mode 100644 src/lib/schemas/passwordChangeFields.ts

diff --git a/src/app/(customer)/(protected)/profile/page.tsx b/src/app/(customer)/(protected)/profile/page.tsx
index 949d2d2e..f86fa17d 100644
--- a/src/app/(customer)/(protected)/profile/page.tsx
+++ b/src/app/(customer)/(protected)/profile/page.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 };
 
 const CustomerProfilePage = () => {
-  return <CustomerProfileForm mode="create" />;
+  return <CustomerProfileForm />;
 };
 
 export default CustomerProfilePage;
diff --git a/src/app/(mover)/(protected)/mover/basic/edit/page.tsx b/src/app/(mover)/(protected)/mover/basic/edit/page.tsx
new file mode 100644
index 00000000..30329caa
--- /dev/null
+++ b/src/app/(mover)/(protected)/mover/basic/edit/page.tsx
@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+import MoverBasicInfoEditView from "@/components/profile/MoverBasicInfoEditView";
+
+export const metadata: Metadata = {
+  title: "기본정보 수정 | 무빙",
+  description: "무빙 기사님 기본정보 수정",
+};
+
+const MoverBasicInfoEditPage = () => {
+  return <MoverBasicInfoEditView />;
+};
+
+export default MoverBasicInfoEditPage;
diff --git a/src/app/(mover)/(protected)/mover/profile/page.tsx b/src/app/(mover)/(protected)/mover/profile/page.tsx
index a37b68a8..d5af5bbd 100644
--- a/src/app/(mover)/(protected)/mover/profile/page.tsx
+++ b/src/app/(mover)/(protected)/mover/profile/page.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 };
 
 const MoverProfilePage = () => {
-  return <MoverProfileForm mode="create" />;
+  return <MoverProfileForm />;
 };
 
 export default MoverProfilePage;
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 75807a2b..cd32c999 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -37,7 +37,8 @@ const CUSTOMER_PROFILE_MENU_ITEMS: ProfileMenuItem[] = [
 ];
 
 const MOVER_PROFILE_MENU_ITEMS: ProfileMenuItem[] = [
-  { type: "link", label: "프로필", href: APP_ROUTES.MOVER_PROFILE },
+  { type: "link", label: "프로필 수정", href: APP_ROUTES.MOVER_PROFILE_EDIT },
+  { type: "link", label: "기본정보 수정", href: APP_ROUTES.MOVER_BASIC_EDIT },
   { type: "action", label: "로그아웃", action: "logout" },
 ];
 
diff --git a/src/components/profile/CustomerProfileEditForm.tsx b/src/components/profile/CustomerProfileEditForm.tsx
new file mode 100644
index 00000000..d1ed5e53
--- /dev/null
+++ b/src/components/profile/CustomerProfileEditForm.tsx
@@ -0,0 +1,246 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import FormField from "@/components/common/FormField/FormField";
+import Input from "@/components/common/Input/Input";
+import PasswordInput from "@/components/common/Input/PasswordInput";
+import { Text } from "@/components/common/Text";
+import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
+import ProfileFormActions from "@/components/profile/ProfileFormActions";
+import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
+import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
+import { useUpdateCustomerProfile } from "@/hooks/profile/useUpdateCustomerProfile";
+import { getApiErrorMessage } from "@/lib/api/getApiErrorMessage";
+import { MOVE_TYPE_OPTIONS } from "@/lib/constants/moveType";
+import { REGION_OPTIONS, type RegionId } from "@/lib/constants/region";
+import { uploadProfileImageIfNeeded } from "@/lib/profile/uploadProfileImage";
+import {
+  customerProfileEditSchema,
+  type CustomerProfileEditFormValues,
+} from "@/lib/schemas/customerProfileEditSchema";
+import { toPasswordChangePayload } from "@/lib/schemas/passwordChangeFields";
+import { ApiError } from "@/types/api";
+import type { MoveType } from "@/types/move";
+
+interface CustomerProfileEditFormProps {
+  email: string;
+  defaultValues?: Partial<CustomerProfileEditFormValues>;
+  initialImageUrl?: string | null;
+}
+
+const CustomerProfileEditForm = ({
+  email,
+  defaultValues,
+  initialImageUrl = null,
+}: CustomerProfileEditFormProps) => {
+  const updateCustomerProfile = useUpdateCustomerProfile();
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    setError,
+    formState: { errors, isValid, isSubmitting },
+  } = useForm<CustomerProfileEditFormValues>({
+    resolver: zodResolver(customerProfileEditSchema),
+    mode: "onChange",
+    defaultValues: {
+      name: "",
+      phone: "",
+      currentPassword: "",
+      newPassword: "",
+      newPasswordConfirm: "",
+      imageFile: null,
+      serviceTypes: [],
+      regionId: null,
+      ...defaultValues,
+    },
+  });
+
+  const isPending = isSubmitting || updateCustomerProfile.isPending;
+
+  const onSubmit = handleSubmit(async (formValues) => {
+    setSubmitError(null);
+
+    try {
+      if (formValues.regionId === null) {
+        setSubmitError("내가 사는 지역을 선택해 주세요");
+        return;
+      }
+
+      const imageUrl = await uploadProfileImageIfNeeded(formValues.imageFile);
+
+      await updateCustomerProfile.mutateAsync({
+        name: formValues.name,
+        phone: formValues.phone,
+        ...toPasswordChangePayload(formValues),
+        regionIds: [formValues.regionId],
+        serviceTypes: formValues.serviceTypes,
+        ...(imageUrl ? { imageUrl } : {}),
+      });
+    } catch (error) {
+      if (
+        error instanceof ApiError &&
+        (error.status === 409 || error.code === "CONFLICT") &&
+        error.message.includes("전화번호")
+      ) {
+        setError("phone", {
+          type: "server",
+          message: error.message,
+        });
+        return;
+      }
+
+      setSubmitError(getApiErrorMessage(error, "프로필 수정에 실패했습니다."));
+    }
+  });
+
+  return (
+    <form
+      className="px-margin-mobile mx-auto flex w-full max-w-[1120px] flex-col gap-40 py-32 md:gap-48 md:px-72 md:py-40 lg:px-0 lg:pt-56 lg:pb-70"
+      onSubmit={onSubmit}
+      noValidate
+      autoComplete="off"
+    >
+      <ProfilePageHeader title="프로필 수정" />
+
+      <div className="flex w-full flex-col gap-32 lg:flex-row lg:items-start lg:justify-between lg:gap-[120px]">
+        <div className="flex w-full flex-col gap-32 lg:w-[500px]">
+          <FormField label="이름" labelFor="customer-edit-name" required>
+            <Input
+              id="customer-edit-name"
+              size="md"
+              placeholder="성함을 입력해 주세요"
+              error={errors.name?.message}
+              {...register("name")}
+            />
+          </FormField>
+
+          <FormField label="이메일" labelFor="customer-edit-email">
+            <Input
+              id="customer-edit-email"
+              size="md"
+              type="email"
+              value={email}
+              disabled
+              readOnly
+            />
+          </FormField>
+
+          <FormField label="전화번호" labelFor="customer-edit-phone" required>
+            <Input
+              id="customer-edit-phone"
+              size="md"
+              inputMode="numeric"
+              numericOnly
+              stripLeadingZeros={false}
+              placeholder="전화번호를 입력해 주세요"
+              error={errors.phone?.message}
+              {...register("phone")}
+            />
+          </FormField>
+
+          <FormField label="현재 비밀번호" labelFor="customer-edit-current-password">
+            <PasswordInput
+              id="customer-edit-current-password"
+              size="md"
+              autoComplete="new-password"
+              placeholder="현재 비밀번호를 입력해 주세요"
+              error={errors.currentPassword?.message}
+              {...register("currentPassword")}
+            />
+          </FormField>
+
+          <FormField label="새 비밀번호" labelFor="customer-edit-new-password">
+            <PasswordInput
+              id="customer-edit-new-password"
+              size="md"
+              autoComplete="new-password"
+              placeholder="새 비밀번호를 입력해 주세요"
+              error={errors.newPassword?.message}
+              {...register("newPassword")}
+            />
+          </FormField>
+
+          <FormField label="새 비밀번호 확인" labelFor="customer-edit-new-password-confirm">
+            <PasswordInput
+              id="customer-edit-new-password-confirm"
+              size="md"
+              autoComplete="new-password"
+              placeholder="새 비밀번호를 다시 입력해 주세요"
+              error={errors.newPasswordConfirm?.message}
+              {...register("newPasswordConfirm")}
+            />
+          </FormField>
+        </div>
+
+        <div className="flex w-full flex-col gap-32 lg:w-[500px]">
+          <FormField label="프로필 이미지" labelFor="customer-edit-profile-image">
+            <Controller
+              name="imageFile"
+              control={control}
+              render={({ field }) => (
+                <ProfileImageUploader
+                  value={field.value ?? null}
+                  initialPreviewUrl={initialImageUrl}
+                  onChange={field.onChange}
+                  error={errors.imageFile?.message}
+                />
+              )}
+            />
+          </FormField>
+
+          <FormField
+            label="이용 서비스"
+            description="*견적 요청 시 이용 서비스를 선택할 수 있어요."
+          >
+            <Controller
+              name="serviceTypes"
+              control={control}
+              render={({ field }) => (
+                <ProfileChipGroup<MoveType>
+                  selectionMode="multiple"
+                  options={MOVE_TYPE_OPTIONS}
+                  value={field.value}
+                  onChange={field.onChange}
+                  error={errors.serviceTypes?.message}
+                />
+              )}
+            />
+          </FormField>
+
+          <FormField label="내가 사는 지역" description="*견적 요청 시 지역을 설정할 수 있어요.">
+            <Controller
+              name="regionId"
+              control={control}
+              render={({ field }) => (
+                <ProfileChipGroup<RegionId>
+                  selectionMode="single"
+                  options={REGION_OPTIONS}
+                  value={field.value ?? null}
+                  onChange={field.onChange}
+                  error={errors.regionId?.message}
+                  className="max-w-[277px] gap-x-8 gap-y-12 md:max-w-none"
+                />
+              )}
+            />
+          </FormField>
+        </div>
+      </div>
+
+      {submitError ? (
+        <Text as="p" role="alert" variant="md-medium" className="text-text-error text-center">
+          {submitError}
+        </Text>
+      ) : null}
+
+      <ProfileFormActions isSubmitDisabled={!isValid || isPending} />
+    </form>
+  );
+};
+
+export default CustomerProfileEditForm;
diff --git a/src/components/profile/CustomerProfileEditView.tsx b/src/components/profile/CustomerProfileEditView.tsx
index ab3bd7f3..2de53928 100644
--- a/src/components/profile/CustomerProfileEditView.tsx
+++ b/src/components/profile/CustomerProfileEditView.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import CustomerProfileForm from "@/components/profile/CustomerProfileForm";
+import CustomerProfileEditForm from "@/components/profile/CustomerProfileEditForm";
 import { Text } from "@/components/common/Text";
 import { useCustomerAuthReady } from "@/hooks/useCustomerAuthReady";
 import { useCustomerProfileMe } from "@/hooks/profile/useCustomerProfileMe";
-import { toCustomerProfileFormValues } from "@/lib/profile/toCustomerProfileFormValues";
+import { toCustomerProfileEditFormValues } from "@/lib/profile/toCustomerProfileEditFormValues";
 
 const CustomerProfileEditView = () => {
   const { canFetch, isPending: isAuthPending } = useCustomerAuthReady();
@@ -35,10 +35,10 @@ const CustomerProfileEditView = () => {
   }
 
   return (
-    <CustomerProfileForm
+    <CustomerProfileEditForm
       key={customerProfile.id}
-      mode="edit"
-      defaultValues={toCustomerProfileFormValues(customerProfile)}
+      email={customerProfile.email}
+      defaultValues={toCustomerProfileEditFormValues(customerProfile)}
       initialImageUrl={customerProfile.imageUrl}
     />
   );
diff --git a/src/components/profile/CustomerProfileForm.tsx b/src/components/profile/CustomerProfileForm.tsx
index 400b669a..9bf056ef 100644
--- a/src/components/profile/CustomerProfileForm.tsx
+++ b/src/components/profile/CustomerProfileForm.tsx
@@ -12,7 +12,6 @@ import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
 import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
 import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
 import { useCreateCustomerProfile } from "@/hooks/profile/useCreateCustomerProfile";
-import { useUpdateCustomerProfile } from "@/hooks/profile/useUpdateCustomerProfile";
 import { getApiErrorMessage } from "@/lib/api/getApiErrorMessage";
 import { getRoleHomePath } from "@/lib/auth/redirect";
 import { MOVE_TYPE_OPTIONS } from "@/lib/constants/moveType";
@@ -23,36 +22,18 @@ import {
   type CustomerProfileFormValues,
 } from "@/lib/schemas/customerProfileSchema";
 import type { MoveType } from "@/types/move";
-import type { ProfileFormMode } from "@/types/profile";
 
 interface CustomerProfileFormProps {
-  mode?: ProfileFormMode;
   defaultValues?: Partial<CustomerProfileFormValues>;
   initialImageUrl?: string | null;
 }
 
-const COPY: Record<ProfileFormMode, { title: string; description: string; submitLabel: string }> = {
-  create: {
-    title: "프로필 등록",
-    description: "추가 정보를 입력하여 회원가입을 완료해주세요.",
-    submitLabel: "시작하기",
-  },
-  edit: {
-    title: "프로필 수정",
-    description: "프로필 정보를 수정할 수 있어요.",
-    submitLabel: "수정하기",
-  },
-};
-
 const CustomerProfileForm = ({
-  mode = "create",
   defaultValues,
   initialImageUrl = null,
 }: CustomerProfileFormProps) => {
   const router = useRouter();
-  const copy = COPY[mode];
   const createCustomerProfile = useCreateCustomerProfile();
-  const updateCustomerProfile = useUpdateCustomerProfile();
   const [submitError, setSubmitError] = useState<string | null>(null);
 
   const {
@@ -70,8 +51,7 @@ const CustomerProfileForm = ({
     },
   });
 
-  const isPending =
-    isSubmitting || createCustomerProfile.isPending || updateCustomerProfile.isPending;
+  const isPending = isSubmitting || createCustomerProfile.isPending;
 
   const onSubmit = handleSubmit(async (formValues) => {
     setSubmitError(null);
@@ -83,19 +63,13 @@ const CustomerProfileForm = ({
       }
 
       const imageUrl = await uploadProfileImageIfNeeded(formValues.imageFile);
-      const profileInput = {
+
+      await createCustomerProfile.mutateAsync({
         ...(imageUrl ? { imageUrl } : {}),
         regionIds: [formValues.regionId],
         serviceTypes: formValues.serviceTypes,
-      };
-
-      if (mode === "create") {
-        await createCustomerProfile.mutateAsync(profileInput);
-        router.replace(getRoleHomePath("CUSTOMER"));
-        return;
-      }
-
-      await updateCustomerProfile.mutateAsync(profileInput);
+      });
+      router.replace(getRoleHomePath("CUSTOMER"));
     } catch (error) {
       setSubmitError(getApiErrorMessage(error, "프로필 저장에 실패했습니다."));
     }
@@ -107,7 +81,10 @@ const CustomerProfileForm = ({
       onSubmit={onSubmit}
       noValidate
     >
-      <ProfilePageHeader title={copy.title} description={copy.description} />
+      <ProfilePageHeader
+        title="프로필 등록"
+        description="추가 정보를 입력하여 회원가입을 완료해주세요."
+      />
 
       <div className="flex w-full flex-col gap-32">
         <section className="flex w-full flex-col gap-32">
@@ -175,7 +152,7 @@ const CustomerProfileForm = ({
       ) : null}
 
       <Button type="submit" variant="solid" size="auth" fullWidth disabled={!isValid || isPending}>
-        {copy.submitLabel}
+        시작하기
       </Button>
     </form>
   );
diff --git a/src/components/profile/MoverBasicInfoEditForm.tsx b/src/components/profile/MoverBasicInfoEditForm.tsx
new file mode 100644
index 00000000..f89efa79
--- /dev/null
+++ b/src/components/profile/MoverBasicInfoEditForm.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+import FormField from "@/components/common/FormField/FormField";
+import Input from "@/components/common/Input/Input";
+import PasswordInput from "@/components/common/Input/PasswordInput";
+import { Text } from "@/components/common/Text";
+import ProfileFormActions from "@/components/profile/ProfileFormActions";
+import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
+import { useUpdateMoverBasicInfo } from "@/hooks/profile/useUpdateMoverBasicInfo";
+import { getApiErrorMessage } from "@/lib/api/getApiErrorMessage";
+import {
+  moverBasicInfoEditSchema,
+  type MoverBasicInfoEditFormValues,
+} from "@/lib/schemas/moverBasicInfoEditSchema";
+import { toPasswordChangePayload } from "@/lib/schemas/passwordChangeFields";
+import { ApiError } from "@/types/api";
+
+interface MoverBasicInfoEditFormProps {
+  email: string;
+  defaultValues?: Partial<MoverBasicInfoEditFormValues>;
+}
+
+const MoverBasicInfoEditForm = ({ email, defaultValues }: MoverBasicInfoEditFormProps) => {
+  const updateMoverBasicInfo = useUpdateMoverBasicInfo();
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isValid, isSubmitting },
+  } = useForm<MoverBasicInfoEditFormValues>({
+    resolver: zodResolver(moverBasicInfoEditSchema),
+    mode: "onChange",
+    defaultValues: {
+      name: "",
+      phone: "",
+      currentPassword: "",
+      newPassword: "",
+      newPasswordConfirm: "",
+      ...defaultValues,
+    },
+  });
+
+  const isPending = isSubmitting || updateMoverBasicInfo.isPending;
+
+  const onSubmit = handleSubmit(async (formValues) => {
+    setSubmitError(null);
+
+    try {
+      await updateMoverBasicInfo.mutateAsync({
+        name: formValues.name,
+        phone: formValues.phone,
+        ...toPasswordChangePayload(formValues),
+      });
+    } catch (error) {
+      if (
+        error instanceof ApiError &&
+        (error.status === 409 || error.code === "CONFLICT") &&
+        error.message.includes("전화번호")
+      ) {
+        setError("phone", {
+          type: "server",
+          message: error.message,
+        });
+        return;
+      }
+
+      setSubmitError(getApiErrorMessage(error, "기본정보 수정에 실패했습니다."));
+    }
+  });
+
+  return (
+    <form
+      className="px-margin-mobile mx-auto flex w-full max-w-[1120px] flex-col gap-40 py-32 md:gap-48 md:px-72 md:py-40 lg:px-0 lg:pt-56 lg:pb-70"
+      onSubmit={onSubmit}
+      noValidate
+      autoComplete="off"
+    >
+      <ProfilePageHeader title="기본정보 수정" />
+
+      <div className="flex w-full flex-col gap-32 lg:flex-row lg:items-start lg:justify-between lg:gap-[120px]">
+        <div className="flex w-full flex-col gap-32 lg:w-[500px]">
+          <FormField label="이름" labelFor="mover-basic-name" required>
+            <Input
+              id="mover-basic-name"
+              size="md"
+              placeholder="성함을 입력해 주세요"
+              error={errors.name?.message}
+              {...register("name")}
+            />
+          </FormField>
+
+          <FormField label="이메일" labelFor="mover-basic-email">
+            <Input id="mover-basic-email" size="md" type="email" value={email} disabled readOnly />
+          </FormField>
+
+          <FormField label="전화번호" labelFor="mover-basic-phone" required>
+            <Input
+              id="mover-basic-phone"
+              size="md"
+              inputMode="numeric"
+              numericOnly
+              stripLeadingZeros={false}
+              placeholder="전화번호를 입력해 주세요"
+              error={errors.phone?.message}
+              {...register("phone")}
+            />
+          </FormField>
+        </div>
+
+        <div className="flex w-full flex-col gap-32 lg:w-[500px]">
+          <FormField label="현재 비밀번호" labelFor="mover-basic-current-password">
+            <PasswordInput
+              id="mover-basic-current-password"
+              size="md"
+              autoComplete="new-password"
+              placeholder="현재 비밀번호를 입력해 주세요"
+              error={errors.currentPassword?.message}
+              {...register("currentPassword")}
+            />
+          </FormField>
+
+          <FormField label="새 비밀번호" labelFor="mover-basic-new-password">
+            <PasswordInput
+              id="mover-basic-new-password"
+              size="md"
+              autoComplete="new-password"
+              placeholder="새 비밀번호를 입력해 주세요"
+              error={errors.newPassword?.message}
+              {...register("newPassword")}
+            />
+          </FormField>
+
+          <FormField label="새 비밀번호 확인" labelFor="mover-basic-new-password-confirm">
+            <PasswordInput
+              id="mover-basic-new-password-confirm"
+              size="md"
+              autoComplete="new-password"
+              placeholder="새 비밀번호를 다시 입력해 주세요"
+              error={errors.newPasswordConfirm?.message}
+              {...register("newPasswordConfirm")}
+            />
+          </FormField>
+        </div>
+      </div>
+
+      {submitError ? (
+        <Text as="p" role="alert" variant="md-medium" className="text-text-error text-center">
+          {submitError}
+        </Text>
+      ) : null}
+
+      <ProfileFormActions isSubmitDisabled={!isValid || isPending} />
+    </form>
+  );
+};
+
+export default MoverBasicInfoEditForm;
diff --git a/src/components/profile/MoverBasicInfoEditView.tsx b/src/components/profile/MoverBasicInfoEditView.tsx
new file mode 100644
index 00000000..1bebcd9e
--- /dev/null
+++ b/src/components/profile/MoverBasicInfoEditView.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import MoverBasicInfoEditForm from "@/components/profile/MoverBasicInfoEditForm";
+import { Text } from "@/components/common/Text";
+import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
+import { useMoverProfileMe } from "@/hooks/profile/useMoverProfileMe";
+import { toMoverBasicInfoEditFormValues } from "@/lib/profile/toMoverBasicInfoEditFormValues";
+
+const MoverBasicInfoEditView = () => {
+  const { canFetch, isPending: isAuthPending } = useMoverAuthReady();
+  const { data: moverProfile, isPending: isProfilePending, isError } = useMoverProfileMe(canFetch);
+
+  if (isAuthPending || isProfilePending) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center px-24">
+        <Text as="p" variant="md-medium" className="text-text-description">
+          기본정보를 불러오는 중입니다.
+        </Text>
+      </div>
+    );
+  }
+
+  if (isError || !moverProfile) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center px-24">
+        <Text as="p" role="alert" variant="md-medium" className="text-text-error">
+          기본정보를 불러오지 못했습니다.
+        </Text>
+      </div>
+    );
+  }
+
+  return (
+    <MoverBasicInfoEditForm
+      key={moverProfile.id}
+      email={moverProfile.email ?? ""}
+      defaultValues={toMoverBasicInfoEditFormValues(moverProfile)}
+    />
+  );
+};
+
+export default MoverBasicInfoEditView;
diff --git a/src/components/profile/MoverProfileEditForm.tsx b/src/components/profile/MoverProfileEditForm.tsx
new file mode 100644
index 00000000..bd8b40d5
--- /dev/null
+++ b/src/components/profile/MoverProfileEditForm.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import FormField from "@/components/common/FormField/FormField";
+import Input from "@/components/common/Input/Input";
+import Textarea from "@/components/common/Input/Textarea";
+import { Text } from "@/components/common/Text";
+import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
+import ProfileFormActions from "@/components/profile/ProfileFormActions";
+import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
+import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
+import { useUpdateMoverProfile } from "@/hooks/profile/useUpdateMoverProfile";
+import { getApiErrorMessage } from "@/lib/api/getApiErrorMessage";
+import { MOVE_TYPE_OPTIONS } from "@/lib/constants/moveType";
+import { REGION_OPTIONS, type RegionId } from "@/lib/constants/region";
+import { uploadProfileImageIfNeeded } from "@/lib/profile/uploadProfileImage";
+import { moverProfileSchema, type MoverProfileFormValues } from "@/lib/schemas/moverProfileSchema";
+import type { MoveType } from "@/types/move";
+
+interface MoverProfileEditFormProps {
+  defaultValues?: Partial<MoverProfileFormValues>;
+  initialImageUrl?: string | null;
+}
+
+const MoverProfileEditForm = ({
+  defaultValues,
+  initialImageUrl = null,
+}: MoverProfileEditFormProps) => {
+  const updateMoverProfile = useUpdateMoverProfile();
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors, isValid, isSubmitting },
+  } = useForm<MoverProfileFormValues>({
+    resolver: zodResolver(moverProfileSchema),
+    mode: "onChange",
+    defaultValues: {
+      imageFile: null,
+      nickname: "",
+      career: "",
+      shortIntro: "",
+      description: "",
+      serviceTypes: [],
+      regionIds: [],
+      ...defaultValues,
+    },
+  });
+
+  const isPending = isSubmitting || updateMoverProfile.isPending;
+
+  const onSubmit = handleSubmit(async (formValues) => {
+    setSubmitError(null);
+
+    try {
+      const imageUrl = await uploadProfileImageIfNeeded(formValues.imageFile);
+
+      await updateMoverProfile.mutateAsync({
+        nickname: formValues.nickname,
+        career: Number(formValues.career),
+        shortIntro: formValues.shortIntro,
+        description: formValues.description,
+        regionIds: formValues.regionIds,
+        serviceTypes: formValues.serviceTypes,
+        ...(imageUrl ? { imageUrl } : {}),
+      });
+    } catch (error) {
+      setSubmitError(getApiErrorMessage(error, "프로필 수정에 실패했습니다."));
+    }
+  });
+
+  return (
+    <form
+      className="px-margin-mobile mx-auto flex w-full max-w-[1120px] flex-col gap-40 py-32 md:gap-48 md:px-72 md:py-40 lg:px-0 lg:pt-56 lg:pb-70"
+      onSubmit={onSubmit}
+      noValidate
+    >
+      <ProfilePageHeader title="프로필 수정" />
+
+      <div className="flex w-full flex-col gap-32 lg:flex-row lg:items-start lg:justify-between lg:gap-[120px]">
+        <div className="flex w-full flex-col gap-32 lg:w-[500px]">
+          <FormField label="프로필 이미지">
+            <Controller
+              name="imageFile"
+              control={control}
+              render={({ field }) => (
+                <ProfileImageUploader
+                  value={field.value ?? null}
+                  initialPreviewUrl={initialImageUrl}
+                  onChange={field.onChange}
+                  error={errors.imageFile?.message}
+                />
+              )}
+            />
+          </FormField>
+
+          <FormField label="별명" labelFor="mover-edit-nickname" required>
+            <Input
+              id="mover-edit-nickname"
+              size="md"
+              placeholder="사이트에 노출될 별명을 입력해 주세요"
+              error={errors.nickname?.message}
+              {...register("nickname")}
+            />
+          </FormField>
+
+          <FormField label="경력" labelFor="mover-edit-career" required>
+            <Input
+              id="mover-edit-career"
+              size="md"
+              inputMode="numeric"
+              numericOnly
+              placeholder="기사님의 경력을 입력해 주세요"
+              error={errors.career?.message}
+              {...register("career")}
+            />
+          </FormField>
+
+          <FormField label="한 줄 소개" labelFor="mover-edit-shortIntro" required>
+            <Input
+              id="mover-edit-shortIntro"
+              size="md"
+              placeholder="한 줄 소개를 입력해 주세요"
+              error={errors.shortIntro?.message}
+              {...register("shortIntro")}
+            />
+          </FormField>
+        </div>
+
+        <div className="flex w-full flex-col gap-32 lg:w-[500px]">
+          <FormField label="상세 설명" labelFor="mover-edit-description" required>
+            <Textarea
+              id="mover-edit-description"
+              placeholder="상세 내용을 입력해 주세요"
+              error={errors.description?.message}
+              {...register("description")}
+            />
+          </FormField>
+
+          <FormField label="제공 서비스" required>
+            <Controller
+              name="serviceTypes"
+              control={control}
+              render={({ field }) => (
+                <ProfileChipGroup<MoveType>
+                  selectionMode="multiple"
+                  options={MOVE_TYPE_OPTIONS}
+                  value={field.value}
+                  onChange={field.onChange}
+                  error={errors.serviceTypes?.message}
+                />
+              )}
+            />
+          </FormField>
+
+          <FormField label="서비스 가능 지역" required>
+            <Controller
+              name="regionIds"
+              control={control}
+              render={({ field }) => (
+                <ProfileChipGroup<RegionId>
+                  selectionMode="multiple"
+                  options={REGION_OPTIONS}
+                  value={field.value}
+                  onChange={field.onChange}
+                  error={errors.regionIds?.message}
+                  className="max-w-[277px] gap-x-8 gap-y-12 md:max-w-none"
+                />
+              )}
+            />
+          </FormField>
+        </div>
+      </div>
+
+      {submitError ? (
+        <Text as="p" role="alert" variant="md-medium" className="text-text-error text-center">
+          {submitError}
+        </Text>
+      ) : null}
+
+      <ProfileFormActions isSubmitDisabled={!isValid || isPending} />
+    </form>
+  );
+};
+
+export default MoverProfileEditForm;
diff --git a/src/components/profile/MoverProfileEditView.tsx b/src/components/profile/MoverProfileEditView.tsx
index 70e5e5b3..8876e008 100644
--- a/src/components/profile/MoverProfileEditView.tsx
+++ b/src/components/profile/MoverProfileEditView.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import MoverProfileForm from "@/components/profile/MoverProfileForm";
+import MoverProfileEditForm from "@/components/profile/MoverProfileEditForm";
 import { Text } from "@/components/common/Text";
 import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
 import { useMoverProfileMe } from "@/hooks/profile/useMoverProfileMe";
@@ -31,9 +31,8 @@ const MoverProfileEditView = () => {
   }
 
   return (
-    <MoverProfileForm
+    <MoverProfileEditForm
       key={moverProfile.id}
-      mode="edit"
       defaultValues={toMoverProfileFormValues(moverProfile)}
       initialImageUrl={moverProfile.imageUrl}
     />
diff --git a/src/components/profile/MoverProfileForm.tsx b/src/components/profile/MoverProfileForm.tsx
index 8116c051..7070162d 100644
--- a/src/components/profile/MoverProfileForm.tsx
+++ b/src/components/profile/MoverProfileForm.tsx
@@ -14,7 +14,6 @@ import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
 import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
 import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
 import { useCreateMoverProfile } from "@/hooks/profile/useCreateMoverProfile";
-import { useUpdateMoverProfile } from "@/hooks/profile/useUpdateMoverProfile";
 import { getApiErrorMessage } from "@/lib/api/getApiErrorMessage";
 import { getRoleHomePath } from "@/lib/auth/redirect";
 import { MOVE_TYPE_OPTIONS } from "@/lib/constants/moveType";
@@ -22,36 +21,15 @@ import { REGION_OPTIONS, type RegionId } from "@/lib/constants/region";
 import { uploadProfileImageIfNeeded } from "@/lib/profile/uploadProfileImage";
 import { moverProfileSchema, type MoverProfileFormValues } from "@/lib/schemas/moverProfileSchema";
 import type { MoveType } from "@/types/move";
-import type { ProfileFormMode } from "@/types/profile";
 
 interface MoverProfileFormProps {
-  mode?: ProfileFormMode;
   defaultValues?: Partial<MoverProfileFormValues>;
   initialImageUrl?: string | null;
 }
 
-const COPY: Record<ProfileFormMode, { title: string; description: string; submitLabel: string }> = {
-  create: {
-    title: "기사님 프로필 등록",
-    description: "추가 정보를 입력하여 회원가입을 완료해주세요.",
-    submitLabel: "시작하기",
-  },
-  edit: {
-    title: "기사님 프로필 수정",
-    description: "프로필 정보를 수정할 수 있어요.",
-    submitLabel: "수정하기",
-  },
-};
-
-const MoverProfileForm = ({
-  mode = "create",
-  defaultValues,
-  initialImageUrl = null,
-}: MoverProfileFormProps) => {
+const MoverProfileForm = ({ defaultValues, initialImageUrl = null }: MoverProfileFormProps) => {
   const router = useRouter();
-  const copy = COPY[mode];
   const createMoverProfile = useCreateMoverProfile();
-  const updateMoverProfile = useUpdateMoverProfile();
   const [submitError, setSubmitError] = useState<string | null>(null);
 
   const {
@@ -74,14 +52,15 @@ const MoverProfileForm = ({
     },
   });
 
-  const isPending = isSubmitting || createMoverProfile.isPending || updateMoverProfile.isPending;
+  const isPending = isSubmitting || createMoverProfile.isPending;
 
   const onSubmit = handleSubmit(async (formValues) => {
     setSubmitError(null);
 
     try {
       const imageUrl = await uploadProfileImageIfNeeded(formValues.imageFile);
-      const profileInput = {
+
+      await createMoverProfile.mutateAsync({
         nickname: formValues.nickname,
         career: Number(formValues.career),
         shortIntro: formValues.shortIntro,
@@ -89,15 +68,8 @@ const MoverProfileForm = ({
         regionIds: formValues.regionIds,
         serviceTypes: formValues.serviceTypes,
         ...(imageUrl ? { imageUrl } : {}),
-      };
-
-      if (mode === "create") {
-        await createMoverProfile.mutateAsync(profileInput);
-        router.replace(getRoleHomePath("MOVER"));
-        return;
-      }
-
-      await updateMoverProfile.mutateAsync(profileInput);
+      });
+      router.replace(getRoleHomePath("MOVER"));
     } catch (error) {
       setSubmitError(getApiErrorMessage(error, "프로필 저장에 실패했습니다."));
     }
@@ -109,7 +81,10 @@ const MoverProfileForm = ({
       onSubmit={onSubmit}
       noValidate
     >
-      <ProfilePageHeader title={copy.title} description={copy.description} />
+      <ProfilePageHeader
+        title="기사님 프로필 등록"
+        description="추가 정보를 입력하여 회원가입을 완료해주세요."
+      />
 
       <div className="flex w-full flex-col gap-32 lg:flex-row lg:items-start lg:justify-between lg:gap-[120px]">
         <div className="flex w-full flex-col gap-32 lg:w-[500px]">
@@ -221,7 +196,7 @@ const MoverProfileForm = ({
             fullWidth
             disabled={!isValid || isPending}
           >
-            {copy.submitLabel}
+            시작하기
           </Button>
         </div>
       </div>
diff --git a/src/components/profile/ProfileFormActions.tsx b/src/components/profile/ProfileFormActions.tsx
new file mode 100644
index 00000000..6fc4065c
--- /dev/null
+++ b/src/components/profile/ProfileFormActions.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import Button from "@/components/common/Button/Button";
+import { cn } from "@/lib/utils/cn";
+
+interface ProfileFormActionsProps {
+  submitLabel?: string;
+  cancelLabel?: string;
+  isSubmitDisabled?: boolean;
+  className?: string;
+}
+
+/** 프로필·기본정보 수정 폼 공통 취소/제출 액션 */
+const ProfileFormActions = ({
+  submitLabel = "수정하기",
+  cancelLabel = "취소",
+  isSubmitDisabled = false,
+  className,
+}: ProfileFormActionsProps) => {
+  const router = useRouter();
+
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-col-reverse gap-8 md:flex-row md:justify-end md:gap-20",
+        className,
+      )}
+    >
+      <Button
+        type="button"
+        variant="outline"
+        size="auth"
+        fullWidth
+        className="md:w-[240px]"
+        onClick={() => router.back()}
+      >
+        {cancelLabel}
+      </Button>
+      <Button
+        type="submit"
+        variant="solid"
+        size="auth"
+        fullWidth
+        className="md:w-[240px]"
+        disabled={isSubmitDisabled}
+      >
+        {submitLabel}
+      </Button>
+    </div>
+  );
+};
+
+export default ProfileFormActions;
diff --git a/src/components/profile/ProfilePageHeader.tsx b/src/components/profile/ProfilePageHeader.tsx
index afc65343..dd94ff94 100644
--- a/src/components/profile/ProfilePageHeader.tsx
+++ b/src/components/profile/ProfilePageHeader.tsx
@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils/cn";
 
 interface ProfilePageHeaderProps {
   title: string;
-  description: string;
+  description?: string;
   className?: string;
 }
 
@@ -19,13 +19,15 @@ const ProfilePageHeader = ({ title, description, className }: ProfilePageHeaderP
         >
           {title}
         </Text>
-        <Text
-          as="p"
-          variant={{ base: "xs-regular", md: "xl-regular" }}
-          className="text-text-description"
-        >
-          {description}
-        </Text>
+        {description ? (
+          <Text
+            as="p"
+            variant={{ base: "xs-regular", md: "xl-regular" }}
+            className="text-text-description"
+          >
+            {description}
+          </Text>
+        ) : null}
       </div>
       <div className="border-border-subtle w-full border-b" aria-hidden="true" />
     </header>
diff --git a/src/hooks/profile/useUpdateMoverBasicInfo.ts b/src/hooks/profile/useUpdateMoverBasicInfo.ts
new file mode 100644
index 00000000..d44d669a
--- /dev/null
+++ b/src/hooks/profile/useUpdateMoverBasicInfo.ts
@@ -0,0 +1,20 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useApiMutation } from "@/hooks/queries/useApiMutation";
+import { updateMoverBasicInfo } from "@/lib/api/profile";
+import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+import type { UpdateMoverBasicInfoInput } from "@/types/profile";
+
+export const useUpdateMoverBasicInfo = () => {
+  const queryClient = useQueryClient();
+
+  return useApiMutation({
+    mutationFn: (input: UpdateMoverBasicInfoInput) => updateMoverBasicInfo(input),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.MOVER_ME }),
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.MOVER_STATUS }),
+      ]);
+    },
+  });
+};
diff --git a/src/lib/api/profile.ts b/src/lib/api/profile.ts
index ddd462e5..a3d72618 100644
--- a/src/lib/api/profile.ts
+++ b/src/lib/api/profile.ts
@@ -11,6 +11,7 @@ import type {
   MoverProfileMeResponse,
   ProfileStatus,
   UpdateCustomerProfileInput,
+  UpdateMoverBasicInfoInput,
   UpdateMoverProfileInput,
 } from "@/types/profile";
 
@@ -23,6 +24,7 @@ export type {
   MoverProfileMeResponse,
   ProfileStatus,
   UpdateCustomerProfileInput,
+  UpdateMoverBasicInfoInput,
   UpdateMoverProfileInput,
 } from "@/types/profile";
 
@@ -129,6 +131,12 @@ export const updateMoverProfile = (input: UpdateMoverProfileInput) =>
     input,
   );
 
+export const updateMoverBasicInfo = (input: UpdateMoverBasicInfoInput) =>
+  fetchInstance.patch<MoverProfileMeResponse, UpdateMoverBasicInfoInput>(
+    API_ROUTES.PROFILES.MOVER_BASIC,
+    input,
+  );
+
 /** Header·auth store용 — AuthUser.id = userId */
 export const toAuthUserFromMoverProfile = (profile: MoverProfileMe): AuthUser => ({
   id: profile.userId,
diff --git a/src/lib/constants/apiRoutes.ts b/src/lib/constants/apiRoutes.ts
index ac727696..3cb993f7 100644
--- a/src/lib/constants/apiRoutes.ts
+++ b/src/lib/constants/apiRoutes.ts
@@ -23,6 +23,7 @@ export const API_ROUTES = {
     MOVER: "/profiles/mover",
     MOVER_STATUS: "/profiles/mover/status",
     MOVER_ME: "/profiles/mover/me",
+    MOVER_BASIC: "/profiles/mover/me/basic",
   },
   MOVERS: {
     ROOT: "/movers",
diff --git a/src/lib/constants/appRoutes.ts b/src/lib/constants/appRoutes.ts
index 84f543a2..52cc6faa 100644
--- a/src/lib/constants/appRoutes.ts
+++ b/src/lib/constants/appRoutes.ts
@@ -25,6 +25,8 @@ export const APP_ROUTES = {
   PROFILE_EDIT: "/profile/edit",
   /** 기사님 프로필 수정 */
   MOVER_PROFILE_EDIT: "/mover/profile/edit",
+  /** 기사님 기본정보 수정 */
+  MOVER_BASIC_EDIT: "/mover/basic/edit",
   // 2026.07.27 정슬기 - [추가] 기사님 찾기·상세 페이지 경로
   MOVERS: {
     ROOT: "/movers",
diff --git a/src/lib/profile/toCustomerProfileEditFormValues.ts b/src/lib/profile/toCustomerProfileEditFormValues.ts
new file mode 100644
index 00000000..77fc3928
--- /dev/null
+++ b/src/lib/profile/toCustomerProfileEditFormValues.ts
@@ -0,0 +1,17 @@
+import type { CustomerProfileEditFormValues } from "@/lib/schemas/customerProfileEditSchema";
+import type { CustomerProfileMe } from "@/types/profile";
+
+export const toCustomerProfileEditFormValues = (
+  customerProfile: CustomerProfileMe,
+): Partial<CustomerProfileEditFormValues> => {
+  return {
+    name: customerProfile.name,
+    phone: customerProfile.phone?.replace(/\D/g, "") ?? "",
+    currentPassword: "",
+    newPassword: "",
+    newPasswordConfirm: "",
+    imageFile: null,
+    serviceTypes: customerProfile.serviceTypes,
+    regionId: customerProfile.regions[0]?.id ?? null,
+  };
+};
diff --git a/src/lib/profile/toMoverBasicInfoEditFormValues.ts b/src/lib/profile/toMoverBasicInfoEditFormValues.ts
new file mode 100644
index 00000000..e1a4edc1
--- /dev/null
+++ b/src/lib/profile/toMoverBasicInfoEditFormValues.ts
@@ -0,0 +1,14 @@
+import type { MoverBasicInfoEditFormValues } from "@/lib/schemas/moverBasicInfoEditSchema";
+import type { MoverProfileMe } from "@/types/profile";
+
+export const toMoverBasicInfoEditFormValues = (
+  moverProfile: MoverProfileMe,
+): Partial<MoverBasicInfoEditFormValues> => {
+  return {
+    name: moverProfile.name,
+    phone: moverProfile.phone?.replace(/\D/g, "") ?? "",
+    currentPassword: "",
+    newPassword: "",
+    newPasswordConfirm: "",
+  };
+};
diff --git a/src/lib/schemas/customerProfileEditSchema.ts b/src/lib/schemas/customerProfileEditSchema.ts
new file mode 100644
index 00000000..f77cf11c
--- /dev/null
+++ b/src/lib/schemas/customerProfileEditSchema.ts
@@ -0,0 +1,44 @@
+import { z } from "zod";
+
+import { passwordChangeFieldsSchema } from "@/lib/schemas/passwordChangeFields";
+
+const moveTypeSchema = z.enum(["SMALL", "HOME", "OFFICE"]);
+const regionIdSchema = z.union([
+  z.literal(1),
+  z.literal(2),
+  z.literal(3),
+  z.literal(4),
+  z.literal(5),
+  z.literal(6),
+  z.literal(7),
+  z.literal(8),
+  z.literal(9),
+  z.literal(10),
+  z.literal(11),
+  z.literal(12),
+  z.literal(13),
+  z.literal(14),
+  z.literal(15),
+  z.literal(16),
+  z.literal(17),
+]);
+
+export const customerProfileEditSchema = z
+  .object({
+    name: z.string().trim().min(1, "성함을 입력해 주세요"),
+    phone: z
+      .string()
+      .min(1, "전화번호를 입력해 주세요")
+      .regex(/^\d+$/, "숫자만 입력해 주세요")
+      .regex(/^010\d{8}$/, "올바른 전화번호를 입력해 주세요"),
+    imageFile: z.custom<File | null>().nullable().optional(),
+    serviceTypes: z.array(moveTypeSchema).min(1, "이용 서비스를 선택해 주세요"),
+    regionId: regionIdSchema.nullable(),
+  })
+  .and(passwordChangeFieldsSchema)
+  .refine((data) => data.regionId !== null, {
+    message: "내가 사는 지역을 선택해 주세요",
+    path: ["regionId"],
+  });
+
+export type CustomerProfileEditFormValues = z.infer<typeof customerProfileEditSchema>;
diff --git a/src/lib/schemas/moverBasicInfoEditSchema.ts b/src/lib/schemas/moverBasicInfoEditSchema.ts
new file mode 100644
index 00000000..65f2fd91
--- /dev/null
+++ b/src/lib/schemas/moverBasicInfoEditSchema.ts
@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+import { passwordChangeFieldsSchema } from "@/lib/schemas/passwordChangeFields";
+
+export const moverBasicInfoEditSchema = z
+  .object({
+    name: z.string().trim().min(1, "성함을 입력해 주세요"),
+    phone: z
+      .string()
+      .min(1, "전화번호를 입력해 주세요")
+      .regex(/^\d+$/, "숫자만 입력해 주세요")
+      .min(10, "올바른 전화번호를 입력해 주세요")
+      .max(11, "올바른 전화번호를 입력해 주세요"),
+  })
+  .and(passwordChangeFieldsSchema);
+
+export type MoverBasicInfoEditFormValues = z.infer<typeof moverBasicInfoEditSchema>;
diff --git a/src/lib/schemas/passwordChangeFields.ts b/src/lib/schemas/passwordChangeFields.ts
new file mode 100644
index 00000000..bea32a9c
--- /dev/null
+++ b/src/lib/schemas/passwordChangeFields.ts
@@ -0,0 +1,68 @@
+import { z } from "zod";
+
+/** 비밀번호 변경 필드 — 모두 비어 있으면 통과, 하나라도 입력하면 전부 검증 */
+export const passwordChangeFieldsSchema = z
+  .object({
+    currentPassword: z.string(),
+    newPassword: z.string(),
+    newPasswordConfirm: z.string(),
+  })
+  .superRefine((data, ctx) => {
+    const hasAny = Boolean(data.currentPassword || data.newPassword || data.newPasswordConfirm);
+
+    if (!hasAny) {
+      return;
+    }
+
+    if (!data.currentPassword) {
+      ctx.addIssue({
+        code: "custom",
+        message: "현재 비밀번호를 입력해 주세요",
+        path: ["currentPassword"],
+      });
+    }
+
+    if (!data.newPassword) {
+      ctx.addIssue({
+        code: "custom",
+        message: "새 비밀번호를 입력해 주세요",
+        path: ["newPassword"],
+      });
+    } else if (data.newPassword.length < 8) {
+      ctx.addIssue({
+        code: "custom",
+        message: "비밀번호는 8자 이상이어야 합니다",
+        path: ["newPassword"],
+      });
+    }
+
+    if (!data.newPasswordConfirm) {
+      ctx.addIssue({
+        code: "custom",
+        message: "새 비밀번호를 다시 입력해 주세요",
+        path: ["newPasswordConfirm"],
+      });
+    } else if (data.newPassword && data.newPassword !== data.newPasswordConfirm) {
+      ctx.addIssue({
+        code: "custom",
+        message: "비밀번호가 일치하지 않습니다",
+        path: ["newPasswordConfirm"],
+      });
+    }
+  });
+
+export type PasswordChangeFields = z.infer<typeof passwordChangeFieldsSchema>;
+
+export const toPasswordChangePayload = (
+  values: PasswordChangeFields,
+): Partial<PasswordChangeFields> => {
+  if (!values.currentPassword && !values.newPassword && !values.newPasswordConfirm) {
+    return {};
+  }
+
+  return {
+    currentPassword: values.currentPassword,
+    newPassword: values.newPassword,
+    newPasswordConfirm: values.newPasswordConfirm,
+  };
+};
diff --git a/src/types/profile.ts b/src/types/profile.ts
index 2ce256e9..89c0166f 100644
--- a/src/types/profile.ts
+++ b/src/types/profile.ts
@@ -1,9 +1,6 @@
 import type { RegionId } from "@/lib/constants/region";
 import type { MoveType } from "@/types/move";
 
-/** 프로필 등록·수정 화면 모드 */
-export type ProfileFormMode = "create" | "edit";
-
 export interface ProfileRegion {
   id: RegionId;
   name: string;
@@ -68,6 +65,11 @@ export interface CreateCustomerProfileInput {
 }
 
 export interface UpdateCustomerProfileInput {
+  name?: string;
+  phone?: string;
+  currentPassword?: string;
+  newPassword?: string;
+  newPasswordConfirm?: string;
   imageUrl?: string | null;
   regionIds?: number[];
   serviceTypes?: MoveType[];
@@ -93,6 +95,14 @@ export interface UpdateMoverProfileInput {
   serviceTypes?: MoveType[];
 }
 
+export interface UpdateMoverBasicInfoInput {
+  name?: string;
+  phone?: string;
+  currentPassword?: string;
+  newPassword?: string;
+  newPasswordConfirm?: string;
+}
+
 export const PROFILE_IMAGE_CONTENT_TYPES = ["image/jpeg", "image/png", "image/webp"] as const;
 
 export type ProfileImageContentType = (typeof PROFILE_IMAGE_CONTENT_TYPES)[number];

From f082e579f3ea0d5c317164953a6633b14a985173 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Mon, 3 Aug 2026 21:27:14 +0900
Subject: [PATCH 05/18] =?UTF-8?q?feat:=20oAuth=20=EA=B3=84=EC=A0=95=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EC=8B=9C=20=EC=A0=84=ED=99=94=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EC=9E=85=EB=A0=A5,=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=8B=9C=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EC=88=A8?=
 =?UTF-8?q?=EA=B9=80=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(customer)/(protected)/profile/page.tsx   |  4 +-
 .../(protected)/mover/profile/page.tsx        |  4 +-
 .../profile/CustomerProfileCreateView.tsx     | 35 ++++++++
 .../profile/CustomerProfileEditForm.tsx       | 80 ++++++++++---------
 .../profile/CustomerProfileEditView.tsx       |  1 +
 .../profile/CustomerProfileForm.tsx           | 41 +++++++++-
 .../profile/MoverBasicInfoEditForm.tsx        | 77 ++++++++++--------
 .../profile/MoverBasicInfoEditView.tsx        |  1 +
 .../profile/MoverProfileCreateView.tsx        | 35 ++++++++
 src/components/profile/MoverProfileForm.tsx   | 45 ++++++++++-
 src/hooks/profile/useCustomerProfileStatus.ts | 11 +++
 src/hooks/profile/useMoverProfileStatus.ts    | 11 +++
 src/lib/api/profile.ts                        |  2 +
 src/lib/schemas/customerProfileSchema.ts      | 33 +++++---
 src/lib/schemas/moverProfileSchema.ts         | 40 ++++++----
 src/types/profile.ts                          |  5 ++
 16 files changed, 319 insertions(+), 106 deletions(-)
 create mode 100644 src/components/profile/CustomerProfileCreateView.tsx
 create mode 100644 src/components/profile/MoverProfileCreateView.tsx
 create mode 100644 src/hooks/profile/useCustomerProfileStatus.ts
 create mode 100644 src/hooks/profile/useMoverProfileStatus.ts

diff --git a/src/app/(customer)/(protected)/profile/page.tsx b/src/app/(customer)/(protected)/profile/page.tsx
index f86fa17d..1da167c3 100644
--- a/src/app/(customer)/(protected)/profile/page.tsx
+++ b/src/app/(customer)/(protected)/profile/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import CustomerProfileForm from "@/components/profile/CustomerProfileForm";
+import CustomerProfileCreateView from "@/components/profile/CustomerProfileCreateView";
 
 export const metadata: Metadata = {
   title: "프로필 등록 | 무빙",
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 };
 
 const CustomerProfilePage = () => {
-  return <CustomerProfileForm />;
+  return <CustomerProfileCreateView />;
 };
 
 export default CustomerProfilePage;
diff --git a/src/app/(mover)/(protected)/mover/profile/page.tsx b/src/app/(mover)/(protected)/mover/profile/page.tsx
index d5af5bbd..35df0d4f 100644
--- a/src/app/(mover)/(protected)/mover/profile/page.tsx
+++ b/src/app/(mover)/(protected)/mover/profile/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import MoverProfileForm from "@/components/profile/MoverProfileForm";
+import MoverProfileCreateView from "@/components/profile/MoverProfileCreateView";
 
 export const metadata: Metadata = {
   title: "기사 프로필 등록 | 무빙",
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 };
 
 const MoverProfilePage = () => {
-  return <MoverProfileForm />;
+  return <MoverProfileCreateView />;
 };
 
 export default MoverProfilePage;
diff --git a/src/components/profile/CustomerProfileCreateView.tsx b/src/components/profile/CustomerProfileCreateView.tsx
new file mode 100644
index 00000000..ba286af3
--- /dev/null
+++ b/src/components/profile/CustomerProfileCreateView.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import CustomerProfileForm from "@/components/profile/CustomerProfileForm";
+import { Text } from "@/components/common/Text";
+import { useCustomerAuthReady } from "@/hooks/useCustomerAuthReady";
+import { useCustomerProfileStatus } from "@/hooks/profile/useCustomerProfileStatus";
+
+const CustomerProfileCreateView = () => {
+  const { canFetch, isPending: isAuthPending } = useCustomerAuthReady();
+  const { data: status, isPending: isStatusPending, isError } = useCustomerProfileStatus(canFetch);
+
+  if (isAuthPending || isStatusPending) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center px-24">
+        <Text as="p" variant="md-medium" className="text-text-description">
+          프로필 정보를 불러오는 중입니다.
+        </Text>
+      </div>
+    );
+  }
+
+  if (isError || !status) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center px-24">
+        <Text as="p" role="alert" variant="md-medium" className="text-text-error">
+          프로필 정보를 불러오지 못했습니다.
+        </Text>
+      </div>
+    );
+  }
+
+  return <CustomerProfileForm key={String(status.hasPhone)} requiresPhone={!status.hasPhone} />;
+};
+
+export default CustomerProfileCreateView;
diff --git a/src/components/profile/CustomerProfileEditForm.tsx b/src/components/profile/CustomerProfileEditForm.tsx
index d1ed5e53..4567883e 100644
--- a/src/components/profile/CustomerProfileEditForm.tsx
+++ b/src/components/profile/CustomerProfileEditForm.tsx
@@ -27,12 +27,14 @@ import type { MoveType } from "@/types/move";
 
 interface CustomerProfileEditFormProps {
   email: string;
+  hasPassword: boolean;
   defaultValues?: Partial<CustomerProfileEditFormValues>;
   initialImageUrl?: string | null;
 }
 
 const CustomerProfileEditForm = ({
   email,
+  hasPassword,
   defaultValues,
   initialImageUrl = null,
 }: CustomerProfileEditFormProps) => {
@@ -77,7 +79,7 @@ const CustomerProfileEditForm = ({
       await updateCustomerProfile.mutateAsync({
         name: formValues.name,
         phone: formValues.phone,
-        ...toPasswordChangePayload(formValues),
+        ...(hasPassword ? toPasswordChangePayload(formValues) : {}),
         regionIds: [formValues.regionId],
         serviceTypes: formValues.serviceTypes,
         ...(imageUrl ? { imageUrl } : {}),
@@ -131,51 +133,53 @@ const CustomerProfileEditForm = ({
             />
           </FormField>
 
-          <FormField label="전화번호" labelFor="customer-edit-phone" required>
+          <FormField label="전화번호" labelFor="customer-edit-phone">
             <Input
               id="customer-edit-phone"
               size="md"
-              inputMode="numeric"
-              numericOnly
-              stripLeadingZeros={false}
-              placeholder="전화번호를 입력해 주세요"
+              readOnly
+              disabled
               error={errors.phone?.message}
               {...register("phone")}
             />
           </FormField>
 
-          <FormField label="현재 비밀번호" labelFor="customer-edit-current-password">
-            <PasswordInput
-              id="customer-edit-current-password"
-              size="md"
-              autoComplete="new-password"
-              placeholder="현재 비밀번호를 입력해 주세요"
-              error={errors.currentPassword?.message}
-              {...register("currentPassword")}
-            />
-          </FormField>
-
-          <FormField label="새 비밀번호" labelFor="customer-edit-new-password">
-            <PasswordInput
-              id="customer-edit-new-password"
-              size="md"
-              autoComplete="new-password"
-              placeholder="새 비밀번호를 입력해 주세요"
-              error={errors.newPassword?.message}
-              {...register("newPassword")}
-            />
-          </FormField>
-
-          <FormField label="새 비밀번호 확인" labelFor="customer-edit-new-password-confirm">
-            <PasswordInput
-              id="customer-edit-new-password-confirm"
-              size="md"
-              autoComplete="new-password"
-              placeholder="새 비밀번호를 다시 입력해 주세요"
-              error={errors.newPasswordConfirm?.message}
-              {...register("newPasswordConfirm")}
-            />
-          </FormField>
+          {hasPassword ? (
+            <>
+              <FormField label="현재 비밀번호" labelFor="customer-edit-current-password">
+                <PasswordInput
+                  id="customer-edit-current-password"
+                  size="md"
+                  autoComplete="new-password"
+                  placeholder="현재 비밀번호를 입력해 주세요"
+                  error={errors.currentPassword?.message}
+                  {...register("currentPassword")}
+                />
+              </FormField>
+
+              <FormField label="새 비밀번호" labelFor="customer-edit-new-password">
+                <PasswordInput
+                  id="customer-edit-new-password"
+                  size="md"
+                  autoComplete="new-password"
+                  placeholder="새 비밀번호를 입력해 주세요"
+                  error={errors.newPassword?.message}
+                  {...register("newPassword")}
+                />
+              </FormField>
+
+              <FormField label="새 비밀번호 확인" labelFor="customer-edit-new-password-confirm">
+                <PasswordInput
+                  id="customer-edit-new-password-confirm"
+                  size="md"
+                  autoComplete="new-password"
+                  placeholder="새 비밀번호를 다시 입력해 주세요"
+                  error={errors.newPasswordConfirm?.message}
+                  {...register("newPasswordConfirm")}
+                />
+              </FormField>
+            </>
+          ) : null}
         </div>
 
         <div className="flex w-full flex-col gap-32 lg:w-[500px]">
diff --git a/src/components/profile/CustomerProfileEditView.tsx b/src/components/profile/CustomerProfileEditView.tsx
index 2de53928..cfb103d8 100644
--- a/src/components/profile/CustomerProfileEditView.tsx
+++ b/src/components/profile/CustomerProfileEditView.tsx
@@ -38,6 +38,7 @@ const CustomerProfileEditView = () => {
     <CustomerProfileEditForm
       key={customerProfile.id}
       email={customerProfile.email}
+      hasPassword={customerProfile.hasPassword}
       defaultValues={toCustomerProfileEditFormValues(customerProfile)}
       initialImageUrl={customerProfile.imageUrl}
     />
diff --git a/src/components/profile/CustomerProfileForm.tsx b/src/components/profile/CustomerProfileForm.tsx
index 9bf056ef..875dae23 100644
--- a/src/components/profile/CustomerProfileForm.tsx
+++ b/src/components/profile/CustomerProfileForm.tsx
@@ -7,6 +7,7 @@ import { Controller, useForm } from "react-hook-form";
 
 import Button from "@/components/common/Button/Button";
 import FormField from "@/components/common/FormField/FormField";
+import Input from "@/components/common/Input/Input";
 import { Text } from "@/components/common/Text";
 import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
 import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
@@ -18,17 +19,21 @@ import { MOVE_TYPE_OPTIONS } from "@/lib/constants/moveType";
 import { REGION_OPTIONS, type RegionId } from "@/lib/constants/region";
 import { uploadProfileImageIfNeeded } from "@/lib/profile/uploadProfileImage";
 import {
-  customerProfileSchema,
+  createCustomerProfileSchema,
   type CustomerProfileFormValues,
 } from "@/lib/schemas/customerProfileSchema";
+import { ApiError } from "@/types/api";
 import type { MoveType } from "@/types/move";
 
 interface CustomerProfileFormProps {
+  /** status.hasPhone === false 일 때 전화번호 입력 필요 */
+  requiresPhone?: boolean;
   defaultValues?: Partial<CustomerProfileFormValues>;
   initialImageUrl?: string | null;
 }
 
 const CustomerProfileForm = ({
+  requiresPhone = false,
   defaultValues,
   initialImageUrl = null,
 }: CustomerProfileFormProps) => {
@@ -37,13 +42,16 @@ const CustomerProfileForm = ({
   const [submitError, setSubmitError] = useState<string | null>(null);
 
   const {
+    register,
     control,
     handleSubmit,
+    setError,
     formState: { errors, isValid, isSubmitting },
   } = useForm<CustomerProfileFormValues>({
-    resolver: zodResolver(customerProfileSchema),
+    resolver: zodResolver(createCustomerProfileSchema({ requiresPhone })),
     mode: "onChange",
     defaultValues: {
+      phone: "",
       imageFile: null,
       serviceTypes: [],
       regionId: null,
@@ -65,12 +73,25 @@ const CustomerProfileForm = ({
       const imageUrl = await uploadProfileImageIfNeeded(formValues.imageFile);
 
       await createCustomerProfile.mutateAsync({
+        ...(requiresPhone && formValues.phone ? { phone: formValues.phone } : {}),
         ...(imageUrl ? { imageUrl } : {}),
         regionIds: [formValues.regionId],
         serviceTypes: formValues.serviceTypes,
       });
       router.replace(getRoleHomePath("CUSTOMER"));
     } catch (error) {
+      if (
+        error instanceof ApiError &&
+        (error.status === 409 || error.code === "CONFLICT") &&
+        error.message.includes("전화번호")
+      ) {
+        setError("phone", {
+          type: "server",
+          message: error.message,
+        });
+        return;
+      }
+
       setSubmitError(getApiErrorMessage(error, "프로필 저장에 실패했습니다."));
     }
   });
@@ -80,6 +101,7 @@ const CustomerProfileForm = ({
       className="px-margin-mobile mx-auto flex w-full max-w-[640px] flex-col gap-40 py-32 md:px-72 md:py-40 lg:px-0 lg:pt-56 lg:pb-70"
       onSubmit={onSubmit}
       noValidate
+      autoComplete="off"
     >
       <ProfilePageHeader
         title="프로필 등록"
@@ -87,6 +109,21 @@ const CustomerProfileForm = ({
       />
 
       <div className="flex w-full flex-col gap-32">
+        {requiresPhone ? (
+          <FormField label="전화번호" labelFor="customer-create-phone" required>
+            <Input
+              id="customer-create-phone"
+              size="md"
+              inputMode="numeric"
+              numericOnly
+              stripLeadingZeros={false}
+              placeholder="전화번호를 입력해 주세요"
+              error={errors.phone?.message}
+              {...register("phone")}
+            />
+          </FormField>
+        ) : null}
+
         <section className="flex w-full flex-col gap-32">
           <FormField label="프로필 이미지" labelFor="customer-profile-image">
             <Controller
diff --git a/src/components/profile/MoverBasicInfoEditForm.tsx b/src/components/profile/MoverBasicInfoEditForm.tsx
index f89efa79..747cf7dd 100644
--- a/src/components/profile/MoverBasicInfoEditForm.tsx
+++ b/src/components/profile/MoverBasicInfoEditForm.tsx
@@ -21,10 +21,15 @@ import { ApiError } from "@/types/api";
 
 interface MoverBasicInfoEditFormProps {
   email: string;
+  hasPassword: boolean;
   defaultValues?: Partial<MoverBasicInfoEditFormValues>;
 }
 
-const MoverBasicInfoEditForm = ({ email, defaultValues }: MoverBasicInfoEditFormProps) => {
+const MoverBasicInfoEditForm = ({
+  email,
+  hasPassword,
+  defaultValues,
+}: MoverBasicInfoEditFormProps) => {
   const updateMoverBasicInfo = useUpdateMoverBasicInfo();
   const [submitError, setSubmitError] = useState<string | null>(null);
 
@@ -55,7 +60,7 @@ const MoverBasicInfoEditForm = ({ email, defaultValues }: MoverBasicInfoEditForm
       await updateMoverBasicInfo.mutateAsync({
         name: formValues.name,
         phone: formValues.phone,
-        ...toPasswordChangePayload(formValues),
+        ...(hasPassword ? toPasswordChangePayload(formValues) : {}),
       });
     } catch (error) {
       if (
@@ -114,38 +119,42 @@ const MoverBasicInfoEditForm = ({ email, defaultValues }: MoverBasicInfoEditForm
         </div>
 
         <div className="flex w-full flex-col gap-32 lg:w-[500px]">
-          <FormField label="현재 비밀번호" labelFor="mover-basic-current-password">
-            <PasswordInput
-              id="mover-basic-current-password"
-              size="md"
-              autoComplete="new-password"
-              placeholder="현재 비밀번호를 입력해 주세요"
-              error={errors.currentPassword?.message}
-              {...register("currentPassword")}
-            />
-          </FormField>
-
-          <FormField label="새 비밀번호" labelFor="mover-basic-new-password">
-            <PasswordInput
-              id="mover-basic-new-password"
-              size="md"
-              autoComplete="new-password"
-              placeholder="새 비밀번호를 입력해 주세요"
-              error={errors.newPassword?.message}
-              {...register("newPassword")}
-            />
-          </FormField>
-
-          <FormField label="새 비밀번호 확인" labelFor="mover-basic-new-password-confirm">
-            <PasswordInput
-              id="mover-basic-new-password-confirm"
-              size="md"
-              autoComplete="new-password"
-              placeholder="새 비밀번호를 다시 입력해 주세요"
-              error={errors.newPasswordConfirm?.message}
-              {...register("newPasswordConfirm")}
-            />
-          </FormField>
+          {hasPassword ? (
+            <>
+              <FormField label="현재 비밀번호" labelFor="mover-basic-current-password">
+                <PasswordInput
+                  id="mover-basic-current-password"
+                  size="md"
+                  autoComplete="new-password"
+                  placeholder="현재 비밀번호를 입력해 주세요"
+                  error={errors.currentPassword?.message}
+                  {...register("currentPassword")}
+                />
+              </FormField>
+
+              <FormField label="새 비밀번호" labelFor="mover-basic-new-password">
+                <PasswordInput
+                  id="mover-basic-new-password"
+                  size="md"
+                  autoComplete="new-password"
+                  placeholder="새 비밀번호를 입력해 주세요"
+                  error={errors.newPassword?.message}
+                  {...register("newPassword")}
+                />
+              </FormField>
+
+              <FormField label="새 비밀번호 확인" labelFor="mover-basic-new-password-confirm">
+                <PasswordInput
+                  id="mover-basic-new-password-confirm"
+                  size="md"
+                  autoComplete="new-password"
+                  placeholder="새 비밀번호를 다시 입력해 주세요"
+                  error={errors.newPasswordConfirm?.message}
+                  {...register("newPasswordConfirm")}
+                />
+              </FormField>
+            </>
+          ) : null}
         </div>
       </div>
 
diff --git a/src/components/profile/MoverBasicInfoEditView.tsx b/src/components/profile/MoverBasicInfoEditView.tsx
index 1bebcd9e..6dd3343e 100644
--- a/src/components/profile/MoverBasicInfoEditView.tsx
+++ b/src/components/profile/MoverBasicInfoEditView.tsx
@@ -34,6 +34,7 @@ const MoverBasicInfoEditView = () => {
     <MoverBasicInfoEditForm
       key={moverProfile.id}
       email={moverProfile.email ?? ""}
+      hasPassword={moverProfile.hasPassword}
       defaultValues={toMoverBasicInfoEditFormValues(moverProfile)}
     />
   );
diff --git a/src/components/profile/MoverProfileCreateView.tsx b/src/components/profile/MoverProfileCreateView.tsx
new file mode 100644
index 00000000..bf754c20
--- /dev/null
+++ b/src/components/profile/MoverProfileCreateView.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import MoverProfileForm from "@/components/profile/MoverProfileForm";
+import { Text } from "@/components/common/Text";
+import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
+import { useMoverProfileStatus } from "@/hooks/profile/useMoverProfileStatus";
+
+const MoverProfileCreateView = () => {
+  const { canFetch, isPending: isAuthPending } = useMoverAuthReady();
+  const { data: status, isPending: isStatusPending, isError } = useMoverProfileStatus(canFetch);
+
+  if (isAuthPending || isStatusPending) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center px-24">
+        <Text as="p" variant="md-medium" className="text-text-description">
+          프로필 정보를 불러오는 중입니다.
+        </Text>
+      </div>
+    );
+  }
+
+  if (isError || !status) {
+    return (
+      <div className="flex min-h-[40vh] items-center justify-center px-24">
+        <Text as="p" role="alert" variant="md-medium" className="text-text-error">
+          프로필 정보를 불러오지 못했습니다.
+        </Text>
+      </div>
+    );
+  }
+
+  return <MoverProfileForm key={String(status.hasPhone)} requiresPhone={!status.hasPhone} />;
+};
+
+export default MoverProfileCreateView;
diff --git a/src/components/profile/MoverProfileForm.tsx b/src/components/profile/MoverProfileForm.tsx
index 7070162d..adae4653 100644
--- a/src/components/profile/MoverProfileForm.tsx
+++ b/src/components/profile/MoverProfileForm.tsx
@@ -19,15 +19,25 @@ import { getRoleHomePath } from "@/lib/auth/redirect";
 import { MOVE_TYPE_OPTIONS } from "@/lib/constants/moveType";
 import { REGION_OPTIONS, type RegionId } from "@/lib/constants/region";
 import { uploadProfileImageIfNeeded } from "@/lib/profile/uploadProfileImage";
-import { moverProfileSchema, type MoverProfileFormValues } from "@/lib/schemas/moverProfileSchema";
+import {
+  createMoverProfileSchema,
+  type MoverProfileFormValues,
+} from "@/lib/schemas/moverProfileSchema";
+import { ApiError } from "@/types/api";
 import type { MoveType } from "@/types/move";
 
 interface MoverProfileFormProps {
+  /** status.hasPhone === false 일 때 전화번호 입력 필요 */
+  requiresPhone?: boolean;
   defaultValues?: Partial<MoverProfileFormValues>;
   initialImageUrl?: string | null;
 }
 
-const MoverProfileForm = ({ defaultValues, initialImageUrl = null }: MoverProfileFormProps) => {
+const MoverProfileForm = ({
+  requiresPhone = false,
+  defaultValues,
+  initialImageUrl = null,
+}: MoverProfileFormProps) => {
   const router = useRouter();
   const createMoverProfile = useCreateMoverProfile();
   const [submitError, setSubmitError] = useState<string | null>(null);
@@ -36,11 +46,13 @@ const MoverProfileForm = ({ defaultValues, initialImageUrl = null }: MoverProfil
     register,
     control,
     handleSubmit,
+    setError,
     formState: { errors, isValid, isSubmitting },
   } = useForm<MoverProfileFormValues>({
-    resolver: zodResolver(moverProfileSchema),
+    resolver: zodResolver(createMoverProfileSchema({ requiresPhone })),
     mode: "onChange",
     defaultValues: {
+      phone: "",
       imageFile: null,
       nickname: "",
       career: "",
@@ -61,6 +73,7 @@ const MoverProfileForm = ({ defaultValues, initialImageUrl = null }: MoverProfil
       const imageUrl = await uploadProfileImageIfNeeded(formValues.imageFile);
 
       await createMoverProfile.mutateAsync({
+        ...(requiresPhone && formValues.phone ? { phone: formValues.phone } : {}),
         nickname: formValues.nickname,
         career: Number(formValues.career),
         shortIntro: formValues.shortIntro,
@@ -71,6 +84,18 @@ const MoverProfileForm = ({ defaultValues, initialImageUrl = null }: MoverProfil
       });
       router.replace(getRoleHomePath("MOVER"));
     } catch (error) {
+      if (
+        error instanceof ApiError &&
+        (error.status === 409 || error.code === "CONFLICT") &&
+        error.message.includes("전화번호")
+      ) {
+        setError("phone", {
+          type: "server",
+          message: error.message,
+        });
+        return;
+      }
+
       setSubmitError(getApiErrorMessage(error, "프로필 저장에 실패했습니다."));
     }
   });
@@ -80,6 +105,7 @@ const MoverProfileForm = ({ defaultValues, initialImageUrl = null }: MoverProfil
       className="px-margin-mobile mx-auto flex w-full max-w-[1120px] flex-col gap-40 py-32 md:gap-48 md:px-72 md:py-40 lg:px-0 lg:pt-56 lg:pb-70"
       onSubmit={onSubmit}
       noValidate
+      autoComplete="off"
     >
       <ProfilePageHeader
         title="기사님 프로필 등록"
@@ -88,6 +114,19 @@ const MoverProfileForm = ({ defaultValues, initialImageUrl = null }: MoverProfil
 
       <div className="flex w-full flex-col gap-32 lg:flex-row lg:items-start lg:justify-between lg:gap-[120px]">
         <div className="flex w-full flex-col gap-32 lg:w-[500px]">
+          {requiresPhone ? (
+            <FormField label="전화번호" labelFor="mover-create-phone" required>
+              <Input
+                id="mover-create-phone"
+                size="md"
+                readOnly
+                disabled
+                error={errors.phone?.message}
+                {...register("phone")}
+              />
+            </FormField>
+          ) : null}
+
           <FormField label="프로필 이미지">
             <Controller
               name="imageFile"
diff --git a/src/hooks/profile/useCustomerProfileStatus.ts b/src/hooks/profile/useCustomerProfileStatus.ts
new file mode 100644
index 00000000..94485a02
--- /dev/null
+++ b/src/hooks/profile/useCustomerProfileStatus.ts
@@ -0,0 +1,11 @@
+import { useApiQuery } from "@/hooks/queries/useApiQuery";
+import { getCustomerProfileStatus } from "@/lib/api/profile";
+import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+
+export const useCustomerProfileStatus = (enabled: boolean) => {
+  return useApiQuery({
+    queryKey: QUERY_KEYS.PROFILES.CUSTOMER_STATUS,
+    queryFn: getCustomerProfileStatus,
+    enabled,
+  });
+};
diff --git a/src/hooks/profile/useMoverProfileStatus.ts b/src/hooks/profile/useMoverProfileStatus.ts
new file mode 100644
index 00000000..be909765
--- /dev/null
+++ b/src/hooks/profile/useMoverProfileStatus.ts
@@ -0,0 +1,11 @@
+import { useApiQuery } from "@/hooks/queries/useApiQuery";
+import { getMoverProfileStatus } from "@/lib/api/profile";
+import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+
+export const useMoverProfileStatus = (enabled: boolean) => {
+  return useApiQuery({
+    queryKey: QUERY_KEYS.PROFILES.MOVER_STATUS,
+    queryFn: getMoverProfileStatus,
+    enabled,
+  });
+};
diff --git a/src/lib/api/profile.ts b/src/lib/api/profile.ts
index a3d72618..1db76f25 100644
--- a/src/lib/api/profile.ts
+++ b/src/lib/api/profile.ts
@@ -47,6 +47,7 @@ export const mapCustomerProfileMeResponse = (
     name: profile.name,
     email: profile.email,
     phone: profile.phone,
+    hasPassword: profile.hasPassword,
     imageUrl: profile.imageUrl,
     regions: profile.regions ?? [],
     serviceTypes: profile.serviceTypes ?? [],
@@ -98,6 +99,7 @@ export const mapMoverProfileMeResponse = (profile: MoverProfileMeResponse): Move
     name: profile.name,
     email: profile.email,
     phone: profile.phone,
+    hasPassword: profile.hasPassword,
     nickname: profile.nickname,
     imageUrl: profile.imageUrl,
     career: profile.career,
diff --git a/src/lib/schemas/customerProfileSchema.ts b/src/lib/schemas/customerProfileSchema.ts
index 24d385d2..776073ff 100644
--- a/src/lib/schemas/customerProfileSchema.ts
+++ b/src/lib/schemas/customerProfileSchema.ts
@@ -21,15 +21,26 @@ const regionIdSchema = z.union([
   z.literal(17),
 ]);
 
-export const customerProfileSchema = z
-  .object({
-    imageFile: z.custom<File | null>().nullable().optional(),
-    serviceTypes: z.array(moveTypeSchema).min(1, "이용 서비스를 선택해 주세요"),
-    regionId: regionIdSchema.nullable(),
-  })
-  .refine((data) => data.regionId !== null, {
-    message: "내가 사는 지역을 선택해 주세요",
-    path: ["regionId"],
-  });
+const phoneSchema = z
+  .string()
+  .min(1, "전화번호를 입력해 주세요")
+  .regex(/^\d+$/, "숫자만 입력해 주세요")
+  .regex(/^010\d{8}$/, "올바른 전화번호를 입력해 주세요");
 
-export type CustomerProfileFormValues = z.infer<typeof customerProfileSchema>;
+export const createCustomerProfileSchema = (options: { requiresPhone: boolean }) =>
+  z
+    .object({
+      phone: options.requiresPhone ? phoneSchema : z.string().optional(),
+      imageFile: z.custom<File | null>().nullable().optional(),
+      serviceTypes: z.array(moveTypeSchema).min(1, "이용 서비스를 선택해 주세요"),
+      regionId: regionIdSchema.nullable(),
+    })
+    .refine((data) => data.regionId !== null, {
+      message: "내가 사는 지역을 선택해 주세요",
+      path: ["regionId"],
+    });
+
+export type CustomerProfileFormValues = z.infer<ReturnType<typeof createCustomerProfileSchema>>;
+
+/** @deprecated createCustomerProfileSchema 사용 */
+export const customerProfileSchema = createCustomerProfileSchema({ requiresPhone: false });
diff --git a/src/lib/schemas/moverProfileSchema.ts b/src/lib/schemas/moverProfileSchema.ts
index 27f64ac2..01e62011 100644
--- a/src/lib/schemas/moverProfileSchema.ts
+++ b/src/lib/schemas/moverProfileSchema.ts
@@ -21,18 +21,30 @@ const regionIdSchema = z.union([
   z.literal(17),
 ]);
 
-export const moverProfileSchema = z.object({
-  imageFile: z.custom<File | null>().nullable().optional(),
-  nickname: z.string().trim().min(2, "별명은 2자 이상 입력해 주세요"),
-  career: z
-    .string()
-    .trim()
-    .min(1, "경력을 입력해 주세요")
-    .regex(/^\d+$/, "경력은 숫자만 입력해 주세요"),
-  shortIntro: z.string().trim().min(1, "한 줄 소개를 입력해 주세요"),
-  description: z.string().trim().min(1, "상세 설명을 입력해 주세요"),
-  serviceTypes: z.array(moveTypeSchema).min(1, "제공 서비스를 선택해 주세요"),
-  regionIds: z.array(regionIdSchema).min(1, "서비스 가능 지역을 선택해 주세요"),
-});
+const phoneSchema = z
+  .string()
+  .min(1, "전화번호를 입력해 주세요")
+  .regex(/^\d+$/, "숫자만 입력해 주세요")
+  .min(10, "올바른 전화번호를 입력해 주세요")
+  .max(11, "올바른 전화번호를 입력해 주세요");
 
-export type MoverProfileFormValues = z.infer<typeof moverProfileSchema>;
+export const createMoverProfileSchema = (options: { requiresPhone: boolean }) =>
+  z.object({
+    phone: options.requiresPhone ? phoneSchema : z.string().optional(),
+    imageFile: z.custom<File | null>().nullable().optional(),
+    nickname: z.string().trim().min(2, "별명은 2자 이상 입력해 주세요"),
+    career: z
+      .string()
+      .trim()
+      .min(1, "경력을 입력해 주세요")
+      .regex(/^\d+$/, "경력은 숫자만 입력해 주세요"),
+    shortIntro: z.string().trim().min(1, "한 줄 소개를 입력해 주세요"),
+    description: z.string().trim().min(1, "상세 설명을 입력해 주세요"),
+    serviceTypes: z.array(moveTypeSchema).min(1, "제공 서비스를 선택해 주세요"),
+    regionIds: z.array(regionIdSchema).min(1, "서비스 가능 지역을 선택해 주세요"),
+  });
+
+export type MoverProfileFormValues = z.infer<ReturnType<typeof createMoverProfileSchema>>;
+
+/** @deprecated createMoverProfileSchema 사용 */
+export const moverProfileSchema = createMoverProfileSchema({ requiresPhone: false });
diff --git a/src/types/profile.ts b/src/types/profile.ts
index 89c0166f..fd78d389 100644
--- a/src/types/profile.ts
+++ b/src/types/profile.ts
@@ -8,6 +8,7 @@ export interface ProfileRegion {
 
 export interface ProfileStatus {
   isProfileCompleted: boolean;
+  hasPhone: boolean;
 }
 
 /**
@@ -19,6 +20,7 @@ export interface CustomerProfileMeResponse {
   name: string;
   email: string;
   phone: string | null;
+  hasPassword: boolean;
   imageUrl: string | null;
   regions: ProfileRegion[];
   serviceTypes: MoveType[];
@@ -39,6 +41,7 @@ export interface MoverProfileMeResponse {
   name: string;
   email?: string;
   phone: string | null;
+  hasPassword: boolean;
   nickname: string;
   imageUrl: string | null;
   career: number;
@@ -59,6 +62,7 @@ export type MoverProfileMe = Omit<MoverProfileMeResponse, "id" | "userId"> & {
 };
 
 export interface CreateCustomerProfileInput {
+  phone?: string;
   imageUrl?: string;
   regionIds: number[];
   serviceTypes: MoveType[];
@@ -76,6 +80,7 @@ export interface UpdateCustomerProfileInput {
 }
 
 export interface CreateMoverProfileInput {
+  phone?: string;
   nickname: string;
   imageUrl?: string;
   career: number;

From 47869ffa673805f9b7453347f57c537c1e1f1574 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Mon, 3 Aug 2026 21:41:12 +0900
Subject: [PATCH 06/18] =?UTF-8?q?feat:=20useMoverAuthReady=20customer=20?=
 =?UTF-8?q?=EC=99=80=20=EB=A7=9E=EC=B6=A4,=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EC=88=98=EC=A0=95=20=ED=8B=80=EB=A6=B4=20=EC=8B=9C?=
 =?UTF-8?q?=20focus=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/auth/MoverAuthGate.tsx         | 36 +++++++++++--------
 .../profile/CustomerProfileEditForm.tsx       | 15 ++++++++
 .../profile/MoverBasicInfoEditForm.tsx        | 15 ++++++++
 src/hooks/useMoverAuthReady.ts                |  6 +++-
 4 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/src/components/auth/MoverAuthGate.tsx b/src/components/auth/MoverAuthGate.tsx
index 58d3b067..bea43872 100644
--- a/src/components/auth/MoverAuthGate.tsx
+++ b/src/components/auth/MoverAuthGate.tsx
@@ -4,49 +4,55 @@ import { usePathname, useRouter } from "next/navigation";
 import { useEffect, type ReactNode } from "react";
 
 import EstimatesQueryStatus from "@/components/estimate/EstimatesQueryStatus";
-import { useCustomerAuthReady } from "@/hooks/useCustomerAuthReady";
-import { buildLoginPath } from "@/lib/auth/redirect";
-import { APP_ROUTES } from "@/lib/constants/appRoutes";
+import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
+import { buildLoginPath, getRoleHomePath } from "@/lib/auth/redirect";
 
 interface MoverAuthGateProps {
   children: ReactNode;
   /** 세션 확인 중 표시. 기본은 공통 로딩 메시지 */
   loadingMessage?: string;
+  /** 세션 확인 중 커스텀 UI. 있으면 loadingMessage 대신 사용 */
+  loadingFallback?: ReactNode;
 }
 
 /**
  * 기사님 전용 영역 가드
  * - 세션 복구 중: 로딩
- * - 비로그인: 로그인 페이지로 이동 (?redirect=)
- * - 고객: 기사님 찾기(고객 홈)로 이동
+ * - 비로그인: 기사 로그인 페이지로 이동 (?redirect=)
+ * - MOVER 아님(고객·ADMIN·역할 미확정): getRoleHomePath로 이동
+ *
  * // 2026.07.31 정슬기 - [추가] CustomerAuthGate와 대칭인 기사님 가드
+ *
+ * ADMIN 홈 경로는 getRoleHomePath의 임시 정책(기사님 찾기)을 그대로 사용합니다.
  */
-export default function MoverAuthGate({
+const MoverAuthGate = ({
   children,
   loadingMessage = "로그인 상태를 확인하는 중입니다.",
-}: MoverAuthGateProps) {
+  loadingFallback,
+}: MoverAuthGateProps) => {
   const router = useRouter();
   const pathname = usePathname();
-  const { isPending, isAuthenticated, isMover } = useCustomerAuthReady();
-  const canAccess = !isPending && isAuthenticated && isMover;
+  const { isPending, isAuthenticated, isMover, canFetch, user } = useMoverAuthReady();
 
   useEffect(() => {
     if (isPending) return;
 
     if (!isAuthenticated) {
       const search = typeof window !== "undefined" ? window.location.search : "";
-      router.replace(buildLoginPath(`${pathname}${search}`));
+      router.replace(buildLoginPath(`${pathname}${search}`, "mover"));
       return;
     }
 
     if (!isMover) {
-      router.replace(APP_ROUTES.MOVERS.ROOT);
+      router.replace(getRoleHomePath(user?.role));
     }
-  }, [isPending, isAuthenticated, isMover, pathname, router]);
+  }, [isPending, isAuthenticated, isMover, user?.role, pathname, router]);
 
-  if (isPending || !canAccess) {
-    return <EstimatesQueryStatus message={loadingMessage} />;
+  if (isPending || !canFetch) {
+    return loadingFallback ?? <EstimatesQueryStatus message={loadingMessage} />;
   }
 
   return children;
-}
+};
+
+export default MoverAuthGate;
diff --git a/src/components/profile/CustomerProfileEditForm.tsx b/src/components/profile/CustomerProfileEditForm.tsx
index 4567883e..5368849e 100644
--- a/src/components/profile/CustomerProfileEditForm.tsx
+++ b/src/components/profile/CustomerProfileEditForm.tsx
@@ -46,6 +46,7 @@ const CustomerProfileEditForm = ({
     control,
     handleSubmit,
     setError,
+    setFocus,
     formState: { errors, isValid, isSubmitting },
   } = useForm<CustomerProfileEditFormValues>({
     resolver: zodResolver(customerProfileEditSchema),
@@ -94,6 +95,20 @@ const CustomerProfileEditForm = ({
           type: "server",
           message: error.message,
         });
+        setFocus("phone");
+        return;
+      }
+
+      if (
+        error instanceof ApiError &&
+        (error.status === 401 || error.code === "UNAUTHORIZED") &&
+        error.message.includes("현재 비밀번호")
+      ) {
+        setError("currentPassword", {
+          type: "server",
+          message: error.message,
+        });
+        setFocus("currentPassword");
         return;
       }
 
diff --git a/src/components/profile/MoverBasicInfoEditForm.tsx b/src/components/profile/MoverBasicInfoEditForm.tsx
index 747cf7dd..67c9155a 100644
--- a/src/components/profile/MoverBasicInfoEditForm.tsx
+++ b/src/components/profile/MoverBasicInfoEditForm.tsx
@@ -37,6 +37,7 @@ const MoverBasicInfoEditForm = ({
     register,
     handleSubmit,
     setError,
+    setFocus,
     formState: { errors, isValid, isSubmitting },
   } = useForm<MoverBasicInfoEditFormValues>({
     resolver: zodResolver(moverBasicInfoEditSchema),
@@ -72,6 +73,20 @@ const MoverBasicInfoEditForm = ({
           type: "server",
           message: error.message,
         });
+        setFocus("phone");
+        return;
+      }
+
+      if (
+        error instanceof ApiError &&
+        (error.status === 401 || error.code === "UNAUTHORIZED") &&
+        error.message.includes("현재 비밀번호")
+      ) {
+        setError("currentPassword", {
+          type: "server",
+          message: error.message,
+        });
+        setFocus("currentPassword");
         return;
       }
 
diff --git a/src/hooks/useMoverAuthReady.ts b/src/hooks/useMoverAuthReady.ts
index 10e119dd..f86a68f6 100644
--- a/src/hooks/useMoverAuthReady.ts
+++ b/src/hooks/useMoverAuthReady.ts
@@ -5,6 +5,7 @@ import { useAuthStore } from "@/stores/useAuthStore";
 /**
  * 기사 전용 API·화면용 인증 준비 상태
  * AuthProvider의 checkAuth가 끝나기 전에는 canFetch=false 로 보호 API 호출을 막습니다.
+ * CUSTOMER 제외가 아니라 MOVER 명시 확인으로 ADMIN·역할 미확정 오인을 방지합니다.
  */
 export const useMoverAuthReady = () => {
   const hasHydrated = useAuthStore((state) => state.hasHydrated);
@@ -13,12 +14,15 @@ export const useMoverAuthReady = () => {
   const user = useAuthStore((state) => state.user);
 
   const isPending = !hasHydrated || isCheckingAuth;
+  const isMover = user?.role === "MOVER";
   const isCustomer = user?.role === "CUSTOMER";
-  const canFetch = !isPending && isAuthenticated && !isCustomer;
+  /** 세션 준비·MOVER 로그인 시에만 true (쿼리 enabled·화면 접근 공통) */
+  const canFetch = !isPending && isAuthenticated && isMover;
 
   return {
     isPending,
     isAuthenticated,
+    isMover,
     isCustomer,
     canFetch,
     user,

From fc23375243091527dfc13238c459400c9572c0f6 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Mon, 3 Aug 2026 22:22:33 +0900
Subject: [PATCH 07/18] =?UTF-8?q?feat:=20loadingFallback=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84=20=EC=83=9D=EC=84=B1,=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(customer)/(protected)/layout.tsx     | 19 ++---
 src/app/(mover)/(protected)/layout.tsx        | 12 +++-
 .../profile/CustomerProfileCreateView.tsx     | 11 +--
 .../profile/CustomerProfileEditView.tsx       |  9 +--
 .../profile/MoverBasicInfoEditView.tsx        |  9 +--
 .../profile/MoverProfileCreateView.tsx        | 11 +--
 .../profile/MoverProfileEditView.tsx          |  9 +--
 .../profile/ProfileFormSkeleton.tsx           | 69 +++++++++++++++++++
 .../getCustomerProtectedLoadingFallback.tsx   | 40 +++++++++++
 .../getMoverProtectedLoadingFallback.tsx      | 30 ++++++++
 src/styles/tokens.theme.css                   |  1 +
 11 files changed, 174 insertions(+), 46 deletions(-)
 create mode 100644 src/components/profile/ProfileFormSkeleton.tsx
 create mode 100644 src/lib/loading/getCustomerProtectedLoadingFallback.tsx
 create mode 100644 src/lib/loading/getMoverProtectedLoadingFallback.tsx

diff --git a/src/app/(customer)/(protected)/layout.tsx b/src/app/(customer)/(protected)/layout.tsx
index b1a2e11b..039577f4 100644
--- a/src/app/(customer)/(protected)/layout.tsx
+++ b/src/app/(customer)/(protected)/layout.tsx
@@ -4,10 +4,7 @@ import type { ReactNode } from "react";
 import { usePathname } from "next/navigation";
 
 import RoleGuard from "@/components/auth/RoleGuard";
-import { PageHeader } from "@/components/common/PageHeader";
-import FavoriteMoversLoadingSkeleton from "@/components/mover/favorites/FavoriteMoversLoadingSkeleton";
-import { FAVORITE_MOVERS_CONTENT_CLASSNAME } from "@/components/mover/favorites/FavoriteMoversContent";
-import { APP_ROUTES } from "@/lib/constants/appRoutes";
+import { getCustomerProtectedLoadingFallback } from "@/lib/loading/getCustomerProtectedLoadingFallback";
 
 interface CustomerProtectedLayoutProps {
   children: ReactNode;
@@ -15,18 +12,12 @@ interface CustomerProtectedLayoutProps {
 
 const CustomerProtectedLayout = ({ children }: CustomerProtectedLayoutProps) => {
   const pathname = usePathname();
-  const loadingFallback =
-    pathname === APP_ROUTES.MOVERS.FAVORITES ? (
-      <div className="bg-background-subtle flex w-full flex-col">
-        <PageHeader title="찜한 기사님" />
-        <div className={FAVORITE_MOVERS_CONTENT_CLASSNAME}>
-          <FavoriteMoversLoadingSkeleton />
-        </div>
-      </div>
-    ) : null;
 
   return (
-    <RoleGuard allowedRole="CUSTOMER" loadingFallback={loadingFallback}>
+    <RoleGuard
+      allowedRole="CUSTOMER"
+      loadingFallback={getCustomerProtectedLoadingFallback(pathname)}
+    >
       {children}
     </RoleGuard>
   );
diff --git a/src/app/(mover)/(protected)/layout.tsx b/src/app/(mover)/(protected)/layout.tsx
index 89b81d8b..7ccb8dc4 100644
--- a/src/app/(mover)/(protected)/layout.tsx
+++ b/src/app/(mover)/(protected)/layout.tsx
@@ -1,13 +1,23 @@
+"use client";
+
 import type { ReactNode } from "react";
+import { usePathname } from "next/navigation";
 
 import RoleGuard from "@/components/auth/RoleGuard";
+import { getMoverProtectedLoadingFallback } from "@/lib/loading/getMoverProtectedLoadingFallback";
 
 interface MoverProtectedLayoutProps {
   children: ReactNode;
 }
 
 const MoverProtectedLayout = ({ children }: MoverProtectedLayoutProps) => {
-  return <RoleGuard allowedRole="MOVER">{children}</RoleGuard>;
+  const pathname = usePathname();
+
+  return (
+    <RoleGuard allowedRole="MOVER" loadingFallback={getMoverProtectedLoadingFallback(pathname)}>
+      {children}
+    </RoleGuard>
+  );
 };
 
 export default MoverProtectedLayout;
diff --git a/src/components/profile/CustomerProfileCreateView.tsx b/src/components/profile/CustomerProfileCreateView.tsx
index ba286af3..a04202d1 100644
--- a/src/components/profile/CustomerProfileCreateView.tsx
+++ b/src/components/profile/CustomerProfileCreateView.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import CustomerProfileForm from "@/components/profile/CustomerProfileForm";
+import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
 import { Text } from "@/components/common/Text";
 import { useCustomerAuthReady } from "@/hooks/useCustomerAuthReady";
 import { useCustomerProfileStatus } from "@/hooks/profile/useCustomerProfileStatus";
@@ -11,11 +12,11 @@ const CustomerProfileCreateView = () => {
 
   if (isAuthPending || isStatusPending) {
     return (
-      <div className="flex min-h-[40vh] items-center justify-center px-24">
-        <Text as="p" variant="md-medium" className="text-text-description">
-          프로필 정보를 불러오는 중입니다.
-        </Text>
-      </div>
+      <ProfileFormSkeleton
+        title="프로필 등록"
+        description="추가 정보를 입력하여 회원가입을 완료해주세요."
+        layout="single"
+      />
     );
   }
 
diff --git a/src/components/profile/CustomerProfileEditView.tsx b/src/components/profile/CustomerProfileEditView.tsx
index cfb103d8..a83bbc87 100644
--- a/src/components/profile/CustomerProfileEditView.tsx
+++ b/src/components/profile/CustomerProfileEditView.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import CustomerProfileEditForm from "@/components/profile/CustomerProfileEditForm";
+import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
 import { Text } from "@/components/common/Text";
 import { useCustomerAuthReady } from "@/hooks/useCustomerAuthReady";
 import { useCustomerProfileMe } from "@/hooks/profile/useCustomerProfileMe";
@@ -15,13 +16,7 @@ const CustomerProfileEditView = () => {
   } = useCustomerProfileMe(canFetch);
 
   if (isAuthPending || isProfilePending) {
-    return (
-      <div className="flex min-h-[40vh] items-center justify-center px-24">
-        <Text as="p" variant="md-medium" className="text-text-description">
-          프로필을 불러오는 중입니다.
-        </Text>
-      </div>
-    );
+    return <ProfileFormSkeleton title="프로필 수정" layout="twoColumn" />;
   }
 
   if (isError || !customerProfile) {
diff --git a/src/components/profile/MoverBasicInfoEditView.tsx b/src/components/profile/MoverBasicInfoEditView.tsx
index 6dd3343e..c4950e00 100644
--- a/src/components/profile/MoverBasicInfoEditView.tsx
+++ b/src/components/profile/MoverBasicInfoEditView.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import MoverBasicInfoEditForm from "@/components/profile/MoverBasicInfoEditForm";
+import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
 import { Text } from "@/components/common/Text";
 import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
 import { useMoverProfileMe } from "@/hooks/profile/useMoverProfileMe";
@@ -11,13 +12,7 @@ const MoverBasicInfoEditView = () => {
   const { data: moverProfile, isPending: isProfilePending, isError } = useMoverProfileMe(canFetch);
 
   if (isAuthPending || isProfilePending) {
-    return (
-      <div className="flex min-h-[40vh] items-center justify-center px-24">
-        <Text as="p" variant="md-medium" className="text-text-description">
-          기본정보를 불러오는 중입니다.
-        </Text>
-      </div>
-    );
+    return <ProfileFormSkeleton title="기본정보 수정" layout="twoColumn" />;
   }
 
   if (isError || !moverProfile) {
diff --git a/src/components/profile/MoverProfileCreateView.tsx b/src/components/profile/MoverProfileCreateView.tsx
index bf754c20..387bc7f5 100644
--- a/src/components/profile/MoverProfileCreateView.tsx
+++ b/src/components/profile/MoverProfileCreateView.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import MoverProfileForm from "@/components/profile/MoverProfileForm";
+import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
 import { Text } from "@/components/common/Text";
 import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
 import { useMoverProfileStatus } from "@/hooks/profile/useMoverProfileStatus";
@@ -11,11 +12,11 @@ const MoverProfileCreateView = () => {
 
   if (isAuthPending || isStatusPending) {
     return (
-      <div className="flex min-h-[40vh] items-center justify-center px-24">
-        <Text as="p" variant="md-medium" className="text-text-description">
-          프로필 정보를 불러오는 중입니다.
-        </Text>
-      </div>
+      <ProfileFormSkeleton
+        title="기사님 프로필 등록"
+        description="추가 정보를 입력하여 회원가입을 완료해주세요."
+        layout="twoColumn"
+      />
     );
   }
 
diff --git a/src/components/profile/MoverProfileEditView.tsx b/src/components/profile/MoverProfileEditView.tsx
index 8876e008..a767c682 100644
--- a/src/components/profile/MoverProfileEditView.tsx
+++ b/src/components/profile/MoverProfileEditView.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import MoverProfileEditForm from "@/components/profile/MoverProfileEditForm";
+import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
 import { Text } from "@/components/common/Text";
 import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
 import { useMoverProfileMe } from "@/hooks/profile/useMoverProfileMe";
@@ -11,13 +12,7 @@ const MoverProfileEditView = () => {
   const { data: moverProfile, isPending: isProfilePending, isError } = useMoverProfileMe(canFetch);
 
   if (isAuthPending || isProfilePending) {
-    return (
-      <div className="flex min-h-[40vh] items-center justify-center px-24">
-        <Text as="p" variant="md-medium" className="text-text-description">
-          프로필을 불러오는 중입니다.
-        </Text>
-      </div>
-    );
+    return <ProfileFormSkeleton title="프로필 수정" layout="twoColumn" />;
   }
 
   if (isError || !moverProfile) {
diff --git a/src/components/profile/ProfileFormSkeleton.tsx b/src/components/profile/ProfileFormSkeleton.tsx
new file mode 100644
index 00000000..12dd4ad4
--- /dev/null
+++ b/src/components/profile/ProfileFormSkeleton.tsx
@@ -0,0 +1,69 @@
+import { Skeleton } from "@/components/common/Skeleton/Skeleton";
+import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
+import { cn } from "@/lib/utils/cn";
+
+interface ProfileFormSkeletonProps {
+  title: string;
+  description?: string;
+  /** customer create: single, 그 외: twoColumn */
+  layout?: "single" | "twoColumn";
+}
+
+const FieldSkeleton = () => (
+  <div className="flex w-full flex-col gap-12">
+    <Skeleton className="h-20 w-80" />
+    <Skeleton className="rounded-16 h-64 w-full" />
+  </div>
+);
+
+/** 프로필 등록·수정 로딩 스켈레톤 (헤더는 실제 타이틀 유지) */
+const ProfileFormSkeleton = ({
+  title,
+  description,
+  layout = "twoColumn",
+}: ProfileFormSkeletonProps) => {
+  return (
+    <div
+      className={cn(
+        "px-margin-mobile mx-auto flex w-full flex-col gap-40 py-32 md:gap-48 md:px-72 md:py-40 lg:px-0 lg:pt-56 lg:pb-70",
+        layout === "single" ? "max-w-[640px]" : "max-w-[1120px]",
+      )}
+      aria-busy="true"
+      aria-live="polite"
+    >
+      <ProfilePageHeader title={title} description={description} />
+
+      <span className="sr-only">불러오는 중입니다.</span>
+
+      {layout === "single" ? (
+        <div className="flex w-full flex-col gap-32">
+          <FieldSkeleton />
+          <FieldSkeleton />
+          <FieldSkeleton />
+          <Skeleton className="rounded-16 h-64 w-full" />
+        </div>
+      ) : (
+        <>
+          <div className="flex w-full flex-col gap-32 lg:flex-row lg:items-start lg:justify-between lg:gap-[120px]">
+            <div className="flex w-full flex-col gap-32 lg:w-[500px]">
+              <FieldSkeleton />
+              <FieldSkeleton />
+              <FieldSkeleton />
+            </div>
+            <div className="flex w-full flex-col gap-32 lg:w-[500px]">
+              <FieldSkeleton />
+              <FieldSkeleton />
+              <FieldSkeleton />
+            </div>
+          </div>
+          <div className="flex w-full flex-col-reverse gap-8 md:flex-row md:justify-end md:gap-20">
+            <Skeleton className="rounded-16 h-64 w-full md:w-[240px]" />
+            <Skeleton className="rounded-16 h-64 w-full md:w-[240px]" />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ProfileFormSkeleton;
diff --git a/src/lib/loading/getCustomerProtectedLoadingFallback.tsx b/src/lib/loading/getCustomerProtectedLoadingFallback.tsx
new file mode 100644
index 00000000..83590de3
--- /dev/null
+++ b/src/lib/loading/getCustomerProtectedLoadingFallback.tsx
@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+
+import { PageHeader } from "@/components/common/PageHeader";
+import { FAVORITE_MOVERS_CONTENT_CLASSNAME } from "@/components/mover/favorites/FavoriteMoversContent";
+import FavoriteMoversLoadingSkeleton from "@/components/mover/favorites/FavoriteMoversLoadingSkeleton";
+import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
+import { APP_ROUTES } from "@/lib/constants/appRoutes";
+
+/** RoleGuard auth 대기 중 고객 protected layout용 로딩 UI
+ *
+ * pathname: 현재 페이지 경로
+ */
+export const getCustomerProtectedLoadingFallback = (pathname: string): ReactNode => {
+  if (pathname === APP_ROUTES.MOVERS.FAVORITES) {
+    return (
+      <div className="bg-background-subtle flex w-full flex-col">
+        <PageHeader title="찜한 기사님" />
+        <div className={FAVORITE_MOVERS_CONTENT_CLASSNAME}>
+          <FavoriteMoversLoadingSkeleton />
+        </div>
+      </div>
+    );
+  }
+
+  if (pathname === APP_ROUTES.PROFILE) {
+    return (
+      <ProfileFormSkeleton
+        title="프로필 등록"
+        description="추가 정보를 입력하여 회원가입을 완료해주세요."
+        layout="single"
+      />
+    );
+  }
+
+  if (pathname === APP_ROUTES.PROFILE_EDIT) {
+    return <ProfileFormSkeleton title="프로필 수정" layout="twoColumn" />;
+  }
+
+  return null;
+};
diff --git a/src/lib/loading/getMoverProtectedLoadingFallback.tsx b/src/lib/loading/getMoverProtectedLoadingFallback.tsx
new file mode 100644
index 00000000..8aab241c
--- /dev/null
+++ b/src/lib/loading/getMoverProtectedLoadingFallback.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
+import { APP_ROUTES } from "@/lib/constants/appRoutes";
+
+/** RoleGuard auth 대기 중 기사 protected layout용 로딩 UI
+ *
+ * pathname: 현재 페이지 경로
+ */
+export const getMoverProtectedLoadingFallback = (pathname: string): ReactNode => {
+  if (pathname === APP_ROUTES.MOVER_PROFILE) {
+    return (
+      <ProfileFormSkeleton
+        title="기사님 프로필 등록"
+        description="추가 정보를 입력하여 회원가입을 완료해주세요."
+        layout="twoColumn"
+      />
+    );
+  }
+
+  if (pathname === APP_ROUTES.MOVER_PROFILE_EDIT) {
+    return <ProfileFormSkeleton title="프로필 수정" layout="twoColumn" />;
+  }
+
+  if (pathname === APP_ROUTES.MOVER_BASIC_EDIT) {
+    return <ProfileFormSkeleton title="기본정보 수정" layout="twoColumn" />;
+  }
+
+  return null;
+};
diff --git a/src/styles/tokens.theme.css b/src/styles/tokens.theme.css
index 51d60633..f58ef3df 100644
--- a/src/styles/tokens.theme.css
+++ b/src/styles/tokens.theme.css
@@ -258,6 +258,7 @@
   --spacing-78: 4.875rem;
   --spacing-80: 5rem;
   --spacing-90: 5.625rem;
+  --spacing-100: 6.25rem;
   /* Toast Desktop top offset (Figma 103) */
   --spacing-103: 6.4375rem;
   --spacing-120: 7.5rem;

From b4c861a4dd5a3568da384ebddbe2b600be33020a Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Mon, 3 Aug 2026 23:57:29 +0900
Subject: [PATCH 08/18] =?UTF-8?q?feat:=20header=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=A0=81=EC=9A=A9,=20apiError=20=EC=9D=91=EB=8B=B5?=
 =?UTF-8?q?=20=EA=B5=AC=EC=A1=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header/Header.tsx       |  80 ++++++++--
 .../common/Header/HeaderSideNav.tsx           | 145 ++++++++++++++++++
 .../common/Header/ProfileMenuTrigger.tsx      |  10 +-
 .../notification/NotificationTrigger.tsx      |   2 +-
 src/lib/api/fetchInstance.ts                  |  16 +-
 src/lib/api/getApiError.ts                    |  22 ++-
 src/lib/api/getApiErrorMessage.ts             |  31 +++-
 src/lib/api/getValidationDataMessage.ts       |  27 ++++
 src/styles/tokens.theme.css                   |   1 +
 src/types/api.ts                              |  13 +-
 10 files changed, 309 insertions(+), 38 deletions(-)
 create mode 100644 src/components/common/Header/HeaderSideNav.tsx
 create mode 100644 src/lib/api/getValidationDataMessage.ts

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index cd32c999..0c845b9a 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -3,12 +3,15 @@
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useState } from "react";
 
 import NotificationTrigger from "@/components/common/Header/notification";
+import HeaderSideNav from "@/components/common/Header/HeaderSideNav";
 import ProfileMenuTrigger, {
   type ProfileMenuItem,
 } from "@/components/common/Header/ProfileMenuTrigger";
 import { Text } from "@/components/common/Text";
+import { MenuIcon } from "@/icons";
 import { getLoginRedirectPath } from "@/lib/auth/session";
 import type { AuthRole } from "@/lib/auth/role";
 import { loadRole } from "@/lib/auth/role";
@@ -43,7 +46,7 @@ const MOVER_PROFILE_MENU_ITEMS: ProfileMenuItem[] = [
 ];
 
 /** GNB 메뉴 활성 여부. 찜한 기사님(`/movers/favorites`)은 프로필 메뉴 항목이라 기사님 찾기 활성에서 제외 */
-function isNavLinkActive(pathname: string, href: string): boolean {
+const isNavLinkActive = (pathname: string, href: string): boolean => {
   if (pathname === href) {
     return true;
   }
@@ -60,7 +63,7 @@ function isNavLinkActive(pathname: string, href: string): boolean {
   }
 
   return true;
-}
+};
 
 export interface HeaderProps {
   /** Server에서 refresh 쿠키로 전달. hydrate 전 깜빡임 방지용 */
@@ -77,6 +80,15 @@ const Header = ({
   initialRole = null,
 }: HeaderProps) => {
   const pathname = usePathname();
+  const [isSideNavOpen, setIsSideNavOpen] = useState(false);
+  const [sideNavPathname, setSideNavPathname] = useState(pathname);
+
+  if (pathname !== sideNavPathname) {
+    setSideNavPathname(pathname);
+    if (isSideNavOpen) {
+      setIsSideNavOpen(false);
+    }
+  }
 
   const user = useAuthStore((state) => state.user);
   const displayName = useAuthStore((state) => state.displayName);
@@ -94,21 +106,34 @@ const Header = ({
     : resolvedRole === "MOVER"
       ? MOVER_LOGGED_IN_LINKS
       : CUSTOMER_LOGGED_IN_LINKS;
+  const sideNavLinks = !isLogin
+    ? [...LOGGED_OUT_LINKS, { label: "로그인", href: getLoginRedirectPath() }]
+    : navLinks;
   const profileMenuItems =
     resolvedRole === "MOVER" ? MOVER_PROFILE_MENU_ITEMS : CUSTOMER_PROFILE_MENU_ITEMS;
   // hydrate/checkAuth 전·SSR 비로그인 힌트면 스켈레톤
   const showAuthSkeleton = (!hasHydrated || isCheckingAuth) && !initialIsLogin;
   const nickname = user?.name ?? displayName ?? initialNickname ?? "닉네임";
 
+  const openSideNav = () => setIsSideNavOpen(true);
+  const closeSideNav = () => setIsSideNavOpen(false);
+
   return (
     <header className="border-border-subtle bg-background-surface w-full border-b">
-      <div className="h-gnb-height-desktop px-gnb-padding-x-desktop flex items-center justify-between py-26">
+      <div className="h-gnb-height-mobile md:h-gnb-height-tablet lg:h-gnb-height-desktop px-margin-mobile md:px-margin-tablet lg:px-gnb-padding-x-desktop flex items-center justify-between py-10 lg:py-26">
         <div className="flex items-center gap-80">
           <Link href="/" className="shrink-0">
-            <Image src="/icons/logo_full.svg" alt="4roro-moving" width={116} height={44} priority />
+            <Image
+              src="/icons/logo_full.svg"
+              alt="4roro-moving"
+              width={116}
+              height={44}
+              priority
+              className="h-[34px] w-[88px] lg:h-44 lg:w-[116px]"
+            />
           </Link>
 
-          <nav aria-label="주요 메뉴">
+          <nav className="hidden lg:block" aria-label="주요 메뉴">
             <ul className="flex items-center gap-40">
               {navLinks.map((link) => {
                 const isActive = isNavLinkActive(pathname, link.href);
@@ -135,15 +160,16 @@ const Header = ({
         </div>
 
         {showAuthSkeleton ? (
-          <div className="flex items-center gap-32" aria-hidden>
-            <div className="bg-background-subtle size-36 animate-pulse rounded-full" />
+          <div className="flex items-center gap-24 lg:gap-32" aria-hidden>
+            <div className="bg-background-subtle size-24 animate-pulse rounded-full lg:size-36" />
             <div className="flex items-center gap-16">
-              <div className="bg-background-subtle size-36 animate-pulse rounded-full" />
-              <div className="bg-background-subtle rounded-4 h-20 w-64 animate-pulse" />
+              <div className="bg-background-subtle size-24 animate-pulse rounded-full lg:size-36" />
+              <div className="bg-background-subtle rounded-4 hidden h-20 w-64 animate-pulse lg:block" />
             </div>
+            <div className="bg-background-subtle rounded-4 size-24 animate-pulse lg:hidden" />
           </div>
         ) : isLogin ? (
-          <div className="flex items-center gap-32">
+          <div className="flex items-center gap-24 lg:gap-32">
             <NotificationTrigger />
             <ProfileMenuTrigger
               key={pathname}
@@ -151,16 +177,38 @@ const Header = ({
               items={profileMenuItems}
               role={resolvedRole}
             />
+            <button
+              type="button"
+              className="text-icon-default focus-visible:ring-border-brand rounded-4 flex size-24 items-center justify-center focus-visible:ring-2 focus-visible:outline-none lg:hidden"
+              aria-label="메뉴 열기"
+              aria-expanded={isSideNavOpen}
+              onClick={openSideNav}
+            >
+              <MenuIcon aria-hidden="true" className="size-24" />
+            </button>
           </div>
         ) : (
-          <Link
-            href={getLoginRedirectPath()}
-            className="bg-background-brand text-text-inverse hover:bg-background-brand-hover rounded-8 flex h-40 items-center px-20 transition-colors"
-          >
-            <Text variant="md-semibold">로그인</Text>
-          </Link>
+          <div className="flex items-center">
+            <Link
+              href={getLoginRedirectPath()}
+              className="bg-background-brand text-text-inverse hover:bg-background-brand-hover rounded-8 hidden h-40 items-center px-20 transition-colors lg:flex"
+            >
+              <Text variant="md-semibold">로그인</Text>
+            </Link>
+            <button
+              type="button"
+              className="text-icon-default focus-visible:ring-border-brand rounded-4 flex size-24 items-center justify-center focus-visible:ring-2 focus-visible:outline-none lg:hidden"
+              aria-label="메뉴 열기"
+              aria-expanded={isSideNavOpen}
+              onClick={openSideNav}
+            >
+              <MenuIcon aria-hidden="true" className="size-24" />
+            </button>
+          </div>
         )}
       </div>
+
+      <HeaderSideNav isOpen={isSideNavOpen} onClose={closeSideNav} links={sideNavLinks} />
     </header>
   );
 };
diff --git a/src/components/common/Header/HeaderSideNav.tsx b/src/components/common/Header/HeaderSideNav.tsx
new file mode 100644
index 00000000..48854929
--- /dev/null
+++ b/src/components/common/Header/HeaderSideNav.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useId, useRef } from "react";
+import { createPortal } from "react-dom";
+
+import { Text } from "@/components/common/Text";
+import { CloseIcon } from "@/icons";
+import { APP_ROUTES } from "@/lib/constants/appRoutes";
+import { cn } from "@/lib/utils/cn";
+
+export interface HeaderSideNavLink {
+  label: string;
+  href: string;
+}
+
+interface HeaderSideNavProps {
+  isOpen: boolean;
+  onClose: () => void;
+  links: HeaderSideNavLink[];
+}
+
+const isNavLinkActive = (pathname: string, href: string): boolean => {
+  if (pathname === href) {
+    return true;
+  }
+
+  if (!pathname.startsWith(`${href}/`)) {
+    return false;
+  }
+
+  if (href === APP_ROUTES.MOVERS.ROOT) {
+    const favoritesPath = APP_ROUTES.MOVERS.FAVORITES;
+    if (pathname === favoritesPath || pathname.startsWith(`${favoritesPath}/`)) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+/** tablet·mobile GNB 사이드 네비게이션 (오른쪽 슬라이드) */
+const HeaderSideNav = ({ isOpen, onClose, links }: HeaderSideNavProps) => {
+  const pathname = usePathname();
+  const titleId = useId();
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const previousOverflow = document.body.style.overflow;
+    const previousPaddingRight = document.body.style.paddingRight;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    if (scrollbarWidth > 0) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+
+    closeButtonRef.current?.focus();
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.body.style.paddingRight = previousPaddingRight;
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, onClose]);
+
+  if (typeof document === "undefined" || !isOpen) {
+    return null;
+  }
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100] lg:hidden" role="presentation">
+      <button
+        type="button"
+        className="bg-overlay-scrim absolute inset-0"
+        aria-label="메뉴 닫기"
+        onClick={onClose}
+      />
+
+      <nav
+        className="bg-background-surface absolute inset-y-0 right-0 flex w-[220px] flex-col"
+        aria-labelledby={titleId}
+        aria-modal="true"
+        role="dialog"
+      >
+        <div className="border-border-subtle h-gnb-height-mobile flex items-center justify-end border-b px-16 py-10">
+          <h2 id={titleId} className="sr-only">
+            메뉴
+          </h2>
+          <button
+            ref={closeButtonRef}
+            type="button"
+            aria-label="메뉴 닫기"
+            className="text-icon-default focus-visible:ring-border-brand rounded-4 flex size-24 items-center justify-center focus-visible:ring-2 focus-visible:outline-none"
+            onClick={onClose}
+          >
+            <CloseIcon aria-hidden="true" className="size-24" />
+          </button>
+        </div>
+
+        <ul className="flex flex-col">
+          {links.map((link) => {
+            const isActive = isNavLinkActive(pathname, link.href);
+
+            return (
+              <li key={link.href}>
+                <Link
+                  href={link.href}
+                  aria-current={isActive ? "page" : undefined}
+                  className={cn(
+                    "flex items-center px-20 py-24 transition-colors",
+                    isActive
+                      ? "text-nav-text-active"
+                      : "text-text-primary hover:text-nav-text-active",
+                  )}
+                  onClick={onClose}
+                >
+                  <Text as="span" variant="lg-medium">
+                    {link.label}
+                  </Text>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+    </div>,
+    document.body,
+  );
+};
+
+export default HeaderSideNav;
diff --git a/src/components/common/Header/ProfileMenuTrigger.tsx b/src/components/common/Header/ProfileMenuTrigger.tsx
index b7d2e7de..fcff3562 100644
--- a/src/components/common/Header/ProfileMenuTrigger.tsx
+++ b/src/components/common/Header/ProfileMenuTrigger.tsx
@@ -132,8 +132,14 @@ export default function ProfileMenuTrigger({
         className="focus-visible:ring-border-brand rounded-8 flex items-center gap-16 focus-visible:ring-2 focus-visible:outline-none"
         onClick={() => setIsOpen((open) => !open)}
       >
-        <Image src="/icons/profile-default.svg" alt="" width={36} height={36} />
-        <Text as="span" variant="2lg-medium" className="text-text-primary">
+        <Image
+          src="/icons/profile-default.svg"
+          alt=""
+          width={36}
+          height={36}
+          className="size-24 lg:size-36"
+        />
+        <Text as="span" variant="2lg-medium" className="text-text-primary max-lg:hidden">
           {nickname}
         </Text>
       </button>
diff --git a/src/components/common/Header/notification/NotificationTrigger.tsx b/src/components/common/Header/notification/NotificationTrigger.tsx
index da71fadc..2da58a50 100644
--- a/src/components/common/Header/notification/NotificationTrigger.tsx
+++ b/src/components/common/Header/notification/NotificationTrigger.tsx
@@ -41,7 +41,7 @@ export default function NotificationTrigger() {
         className="relative flex size-36 items-center justify-center"
         onClick={() => setIsOpen((prev) => !prev)}
       >
-        <AlarmIcon className="text-icon-subtle size-32 shrink-0" />
+        <AlarmIcon className="text-icon-subtle size-24 shrink-0 lg:size-32" />
         {unreadCount > 0 ? (
           <Text
             as="span"
diff --git a/src/lib/api/fetchInstance.ts b/src/lib/api/fetchInstance.ts
index b91d16d9..284052ef 100644
--- a/src/lib/api/fetchInstance.ts
+++ b/src/lib/api/fetchInstance.ts
@@ -49,20 +49,18 @@ const setApiError = (status: number, body: unknown): ApiError => {
   const record = typeof body === "object" && body !== null ? (body as Record<string, unknown>) : {};
 
   const errorInfo = "error" in record ? (record.error as ApiErrorResponse["error"]) : undefined;
-  const debugInfo =
-    "path" in record
-      ? {
-          path: record.path as string | undefined,
-          method: record.method as string | undefined,
-          timestamp: record.timestamp as string | undefined,
-        }
-      : undefined;
+  const data = {
+    details: errorInfo?.data,
+    path: record.path as string | undefined,
+    method: record.method as string | undefined,
+    timestamp: record.timestamp as string | undefined,
+  };
 
   return new ApiError(
     errorInfo?.message ?? "알 수 없는 오류가 발생했습니다.",
     status,
     errorInfo?.code,
-    debugInfo,
+    data,
   );
 };
 
diff --git a/src/lib/api/getApiError.ts b/src/lib/api/getApiError.ts
index f4f773e8..03818c9f 100644
--- a/src/lib/api/getApiError.ts
+++ b/src/lib/api/getApiError.ts
@@ -1,5 +1,6 @@
 import { isAxiosError } from "axios";
 
+import { getValidationDataMessage } from "@/lib/api/getValidationDataMessage";
 import { ApiError } from "@/types/api";
 
 export interface ApiErrorBody {
@@ -7,23 +8,34 @@ export interface ApiErrorBody {
   error?: {
     code?: string;
     message?: string;
+    data?: unknown;
   };
   message?: string;
 }
 
 /** Axios / ApiError / Error에서 백엔드 공통 에러 형식({ error: { code, message } })을 꺼냅니다. */
-export function getApiError(error: unknown): { code?: string; message?: string } {
+export const getApiError = (error: unknown): { code?: string; message?: string } => {
   if (error instanceof ApiError) {
+    const validationMessage =
+      error.code === "VALIDATION_ERROR" ? getValidationDataMessage(error.data?.details) : undefined;
+
     return {
       code: error.code,
-      message: error.message,
+      message: validationMessage ?? error.message,
     };
   }
 
   if (isAxiosError<ApiErrorBody>(error)) {
+    const code = error.response?.data?.error?.code;
+    const validationMessage =
+      code === "VALIDATION_ERROR"
+        ? getValidationDataMessage(error.response?.data?.error?.data)
+        : undefined;
+
     return {
-      code: error.response?.data?.error?.code,
-      message: error.response?.data?.error?.message ?? error.response?.data?.message,
+      code,
+      message:
+        validationMessage ?? error.response?.data?.error?.message ?? error.response?.data?.message,
     };
   }
 
@@ -32,4 +44,4 @@ export function getApiError(error: unknown): { code?: string; message?: string }
   }
 
   return {};
-}
+};
diff --git a/src/lib/api/getApiErrorMessage.ts b/src/lib/api/getApiErrorMessage.ts
index 67f2635d..d25996e4 100644
--- a/src/lib/api/getApiErrorMessage.ts
+++ b/src/lib/api/getApiErrorMessage.ts
@@ -1,8 +1,33 @@
 import axios from "axios";
 
-export function getApiErrorMessage(error: unknown, fallback = "요청에 실패했습니다."): string {
+import { getValidationDataMessage } from "@/lib/api/getValidationDataMessage";
+import { ApiError } from "@/types/api";
+
+export const getApiErrorMessage = (error: unknown, fallback = "요청에 실패했습니다."): string => {
+  if (error instanceof ApiError) {
+    if (error.code === "VALIDATION_ERROR") {
+      const fromDetails = getValidationDataMessage(error.data?.details);
+      if (fromDetails) {
+        return fromDetails;
+      }
+    }
+
+    if (error.message.trim()) {
+      return error.message;
+    }
+  }
+
   if (axios.isAxiosError(error)) {
-    const message = error.response?.data?.error?.message;
+    const body = error.response?.data;
+    const code = body?.error?.code;
+    if (code === "VALIDATION_ERROR") {
+      const fromDetails = getValidationDataMessage(body?.error?.data);
+      if (fromDetails) {
+        return fromDetails;
+      }
+    }
+
+    const message = body?.error?.message;
     if (typeof message === "string" && message.trim()) {
       return message;
     }
@@ -13,4 +38,4 @@ export function getApiErrorMessage(error: unknown, fallback = "요청에 실패
   }
 
   return fallback;
-}
+};
diff --git a/src/lib/api/getValidationDataMessage.ts b/src/lib/api/getValidationDataMessage.ts
new file mode 100644
index 00000000..33f986ad
--- /dev/null
+++ b/src/lib/api/getValidationDataMessage.ts
@@ -0,0 +1,27 @@
+/** BE VALIDATION_ERROR의 `error.data`에서 화면용 메시지를 추출합니다. */
+export const getValidationDataMessage = (details: unknown): string | undefined => {
+  if (typeof details === "object" && details !== null && !Array.isArray(details)) {
+    const message = (details as { message?: unknown }).message;
+    if (typeof message === "string" && message.trim()) {
+      return message;
+    }
+  }
+
+  if (Array.isArray(details)) {
+    const messages = details
+      .map((item) => {
+        if (typeof item === "object" && item !== null) {
+          const message = (item as { message?: unknown }).message;
+          return typeof message === "string" ? message.trim() : "";
+        }
+        return "";
+      })
+      .filter(Boolean);
+
+    if (messages.length > 0) {
+      return messages.join("\n");
+    }
+  }
+
+  return undefined;
+};
diff --git a/src/styles/tokens.theme.css b/src/styles/tokens.theme.css
index f58ef3df..47a91dfc 100644
--- a/src/styles/tokens.theme.css
+++ b/src/styles/tokens.theme.css
@@ -261,6 +261,7 @@
   --spacing-100: 6.25rem;
   /* Toast Desktop top offset (Figma 103) */
   --spacing-103: 6.4375rem;
+  --spacing-104: 6.5rem;
   --spacing-120: 7.5rem;
   /* 2026.07.25 정슬기 - [추가] Figma Desktop sub-header height 124 / Tablet 202 */
   --spacing-124: 7.75rem;
diff --git a/src/types/api.ts b/src/types/api.ts
index aad583c9..b5a58af7 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -6,11 +6,20 @@ export interface ApiSuccessResponse<T> {
   data: T;
 }
 
+export interface ApiErrorData {
+  /** BE `error.data` (zod issues 배열 등) */
+  details?: unknown;
+  path?: string;
+  method?: string;
+  timestamp?: string;
+}
+
 export interface ApiErrorResponse {
   success: false;
   error: {
     code: ErrorCode;
     message: string;
+    data?: unknown;
   };
   path?: string;
   method?: string;
@@ -20,9 +29,9 @@ export interface ApiErrorResponse {
 export class ApiError extends Error {
   status?: number;
   code?: ErrorCode;
-  data?: unknown; // path/method/timestamp 등 디버깅용 정보
+  data?: ApiErrorData;
 
-  constructor(message: string, status?: number, code?: ErrorCode, data?: unknown) {
+  constructor(message: string, status?: number, code?: ErrorCode, data?: ApiErrorData) {
     super(message);
     this.name = "ApiError";
     this.status = status;

From 4b0472552b8f9baa944eb9aa3c308a04ce130b42 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Tue, 4 Aug 2026 10:18:19 +0900
Subject: [PATCH 09/18] =?UTF-8?q?feat:=20customer=20basic=20info=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../profile/CustomerProfileEditForm.tsx       | 53 +++++++++++---
 .../profile/useUpdateCustomerBasicInfo.ts     | 20 +++++
 src/lib/api/profile.ts                        |  8 ++
 src/lib/constants/apiRoutes.ts                |  1 +
 .../buildCustomerProfileEditPayloads.ts       | 73 +++++++++++++++++++
 src/types/profile.ts                          |  7 +-
 6 files changed, 151 insertions(+), 11 deletions(-)
 create mode 100644 src/hooks/profile/useUpdateCustomerBasicInfo.ts
 create mode 100644 src/lib/profile/buildCustomerProfileEditPayloads.ts

diff --git a/src/components/profile/CustomerProfileEditForm.tsx b/src/components/profile/CustomerProfileEditForm.tsx
index 5368849e..3476cfd5 100644
--- a/src/components/profile/CustomerProfileEditForm.tsx
+++ b/src/components/profile/CustomerProfileEditForm.tsx
@@ -12,19 +12,23 @@ import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
 import ProfileFormActions from "@/components/profile/ProfileFormActions";
 import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
 import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
+import { useUpdateCustomerBasicInfo } from "@/hooks/profile/useUpdateCustomerBasicInfo";
 import { useUpdateCustomerProfile } from "@/hooks/profile/useUpdateCustomerProfile";
 import { getApiErrorMessage } from "@/lib/api/getApiErrorMessage";
 import { MOVE_TYPE_OPTIONS } from "@/lib/constants/moveType";
 import { REGION_OPTIONS, type RegionId } from "@/lib/constants/region";
+import { buildCustomerProfileEditPayloads } from "@/lib/profile/buildCustomerProfileEditPayloads";
 import { uploadProfileImageIfNeeded } from "@/lib/profile/uploadProfileImage";
 import {
   customerProfileEditSchema,
   type CustomerProfileEditFormValues,
 } from "@/lib/schemas/customerProfileEditSchema";
-import { toPasswordChangePayload } from "@/lib/schemas/passwordChangeFields";
 import { ApiError } from "@/types/api";
 import type { MoveType } from "@/types/move";
 
+const PROFILE_PARTIAL_SAVE_ERROR =
+  "기본정보는 저장되었지만 프로필 정보 저장에 실패했습니다. 다시 시도해 주세요.";
+
 interface CustomerProfileEditFormProps {
   email: string;
   hasPassword: boolean;
@@ -38,6 +42,7 @@ const CustomerProfileEditForm = ({
   defaultValues,
   initialImageUrl = null,
 }: CustomerProfileEditFormProps) => {
+  const updateCustomerBasicInfo = useUpdateCustomerBasicInfo();
   const updateCustomerProfile = useUpdateCustomerProfile();
   const [submitError, setSubmitError] = useState<string | null>(null);
 
@@ -64,7 +69,8 @@ const CustomerProfileEditForm = ({
     },
   });
 
-  const isPending = isSubmitting || updateCustomerProfile.isPending;
+  const isPending =
+    isSubmitting || updateCustomerBasicInfo.isPending || updateCustomerProfile.isPending;
 
   const onSubmit = handleSubmit(async (formValues) => {
     setSubmitError(null);
@@ -76,15 +82,42 @@ const CustomerProfileEditForm = ({
       }
 
       const imageUrl = await uploadProfileImageIfNeeded(formValues.imageFile);
-
-      await updateCustomerProfile.mutateAsync({
-        name: formValues.name,
-        phone: formValues.phone,
-        ...(hasPassword ? toPasswordChangePayload(formValues) : {}),
-        regionIds: [formValues.regionId],
-        serviceTypes: formValues.serviceTypes,
-        ...(imageUrl ? { imageUrl } : {}),
+      const { basic, profile } = buildCustomerProfileEditPayloads({
+        formValues,
+        initial: {
+          name: defaultValues?.name ?? "",
+          phone: defaultValues?.phone ?? "",
+          regionId: defaultValues?.regionId ?? null,
+          serviceTypes: defaultValues?.serviceTypes ?? [],
+        },
+        hasPassword,
+        uploadedImageUrl: imageUrl,
       });
+
+      if (!basic && !profile) {
+        setSubmitError("변경된 정보가 없습니다.");
+        return;
+      }
+
+      let didBasicSucceed = false;
+
+      if (basic) {
+        await updateCustomerBasicInfo.mutateAsync(basic);
+        didBasicSucceed = true;
+      }
+
+      if (profile) {
+        try {
+          await updateCustomerProfile.mutateAsync(profile);
+        } catch (profileError) {
+          if (didBasicSucceed) {
+            setSubmitError(PROFILE_PARTIAL_SAVE_ERROR);
+            return;
+          }
+
+          throw profileError;
+        }
+      }
     } catch (error) {
       if (
         error instanceof ApiError &&
diff --git a/src/hooks/profile/useUpdateCustomerBasicInfo.ts b/src/hooks/profile/useUpdateCustomerBasicInfo.ts
new file mode 100644
index 00000000..f5ea3a49
--- /dev/null
+++ b/src/hooks/profile/useUpdateCustomerBasicInfo.ts
@@ -0,0 +1,20 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useApiMutation } from "@/hooks/queries/useApiMutation";
+import { updateCustomerBasicInfo } from "@/lib/api/profile";
+import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+import type { UpdateCustomerBasicInfoInput } from "@/types/profile";
+
+export const useUpdateCustomerBasicInfo = () => {
+  const queryClient = useQueryClient();
+
+  return useApiMutation({
+    mutationFn: (input: UpdateCustomerBasicInfoInput) => updateCustomerBasicInfo(input),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.CUSTOMER_ME }),
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.CUSTOMER_STATUS }),
+      ]);
+    },
+  });
+};
diff --git a/src/lib/api/profile.ts b/src/lib/api/profile.ts
index 1db76f25..02d815b5 100644
--- a/src/lib/api/profile.ts
+++ b/src/lib/api/profile.ts
@@ -10,6 +10,7 @@ import type {
   MoverProfileMe,
   MoverProfileMeResponse,
   ProfileStatus,
+  UpdateCustomerBasicInfoInput,
   UpdateCustomerProfileInput,
   UpdateMoverBasicInfoInput,
   UpdateMoverProfileInput,
@@ -23,6 +24,7 @@ export type {
   MoverProfileMe,
   MoverProfileMeResponse,
   ProfileStatus,
+  UpdateCustomerBasicInfoInput,
   UpdateCustomerProfileInput,
   UpdateMoverBasicInfoInput,
   UpdateMoverProfileInput,
@@ -70,6 +72,12 @@ export const createCustomerProfile = (input: CreateCustomerProfileInput) =>
     input,
   );
 
+export const updateCustomerBasicInfo = (input: UpdateCustomerBasicInfoInput) =>
+  fetchInstance.patch<CustomerProfileMeResponse, UpdateCustomerBasicInfoInput>(
+    API_ROUTES.PROFILES.CUSTOMER_BASIC,
+    input,
+  );
+
 export const updateCustomerProfile = (input: UpdateCustomerProfileInput) =>
   fetchInstance.patch<CustomerProfileMeResponse, UpdateCustomerProfileInput>(
     API_ROUTES.PROFILES.CUSTOMER_ME,
diff --git a/src/lib/constants/apiRoutes.ts b/src/lib/constants/apiRoutes.ts
index 3cb993f7..54f202a4 100644
--- a/src/lib/constants/apiRoutes.ts
+++ b/src/lib/constants/apiRoutes.ts
@@ -20,6 +20,7 @@ export const API_ROUTES = {
     CUSTOMER: "/profiles/customer",
     CUSTOMER_STATUS: "/profiles/customer/status",
     CUSTOMER_ME: "/profiles/customer/me",
+    CUSTOMER_BASIC: "/profiles/customer/me/basic",
     MOVER: "/profiles/mover",
     MOVER_STATUS: "/profiles/mover/status",
     MOVER_ME: "/profiles/mover/me",
diff --git a/src/lib/profile/buildCustomerProfileEditPayloads.ts b/src/lib/profile/buildCustomerProfileEditPayloads.ts
new file mode 100644
index 00000000..38728b56
--- /dev/null
+++ b/src/lib/profile/buildCustomerProfileEditPayloads.ts
@@ -0,0 +1,73 @@
+import type { CustomerProfileEditFormValues } from "@/lib/schemas/customerProfileEditSchema";
+import { toPasswordChangePayload } from "@/lib/schemas/passwordChangeFields";
+import type { MoveType } from "@/types/move";
+import type { UpdateCustomerBasicInfoInput, UpdateCustomerProfileInput } from "@/types/profile";
+
+interface BuildCustomerProfileEditPayloadsParams {
+  formValues: CustomerProfileEditFormValues;
+  initial: {
+    name: string;
+    phone: string;
+    regionId: number | null;
+    serviceTypes: MoveType[];
+  };
+  hasPassword: boolean;
+  /** 새로 업로드된 URL. 없으면 이미지 미변경 */
+  uploadedImageUrl?: string;
+}
+
+const areSameServiceTypes = (left: MoveType[], right: MoveType[]) => {
+  if (left.length !== right.length) {
+    return false;
+  }
+
+  const sortedLeft = [...left].sort();
+  const sortedRight = [...right].sort();
+
+  return sortedLeft.every((value, index) => value === sortedRight[index]);
+};
+
+/** 고객 프로필 수정 폼 값에서 basic / profile PATCH 변경분만 만듭니다. */
+export const buildCustomerProfileEditPayloads = ({
+  formValues,
+  initial,
+  hasPassword,
+  uploadedImageUrl,
+}: BuildCustomerProfileEditPayloadsParams) => {
+  const basic: UpdateCustomerBasicInfoInput = {};
+
+  if (formValues.name.trim() !== initial.name.trim()) {
+    basic.name = formValues.name.trim();
+  }
+
+  // phone은 UI에서 disabled — 값이 바뀌지 않는 한 payload에 넣지 않음
+  if (formValues.phone !== initial.phone) {
+    basic.phone = formValues.phone;
+  }
+
+  if (hasPassword) {
+    Object.assign(basic, toPasswordChangePayload(formValues));
+  }
+
+  const profile: UpdateCustomerProfileInput = {};
+
+  if (formValues.regionId !== null && formValues.regionId !== initial.regionId) {
+    profile.regionIds = [formValues.regionId];
+  }
+
+  if (!areSameServiceTypes(formValues.serviceTypes, initial.serviceTypes)) {
+    profile.serviceTypes = formValues.serviceTypes;
+  }
+
+  if (uploadedImageUrl) {
+    profile.imageUrl = uploadedImageUrl;
+  }
+
+  const hasBasicUpdate = Object.keys(basic).length > 0;
+  const hasProfileUpdate = Object.keys(profile).length > 0;
+
+  return {
+    basic: hasBasicUpdate ? basic : null,
+    profile: hasProfileUpdate ? profile : null,
+  };
+};
diff --git a/src/types/profile.ts b/src/types/profile.ts
index fd78d389..e0a062e3 100644
--- a/src/types/profile.ts
+++ b/src/types/profile.ts
@@ -68,12 +68,17 @@ export interface CreateCustomerProfileInput {
   serviceTypes: MoveType[];
 }
 
-export interface UpdateCustomerProfileInput {
+/** PATCH /profiles/customer/me/basic */
+export interface UpdateCustomerBasicInfoInput {
   name?: string;
   phone?: string;
   currentPassword?: string;
   newPassword?: string;
   newPasswordConfirm?: string;
+}
+
+/** PATCH /profiles/customer/me */
+export interface UpdateCustomerProfileInput {
   imageUrl?: string | null;
   regionIds?: number[];
   serviceTypes?: MoveType[];

From fb1d407b40e61a4a2cf10b074fbadb881e240368 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Tue, 4 Aug 2026 10:48:55 +0900
Subject: [PATCH 10/18] =?UTF-8?q?fix:=20header=20focus=20trap,=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EC=88=98=EC=A0=95=20=EC=8B=9C=20toast=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80,=20=EC=A0=84=ED=99=94=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=EA=B2=80=EC=A6=9D=20=EB=8A=90=EC=8A=A8=ED=95=98=EA=B2=8C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header/Header.tsx       | 13 ++++-
 .../common/Header/HeaderSideNav.tsx           | 56 +++++++++++++++++++
 .../profile/CustomerProfileEditForm.tsx       | 14 +++++
 .../profile/MoverBasicInfoEditForm.tsx        | 15 +++--
 .../profile/MoverProfileEditForm.tsx          | 21 +++++++
 src/components/profile/MoverProfileForm.tsx   | 35 ++++++++----
 .../profile/useUpdateCustomerBasicInfo.ts     | 13 ++++-
 src/hooks/profile/useUpdateMoverBasicInfo.ts  | 13 ++++-
 src/lib/schemas/customerProfileEditSchema.ts  | 10 ++--
 src/lib/schemas/customerProfileSchema.ts      |  8 +--
 src/lib/schemas/moverBasicInfoEditSchema.ts   |  8 +--
 src/lib/schemas/moverProfileSchema.ts         |  9 +--
 src/lib/schemas/phoneSchema.ts                | 17 ++++++
 13 files changed, 187 insertions(+), 45 deletions(-)
 create mode 100644 src/lib/schemas/phoneSchema.ts

diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 0c845b9a..2a6c3322 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -3,7 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import NotificationTrigger from "@/components/common/Header/notification";
 import HeaderSideNav from "@/components/common/Header/HeaderSideNav";
@@ -82,6 +82,8 @@ const Header = ({
   const pathname = usePathname();
   const [isSideNavOpen, setIsSideNavOpen] = useState(false);
   const [sideNavPathname, setSideNavPathname] = useState(pathname);
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
+  const wasSideNavOpenRef = useRef(false);
 
   if (pathname !== sideNavPathname) {
     setSideNavPathname(pathname);
@@ -90,6 +92,13 @@ const Header = ({
     }
   }
 
+  useEffect(() => {
+    if (wasSideNavOpenRef.current && !isSideNavOpen) {
+      menuButtonRef.current?.focus();
+    }
+    wasSideNavOpenRef.current = isSideNavOpen;
+  }, [isSideNavOpen]);
+
   const user = useAuthStore((state) => state.user);
   const displayName = useAuthStore((state) => state.displayName);
   const hasHydrated = useAuthStore((state) => state.hasHydrated);
@@ -178,6 +187,7 @@ const Header = ({
               role={resolvedRole}
             />
             <button
+              ref={menuButtonRef}
               type="button"
               className="text-icon-default focus-visible:ring-border-brand rounded-4 flex size-24 items-center justify-center focus-visible:ring-2 focus-visible:outline-none lg:hidden"
               aria-label="메뉴 열기"
@@ -196,6 +206,7 @@ const Header = ({
               <Text variant="md-semibold">로그인</Text>
             </Link>
             <button
+              ref={menuButtonRef}
               type="button"
               className="text-icon-default focus-visible:ring-border-brand rounded-4 flex size-24 items-center justify-center focus-visible:ring-2 focus-visible:outline-none lg:hidden"
               aria-label="메뉴 열기"
diff --git a/src/components/common/Header/HeaderSideNav.tsx b/src/components/common/Header/HeaderSideNav.tsx
index 48854929..8f0c36f2 100644
--- a/src/components/common/Header/HeaderSideNav.tsx
+++ b/src/components/common/Header/HeaderSideNav.tsx
@@ -21,6 +21,11 @@ interface HeaderSideNavProps {
   links: HeaderSideNavLink[];
 }
 
+const DESKTOP_MEDIA_QUERY = "(min-width: 1024px)";
+
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
 const isNavLinkActive = (pathname: string, href: string): boolean => {
   if (pathname === href) {
     return true;
@@ -44,8 +49,30 @@ const isNavLinkActive = (pathname: string, href: string): boolean => {
 const HeaderSideNav = ({ isOpen, onClose, links }: HeaderSideNavProps) => {
   const pathname = usePathname();
   const titleId = useId();
+  const panelRef = useRef<HTMLElement>(null);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
 
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia(DESKTOP_MEDIA_QUERY);
+    const handleDesktopChange = (event: MediaQueryListEvent) => {
+      if (event.matches) {
+        onClose();
+      }
+    };
+
+    if (mediaQuery.matches) {
+      onClose();
+      return;
+    }
+
+    mediaQuery.addEventListener("change", handleDesktopChange);
+    return () => mediaQuery.removeEventListener("change", handleDesktopChange);
+  }, [isOpen, onClose]);
+
   useEffect(() => {
     if (!isOpen) {
       return;
@@ -65,6 +92,34 @@ const HeaderSideNav = ({ isOpen, onClose, links }: HeaderSideNavProps) => {
       if (event.key === "Escape") {
         event.preventDefault();
         onClose();
+        return;
+      }
+
+      if (event.key !== "Tab" || !panelRef.current) {
+        return;
+      }
+
+      const focusable = Array.from(
+        panelRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+      ).filter((element) => !element.hasAttribute("disabled") && element.tabIndex !== -1);
+
+      if (focusable.length === 0) {
+        return;
+      }
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+
+      if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last?.focus();
+        return;
+      }
+
+      if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first?.focus();
       }
     };
 
@@ -91,6 +146,7 @@ const HeaderSideNav = ({ isOpen, onClose, links }: HeaderSideNavProps) => {
       />
 
       <nav
+        ref={panelRef}
         className="bg-background-surface absolute inset-y-0 right-0 flex w-[220px] flex-col"
         aria-labelledby={titleId}
         aria-modal="true"
diff --git a/src/components/profile/CustomerProfileEditForm.tsx b/src/components/profile/CustomerProfileEditForm.tsx
index 3476cfd5..cad6aaf3 100644
--- a/src/components/profile/CustomerProfileEditForm.tsx
+++ b/src/components/profile/CustomerProfileEditForm.tsx
@@ -8,6 +8,7 @@ import FormField from "@/components/common/FormField/FormField";
 import Input from "@/components/common/Input/Input";
 import PasswordInput from "@/components/common/Input/PasswordInput";
 import { Text } from "@/components/common/Text";
+import Toast from "@/components/common/Toast/Toast";
 import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
 import ProfileFormActions from "@/components/profile/ProfileFormActions";
 import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
@@ -45,6 +46,7 @@ const CustomerProfileEditForm = ({
   const updateCustomerBasicInfo = useUpdateCustomerBasicInfo();
   const updateCustomerProfile = useUpdateCustomerProfile();
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
 
   const {
     register,
@@ -52,6 +54,7 @@ const CustomerProfileEditForm = ({
     handleSubmit,
     setError,
     setFocus,
+    setValue,
     formState: { errors, isValid, isSubmitting },
   } = useForm<CustomerProfileEditFormValues>({
     resolver: zodResolver(customerProfileEditSchema),
@@ -69,6 +72,12 @@ const CustomerProfileEditForm = ({
     },
   });
 
+  const clearPasswordFields = () => {
+    setValue("currentPassword", "", { shouldValidate: true });
+    setValue("newPassword", "", { shouldValidate: true });
+    setValue("newPasswordConfirm", "", { shouldValidate: true });
+  };
+
   const isPending =
     isSubmitting || updateCustomerBasicInfo.isPending || updateCustomerProfile.isPending;
 
@@ -104,6 +113,7 @@ const CustomerProfileEditForm = ({
       if (basic) {
         await updateCustomerBasicInfo.mutateAsync(basic);
         didBasicSucceed = true;
+        clearPasswordFields();
       }
 
       if (profile) {
@@ -118,6 +128,8 @@ const CustomerProfileEditForm = ({
           throw profileError;
         }
       }
+
+      setToastMessage("프로필이 수정되었습니다.");
     } catch (error) {
       if (
         error instanceof ApiError &&
@@ -291,6 +303,8 @@ const CustomerProfileEditForm = ({
       ) : null}
 
       <ProfileFormActions isSubmitDisabled={!isValid || isPending} />
+
+      {toastMessage ? <Toast onClose={() => setToastMessage(null)}>{toastMessage}</Toast> : null}
     </form>
   );
 };
diff --git a/src/components/profile/MoverBasicInfoEditForm.tsx b/src/components/profile/MoverBasicInfoEditForm.tsx
index 67c9155a..f4452018 100644
--- a/src/components/profile/MoverBasicInfoEditForm.tsx
+++ b/src/components/profile/MoverBasicInfoEditForm.tsx
@@ -8,6 +8,7 @@ import FormField from "@/components/common/FormField/FormField";
 import Input from "@/components/common/Input/Input";
 import PasswordInput from "@/components/common/Input/PasswordInput";
 import { Text } from "@/components/common/Text";
+import Toast from "@/components/common/Toast/Toast";
 import ProfileFormActions from "@/components/profile/ProfileFormActions";
 import ProfilePageHeader from "@/components/profile/ProfilePageHeader";
 import { useUpdateMoverBasicInfo } from "@/hooks/profile/useUpdateMoverBasicInfo";
@@ -32,12 +33,14 @@ const MoverBasicInfoEditForm = ({
 }: MoverBasicInfoEditFormProps) => {
   const updateMoverBasicInfo = useUpdateMoverBasicInfo();
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
 
   const {
     register,
     handleSubmit,
     setError,
     setFocus,
+    setValue,
     formState: { errors, isValid, isSubmitting },
   } = useForm<MoverBasicInfoEditFormValues>({
     resolver: zodResolver(moverBasicInfoEditSchema),
@@ -63,6 +66,10 @@ const MoverBasicInfoEditForm = ({
         phone: formValues.phone,
         ...(hasPassword ? toPasswordChangePayload(formValues) : {}),
       });
+      setValue("currentPassword", "", { shouldValidate: true });
+      setValue("newPassword", "", { shouldValidate: true });
+      setValue("newPasswordConfirm", "", { shouldValidate: true });
+      setToastMessage("기본정보가 수정되었습니다.");
     } catch (error) {
       if (
         error instanceof ApiError &&
@@ -123,10 +130,8 @@ const MoverBasicInfoEditForm = ({
             <Input
               id="mover-basic-phone"
               size="md"
-              inputMode="numeric"
-              numericOnly
-              stripLeadingZeros={false}
-              placeholder="전화번호를 입력해 주세요"
+              readOnly
+              disabled
               error={errors.phone?.message}
               {...register("phone")}
             />
@@ -180,6 +185,8 @@ const MoverBasicInfoEditForm = ({
       ) : null}
 
       <ProfileFormActions isSubmitDisabled={!isValid || isPending} />
+
+      {toastMessage ? <Toast onClose={() => setToastMessage(null)}>{toastMessage}</Toast> : null}
     </form>
   );
 };
diff --git a/src/components/profile/MoverProfileEditForm.tsx b/src/components/profile/MoverProfileEditForm.tsx
index bd8b40d5..0acd39fb 100644
--- a/src/components/profile/MoverProfileEditForm.tsx
+++ b/src/components/profile/MoverProfileEditForm.tsx
@@ -8,6 +8,7 @@ import FormField from "@/components/common/FormField/FormField";
 import Input from "@/components/common/Input/Input";
 import Textarea from "@/components/common/Input/Textarea";
 import { Text } from "@/components/common/Text";
+import Toast from "@/components/common/Toast/Toast";
 import ProfileChipGroup from "@/components/profile/ProfileChipGroup";
 import ProfileFormActions from "@/components/profile/ProfileFormActions";
 import ProfileImageUploader from "@/components/profile/ProfileImageUploader";
@@ -18,6 +19,7 @@ import { MOVE_TYPE_OPTIONS } from "@/lib/constants/moveType";
 import { REGION_OPTIONS, type RegionId } from "@/lib/constants/region";
 import { uploadProfileImageIfNeeded } from "@/lib/profile/uploadProfileImage";
 import { moverProfileSchema, type MoverProfileFormValues } from "@/lib/schemas/moverProfileSchema";
+import { ApiError } from "@/types/api";
 import type { MoveType } from "@/types/move";
 
 interface MoverProfileEditFormProps {
@@ -31,11 +33,14 @@ const MoverProfileEditForm = ({
 }: MoverProfileEditFormProps) => {
   const updateMoverProfile = useUpdateMoverProfile();
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
 
   const {
     register,
     control,
     handleSubmit,
+    setError,
+    setFocus,
     formState: { errors, isValid, isSubmitting },
   } = useForm<MoverProfileFormValues>({
     resolver: zodResolver(moverProfileSchema),
@@ -69,7 +74,21 @@ const MoverProfileEditForm = ({
         serviceTypes: formValues.serviceTypes,
         ...(imageUrl ? { imageUrl } : {}),
       });
+      setToastMessage("프로필이 수정되었습니다.");
     } catch (error) {
+      if (
+        error instanceof ApiError &&
+        (error.status === 409 || error.code === "CONFLICT") &&
+        (error.message.includes("닉네임") || error.message.includes("별명"))
+      ) {
+        setError("nickname", {
+          type: "server",
+          message: error.message,
+        });
+        setFocus("nickname");
+        return;
+      }
+
       setSubmitError(getApiErrorMessage(error, "프로필 수정에 실패했습니다."));
     }
   });
@@ -184,6 +203,8 @@ const MoverProfileEditForm = ({
       ) : null}
 
       <ProfileFormActions isSubmitDisabled={!isValid || isPending} />
+
+      {toastMessage ? <Toast onClose={() => setToastMessage(null)}>{toastMessage}</Toast> : null}
     </form>
   );
 };
diff --git a/src/components/profile/MoverProfileForm.tsx b/src/components/profile/MoverProfileForm.tsx
index adae4653..589b07d5 100644
--- a/src/components/profile/MoverProfileForm.tsx
+++ b/src/components/profile/MoverProfileForm.tsx
@@ -47,6 +47,7 @@ const MoverProfileForm = ({
     control,
     handleSubmit,
     setError,
+    setFocus,
     formState: { errors, isValid, isSubmitting },
   } = useForm<MoverProfileFormValues>({
     resolver: zodResolver(createMoverProfileSchema({ requiresPhone })),
@@ -84,16 +85,24 @@ const MoverProfileForm = ({
       });
       router.replace(getRoleHomePath("MOVER"));
     } catch (error) {
-      if (
-        error instanceof ApiError &&
-        (error.status === 409 || error.code === "CONFLICT") &&
-        error.message.includes("전화번호")
-      ) {
-        setError("phone", {
-          type: "server",
-          message: error.message,
-        });
-        return;
+      if (error instanceof ApiError && (error.status === 409 || error.code === "CONFLICT")) {
+        if (error.message.includes("전화번호")) {
+          setError("phone", {
+            type: "server",
+            message: error.message,
+          });
+          setFocus("phone");
+          return;
+        }
+
+        if (error.message.includes("닉네임") || error.message.includes("별명")) {
+          setError("nickname", {
+            type: "server",
+            message: error.message,
+          });
+          setFocus("nickname");
+          return;
+        }
       }
 
       setSubmitError(getApiErrorMessage(error, "프로필 저장에 실패했습니다."));
@@ -119,8 +128,10 @@ const MoverProfileForm = ({
               <Input
                 id="mover-create-phone"
                 size="md"
-                readOnly
-                disabled
+                inputMode="numeric"
+                numericOnly
+                stripLeadingZeros={false}
+                placeholder="전화번호를 입력해 주세요"
                 error={errors.phone?.message}
                 {...register("phone")}
               />
diff --git a/src/hooks/profile/useUpdateCustomerBasicInfo.ts b/src/hooks/profile/useUpdateCustomerBasicInfo.ts
index f5ea3a49..3e767394 100644
--- a/src/hooks/profile/useUpdateCustomerBasicInfo.ts
+++ b/src/hooks/profile/useUpdateCustomerBasicInfo.ts
@@ -1,16 +1,25 @@
 import { useQueryClient } from "@tanstack/react-query";
 
 import { useApiMutation } from "@/hooks/queries/useApiMutation";
-import { updateCustomerBasicInfo } from "@/lib/api/profile";
+import {
+  mapCustomerProfileMeResponse,
+  toAuthUserFromCustomerProfile,
+  updateCustomerBasicInfo,
+} from "@/lib/api/profile";
 import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+import { useAuthStore } from "@/stores/useAuthStore";
 import type { UpdateCustomerBasicInfoInput } from "@/types/profile";
 
 export const useUpdateCustomerBasicInfo = () => {
   const queryClient = useQueryClient();
+  const establishSession = useAuthStore((state) => state.establishSession);
 
   return useApiMutation({
     mutationFn: (input: UpdateCustomerBasicInfoInput) => updateCustomerBasicInfo(input),
-    onSuccess: async () => {
+    onSuccess: async (data) => {
+      const profile = mapCustomerProfileMeResponse(data);
+      establishSession(toAuthUserFromCustomerProfile(profile));
+
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.CUSTOMER_ME }),
         queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.CUSTOMER_STATUS }),
diff --git a/src/hooks/profile/useUpdateMoverBasicInfo.ts b/src/hooks/profile/useUpdateMoverBasicInfo.ts
index d44d669a..1838e1da 100644
--- a/src/hooks/profile/useUpdateMoverBasicInfo.ts
+++ b/src/hooks/profile/useUpdateMoverBasicInfo.ts
@@ -1,16 +1,25 @@
 import { useQueryClient } from "@tanstack/react-query";
 
 import { useApiMutation } from "@/hooks/queries/useApiMutation";
-import { updateMoverBasicInfo } from "@/lib/api/profile";
+import {
+  mapMoverProfileMeResponse,
+  toAuthUserFromMoverProfile,
+  updateMoverBasicInfo,
+} from "@/lib/api/profile";
 import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+import { useAuthStore } from "@/stores/useAuthStore";
 import type { UpdateMoverBasicInfoInput } from "@/types/profile";
 
 export const useUpdateMoverBasicInfo = () => {
   const queryClient = useQueryClient();
+  const establishSession = useAuthStore((state) => state.establishSession);
 
   return useApiMutation({
     mutationFn: (input: UpdateMoverBasicInfoInput) => updateMoverBasicInfo(input),
-    onSuccess: async () => {
+    onSuccess: async (data) => {
+      const profile = mapMoverProfileMeResponse(data);
+      establishSession(toAuthUserFromMoverProfile(profile));
+
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.MOVER_ME }),
         queryClient.invalidateQueries({ queryKey: QUERY_KEYS.PROFILES.MOVER_STATUS }),
diff --git a/src/lib/schemas/customerProfileEditSchema.ts b/src/lib/schemas/customerProfileEditSchema.ts
index f77cf11c..b9378dbe 100644
--- a/src/lib/schemas/customerProfileEditSchema.ts
+++ b/src/lib/schemas/customerProfileEditSchema.ts
@@ -23,14 +23,14 @@ const regionIdSchema = z.union([
   z.literal(17),
 ]);
 
+/**
+ * phone은 UI에서 disabled — 형식 검증으로 제출을 막지 않음
+ * (변경·전송은 buildCustomerProfileEditPayloads에서 처리)
+ */
 export const customerProfileEditSchema = z
   .object({
     name: z.string().trim().min(1, "성함을 입력해 주세요"),
-    phone: z
-      .string()
-      .min(1, "전화번호를 입력해 주세요")
-      .regex(/^\d+$/, "숫자만 입력해 주세요")
-      .regex(/^010\d{8}$/, "올바른 전화번호를 입력해 주세요"),
+    phone: z.string(),
     imageFile: z.custom<File | null>().nullable().optional(),
     serviceTypes: z.array(moveTypeSchema).min(1, "이용 서비스를 선택해 주세요"),
     regionId: regionIdSchema.nullable(),
diff --git a/src/lib/schemas/customerProfileSchema.ts b/src/lib/schemas/customerProfileSchema.ts
index 776073ff..cdcd9864 100644
--- a/src/lib/schemas/customerProfileSchema.ts
+++ b/src/lib/schemas/customerProfileSchema.ts
@@ -1,5 +1,7 @@
 import { z } from "zod";
 
+import { phoneSchema } from "@/lib/schemas/phoneSchema";
+
 const moveTypeSchema = z.enum(["SMALL", "HOME", "OFFICE"]);
 const regionIdSchema = z.union([
   z.literal(1),
@@ -21,12 +23,6 @@ const regionIdSchema = z.union([
   z.literal(17),
 ]);
 
-const phoneSchema = z
-  .string()
-  .min(1, "전화번호를 입력해 주세요")
-  .regex(/^\d+$/, "숫자만 입력해 주세요")
-  .regex(/^010\d{8}$/, "올바른 전화번호를 입력해 주세요");
-
 export const createCustomerProfileSchema = (options: { requiresPhone: boolean }) =>
   z
     .object({
diff --git a/src/lib/schemas/moverBasicInfoEditSchema.ts b/src/lib/schemas/moverBasicInfoEditSchema.ts
index 65f2fd91..c771e85d 100644
--- a/src/lib/schemas/moverBasicInfoEditSchema.ts
+++ b/src/lib/schemas/moverBasicInfoEditSchema.ts
@@ -1,16 +1,12 @@
 import { z } from "zod";
 
 import { passwordChangeFieldsSchema } from "@/lib/schemas/passwordChangeFields";
+import { phoneSchema } from "@/lib/schemas/phoneSchema";
 
 export const moverBasicInfoEditSchema = z
   .object({
     name: z.string().trim().min(1, "성함을 입력해 주세요"),
-    phone: z
-      .string()
-      .min(1, "전화번호를 입력해 주세요")
-      .regex(/^\d+$/, "숫자만 입력해 주세요")
-      .min(10, "올바른 전화번호를 입력해 주세요")
-      .max(11, "올바른 전화번호를 입력해 주세요"),
+    phone: phoneSchema,
   })
   .and(passwordChangeFieldsSchema);
 
diff --git a/src/lib/schemas/moverProfileSchema.ts b/src/lib/schemas/moverProfileSchema.ts
index 01e62011..ed50aa32 100644
--- a/src/lib/schemas/moverProfileSchema.ts
+++ b/src/lib/schemas/moverProfileSchema.ts
@@ -1,5 +1,7 @@
 import { z } from "zod";
 
+import { phoneSchema } from "@/lib/schemas/phoneSchema";
+
 const moveTypeSchema = z.enum(["SMALL", "HOME", "OFFICE"]);
 const regionIdSchema = z.union([
   z.literal(1),
@@ -21,13 +23,6 @@ const regionIdSchema = z.union([
   z.literal(17),
 ]);
 
-const phoneSchema = z
-  .string()
-  .min(1, "전화번호를 입력해 주세요")
-  .regex(/^\d+$/, "숫자만 입력해 주세요")
-  .min(10, "올바른 전화번호를 입력해 주세요")
-  .max(11, "올바른 전화번호를 입력해 주세요");
-
 export const createMoverProfileSchema = (options: { requiresPhone: boolean }) =>
   z.object({
     phone: options.requiresPhone ? phoneSchema : z.string().optional(),
diff --git a/src/lib/schemas/phoneSchema.ts b/src/lib/schemas/phoneSchema.ts
new file mode 100644
index 00000000..9d93da3e
--- /dev/null
+++ b/src/lib/schemas/phoneSchema.ts
@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+/**
+ * BE phone 규칙과 맞춤
+ * `/^01[016789]-?\d{3,4}-?\d{4}$/` → 하이픈 제거 후 `01[016789]` + 7~8자리
+ */
+export const phoneSchema = z
+  .string()
+  .trim()
+  .min(1, "전화번호를 입력해 주세요")
+  .transform((value) => value.replaceAll("-", ""))
+  .pipe(
+    z
+      .string()
+      .regex(/^\d+$/, "숫자만 입력해 주세요")
+      .regex(/^01[016789]\d{7,8}$/, "올바른 전화번호를 입력해 주세요"),
+  );

From f6dc4737779ae304ac52f025a15260aa77a90416 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Tue, 4 Aug 2026 11:35:13 +0900
Subject: [PATCH 11/18] =?UTF-8?q?fix:=20=EC=9D=BC=EB=B0=98=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=ED=94=84=EB=A1=9C=ED=95=84=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=EC=8B=9C=20=EC=A0=84=ED=99=94=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=EB=85=B8=EC=B6=9C=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/profile/CustomerProfileCreateView.tsx | 7 +++++--
 src/components/profile/MoverProfileCreateView.tsx    | 7 +++++--
 src/hooks/profile/useCustomerProfileStatus.ts        | 7 +++++--
 src/hooks/profile/useMoverProfileStatus.ts           | 7 +++++--
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/profile/CustomerProfileCreateView.tsx b/src/components/profile/CustomerProfileCreateView.tsx
index a04202d1..67459fcd 100644
--- a/src/components/profile/CustomerProfileCreateView.tsx
+++ b/src/components/profile/CustomerProfileCreateView.tsx
@@ -7,7 +7,7 @@ import { useCustomerAuthReady } from "@/hooks/useCustomerAuthReady";
 import { useCustomerProfileStatus } from "@/hooks/profile/useCustomerProfileStatus";
 
 const CustomerProfileCreateView = () => {
-  const { canFetch, isPending: isAuthPending } = useCustomerAuthReady();
+  const { canFetch, isPending: isAuthPending, user } = useCustomerAuthReady();
   const { data: status, isPending: isStatusPending, isError } = useCustomerProfileStatus(canFetch);
 
   if (isAuthPending || isStatusPending) {
@@ -30,7 +30,10 @@ const CustomerProfileCreateView = () => {
     );
   }
 
-  return <CustomerProfileForm key={String(status.hasPhone)} requiresPhone={!status.hasPhone} />;
+  // 일반 가입/로그인 사용자는 세션에 phone이 있음. status만 보면 캐시·타이밍에 따라 잘못 노출될 수 있음
+  const hasPhone = status.hasPhone === true || Boolean(user?.phone?.trim());
+
+  return <CustomerProfileForm key={String(hasPhone)} requiresPhone={!hasPhone} />;
 };
 
 export default CustomerProfileCreateView;
diff --git a/src/components/profile/MoverProfileCreateView.tsx b/src/components/profile/MoverProfileCreateView.tsx
index 387bc7f5..3994f1be 100644
--- a/src/components/profile/MoverProfileCreateView.tsx
+++ b/src/components/profile/MoverProfileCreateView.tsx
@@ -7,7 +7,7 @@ import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
 import { useMoverProfileStatus } from "@/hooks/profile/useMoverProfileStatus";
 
 const MoverProfileCreateView = () => {
-  const { canFetch, isPending: isAuthPending } = useMoverAuthReady();
+  const { canFetch, isPending: isAuthPending, user } = useMoverAuthReady();
   const { data: status, isPending: isStatusPending, isError } = useMoverProfileStatus(canFetch);
 
   if (isAuthPending || isStatusPending) {
@@ -30,7 +30,10 @@ const MoverProfileCreateView = () => {
     );
   }
 
-  return <MoverProfileForm key={String(status.hasPhone)} requiresPhone={!status.hasPhone} />;
+  // 일반 가입/로그인 사용자는 세션에 phone이 있음. status만 보면 캐시·타이밍에 따라 잘못 노출될 수 있음
+  const hasPhone = status.hasPhone === true || Boolean(user?.phone?.trim());
+
+  return <MoverProfileForm key={String(hasPhone)} requiresPhone={!hasPhone} />;
 };
 
 export default MoverProfileCreateView;
diff --git a/src/hooks/profile/useCustomerProfileStatus.ts b/src/hooks/profile/useCustomerProfileStatus.ts
index 94485a02..415d6d4a 100644
--- a/src/hooks/profile/useCustomerProfileStatus.ts
+++ b/src/hooks/profile/useCustomerProfileStatus.ts
@@ -1,11 +1,14 @@
 import { useApiQuery } from "@/hooks/queries/useApiQuery";
 import { getCustomerProfileStatus } from "@/lib/api/profile";
 import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+import { useAuthStore } from "@/stores/useAuthStore";
 
 export const useCustomerProfileStatus = (enabled: boolean) => {
+  const userId = useAuthStore((state) => state.user?.id);
+
   return useApiQuery({
-    queryKey: QUERY_KEYS.PROFILES.CUSTOMER_STATUS,
+    queryKey: [...QUERY_KEYS.PROFILES.CUSTOMER_STATUS, userId ?? "anonymous"] as const,
     queryFn: getCustomerProfileStatus,
-    enabled,
+    enabled: enabled && Boolean(userId),
   });
 };
diff --git a/src/hooks/profile/useMoverProfileStatus.ts b/src/hooks/profile/useMoverProfileStatus.ts
index be909765..236e8f63 100644
--- a/src/hooks/profile/useMoverProfileStatus.ts
+++ b/src/hooks/profile/useMoverProfileStatus.ts
@@ -1,11 +1,14 @@
 import { useApiQuery } from "@/hooks/queries/useApiQuery";
 import { getMoverProfileStatus } from "@/lib/api/profile";
 import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+import { useAuthStore } from "@/stores/useAuthStore";
 
 export const useMoverProfileStatus = (enabled: boolean) => {
+  const userId = useAuthStore((state) => state.user?.id);
+
   return useApiQuery({
-    queryKey: QUERY_KEYS.PROFILES.MOVER_STATUS,
+    queryKey: [...QUERY_KEYS.PROFILES.MOVER_STATUS, userId ?? "anonymous"] as const,
     queryFn: getMoverProfileStatus,
-    enabled,
+    enabled: enabled && Boolean(userId),
   });
 };

From d0889937e5cbee1ceb28b99db9ac03319b6c1a7d Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Wed, 5 Aug 2026 01:46:13 +0900
Subject: [PATCH 12/18] =?UTF-8?q?fix:=20=EB=A6=AC=EB=B7=B0=20=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/FormField/FormField.tsx | 45 +++++++++++----
 src/components/common/Header/Header.tsx       |  6 +-
 .../profile/CustomerProfileCreateView.tsx     | 20 +++++++
 .../profile/CustomerProfileEditForm.tsx       | 55 ++++++++++---------
 .../profile/CustomerProfileForm.tsx           |  9 ++-
 .../profile/MoverBasicInfoEditForm.tsx        | 11 +---
 .../profile/MoverProfileCreateView.tsx        | 20 +++++++
 .../profile/MoverProfileEditForm.tsx          |  6 +-
 src/components/profile/MoverProfileForm.tsx   |  6 +-
 src/components/profile/ProfileChipGroup.tsx   |  9 ++-
 .../profile/ProfileImageUploader.tsx          | 19 ++++++-
 src/hooks/profile/useCustomerProfileMe.ts     |  7 ++-
 src/hooks/profile/useMoverProfileMe.ts        |  7 ++-
 .../buildCustomerProfileEditPayloads.ts       | 32 +++--------
 14 files changed, 167 insertions(+), 85 deletions(-)

diff --git a/src/components/common/FormField/FormField.tsx b/src/components/common/FormField/FormField.tsx
index 71e185ab..34f3cca2 100644
--- a/src/components/common/FormField/FormField.tsx
+++ b/src/components/common/FormField/FormField.tsx
@@ -1,16 +1,28 @@
 import { type ReactNode } from "react";
 
-import { Text } from "@/components/common/Text";
+import { Text, type TextVariantProp } from "@/components/common/Text";
 import { cn } from "@/lib/utils/cn";
 
+type FormFieldVariant = "default" | "compact" | "auth";
+
+const FORM_FIELD_LABEL_VARIANTS = {
+  default: { base: "lg-semibold", lg: "xl-semibold" },
+  compact: { base: "lg-semibold", lg: "2lg-semibold" },
+  auth: { base: "md-regular", lg: "xl-regular" },
+} as const satisfies Record<FormFieldVariant, TextVariantProp>;
+
 interface FormFieldProps {
   label: string;
-  /** 연결할 input id. Chip 그룹처럼 단일 input이 없으면 생략 */
+  /** 단일 input/textarea와 연결. Chip group이면 생략하고 labelId 사용 */
   labelFor?: string;
+  /** Chip group 등 — 시각 라벨을 aria-labelledby로 연결할 때 */
+  labelId?: string;
   children: ReactNode;
   className?: string;
-  /** 기본: fieldLabel. auth: 로그인·회원가입 label */
-  variant?: "default" | "auth";
+  /** default: 프로필 등 / compact: 모달 폼 / auth: 로그인·회원가입 */
+  variant?: FormFieldVariant;
+  /** FORM_FIELD_LABEL_VARIANTS에 해당하지 않는 라벨 타이포에 사용 */
+  labelVariant?: TextVariantProp;
   required?: boolean;
   /** 라벨 아래 부가 안내 문구 */
   description?: string;
@@ -19,25 +31,33 @@ interface FormFieldProps {
 const FormField = ({
   label,
   labelFor,
+  labelId,
   children,
   className,
   variant = "default",
+  labelVariant,
   required = false,
   description,
 }: FormFieldProps) => {
   const isAuth = variant === "auth";
+  const resolvedLabelVariant = labelVariant ?? FORM_FIELD_LABEL_VARIANTS[variant];
   const labelClassName = isAuth ? "text-text-secondary" : "text-text-tertiary";
-  const labelVariant = isAuth
-    ? ({ base: "md-regular", md: "xl-regular" } as const)
-    : ("fieldLabel" as const);
 
   const labelContent = (
     <>
       {label}
       {required ? (
-        <Text as="span" variant={labelVariant} className="text-text-brand" aria-hidden="true">
-          *
-        </Text>
+        <>
+          <Text
+            as="span"
+            variant={resolvedLabelVariant}
+            className="text-text-brand"
+            aria-hidden="true"
+          >
+            *
+          </Text>
+          <span className="sr-only">필수</span>
+        </>
       ) : null}
     </>
   );
@@ -49,7 +69,7 @@ const FormField = ({
           <Text
             as="label"
             htmlFor={labelFor}
-            variant={labelVariant}
+            variant={resolvedLabelVariant}
             className={cn(labelClassName, "flex items-center gap-4")}
           >
             {labelContent}
@@ -57,7 +77,8 @@ const FormField = ({
         ) : (
           <Text
             as="p"
-            variant={labelVariant}
+            id={labelId}
+            variant={resolvedLabelVariant}
             className={cn(labelClassName, "flex items-center gap-4")}
           >
             {labelContent}
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 2a6c3322..c9885363 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -3,7 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import NotificationTrigger from "@/components/common/Header/notification";
 import HeaderSideNav from "@/components/common/Header/HeaderSideNav";
@@ -124,8 +124,8 @@ const Header = ({
   const showAuthSkeleton = (!hasHydrated || isCheckingAuth) && !initialIsLogin;
   const nickname = user?.name ?? displayName ?? initialNickname ?? "닉네임";
 
-  const openSideNav = () => setIsSideNavOpen(true);
-  const closeSideNav = () => setIsSideNavOpen(false);
+  const openSideNav = useCallback(() => setIsSideNavOpen(true), []);
+  const closeSideNav = useCallback(() => setIsSideNavOpen(false), []);
 
   return (
     <header className="border-border-subtle bg-background-surface w-full border-b">
diff --git a/src/components/profile/CustomerProfileCreateView.tsx b/src/components/profile/CustomerProfileCreateView.tsx
index 67459fcd..c17d75b8 100644
--- a/src/components/profile/CustomerProfileCreateView.tsx
+++ b/src/components/profile/CustomerProfileCreateView.tsx
@@ -1,15 +1,25 @@
 "use client";
 
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
 import CustomerProfileForm from "@/components/profile/CustomerProfileForm";
 import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
 import { Text } from "@/components/common/Text";
 import { useCustomerAuthReady } from "@/hooks/useCustomerAuthReady";
 import { useCustomerProfileStatus } from "@/hooks/profile/useCustomerProfileStatus";
+import { getRoleHomePath } from "@/lib/auth/redirect";
 
 const CustomerProfileCreateView = () => {
+  const router = useRouter();
   const { canFetch, isPending: isAuthPending, user } = useCustomerAuthReady();
   const { data: status, isPending: isStatusPending, isError } = useCustomerProfileStatus(canFetch);
 
+  useEffect(() => {
+    if (!status?.isProfileCompleted) return;
+    router.replace(getRoleHomePath(user?.role));
+  }, [status?.isProfileCompleted, user?.role, router]);
+
   if (isAuthPending || isStatusPending) {
     return (
       <ProfileFormSkeleton
@@ -30,6 +40,16 @@ const CustomerProfileCreateView = () => {
     );
   }
 
+  if (status.isProfileCompleted) {
+    return (
+      <ProfileFormSkeleton
+        title="프로필 등록"
+        description="추가 정보를 입력하여 회원가입을 완료해주세요."
+        layout="single"
+      />
+    );
+  }
+
   // 일반 가입/로그인 사용자는 세션에 phone이 있음. status만 보면 캐시·타이밍에 따라 잘못 노출될 수 있음
   const hasPhone = status.hasPhone === true || Boolean(user?.phone?.trim());
 
diff --git a/src/components/profile/CustomerProfileEditForm.tsx b/src/components/profile/CustomerProfileEditForm.tsx
index cad6aaf3..11c1481c 100644
--- a/src/components/profile/CustomerProfileEditForm.tsx
+++ b/src/components/profile/CustomerProfileEditForm.tsx
@@ -54,8 +54,9 @@ const CustomerProfileEditForm = ({
     handleSubmit,
     setError,
     setFocus,
-    setValue,
-    formState: { errors, isValid, isSubmitting },
+    getValues,
+    reset,
+    formState: { errors, isValid, isSubmitting, dirtyFields },
   } = useForm<CustomerProfileEditFormValues>({
     resolver: zodResolver(customerProfileEditSchema),
     mode: "onChange",
@@ -72,12 +73,6 @@ const CustomerProfileEditForm = ({
     },
   });
 
-  const clearPasswordFields = () => {
-    setValue("currentPassword", "", { shouldValidate: true });
-    setValue("newPassword", "", { shouldValidate: true });
-    setValue("newPasswordConfirm", "", { shouldValidate: true });
-  };
-
   const isPending =
     isSubmitting || updateCustomerBasicInfo.isPending || updateCustomerProfile.isPending;
 
@@ -93,12 +88,7 @@ const CustomerProfileEditForm = ({
       const imageUrl = await uploadProfileImageIfNeeded(formValues.imageFile);
       const { basic, profile } = buildCustomerProfileEditPayloads({
         formValues,
-        initial: {
-          name: defaultValues?.name ?? "",
-          phone: defaultValues?.phone ?? "",
-          regionId: defaultValues?.regionId ?? null,
-          serviceTypes: defaultValues?.serviceTypes ?? [],
-        },
+        dirtyFields,
         hasPassword,
         uploadedImageUrl: imageUrl,
       });
@@ -113,7 +103,15 @@ const CustomerProfileEditForm = ({
       if (basic) {
         await updateCustomerBasicInfo.mutateAsync(basic);
         didBasicSucceed = true;
-        clearPasswordFields();
+
+        // 현재 값을 새 default로 승격 → 성공한 필드는 dirty에서 제외
+        const current = getValues();
+        reset({
+          ...current,
+          currentPassword: "",
+          newPassword: "",
+          newPasswordConfirm: "",
+        });
       }
 
       if (profile) {
@@ -129,6 +127,13 @@ const CustomerProfileEditForm = ({
         }
       }
 
+      const current = getValues();
+      reset({
+        ...current,
+        currentPassword: "",
+        newPassword: "",
+        newPasswordConfirm: "",
+      });
       setToastMessage("프로필이 수정되었습니다.");
     } catch (error) {
       if (
@@ -194,14 +199,7 @@ const CustomerProfileEditForm = ({
           </FormField>
 
           <FormField label="전화번호" labelFor="customer-edit-phone">
-            <Input
-              id="customer-edit-phone"
-              size="md"
-              readOnly
-              disabled
-              error={errors.phone?.message}
-              {...register("phone")}
-            />
+            <Input id="customer-edit-phone" size="md" readOnly disabled {...register("phone")} />
           </FormField>
 
           {hasPassword ? (
@@ -210,7 +208,7 @@ const CustomerProfileEditForm = ({
                 <PasswordInput
                   id="customer-edit-current-password"
                   size="md"
-                  autoComplete="new-password"
+                  autoComplete="current-password"
                   placeholder="현재 비밀번호를 입력해 주세요"
                   error={errors.currentPassword?.message}
                   {...register("currentPassword")}
@@ -260,6 +258,7 @@ const CustomerProfileEditForm = ({
 
           <FormField
             label="이용 서비스"
+            labelId="customer-edit-service-types-label"
             description="*견적 요청 시 이용 서비스를 선택할 수 있어요."
           >
             <Controller
@@ -267,6 +266,7 @@ const CustomerProfileEditForm = ({
               control={control}
               render={({ field }) => (
                 <ProfileChipGroup<MoveType>
+                  aria-labelledby="customer-edit-service-types-label"
                   selectionMode="multiple"
                   options={MOVE_TYPE_OPTIONS}
                   value={field.value}
@@ -277,12 +277,17 @@ const CustomerProfileEditForm = ({
             />
           </FormField>
 
-          <FormField label="내가 사는 지역" description="*견적 요청 시 지역을 설정할 수 있어요.">
+          <FormField
+            label="내가 사는 지역"
+            labelId="customer-edit-region-label"
+            description="*견적 요청 시 지역을 설정할 수 있어요."
+          >
             <Controller
               name="regionId"
               control={control}
               render={({ field }) => (
                 <ProfileChipGroup<RegionId>
+                  aria-labelledby="customer-edit-region-label"
                   selectionMode="single"
                   options={REGION_OPTIONS}
                   value={field.value ?? null}
diff --git a/src/components/profile/CustomerProfileForm.tsx b/src/components/profile/CustomerProfileForm.tsx
index 875dae23..af7f6b6f 100644
--- a/src/components/profile/CustomerProfileForm.tsx
+++ b/src/components/profile/CustomerProfileForm.tsx
@@ -145,6 +145,7 @@ const CustomerProfileForm = ({
         <section className="flex w-full flex-col gap-32">
           <FormField
             label="이용 서비스"
+            labelId="customer-create-service-types-label"
             description="*이용 서비스는 중복 선택 가능하며, 언제든 수정 가능해요!"
           >
             <Controller
@@ -152,6 +153,7 @@ const CustomerProfileForm = ({
               control={control}
               render={({ field }) => (
                 <ProfileChipGroup<MoveType>
+                  aria-labelledby="customer-create-service-types-label"
                   selectionMode="multiple"
                   options={MOVE_TYPE_OPTIONS}
                   value={field.value}
@@ -164,12 +166,17 @@ const CustomerProfileForm = ({
           <div className="border-border-subtle w-full border-b" aria-hidden="true" />
         </section>
 
-        <FormField label="내가 사는 지역" description="*내가 사는 지역은 언제든 수정 가능해요!">
+        <FormField
+          label="내가 사는 지역"
+          labelId="customer-create-region-label"
+          description="*내가 사는 지역은 언제든 수정 가능해요!"
+        >
           <Controller
             name="regionId"
             control={control}
             render={({ field }) => (
               <ProfileChipGroup<RegionId>
+                aria-labelledby="customer-create-region-label"
                 selectionMode="single"
                 options={REGION_OPTIONS}
                 value={field.value ?? null}
diff --git a/src/components/profile/MoverBasicInfoEditForm.tsx b/src/components/profile/MoverBasicInfoEditForm.tsx
index f4452018..401e2377 100644
--- a/src/components/profile/MoverBasicInfoEditForm.tsx
+++ b/src/components/profile/MoverBasicInfoEditForm.tsx
@@ -127,14 +127,7 @@ const MoverBasicInfoEditForm = ({
           </FormField>
 
           <FormField label="전화번호" labelFor="mover-basic-phone" required>
-            <Input
-              id="mover-basic-phone"
-              size="md"
-              readOnly
-              disabled
-              error={errors.phone?.message}
-              {...register("phone")}
-            />
+            <Input id="mover-basic-phone" size="md" readOnly disabled {...register("phone")} />
           </FormField>
         </div>
 
@@ -145,7 +138,7 @@ const MoverBasicInfoEditForm = ({
                 <PasswordInput
                   id="mover-basic-current-password"
                   size="md"
-                  autoComplete="new-password"
+                  autoComplete="current-password"
                   placeholder="현재 비밀번호를 입력해 주세요"
                   error={errors.currentPassword?.message}
                   {...register("currentPassword")}
diff --git a/src/components/profile/MoverProfileCreateView.tsx b/src/components/profile/MoverProfileCreateView.tsx
index 3994f1be..127e58e7 100644
--- a/src/components/profile/MoverProfileCreateView.tsx
+++ b/src/components/profile/MoverProfileCreateView.tsx
@@ -1,15 +1,25 @@
 "use client";
 
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
 import MoverProfileForm from "@/components/profile/MoverProfileForm";
 import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
 import { Text } from "@/components/common/Text";
 import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
 import { useMoverProfileStatus } from "@/hooks/profile/useMoverProfileStatus";
+import { getRoleHomePath } from "@/lib/auth/redirect";
 
 const MoverProfileCreateView = () => {
+  const router = useRouter();
   const { canFetch, isPending: isAuthPending, user } = useMoverAuthReady();
   const { data: status, isPending: isStatusPending, isError } = useMoverProfileStatus(canFetch);
 
+  useEffect(() => {
+    if (!status?.isProfileCompleted) return;
+    router.replace(getRoleHomePath(user?.role));
+  }, [status?.isProfileCompleted, user?.role, router]);
+
   if (isAuthPending || isStatusPending) {
     return (
       <ProfileFormSkeleton
@@ -30,6 +40,16 @@ const MoverProfileCreateView = () => {
     );
   }
 
+  if (status.isProfileCompleted) {
+    return (
+      <ProfileFormSkeleton
+        title="기사님 프로필 등록"
+        description="추가 정보를 입력하여 회원가입을 완료해주세요."
+        layout="twoColumn"
+      />
+    );
+  }
+
   // 일반 가입/로그인 사용자는 세션에 phone이 있음. status만 보면 캐시·타이밍에 따라 잘못 노출될 수 있음
   const hasPhone = status.hasPhone === true || Boolean(user?.phone?.trim());
 
diff --git a/src/components/profile/MoverProfileEditForm.tsx b/src/components/profile/MoverProfileEditForm.tsx
index 0acd39fb..368451a0 100644
--- a/src/components/profile/MoverProfileEditForm.tsx
+++ b/src/components/profile/MoverProfileEditForm.tsx
@@ -161,12 +161,13 @@ const MoverProfileEditForm = ({
             />
           </FormField>
 
-          <FormField label="제공 서비스" required>
+          <FormField label="제공 서비스" labelId="mover-edit-service-types-label" required>
             <Controller
               name="serviceTypes"
               control={control}
               render={({ field }) => (
                 <ProfileChipGroup<MoveType>
+                  aria-labelledby="mover-edit-service-types-label"
                   selectionMode="multiple"
                   options={MOVE_TYPE_OPTIONS}
                   value={field.value}
@@ -177,12 +178,13 @@ const MoverProfileEditForm = ({
             />
           </FormField>
 
-          <FormField label="서비스 가능 지역" required>
+          <FormField label="서비스 가능 지역" labelId="mover-edit-region-label" required>
             <Controller
               name="regionIds"
               control={control}
               render={({ field }) => (
                 <ProfileChipGroup<RegionId>
+                  aria-labelledby="mover-edit-region-label"
                   selectionMode="multiple"
                   options={REGION_OPTIONS}
                   value={field.value}
diff --git a/src/components/profile/MoverProfileForm.tsx b/src/components/profile/MoverProfileForm.tsx
index 589b07d5..96fef3af 100644
--- a/src/components/profile/MoverProfileForm.tsx
+++ b/src/components/profile/MoverProfileForm.tsx
@@ -196,12 +196,13 @@ const MoverProfileForm = ({
             />
           </FormField>
 
-          <FormField label="제공 서비스" required>
+          <FormField label="제공 서비스" labelId="mover-create-service-types-label" required>
             <Controller
               name="serviceTypes"
               control={control}
               render={({ field }) => (
                 <ProfileChipGroup<MoveType>
+                  aria-labelledby="mover-create-service-types-label"
                   selectionMode="multiple"
                   options={MOVE_TYPE_OPTIONS}
                   value={field.value}
@@ -212,12 +213,13 @@ const MoverProfileForm = ({
             />
           </FormField>
 
-          <FormField label="서비스 가능 지역" required>
+          <FormField label="서비스 가능 지역" labelId="mover-create-region-label" required>
             <Controller
               name="regionIds"
               control={control}
               render={({ field }) => (
                 <ProfileChipGroup<RegionId>
+                  aria-labelledby="mover-create-region-label"
                   selectionMode="multiple"
                   options={REGION_OPTIONS}
                   value={field.value}
diff --git a/src/components/profile/ProfileChipGroup.tsx b/src/components/profile/ProfileChipGroup.tsx
index fd808b69..0a5130f9 100644
--- a/src/components/profile/ProfileChipGroup.tsx
+++ b/src/components/profile/ProfileChipGroup.tsx
@@ -12,6 +12,7 @@ interface ProfileChipGroupBaseProps<T extends string | number> {
   className?: string;
   chipClassName?: string;
   error?: string;
+  "aria-labelledby"?: string;
 }
 
 interface ProfileChipGroupSingleProps<
@@ -62,11 +63,15 @@ const handleSelect = <T extends string | number>(
 
 /** 프로필 서비스·지역 Chip 선택 그룹 */
 const ProfileChipGroup = <T extends string | number>(props: ProfileChipGroupProps<T>) => {
-  const { options, className, chipClassName, error } = props;
+  const { options, className, chipClassName, error, "aria-labelledby": ariaLabelledby } = props;
 
   return (
     <div className="flex w-full flex-col gap-4">
-      <div className={cn("flex flex-wrap gap-8 md:gap-12", className)} role="group">
+      <div
+        className={cn("flex flex-wrap gap-8 md:gap-12", className)}
+        role="group"
+        aria-labelledby={ariaLabelledby}
+      >
         {options.map((option) => (
           <ProfileSelectableChip
             key={String(option.value)}
diff --git a/src/components/profile/ProfileImageUploader.tsx b/src/components/profile/ProfileImageUploader.tsx
index f1018d38..8e3c527e 100644
--- a/src/components/profile/ProfileImageUploader.tsx
+++ b/src/components/profile/ProfileImageUploader.tsx
@@ -4,6 +4,7 @@ import { useEffect, useId, useMemo, useRef, type ChangeEvent } from "react";
 
 import { Text } from "@/components/common/Text";
 import { GalleryIcon } from "@/icons";
+import { IS_PROFILE_IMAGE_UPLOAD_ENABLED } from "@/lib/profile/uploadProfileImage";
 import { cn } from "@/lib/utils/cn";
 
 interface ProfileImageUploaderProps {
@@ -15,6 +16,8 @@ interface ProfileImageUploaderProps {
   className?: string;
 }
 
+const PROFILE_IMAGE_UPLOAD_DISABLED_MESSAGE = "이미지 업로드 기능은 아직 지원하지 않습니다.";
+
 /** 프로필 이미지 업로드 트리거 (Figma profile/image-uploader) */
 const ProfileImageUploader = ({
   value,
@@ -40,6 +43,7 @@ const ProfileImageUploader = ({
   }, [objectUrl]);
 
   const previewUrl = objectUrl ?? initialPreviewUrl;
+  const isUploadEnabled = IS_PROFILE_IMAGE_UPLOAD_ENABLED;
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0] ?? null;
@@ -54,17 +58,23 @@ const ProfileImageUploader = ({
         type="file"
         accept="image/*"
         className="sr-only"
+        disabled={!isUploadEnabled}
         aria-invalid={Boolean(error)}
         onChange={handleChange}
       />
       <button
         type="button"
-        aria-label="프로필 이미지 선택"
-        onClick={() => inputRef.current?.click()}
+        aria-label={isUploadEnabled ? "프로필 이미지 선택" : PROFILE_IMAGE_UPLOAD_DISABLED_MESSAGE}
+        disabled={!isUploadEnabled}
+        onClick={() => {
+          if (!isUploadEnabled) return;
+          inputRef.current?.click();
+        }}
         className={cn(
           "bg-background-muted rounded-6 relative flex items-center justify-center overflow-hidden",
           "size-100 md:size-160",
           "focus-visible:ring-border-brand focus-visible:ring-2 focus-visible:outline-none",
+          !isUploadEnabled && "cursor-not-allowed opacity-60",
         )}
       >
         {previewUrl ? (
@@ -75,6 +85,11 @@ const ProfileImageUploader = ({
           <GalleryIcon className="text-icon-subtle size-24 md:size-40" aria-hidden="true" />
         )}
       </button>
+      {!isUploadEnabled ? (
+        <Text as="p" variant="xs-regular" className="text-text-subtle">
+          {PROFILE_IMAGE_UPLOAD_DISABLED_MESSAGE}
+        </Text>
+      ) : null}
       {error ? (
         <Text as="p" role="alert" variant="xs-regular" className="text-text-error">
           {error}
diff --git a/src/hooks/profile/useCustomerProfileMe.ts b/src/hooks/profile/useCustomerProfileMe.ts
index 6b7398a3..be32955d 100644
--- a/src/hooks/profile/useCustomerProfileMe.ts
+++ b/src/hooks/profile/useCustomerProfileMe.ts
@@ -1,11 +1,14 @@
 import { useApiQuery } from "@/hooks/queries/useApiQuery";
 import { getCustomerProfileMe } from "@/lib/api/profile";
 import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+import { useAuthStore } from "@/stores/useAuthStore";
 
 export const useCustomerProfileMe = (enabled: boolean) => {
+  const userId = useAuthStore((state) => state.user?.id);
+
   return useApiQuery({
-    queryKey: QUERY_KEYS.PROFILES.CUSTOMER_ME,
+    queryKey: [...QUERY_KEYS.PROFILES.CUSTOMER_ME, userId ?? "anonymous"] as const,
     queryFn: getCustomerProfileMe,
-    enabled,
+    enabled: enabled && Boolean(userId),
   });
 };
diff --git a/src/hooks/profile/useMoverProfileMe.ts b/src/hooks/profile/useMoverProfileMe.ts
index 45e44ed3..3d92142c 100644
--- a/src/hooks/profile/useMoverProfileMe.ts
+++ b/src/hooks/profile/useMoverProfileMe.ts
@@ -1,11 +1,14 @@
 import { useApiQuery } from "@/hooks/queries/useApiQuery";
 import { getMoverProfileMe } from "@/lib/api/profile";
 import { QUERY_KEYS } from "@/lib/constants/queryKeys";
+import { useAuthStore } from "@/stores/useAuthStore";
 
 export const useMoverProfileMe = (enabled: boolean) => {
+  const userId = useAuthStore((state) => state.user?.id);
+
   return useApiQuery({
-    queryKey: QUERY_KEYS.PROFILES.MOVER_ME,
+    queryKey: [...QUERY_KEYS.PROFILES.MOVER_ME, userId ?? "anonymous"] as const,
     queryFn: getMoverProfileMe,
-    enabled,
+    enabled: enabled && Boolean(userId),
   });
 };
diff --git a/src/lib/profile/buildCustomerProfileEditPayloads.ts b/src/lib/profile/buildCustomerProfileEditPayloads.ts
index 38728b56..d1acafb3 100644
--- a/src/lib/profile/buildCustomerProfileEditPayloads.ts
+++ b/src/lib/profile/buildCustomerProfileEditPayloads.ts
@@ -1,47 +1,33 @@
 import type { CustomerProfileEditFormValues } from "@/lib/schemas/customerProfileEditSchema";
 import { toPasswordChangePayload } from "@/lib/schemas/passwordChangeFields";
-import type { MoveType } from "@/types/move";
 import type { UpdateCustomerBasicInfoInput, UpdateCustomerProfileInput } from "@/types/profile";
 
 interface BuildCustomerProfileEditPayloadsParams {
   formValues: CustomerProfileEditFormValues;
-  initial: {
-    name: string;
-    phone: string;
-    regionId: number | null;
-    serviceTypes: MoveType[];
-  };
+  /** RHF dirtyFields — 변경된 필드만 PATCH에 포함 */
+  dirtyFields: Partial<Record<keyof CustomerProfileEditFormValues, unknown>>;
   hasPassword: boolean;
   /** 새로 업로드된 URL. 없으면 이미지 미변경 */
   uploadedImageUrl?: string;
 }
 
-const areSameServiceTypes = (left: MoveType[], right: MoveType[]) => {
-  if (left.length !== right.length) {
-    return false;
-  }
-
-  const sortedLeft = [...left].sort();
-  const sortedRight = [...right].sort();
-
-  return sortedLeft.every((value, index) => value === sortedRight[index]);
-};
+const isFieldDirty = (value: unknown): boolean => Boolean(value);
 
 /** 고객 프로필 수정 폼 값에서 basic / profile PATCH 변경분만 만듭니다. */
 export const buildCustomerProfileEditPayloads = ({
   formValues,
-  initial,
+  dirtyFields,
   hasPassword,
   uploadedImageUrl,
 }: BuildCustomerProfileEditPayloadsParams) => {
   const basic: UpdateCustomerBasicInfoInput = {};
 
-  if (formValues.name.trim() !== initial.name.trim()) {
+  if (isFieldDirty(dirtyFields.name)) {
     basic.name = formValues.name.trim();
   }
 
-  // phone은 UI에서 disabled — 값이 바뀌지 않는 한 payload에 넣지 않음
-  if (formValues.phone !== initial.phone) {
+  // phone은 UI에서 disabled — dirty일 때만 (실제로는 거의 없음)
+  if (isFieldDirty(dirtyFields.phone)) {
     basic.phone = formValues.phone;
   }
 
@@ -51,11 +37,11 @@ export const buildCustomerProfileEditPayloads = ({
 
   const profile: UpdateCustomerProfileInput = {};
 
-  if (formValues.regionId !== null && formValues.regionId !== initial.regionId) {
+  if (isFieldDirty(dirtyFields.regionId) && formValues.regionId !== null) {
     profile.regionIds = [formValues.regionId];
   }
 
-  if (!areSameServiceTypes(formValues.serviceTypes, initial.serviceTypes)) {
+  if (isFieldDirty(dirtyFields.serviceTypes)) {
     profile.serviceTypes = formValues.serviceTypes;
   }
 

From 15c44c3bef6556d8eda378e8d120bbc5bac8b67c Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Wed, 5 Aug 2026 01:56:26 +0900
Subject: [PATCH 13/18] =?UTF-8?q?fix:=20phone=20schema=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20signup=20=EB=8F=84=20=ED=95=B4=EB=8B=B9?=
 =?UTF-8?q?=20=EA=B2=80=EC=A6=9D=20=EC=82=AC=EC=9A=A9=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/schemas/moverProfileSchema.ts |  6 +++++-
 src/lib/schemas/phoneSchema.ts        | 16 +++++++---------
 src/lib/schemas/signUpSchema.ts       |  9 +++------
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/lib/schemas/moverProfileSchema.ts b/src/lib/schemas/moverProfileSchema.ts
index ed50aa32..5e9ada41 100644
--- a/src/lib/schemas/moverProfileSchema.ts
+++ b/src/lib/schemas/moverProfileSchema.ts
@@ -32,7 +32,11 @@ export const createMoverProfileSchema = (options: { requiresPhone: boolean }) =>
       .string()
       .trim()
       .min(1, "경력을 입력해 주세요")
-      .regex(/^\d+$/, "경력은 숫자만 입력해 주세요"),
+      .regex(/^\d+$/, "경력은 숫자만 입력해 주세요")
+      .refine((value) => {
+        const career = Number(value);
+        return Number.isInteger(career) && career >= 0 && career <= 100;
+      }, "경력은 0 이상 100 이하의 정수여야 합니다"),
     shortIntro: z.string().trim().min(1, "한 줄 소개를 입력해 주세요"),
     description: z.string().trim().min(1, "상세 설명을 입력해 주세요"),
     serviceTypes: z.array(moveTypeSchema).min(1, "제공 서비스를 선택해 주세요"),
diff --git a/src/lib/schemas/phoneSchema.ts b/src/lib/schemas/phoneSchema.ts
index 9d93da3e..49b39740 100644
--- a/src/lib/schemas/phoneSchema.ts
+++ b/src/lib/schemas/phoneSchema.ts
@@ -1,17 +1,15 @@
 import { z } from "zod";
 
 /**
- * BE phone 규칙과 맞춤
- * `/^01[016789]-?\d{3,4}-?\d{4}$/` → 하이픈 제거 후 `01[016789]` + 7~8자리
+ * BE phone 규칙과 동일
+ * - 검증: `/^01[016789]-?\d{3,4}-?\d{4}$/` (하이픈 위치까지 검사)
+ * - 저장용 변환: 하이픈 제거
+ *
+ * @see moving-backend auth/profile phoneSchema
  */
 export const phoneSchema = z
   .string()
   .trim()
   .min(1, "전화번호를 입력해 주세요")
-  .transform((value) => value.replaceAll("-", ""))
-  .pipe(
-    z
-      .string()
-      .regex(/^\d+$/, "숫자만 입력해 주세요")
-      .regex(/^01[016789]\d{7,8}$/, "올바른 전화번호를 입력해 주세요"),
-  );
+  .regex(/^01[016789]-?\d{3,4}-?\d{4}$/, "올바른 전화번호를 입력해 주세요")
+  .transform((value) => value.replaceAll("-", ""));
diff --git a/src/lib/schemas/signUpSchema.ts b/src/lib/schemas/signUpSchema.ts
index b1d56fa4..fa013184 100644
--- a/src/lib/schemas/signUpSchema.ts
+++ b/src/lib/schemas/signUpSchema.ts
@@ -1,5 +1,7 @@
 import { z } from "zod";
 
+import { phoneSchema } from "@/lib/schemas/phoneSchema";
+
 export const signUpSchema = z
   .object({
     name: z.string().trim().min(1, "성함을 입력해 주세요"),
@@ -8,12 +10,7 @@ export const signUpSchema = z
       .trim()
       .min(1, "이메일을 입력해 주세요")
       .email("올바른 이메일 형식이 아닙니다"),
-    phone: z
-      .string()
-      .min(1, "전화번호를 입력해 주세요")
-      .regex(/^\d+$/, "숫자만 입력해 주세요")
-      .min(10, "올바른 전화번호를 입력해 주세요")
-      .max(11, "올바른 전화번호를 입력해 주세요"),
+    phone: phoneSchema,
     password: z
       .string()
       .min(1, "비밀번호를 입력해 주세요")

From a3b162b2f56d18e4551f280a5448140022d0aa5d Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Wed, 5 Aug 2026 02:28:37 +0900
Subject: [PATCH 14/18] =?UTF-8?q?fix:=20=EC=A0=91=EA=B7=BC=20=EB=B6=88?=
 =?UTF-8?q?=EA=B0=80=20=EC=8B=9C=20=EC=95=88=EB=82=B4=20=EB=AC=B8=EA=B5=AC?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95,=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EB=AA=BB=EB=B6=88=EB=9F=AC=EC=99=94?=
 =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EC=83=81=ED=83=9C=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Header/HeaderSideNav.tsx           | 63 ++++++++++---------
 .../profile/CustomerProfileCreateView.tsx     | 50 ++++++++-------
 .../profile/CustomerProfileEditView.tsx       | 22 ++++---
 .../profile/MoverBasicInfoEditView.tsx        | 22 ++++---
 .../profile/MoverProfileCreateView.tsx        | 51 ++++++++-------
 .../profile/MoverProfileEditView.tsx          | 22 ++++---
 src/components/profile/ProfileEmptyState.tsx  | 30 +++++++++
 7 files changed, 158 insertions(+), 102 deletions(-)
 create mode 100644 src/components/profile/ProfileEmptyState.tsx

diff --git a/src/components/common/Header/HeaderSideNav.tsx b/src/components/common/Header/HeaderSideNav.tsx
index 8f0c36f2..8f71fb52 100644
--- a/src/components/common/Header/HeaderSideNav.tsx
+++ b/src/components/common/Header/HeaderSideNav.tsx
@@ -49,7 +49,7 @@ const isNavLinkActive = (pathname: string, href: string): boolean => {
 const HeaderSideNav = ({ isOpen, onClose, links }: HeaderSideNavProps) => {
   const pathname = usePathname();
   const titleId = useId();
-  const panelRef = useRef<HTMLElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
@@ -145,12 +145,13 @@ const HeaderSideNav = ({ isOpen, onClose, links }: HeaderSideNavProps) => {
         onClick={onClose}
       />
 
-      <nav
+      <div
         ref={panelRef}
         className="bg-background-surface absolute inset-y-0 right-0 flex w-[220px] flex-col"
-        aria-labelledby={titleId}
-        aria-modal="true"
         role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
       >
         <div className="border-border-subtle h-gnb-height-mobile flex items-center justify-end border-b px-16 py-10">
           <h2 id={titleId} className="sr-only">
@@ -167,32 +168,34 @@ const HeaderSideNav = ({ isOpen, onClose, links }: HeaderSideNavProps) => {
           </button>
         </div>
 
-        <ul className="flex flex-col">
-          {links.map((link) => {
-            const isActive = isNavLinkActive(pathname, link.href);
-
-            return (
-              <li key={link.href}>
-                <Link
-                  href={link.href}
-                  aria-current={isActive ? "page" : undefined}
-                  className={cn(
-                    "flex items-center px-20 py-24 transition-colors",
-                    isActive
-                      ? "text-nav-text-active"
-                      : "text-text-primary hover:text-nav-text-active",
-                  )}
-                  onClick={onClose}
-                >
-                  <Text as="span" variant="lg-medium">
-                    {link.label}
-                  </Text>
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
-      </nav>
+        <nav aria-label="모바일 주요 메뉴">
+          <ul className="flex flex-col">
+            {links.map((link) => {
+              const isActive = isNavLinkActive(pathname, link.href);
+
+              return (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    aria-current={isActive ? "page" : undefined}
+                    className={cn(
+                      "flex items-center px-20 py-24 transition-colors",
+                      isActive
+                        ? "text-nav-text-active"
+                        : "text-text-primary hover:text-nav-text-active",
+                    )}
+                    onClick={onClose}
+                  >
+                    <Text as="span" variant="lg-medium">
+                      {link.label}
+                    </Text>
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      </div>
     </div>,
     document.body,
   );
diff --git a/src/components/profile/CustomerProfileCreateView.tsx b/src/components/profile/CustomerProfileCreateView.tsx
index c17d75b8..04af4235 100644
--- a/src/components/profile/CustomerProfileCreateView.tsx
+++ b/src/components/profile/CustomerProfileCreateView.tsx
@@ -1,18 +1,27 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 import CustomerProfileForm from "@/components/profile/CustomerProfileForm";
+import ProfileEmptyState from "@/components/profile/ProfileEmptyState";
 import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
-import { Text } from "@/components/common/Text";
 import { useCustomerAuthReady } from "@/hooks/useCustomerAuthReady";
 import { useCustomerProfileStatus } from "@/hooks/profile/useCustomerProfileStatus";
-import { getRoleHomePath } from "@/lib/auth/redirect";
+import { buildLoginPath, getRoleHomePath } from "@/lib/auth/redirect";
+
+const CREATE_SKELETON = {
+  title: "프로필 등록",
+  description: "추가 정보를 입력하여 회원가입을 완료해주세요.",
+  layout: "single" as const,
+};
 
 const CustomerProfileCreateView = () => {
   const router = useRouter();
-  const { canFetch, isPending: isAuthPending, user } = useCustomerAuthReady();
+  const pathname = usePathname();
+  const { canFetch, isPending: isAuthPending, isAuthenticated, user } = useCustomerAuthReady();
+  /** status 쿼리는 canFetch + userId 가 모두 있어야 enabled */
+  const canLoadProfile = canFetch && Boolean(user?.id);
   const { data: status, isPending: isStatusPending, isError } = useCustomerProfileStatus(canFetch);
 
   useEffect(() => {
@@ -20,34 +29,27 @@ const CustomerProfileCreateView = () => {
     router.replace(getRoleHomePath(user?.role));
   }, [status?.isProfileCompleted, user?.role, router]);
 
-  if (isAuthPending || isStatusPending) {
-    return (
-      <ProfileFormSkeleton
-        title="프로필 등록"
-        description="추가 정보를 입력하여 회원가입을 완료해주세요."
-        layout="single"
-      />
-    );
+  if (isAuthPending || (canLoadProfile && isStatusPending)) {
+    return <ProfileFormSkeleton {...CREATE_SKELETON} />;
+  }
+
+  if (!canLoadProfile) {
+    const fallbackHref = isAuthenticated ? getRoleHomePath(user?.role) : buildLoginPath(pathname);
+
+    return <ProfileEmptyState description="접근할 수 없습니다." href={fallbackHref} />;
   }
 
   if (isError || !status) {
     return (
-      <div className="flex min-h-[40vh] items-center justify-center px-24">
-        <Text as="p" role="alert" variant="md-medium" className="text-text-error">
-          프로필 정보를 불러오지 못했습니다.
-        </Text>
-      </div>
+      <ProfileEmptyState
+        description="프로필 정보를 불러오지 못했습니다."
+        href={getRoleHomePath(user?.role)}
+      />
     );
   }
 
   if (status.isProfileCompleted) {
-    return (
-      <ProfileFormSkeleton
-        title="프로필 등록"
-        description="추가 정보를 입력하여 회원가입을 완료해주세요."
-        layout="single"
-      />
-    );
+    return <ProfileFormSkeleton {...CREATE_SKELETON} />;
   }
 
   // 일반 가입/로그인 사용자는 세션에 phone이 있음. status만 보면 캐시·타이밍에 따라 잘못 노출될 수 있음
diff --git a/src/components/profile/CustomerProfileEditView.tsx b/src/components/profile/CustomerProfileEditView.tsx
index a83bbc87..3c720f3e 100644
--- a/src/components/profile/CustomerProfileEditView.tsx
+++ b/src/components/profile/CustomerProfileEditView.tsx
@@ -1,31 +1,37 @@
 "use client";
 
 import CustomerProfileEditForm from "@/components/profile/CustomerProfileEditForm";
+import ProfileEmptyState from "@/components/profile/ProfileEmptyState";
 import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
-import { Text } from "@/components/common/Text";
 import { useCustomerAuthReady } from "@/hooks/useCustomerAuthReady";
 import { useCustomerProfileMe } from "@/hooks/profile/useCustomerProfileMe";
+import { getRoleHomePath } from "@/lib/auth/redirect";
 import { toCustomerProfileEditFormValues } from "@/lib/profile/toCustomerProfileEditFormValues";
 
 const CustomerProfileEditView = () => {
-  const { canFetch, isPending: isAuthPending } = useCustomerAuthReady();
+  const { canFetch, isPending: isAuthPending, user } = useCustomerAuthReady();
+  const canLoadProfile = canFetch && Boolean(user?.id);
   const {
     data: customerProfile,
     isPending: isProfilePending,
     isError,
   } = useCustomerProfileMe(canFetch);
 
-  if (isAuthPending || isProfilePending) {
+  // RoleGuard가 비인증·역할 불일치를 처리. 비활성 쿼리 isPending은 로딩으로 보지 않음
+  if (isAuthPending || (canLoadProfile && isProfilePending)) {
     return <ProfileFormSkeleton title="프로필 수정" layout="twoColumn" />;
   }
 
+  if (!canLoadProfile) {
+    return null;
+  }
+
   if (isError || !customerProfile) {
     return (
-      <div className="flex min-h-[40vh] items-center justify-center px-24">
-        <Text as="p" role="alert" variant="md-medium" className="text-text-error">
-          프로필을 불러오지 못했습니다.
-        </Text>
-      </div>
+      <ProfileEmptyState
+        description="프로필을 불러오지 못했습니다."
+        href={getRoleHomePath(user?.role)}
+      />
     );
   }
 
diff --git a/src/components/profile/MoverBasicInfoEditView.tsx b/src/components/profile/MoverBasicInfoEditView.tsx
index c4950e00..b3294d80 100644
--- a/src/components/profile/MoverBasicInfoEditView.tsx
+++ b/src/components/profile/MoverBasicInfoEditView.tsx
@@ -1,27 +1,33 @@
 "use client";
 
 import MoverBasicInfoEditForm from "@/components/profile/MoverBasicInfoEditForm";
+import ProfileEmptyState from "@/components/profile/ProfileEmptyState";
 import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
-import { Text } from "@/components/common/Text";
 import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
 import { useMoverProfileMe } from "@/hooks/profile/useMoverProfileMe";
+import { getRoleHomePath } from "@/lib/auth/redirect";
 import { toMoverBasicInfoEditFormValues } from "@/lib/profile/toMoverBasicInfoEditFormValues";
 
 const MoverBasicInfoEditView = () => {
-  const { canFetch, isPending: isAuthPending } = useMoverAuthReady();
+  const { canFetch, isPending: isAuthPending, user } = useMoverAuthReady();
+  const canLoadProfile = canFetch && Boolean(user?.id);
   const { data: moverProfile, isPending: isProfilePending, isError } = useMoverProfileMe(canFetch);
 
-  if (isAuthPending || isProfilePending) {
+  // RoleGuard가 비인증·역할 불일치를 처리. 비활성 쿼리 isPending은 로딩으로 보지 않음
+  if (isAuthPending || (canLoadProfile && isProfilePending)) {
     return <ProfileFormSkeleton title="기본정보 수정" layout="twoColumn" />;
   }
 
+  if (!canLoadProfile) {
+    return null;
+  }
+
   if (isError || !moverProfile) {
     return (
-      <div className="flex min-h-[40vh] items-center justify-center px-24">
-        <Text as="p" role="alert" variant="md-medium" className="text-text-error">
-          기본정보를 불러오지 못했습니다.
-        </Text>
-      </div>
+      <ProfileEmptyState
+        description="기본정보를 불러오지 못했습니다."
+        href={getRoleHomePath(user?.role)}
+      />
     );
   }
 
diff --git a/src/components/profile/MoverProfileCreateView.tsx b/src/components/profile/MoverProfileCreateView.tsx
index 127e58e7..eea2d78b 100644
--- a/src/components/profile/MoverProfileCreateView.tsx
+++ b/src/components/profile/MoverProfileCreateView.tsx
@@ -1,18 +1,26 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 import MoverProfileForm from "@/components/profile/MoverProfileForm";
+import ProfileEmptyState from "@/components/profile/ProfileEmptyState";
 import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
-import { Text } from "@/components/common/Text";
 import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
 import { useMoverProfileStatus } from "@/hooks/profile/useMoverProfileStatus";
-import { getRoleHomePath } from "@/lib/auth/redirect";
+import { buildLoginPath, getRoleHomePath } from "@/lib/auth/redirect";
+
+const CREATE_SKELETON = {
+  title: "기사님 프로필 등록",
+  description: "추가 정보를 입력하여 회원가입을 완료해주세요.",
+  layout: "twoColumn" as const,
+};
 
 const MoverProfileCreateView = () => {
   const router = useRouter();
-  const { canFetch, isPending: isAuthPending, user } = useMoverAuthReady();
+  const pathname = usePathname();
+  const { canFetch, isPending: isAuthPending, isAuthenticated, user } = useMoverAuthReady();
+  const canLoadProfile = canFetch && Boolean(user?.id);
   const { data: status, isPending: isStatusPending, isError } = useMoverProfileStatus(canFetch);
 
   useEffect(() => {
@@ -20,34 +28,29 @@ const MoverProfileCreateView = () => {
     router.replace(getRoleHomePath(user?.role));
   }, [status?.isProfileCompleted, user?.role, router]);
 
-  if (isAuthPending || isStatusPending) {
-    return (
-      <ProfileFormSkeleton
-        title="기사님 프로필 등록"
-        description="추가 정보를 입력하여 회원가입을 완료해주세요."
-        layout="twoColumn"
-      />
-    );
+  if (isAuthPending || (canLoadProfile && isStatusPending)) {
+    return <ProfileFormSkeleton {...CREATE_SKELETON} />;
+  }
+
+  if (!canLoadProfile) {
+    const fallbackHref = isAuthenticated
+      ? getRoleHomePath(user?.role)
+      : buildLoginPath(pathname, "mover");
+
+    return <ProfileEmptyState description="접근할 수 없습니다." href={fallbackHref} />;
   }
 
   if (isError || !status) {
     return (
-      <div className="flex min-h-[40vh] items-center justify-center px-24">
-        <Text as="p" role="alert" variant="md-medium" className="text-text-error">
-          프로필 정보를 불러오지 못했습니다.
-        </Text>
-      </div>
+      <ProfileEmptyState
+        description="프로필 정보를 불러오지 못했습니다."
+        href={getRoleHomePath(user?.role)}
+      />
     );
   }
 
   if (status.isProfileCompleted) {
-    return (
-      <ProfileFormSkeleton
-        title="기사님 프로필 등록"
-        description="추가 정보를 입력하여 회원가입을 완료해주세요."
-        layout="twoColumn"
-      />
-    );
+    return <ProfileFormSkeleton {...CREATE_SKELETON} />;
   }
 
   // 일반 가입/로그인 사용자는 세션에 phone이 있음. status만 보면 캐시·타이밍에 따라 잘못 노출될 수 있음
diff --git a/src/components/profile/MoverProfileEditView.tsx b/src/components/profile/MoverProfileEditView.tsx
index a767c682..8dfc4d5f 100644
--- a/src/components/profile/MoverProfileEditView.tsx
+++ b/src/components/profile/MoverProfileEditView.tsx
@@ -1,27 +1,33 @@
 "use client";
 
 import MoverProfileEditForm from "@/components/profile/MoverProfileEditForm";
+import ProfileEmptyState from "@/components/profile/ProfileEmptyState";
 import ProfileFormSkeleton from "@/components/profile/ProfileFormSkeleton";
-import { Text } from "@/components/common/Text";
 import { useMoverAuthReady } from "@/hooks/useMoverAuthReady";
 import { useMoverProfileMe } from "@/hooks/profile/useMoverProfileMe";
+import { getRoleHomePath } from "@/lib/auth/redirect";
 import { toMoverProfileFormValues } from "@/lib/profile/toMoverProfileFormValues";
 
 const MoverProfileEditView = () => {
-  const { canFetch, isPending: isAuthPending } = useMoverAuthReady();
+  const { canFetch, isPending: isAuthPending, user } = useMoverAuthReady();
+  const canLoadProfile = canFetch && Boolean(user?.id);
   const { data: moverProfile, isPending: isProfilePending, isError } = useMoverProfileMe(canFetch);
 
-  if (isAuthPending || isProfilePending) {
+  // RoleGuard가 비인증·역할 불일치를 처리. 비활성 쿼리 isPending은 로딩으로 보지 않음
+  if (isAuthPending || (canLoadProfile && isProfilePending)) {
     return <ProfileFormSkeleton title="프로필 수정" layout="twoColumn" />;
   }
 
+  if (!canLoadProfile) {
+    return null;
+  }
+
   if (isError || !moverProfile) {
     return (
-      <div className="flex min-h-[40vh] items-center justify-center px-24">
-        <Text as="p" role="alert" variant="md-medium" className="text-text-error">
-          프로필을 불러오지 못했습니다.
-        </Text>
-      </div>
+      <ProfileEmptyState
+        description="프로필을 불러오지 못했습니다."
+        href={getRoleHomePath(user?.role)}
+      />
     );
   }
 
diff --git a/src/components/profile/ProfileEmptyState.tsx b/src/components/profile/ProfileEmptyState.tsx
new file mode 100644
index 00000000..baddcc1a
--- /dev/null
+++ b/src/components/profile/ProfileEmptyState.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import EmptyState from "@/components/common/EmptyState/EmptyState";
+
+interface ProfileEmptyStateProps {
+  description: ReactNode;
+  /** CTA 이동 경로 (역할 홈·로그인 등) */
+  href: string;
+  buttonLabel?: string;
+}
+
+/** 프로필 화면 공통 EmptyState (접근 불가·조회 실패 등) */
+const ProfileEmptyState = ({
+  description,
+  href,
+  buttonLabel = "뒤로 돌아가기",
+}: ProfileEmptyStateProps) => {
+  return (
+    <EmptyState
+      imageSrc="/images/empty/character.png"
+      description={description}
+      buttonLabel={buttonLabel}
+      href={href}
+    />
+  );
+};
+
+export default ProfileEmptyState;

From 1dd372afccd8e1ef1202025f57b2fe88670c84d7 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Wed, 5 Aug 2026 02:34:41 +0900
Subject: [PATCH 15/18] =?UTF-8?q?fix:=20imageUploader=20a11y=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/profile/CustomerProfileEditForm.tsx |  1 +
 src/components/profile/CustomerProfileForm.tsx     |  1 +
 src/components/profile/MoverProfileEditForm.tsx    |  3 ++-
 src/components/profile/MoverProfileForm.tsx        |  3 ++-
 src/components/profile/ProfileImageUploader.tsx    | 13 +++++++++++--
 5 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/profile/CustomerProfileEditForm.tsx b/src/components/profile/CustomerProfileEditForm.tsx
index 11c1481c..b089a0d9 100644
--- a/src/components/profile/CustomerProfileEditForm.tsx
+++ b/src/components/profile/CustomerProfileEditForm.tsx
@@ -247,6 +247,7 @@ const CustomerProfileEditForm = ({
               control={control}
               render={({ field }) => (
                 <ProfileImageUploader
+                  id="customer-edit-profile-image"
                   value={field.value ?? null}
                   initialPreviewUrl={initialImageUrl}
                   onChange={field.onChange}
diff --git a/src/components/profile/CustomerProfileForm.tsx b/src/components/profile/CustomerProfileForm.tsx
index af7f6b6f..bb90de36 100644
--- a/src/components/profile/CustomerProfileForm.tsx
+++ b/src/components/profile/CustomerProfileForm.tsx
@@ -131,6 +131,7 @@ const CustomerProfileForm = ({
               control={control}
               render={({ field }) => (
                 <ProfileImageUploader
+                  id="customer-profile-image"
                   value={field.value ?? null}
                   initialPreviewUrl={initialImageUrl}
                   onChange={field.onChange}
diff --git a/src/components/profile/MoverProfileEditForm.tsx b/src/components/profile/MoverProfileEditForm.tsx
index 368451a0..9c4a88a6 100644
--- a/src/components/profile/MoverProfileEditForm.tsx
+++ b/src/components/profile/MoverProfileEditForm.tsx
@@ -103,12 +103,13 @@ const MoverProfileEditForm = ({
 
       <div className="flex w-full flex-col gap-32 lg:flex-row lg:items-start lg:justify-between lg:gap-[120px]">
         <div className="flex w-full flex-col gap-32 lg:w-[500px]">
-          <FormField label="프로필 이미지">
+          <FormField label="프로필 이미지" labelFor="mover-edit-profile-image">
             <Controller
               name="imageFile"
               control={control}
               render={({ field }) => (
                 <ProfileImageUploader
+                  id="mover-edit-profile-image"
                   value={field.value ?? null}
                   initialPreviewUrl={initialImageUrl}
                   onChange={field.onChange}
diff --git a/src/components/profile/MoverProfileForm.tsx b/src/components/profile/MoverProfileForm.tsx
index 96fef3af..21d2941f 100644
--- a/src/components/profile/MoverProfileForm.tsx
+++ b/src/components/profile/MoverProfileForm.tsx
@@ -138,12 +138,13 @@ const MoverProfileForm = ({
             </FormField>
           ) : null}
 
-          <FormField label="프로필 이미지">
+          <FormField label="프로필 이미지" labelFor="mover-profile-image">
             <Controller
               name="imageFile"
               control={control}
               render={({ field }) => (
                 <ProfileImageUploader
+                  id="mover-profile-image"
                   value={field.value ?? null}
                   initialPreviewUrl={initialImageUrl}
                   onChange={field.onChange}
diff --git a/src/components/profile/ProfileImageUploader.tsx b/src/components/profile/ProfileImageUploader.tsx
index 8e3c527e..02727313 100644
--- a/src/components/profile/ProfileImageUploader.tsx
+++ b/src/components/profile/ProfileImageUploader.tsx
@@ -8,6 +8,8 @@ import { IS_PROFILE_IMAGE_UPLOAD_ENABLED } from "@/lib/profile/uploadProfileImag
 import { cn } from "@/lib/utils/cn";
 
 interface ProfileImageUploaderProps {
+  /** FormField labelFor 와 맞출 input id. 없으면 내부 useId */
+  id?: string;
   value?: File | null;
   /** 수정 모드 등 기존 이미지 URL */
   initialPreviewUrl?: string | null;
@@ -20,15 +22,20 @@ const PROFILE_IMAGE_UPLOAD_DISABLED_MESSAGE = "이미지 업로드 기능은 아
 
 /** 프로필 이미지 업로드 트리거 (Figma profile/image-uploader) */
 const ProfileImageUploader = ({
+  id,
   value,
   initialPreviewUrl = null,
   onChange,
   error,
   className,
 }: ProfileImageUploaderProps) => {
-  const inputId = useId();
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const errorId = `${inputId}-error`;
   const inputRef = useRef<HTMLInputElement>(null);
 
+  // react-hooks/set-state-in-effect 때문에 effect + setState 패턴 대신
+  // useMemo 생성 + effect cleanup revoke 로 관리한다.
   const objectUrl = useMemo(() => {
     if (!value) return null;
     return URL.createObjectURL(value);
@@ -60,11 +67,13 @@ const ProfileImageUploader = ({
         className="sr-only"
         disabled={!isUploadEnabled}
         aria-invalid={Boolean(error)}
+        aria-describedby={error ? errorId : undefined}
         onChange={handleChange}
       />
       <button
         type="button"
         aria-label={isUploadEnabled ? "프로필 이미지 선택" : PROFILE_IMAGE_UPLOAD_DISABLED_MESSAGE}
+        aria-describedby={error ? errorId : undefined}
         disabled={!isUploadEnabled}
         onClick={() => {
           if (!isUploadEnabled) return;
@@ -91,7 +100,7 @@ const ProfileImageUploader = ({
         </Text>
       ) : null}
       {error ? (
-        <Text as="p" role="alert" variant="xs-regular" className="text-text-error">
+        <Text as="p" id={errorId} role="alert" variant="xs-regular" className="text-text-error">
           {error}
         </Text>
       ) : null}

From 8c8e26b788afbbda033e547ebf5ad0a66763f502 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Wed, 5 Aug 2026 14:44:37 +0900
Subject: [PATCH 16/18] =?UTF-8?q?fix:=20chip=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9,=20dirty=20reset=20=EC=B6=94=EA=B0=80,=20sid?=
 =?UTF-8?q?e=20nav=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Header/HeaderSideNav.tsx           | 18 ++-------
 .../profile/CustomerProfileEditForm.tsx       | 15 ++++----
 src/components/profile/ProfileChipGroup.tsx   | 10 +++--
 .../profile/ProfileSelectableChip.tsx         | 38 -------------------
 4 files changed, 18 insertions(+), 63 deletions(-)
 delete mode 100644 src/components/profile/ProfileSelectableChip.tsx

diff --git a/src/components/common/Header/HeaderSideNav.tsx b/src/components/common/Header/HeaderSideNav.tsx
index ee6f7f77..c0855878 100644
--- a/src/components/common/Header/HeaderSideNav.tsx
+++ b/src/components/common/Header/HeaderSideNav.tsx
@@ -24,7 +24,7 @@ interface HeaderSideNavProps {
   links: HeaderSideNavLink[];
 }
 
-/** tablet·mobile GNB 사이드 네비게이션 (오른쪽 슬라이드) */
+/** tablet·mobile GNB 사이드 네비게이션 (오른쪽 슬라이드) — 열릴 때만 mount */
 const HeaderSideNav = ({ id, isOpen, onClose, links }: HeaderSideNavProps) => {
   const pathname = usePathname();
   const panelRef = useRef<HTMLElement>(null);
@@ -73,7 +73,7 @@ const HeaderSideNav = ({ id, isOpen, onClose, links }: HeaderSideNavProps) => {
     };
   }, [isOpen]);
 
-  if (typeof document === "undefined") {
+  if (typeof document === "undefined" || !isOpen) {
     return null;
   }
 
@@ -82,12 +82,7 @@ const HeaderSideNav = ({ id, isOpen, onClose, links }: HeaderSideNavProps) => {
       <button
         type="button"
         aria-label="메뉴 닫기"
-        aria-hidden={!isOpen}
-        tabIndex={isOpen ? 0 : -1}
-        className={cn(
-          "bg-overlay-scrim fixed inset-0 z-[9999] transition-opacity duration-200 xl:hidden",
-          isOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
-        )}
+        className="bg-overlay-scrim fixed inset-0 z-[9999] xl:hidden"
         onClick={onClose}
       />
 
@@ -97,13 +92,8 @@ const HeaderSideNav = ({ id, isOpen, onClose, links }: HeaderSideNavProps) => {
         role="dialog"
         aria-modal="true"
         aria-label="주요 메뉴"
-        aria-hidden={!isOpen}
-        inert={!isOpen}
         tabIndex={-1}
-        className={cn(
-          "bg-background-surface fixed inset-y-0 right-0 z-[10000] flex w-[220px] flex-col transition-transform duration-200 ease-out focus:outline-none xl:hidden",
-          isOpen ? "translate-x-0" : "translate-x-full",
-        )}
+        className="bg-background-surface fixed inset-y-0 right-0 z-[10000] flex w-[220px] flex-col focus:outline-none xl:hidden"
       >
         <div className="border-border-subtle flex h-54 shrink-0 items-center justify-end border-b px-16 py-10">
           <button
diff --git a/src/components/profile/CustomerProfileEditForm.tsx b/src/components/profile/CustomerProfileEditForm.tsx
index b089a0d9..f45821e7 100644
--- a/src/components/profile/CustomerProfileEditForm.tsx
+++ b/src/components/profile/CustomerProfileEditForm.tsx
@@ -56,6 +56,7 @@ const CustomerProfileEditForm = ({
     setFocus,
     getValues,
     reset,
+    resetField,
     formState: { errors, isValid, isSubmitting, dirtyFields },
   } = useForm<CustomerProfileEditFormValues>({
     resolver: zodResolver(customerProfileEditSchema),
@@ -104,14 +105,14 @@ const CustomerProfileEditForm = ({
         await updateCustomerBasicInfo.mutateAsync(basic);
         didBasicSucceed = true;
 
-        // 현재 값을 새 default로 승격 → 성공한 필드는 dirty에서 제외
+        // basic/비밀번호만 default 승격. profile 필드 dirty는 유지
+        // (profile PATCH 실패 후 재시도 시 payload가 비지 않도록)
         const current = getValues();
-        reset({
-          ...current,
-          currentPassword: "",
-          newPassword: "",
-          newPasswordConfirm: "",
-        });
+        resetField("name", { defaultValue: current.name });
+        resetField("phone", { defaultValue: current.phone });
+        resetField("currentPassword", { defaultValue: "" });
+        resetField("newPassword", { defaultValue: "" });
+        resetField("newPasswordConfirm", { defaultValue: "" });
       }
 
       if (profile) {
diff --git a/src/components/profile/ProfileChipGroup.tsx b/src/components/profile/ProfileChipGroup.tsx
index 0a5130f9..024dc983 100644
--- a/src/components/profile/ProfileChipGroup.tsx
+++ b/src/components/profile/ProfileChipGroup.tsx
@@ -1,4 +1,4 @@
-import ProfileSelectableChip from "@/components/profile/ProfileSelectableChip";
+import SelectableChip from "@/components/common/Chip/SelectableChip";
 import { Text } from "@/components/common/Text";
 import { cn } from "@/lib/utils/cn";
 
@@ -73,13 +73,15 @@ const ProfileChipGroup = <T extends string | number>(props: ProfileChipGroupProp
         aria-labelledby={ariaLabelledby}
       >
         {options.map((option) => (
-          <ProfileSelectableChip
+          <SelectableChip
             key={String(option.value)}
-            label={option.label}
+            size="responsive"
             selected={isSelected(props, option.value)}
             onClick={() => handleSelect(props, option.value)}
             className={chipClassName}
-          />
+          >
+            {option.label}
+          </SelectableChip>
         ))}
       </div>
       {error ? (
diff --git a/src/components/profile/ProfileSelectableChip.tsx b/src/components/profile/ProfileSelectableChip.tsx
deleted file mode 100644
index bf856fcb..00000000
--- a/src/components/profile/ProfileSelectableChip.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { cn } from "@/lib/utils/cn";
-
-interface ProfileSelectableChipProps {
-  label: string;
-  selected?: boolean;
-  onClick?: () => void;
-  className?: string;
-}
-
-/** 프로필 폼용 선택 Chip (Figma chip/basic) */
-const ProfileSelectableChip = ({
-  label,
-  selected = false,
-  onClick,
-  className,
-}: ProfileSelectableChipProps) => {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-pressed={selected}
-      className={cn(
-        "inline-flex items-center justify-center rounded-full border px-12 py-6 transition-colors md:px-20 md:py-10",
-        selected
-          ? "border-border-brand bg-background-brand-muted text-text-brand"
-          : "border-border-muted bg-background-subtle text-text-secondary hover:border-border-brand",
-        className,
-      )}
-    >
-      <Text as="span" variant={{ base: "md-regular", md: "2lg-regular" }} className="text-center">
-        {label}
-      </Text>
-    </button>
-  );
-};
-
-export default ProfileSelectableChip;

From 060c8af7c0b37e28cbad37ed12eca92631cd08e4 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Wed, 5 Aug 2026 15:17:53 +0900
Subject: [PATCH 17/18] =?UTF-8?q?feat:=20side=20nav=20=EC=95=A0=EB=8B=88?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80,=20chip=20hove?=
 =?UTF-8?q?r=20border=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Chip/SelectableChip.tsx |  3 +-
 .../common/Header/HeaderSideNav.tsx           | 41 +++++++++++++++----
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/components/common/Chip/SelectableChip.tsx b/src/components/common/Chip/SelectableChip.tsx
index b27b72d1..9599b689 100644
--- a/src/components/common/Chip/SelectableChip.tsx
+++ b/src/components/common/Chip/SelectableChip.tsx
@@ -15,7 +15,8 @@ const selectableChipVariants = cva(
       },
       selected: {
         true: "border-border-brand bg-background-brand-muted text-text-brand",
-        false: "border-border-muted bg-background-subtle text-text-secondary",
+        false:
+          "border-border-muted bg-background-subtle text-text-secondary hover:border-border-brand",
       },
     },
     defaultVariants: {
diff --git a/src/components/common/Header/HeaderSideNav.tsx b/src/components/common/Header/HeaderSideNav.tsx
index c0855878..e55177c5 100644
--- a/src/components/common/Header/HeaderSideNav.tsx
+++ b/src/components/common/Header/HeaderSideNav.tsx
@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState, type TransitionEvent } from "react";
 import { createPortal } from "react-dom";
 
 import { isNavLinkActive } from "@/components/common/Header/isNavLinkActive";
@@ -24,14 +24,20 @@ interface HeaderSideNavProps {
   links: HeaderSideNavLink[];
 }
 
-/** tablet·mobile GNB 사이드 네비게이션 (오른쪽 슬라이드) — 열릴 때만 mount */
+/** tablet·mobile GNB 사이드 네비게이션 — exit 애니메이션 후 unmount */
 const HeaderSideNav = ({ id, isOpen, onClose, links }: HeaderSideNavProps) => {
   const pathname = usePathname();
   const panelRef = useRef<HTMLElement>(null);
+  const [shouldRender, setShouldRender] = useState(false);
+
+  // props 변화에 맞춘 state 조정 (render-time). effect setState 린트 회피
+  if (isOpen && !shouldRender) {
+    setShouldRender(true);
+  }
 
   useFocusTrap({
     containerRef: panelRef,
-    enabled: isOpen,
+    enabled: isOpen && shouldRender,
     onEscape: onClose,
   });
 
@@ -61,7 +67,7 @@ const HeaderSideNav = ({ id, isOpen, onClose, links }: HeaderSideNavProps) => {
   }, [isOpen, onClose]);
 
   useEffect(() => {
-    if (!isOpen) {
+    if (!shouldRender) {
       return;
     }
 
@@ -71,9 +77,17 @@ const HeaderSideNav = ({ id, isOpen, onClose, links }: HeaderSideNavProps) => {
     return () => {
       document.body.style.overflow = previousOverflow;
     };
-  }, [isOpen]);
+  }, [shouldRender]);
+
+  const handlePanelTransitionEnd = (event: TransitionEvent<HTMLElement>) => {
+    if (event.target !== event.currentTarget) return;
+    if (event.propertyName !== "transform") return;
+    if (isOpen) return;
+
+    setShouldRender(false);
+  };
 
-  if (typeof document === "undefined" || !isOpen) {
+  if (typeof document === "undefined" || !shouldRender) {
     return null;
   }
 
@@ -82,7 +96,12 @@ const HeaderSideNav = ({ id, isOpen, onClose, links }: HeaderSideNavProps) => {
       <button
         type="button"
         aria-label="메뉴 닫기"
-        className="bg-overlay-scrim fixed inset-0 z-[9999] xl:hidden"
+        tabIndex={isOpen ? 0 : -1}
+        className={cn(
+          "bg-overlay-scrim fixed inset-0 z-[9999] transition-opacity duration-200 xl:hidden",
+          "starting:opacity-0",
+          isOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
+        )}
         onClick={onClose}
       />
 
@@ -92,8 +111,14 @@ const HeaderSideNav = ({ id, isOpen, onClose, links }: HeaderSideNavProps) => {
         role="dialog"
         aria-modal="true"
         aria-label="주요 메뉴"
+        aria-hidden={!isOpen}
         tabIndex={-1}
-        className="bg-background-surface fixed inset-y-0 right-0 z-[10000] flex w-[220px] flex-col focus:outline-none xl:hidden"
+        onTransitionEnd={handlePanelTransitionEnd}
+        className={cn(
+          "bg-background-surface fixed inset-y-0 right-0 z-[10000] flex w-[220px] flex-col transition-transform duration-200 ease-out focus:outline-none xl:hidden",
+          "starting:translate-x-full",
+          isOpen ? "translate-x-0" : "translate-x-full",
+        )}
       >
         <div className="border-border-subtle flex h-54 shrink-0 items-center justify-end border-b px-16 py-10">
           <button

From 38bfe5b7ab55f28375f125d89cf7892f522abf88 Mon Sep 17 00:00:00 2001
From: 9g-g9 <nayun12375@gmail.com>
Date: Wed, 5 Aug 2026 15:30:13 +0900
Subject: [PATCH 18/18] =?UTF-8?q?fix:=20mover=20sent=20=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=20=EC=83=81=ED=83=9C=20=EC=A0=9C=EC=99=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header/isNavLinkActive.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/common/Header/isNavLinkActive.ts b/src/components/common/Header/isNavLinkActive.ts
index 3284cff9..06ec7a3d 100644
--- a/src/components/common/Header/isNavLinkActive.ts
+++ b/src/components/common/Header/isNavLinkActive.ts
@@ -4,6 +4,8 @@ import { APP_ROUTES } from "@/lib/constants/appRoutes";
  * GNB 메뉴 활성 여부.
  * 찜한 기사님(`/movers/favorites`)은 프로필 메뉴 항목이므로
  * 기사님 찾기 활성 상태에서 제외합니다.
+ * 보낸 견적(`/estimate/sent`)은 별도 GNB 항목이므로
+ * 받은 요청(ROOT) 활성 상태에서 제외합니다.
  */
 export const isNavLinkActive = (pathname: string, href: string): boolean => {
   if (pathname === href) {
@@ -22,5 +24,13 @@ export const isNavLinkActive = (pathname: string, href: string): boolean => {
     }
   }
 
+  if (href === APP_ROUTES.MOVER_ESTIMATES.ROOT) {
+    const sentPath = APP_ROUTES.MOVER_ESTIMATES.SENT;
+
+    if (pathname === sentPath || pathname.startsWith(`${sentPath}/`)) {
+      return false;
+    }
+  }
+
   return true;
 };