[FEAT] 사용자, 기사 프로필 생성 및 수정 추가

src/app/(customer)/(protected)/layout.tsx

@@ -4,29 +4,20 @@ 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;
 }
 
 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>
   );

src/app/(customer)/(protected)/profile/edit/page.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+import CustomerProfileEditView from "@/components/profile/CustomerProfileEditView";
+
+export const metadata: Metadata = {
+  title: "프로필 수정 | 무빙",
+  description: "무빙 고객 프로필 수정",
+};
+
+const CustomerProfileEditPage = () => {
+  return <CustomerProfileEditView />;
+};
+
+export default CustomerProfileEditPage;

src/app/(customer)/(protected)/profile/page.tsx

@@ -1,23 +1,14 @@
 import type { Metadata } from "next";
 
-import { Text } from "@/components/common/Text";
+import CustomerProfileCreateView from "@/components/profile/CustomerProfileCreateView";
 
 export const metadata: Metadata = {
   title: "프로필 등록 | 무빙",
   description: "무빙 고객 프로필 등록",
 };
 
 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 <CustomerProfileCreateView />;
 };
 
 export default CustomerProfilePage;

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;

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;

src/app/(mover)/(protected)/mover/profile/edit/page.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+import MoverProfileEditView from "@/components/profile/MoverProfileEditView";
+
+export const metadata: Metadata = {
+  title: "기사 프로필 수정 | 무빙",
+  description: "무빙 기사님 프로필 수정",
+};
+
+const MoverProfileEditPage = () => {
+  return <MoverProfileEditView />;
+};
+
+export default MoverProfileEditPage;

src/app/(mover)/(protected)/mover/profile/page.tsx

@@ -1,23 +1,14 @@
 import type { Metadata } from "next";
 
-import { Text } from "@/components/common/Text";
+import MoverProfileCreateView from "@/components/profile/MoverProfileCreateView";
 
 export const metadata: Metadata = {
   title: "기사 프로필 등록 | 무빙",
   description: "무빙 기사님 프로필 등록",
 };
 
 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 <MoverProfileCreateView />;
 };
 
 export default MoverProfilePage;

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;

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: {

src/components/common/FormField/FormField.tsx

@@ -13,35 +13,87 @@ const FORM_FIELD_LABEL_VARIANTS = {
 
 interface FormFieldProps {
   label: string;
-  labelFor: string;
+  /** 단일 input/textarea와 연결. Chip group이면 생략하고 labelId 사용 */
+  labelFor?: string;
+  /** Chip group 등 — 시각 라벨을 aria-labelledby로 연결할 때 */
+  labelId?: string;
   children: ReactNode;
   className?: string;
   /** default: 프로필 등록·수정 폼 등 / compact: 모달 폼 / auth: 로그인·회원가입 */
   variant?: FormFieldVariant;
-  /** FORM_FIELD_LABEL_VARIANTS에 해당하지 않는 라벨 타이포그래피에 사용 */
+  /** FORM_FIELD_LABEL_VARIANTS에 해당하지 않는 라벨 타이포에 사용 */
   labelVariant?: TextVariantProp;
+  required?: boolean;
+  /** 라벨 아래 부가 안내 문구 */
+  description?: string;
 }
 
 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 labelContent = (
+    <>
+      {label}
+      {required ? (
+        <>
+          <Text
+            as="span"
+            variant={resolvedLabelVariant}
+            className="text-text-brand"
+            aria-hidden="true"
+          >
+            *
+          </Text>
+          <span className="sr-only">필수</span>
+        </>
+      ) : null}
+    </>
+  );
 
   return (
     <div className={cn("flex flex-col gap-10", className)}>
-      <Text
-        as="label"
-        htmlFor={labelFor}
-        variant={labelVariant ?? FORM_FIELD_LABEL_VARIANTS[variant]}
-        className={isAuth ? "text-text-secondary" : "text-text-tertiary"}
-      >
-        {label}
-      </Text>
+      <div className="flex w-full flex-col gap-4">
+        {labelFor ? (
+          <Text
+            as="label"
+            htmlFor={labelFor}
+            variant={resolvedLabelVariant}
+            className={cn(labelClassName, "flex items-center gap-4")}
+          >
+            {labelContent}
+          </Text>
+        ) : (
+          <Text
+            as="p"
+            id={labelId}
+            variant={resolvedLabelVariant}
+            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>
   );