+
{children}
);
@@ -32,13 +32,15 @@ const textAligns = {
const CenterItem = ({ children, textAlign = 'center' }: CenterItemProps) => {
const alignClassName = textAligns[textAlign];
return (
-
{children}
+
+ {children}
+
);
};
const RightItem = ({ children }: ItemProps) => {
return (
-
+
{children}
);
diff --git a/src/v1/profile/EditProfile.tsx b/src/v1/profile/EditProfile.tsx
new file mode 100644
index 00000000..bd9d16c0
--- /dev/null
+++ b/src/v1/profile/EditProfile.tsx
@@ -0,0 +1,193 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { SubmitHandler, useForm } from 'react-hook-form';
+
+import type { APIJobGroup } from '@/types/job';
+import type { APIUser } from '@/types/user';
+
+import { isAxiosError } from 'axios';
+import useMyProfileMutation from '@/queries/user/useMyProfileMutation';
+
+import { IconClose } from '@public/icons';
+
+import TopNavigation from '@/ui/Base/TopNavigation';
+import Input from '@/ui/Base/Input';
+import InputLength from '@/ui/Base/InputLength';
+import Select from '@/ui/Base/Select';
+import ErrorMessage from '@/ui/Base/ErrorMessage';
+import useToast from '@/ui/Base/Toast/useToast';
+
+type UserProfileProps = {
+ profile: Pick
;
+ jobGroups: APIJobGroup[];
+};
+
+type FormValues = {
+ nickname: string;
+ jobGroup: string;
+ job: string;
+};
+
+const EditProfile = ({ profile, jobGroups }: UserProfileProps) => {
+ const {
+ register,
+ watch,
+ handleSubmit,
+ formState: { errors },
+ } = useForm({
+ mode: 'all',
+ defaultValues: {
+ nickname: profile.nickname || '',
+ jobGroup: profile.job.jobGroupName || '',
+ job: profile.job.jobName || '',
+ },
+ });
+
+ const router = useRouter();
+ const myProfileMutation = useMyProfileMutation();
+ const toast = useToast();
+
+ const showToastEditSuccess = () =>
+ toast.show({
+ type: 'success',
+ message: '프로필 수정 완료!',
+ duration: 3000,
+ });
+
+ const showToastEditFailed = () =>
+ toast.show({
+ type: 'error',
+ message: '알 수 없는 에러가 발생했어요.',
+ duration: 3000,
+ });
+
+ const handleSubmitForm: SubmitHandler = ({
+ nickname,
+ jobGroup,
+ job,
+ }) => {
+ myProfileMutation.mutateAsync(
+ {
+ nickname,
+ job: { jobGroup, jobName: job },
+ },
+ {
+ onSuccess: () => {
+ router.replace('/profile/me');
+ showToastEditSuccess();
+ },
+ onError: error => {
+ if (isAxiosError(error) && error.response) {
+ console.error(error.response.data);
+ showToastEditFailed();
+ }
+ },
+ }
+ );
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ 프로필 수정
+
+
+
+
+ 완료
+
+
+
+
+
+
+ );
+};
+
+export default EditProfile;