+ {/* 닉네임 */}
+
+
+
+ {
+ handleNicknameChange(e);
+ }}
+ />
+
+ {errors.nickname && (
+
+
+ {(errors as FormErrors)?.nickname?.message}
+
+ )}
+
+
+
+
+
+
+ {`${watchDescription?.length}/160`}
+
+ {errors.description && (
+
+
+ {(errors as FormErrors)?.description?.message}
+
+ )}
+
+
+
+
+ handleBackgroundChange(e)}
+ />
+ {MockBackground.map((image, index) => (
+
+ ))}
+
+
+
+ handleProfileChange(e)}
+ />
+ {MockProfile.map((image, index) => (
+
+ ))}
+
+
+ >
+ );
+}
diff --git a/src/app/account/profile/page.tsx b/src/app/account/profile/page.tsx
new file mode 100644
index 00000000..4085f553
--- /dev/null
+++ b/src/app/account/profile/page.tsx
@@ -0,0 +1,113 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+
+import { UserProfileEditType, UserType } from '@/lib/types/userProfileType';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import toasting from '@/lib/utils/toasting';
+import fileToBase64 from '@/lib/utils/fileToBase64';
+import compressFile from '@/lib/utils/compressFile';
+import toastMessage from '@/lib/constants/toastMessage';
+import { useUser } from '@/store/useUser';
+import { getUserOne } from '@/app/_api/user/getUserOne';
+import updateProfile from '@/app/_api/user/updateProfile';
+import Header from '@/components/Header/Header';
+import BlueButton from '@/components/BlueButton/BlueButton';
+
+import ProfileForm from './_components/ProfileForm';
+import * as styles from './styles.css';
+import ImagePreview from './_components/ImagePreview';
+
+/** TODO 데이터 가져오는 중 보여줄 화면 필요(로딩UI) */
+
+export default function ProfilePage() {
+ const { user } = useUser();
+ const router = useRouter();
+ const [profilePreviewUrl, setProfilePreviewUrl] = useState('');
+ const [backgroundPreviewUrl, setBackgroundPreviewUrl] = useState('');
+
+ const { data: userData } = useQuery