Feat/profile - 유저 프로필 수정기능 추가

src/app/routes/PrivateRoute.tsx

@@ -9,8 +9,13 @@ const PrivateRoute = ({
   children: React.ReactNode;
 }): JSX.Element => {
   const user = useAuthStore((state) => state.user);
+  const isLoading = useAuthStore((state) => state.isLoading);
   const location = useLocation();
 
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
   if (!user) {
     return <Navigate to={`/login?redirect=${location.pathname}`} replace />;
   }

src/entities/user/hooks/useSignUp.ts

@@ -1,7 +1,6 @@
 import { useNavigate } from "react-router-dom";
 
-import { saveUser } from "@entities/user/api/userApi";
-
+import { saveUser } from "@shared/api/userApi";
 import { useAuthStore } from "@shared/stores/authStore";
 import type { UserInput } from "@shared/types/user";
 

src/entities/user/hooks/useUpdateUser.ts

@@ -0,0 +1,29 @@
+import {
+  useMutation,
+  useQueryClient,
+  type UseMutationResult,
+} from "@tanstack/react-query";
+
+import { updateUser } from "@shared/api/userApi";
+import type { User } from "@shared/types/user";
+
+export const useUpdateUser = (): UseMutationResult<
+  void,
+  Error,
+  {
+    uid: string;
+    userInfo: Partial<User>;
+  },
+  unknown
+> => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ uid, userInfo }: { uid: string; userInfo: Partial<User> }) =>
+      updateUser(uid, userInfo),
+    onSuccess: (_, { uid }) => {
+      // 유저 프로필 쿼리 무효화하여 최신 데이터로 갱신
+      queryClient.invalidateQueries({ queryKey: ["userProfile", uid] });
+    },
+  });
+};

src/entities/user/hooks/useUpdateUserForm.ts

@@ -0,0 +1,92 @@
+import { useState } from "react";
+
+import type { User, UserInput, UserRole } from "@shared/types/user";
+import { UserExperience } from "@shared/types/user";
+
+interface UseUpdateUserFormProps {
+  defaultUser: User;
+}
+
+interface UseUpdateUserFormReturn {
+  name: string;
+  userRole: string;
+  experience: string;
+  introduceMyself: string;
+  errors: {
+    name: boolean;
+    userRole: boolean;
+    experience: boolean;
+  };
+  handleChange: (
+    field: "name" | "userRole" | "experience" | "introduceMyself"
+  ) => (value: string) => void;
+  handleSubmit: () => UserInput | null;
+}
+
+export function useUpdateUserForm({
+  defaultUser,
+}: UseUpdateUserFormProps): UseUpdateUserFormReturn {
+  const [name, setName] = useState(defaultUser.name);
+  const [userRole, setUserRole] = useState<string>(defaultUser.userRole);
+  const [experience, setExperience] = useState<string>(defaultUser.experience);
+  const [introduceMyself, setIntroduceMyself] = useState(
+    defaultUser.introduceMyself || ""
+  );
+  const [errors, setErrors] = useState({
+    name: false,
+    userRole: false,
+    experience: false,
+  });
+
+  const handleChange =
+    (field: "name" | "userRole" | "experience" | "introduceMyself") =>
+    (value: string) => {
+      switch (field) {
+        case "name":
+          setName(value);
+          if (errors.name) setErrors((prev) => ({ ...prev, name: false }));
+          break;
+        case "userRole":
+          setUserRole(value);
+          if (errors.userRole)
+            setErrors((prev) => ({ ...prev, userRole: false }));
+          break;
+        case "experience":
+          setExperience(value);
+          if (errors.experience)
+            setErrors((prev) => ({ ...prev, experience: false }));
+          break;
+        case "introduceMyself":
+          setIntroduceMyself(value);
+          break;
+      }
+    };
+
+  const handleSubmit = (): UserInput | null => {
+    if (name === "" || userRole === "" || experience === "") {
+      setErrors({
+        name: name === "",
+        userRole: userRole === "",
+        experience: experience === "",
+      });
+      return null;
+    }
+
+    return {
+      name,
+      userRole: userRole as UserRole,
+      experience: experience as UserExperience,
+      introduceMyself: introduceMyself || "",
+    };
+  };
+
+  return {
+    name,
+    userRole,
+    experience,
+    introduceMyself,
+    errors,
+    handleChange,
+    handleSubmit,
+  };
+}

src/entities/user/ui/SubmitButton.tsx

@@ -1,8 +1,16 @@
 import { Button, styled } from "@mui/material";
 import type { JSX } from "react";
 
-const SubmitButton = ({ onClick }: { onClick: () => void }): JSX.Element => {
-  return <SignupButton onClick={onClick}>회원가입 완료</SignupButton>;
+interface SubmitButtonProps {
+  onClick: () => void;
+  text?: string;
+}
+
+const SubmitButton = ({
+  onClick,
+  text = "회원가입 완료",
+}: SubmitButtonProps): JSX.Element => {
+  return <SignupButton onClick={onClick}>{text}</SignupButton>;
 };
 
 export default SubmitButton;