[feat] integrate user api for mypage

.eslintrc.json

@@ -7,7 +7,6 @@
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": ["error"],
-    "no-unused-vars": "warn",
     "@typescript-eslint/no-unused-vars": "warn"
   }
 }

src/app/mypage/components/FileInput.tsx

@@ -1,25 +1,36 @@
+import { useEffect } from 'react';
 import { ChangeEvent, useState } from 'react';
 import Image from 'next/image';
-import { UseFormSetValue } from 'react-hook-form';
-import { FormValues } from './ProfileForm';
+import { UseFormSetValue, FieldValues, Path, PathValue } from 'react-hook-form';
 import styles from './FileInput.module.css';
 
-interface FileInputProps {
-  name: 'imgFile';
-  setValue: UseFormSetValue<FormValues>;
+interface FileInputProps<T extends FieldValues> {
+  name: Path<T>;
+  setValue: UseFormSetValue<T>;
+  url?: string | null;
 }
 
-export default function FileInput({ name, setValue }: FileInputProps) {
-  const [preview, setPreview] = useState('');
+export default function FileInput<T extends FieldValues>({
+  name,
+  setValue,
+  url,
+}: FileInputProps<T>) {
+  const [preview, setPreview] = useState<string | null>(null);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
       setPreview(URL.createObjectURL(file));
-      setValue('image', file);
+      setValue(name, file as PathValue<T, Path<T>>);
     }
   };
 
+  useEffect(() => {
+    if (url) {
+      setPreview(url);
+    }
+  }, [url]);
+
   return (
     <>
       <label className={styles.label} htmlFor={name}>

src/app/mypage/components/PasswordForm.module.css → src/app/mypage/components/Form.module.css

@@ -11,6 +11,7 @@
 }
 
 .button {
+  line-height: 24px;
   margin-top: 24px;
   padding: 15px 113.5px;
 }

src/app/mypage/components/Input.module.css

@@ -20,6 +20,7 @@
 }
 
 .input:read-only {
+  color: var(--gray-400);
   outline: none;
 }
 

src/app/mypage/components/PasswordForm.tsx

@@ -1,12 +1,12 @@
-'use client';
-
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import Input from './Input';
-import Button from './Button';
-import styles from './PasswordForm.module.css';
+import Button from '@/components/Button';
+import { ERROR_MESSAGES } from '../constants/message';
+import styles from './Form.module.css';
+import { updatePassword } from '../lib/authHelper';
 
-interface FormValues {
+export interface PasswordFormValues {
   currentPassword: string;
   newPassword: string;
   newPasswordConfirmation: string;
@@ -16,14 +16,18 @@ export default function PasswordForm() {
   const {
     register,
     handleSubmit,
-    formState: { errors, isValid },
+    formState: { errors },
     watch,
     trigger,
-  } = useForm<FormValues>({ mode: 'onChange' });
+    setError,
+    reset,
+  } = useForm<PasswordFormValues>({ mode: 'onChange' });
 
+  const customIsValid = Object.keys(errors).length === 0;
   const watchedPassword = watch('newPassword');
 
-  const onSubmit = () => {};
+  const onSubmit = async (data: PasswordFormValues) =>
+    updatePassword(data, reset, setError);
 
   useEffect(() => {
     if (watchedPassword) {
@@ -40,6 +44,8 @@ export default function PasswordForm() {
         name="currentPassword"
         label="현재 비밀번호"
         placeholder="비밀번호 입력"
+        register={register('currentPassword')}
+        error={errors.currentPassword}
       />
       <Input
         className={styles.input}
@@ -50,7 +56,7 @@ export default function PasswordForm() {
         register={register('newPassword', {
           minLength: {
             value: 8,
-            message: '비밀번호를 8자 이상 입력해주세요.',
+            message: ERROR_MESSAGES.PASSWORD_TOO_SHORT,
           },
         })}
         error={errors.newPassword}
@@ -63,12 +69,12 @@ export default function PasswordForm() {
         register={register('newPasswordConfirmation', {
           validate: {
             matchesPassword: (value) =>
-              value === watchedPassword || '비밀번호가 일치하지 않습니다.',
+              value === watchedPassword || ERROR_MESSAGES.PASSWORDS_MATCH,
           },
         })}
         error={errors.newPasswordConfirmation}
       />
-      <Button className={styles.button} type="submit" disabled={!isValid}>
+      <Button className={styles.button} type="submit" disabled={!customIsValid}>
         변경
       </Button>
     </form>

src/app/mypage/components/ProfileForm.tsx

@@ -1,32 +1,53 @@
-'use client';
-
+import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import Button from './Button';
-import Input from './Input';
-import styles from './ProfileForm.module.css';
+import useAuth from '../hooks/useAuth';
 import FileInput from './FileInput';
+import Input from './Input';
+import Button from '@/components/Button';
+import { updateProfile } from '../lib/authHelper';
+import styles from './Form.module.css';
 
-export interface FormValues {
-  image: File;
+export interface ProfileFormValues {
+  image: File | null;
   email: string;
   nickname: string;
 }
 
 export default function ProfileForm() {
-  const { handleSubmit, setValue } = useForm<FormValues>();
+  const { user } = useAuth();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    reset,
+  } = useForm<ProfileFormValues>();
 
-  const onSubmit = () => {};
+  const customIsValid = Object.keys(errors).length === 0;
+
+  const onSubmit = async (data: ProfileFormValues) => updateProfile(data);
+
+  useEffect(() => {
+    if (user) {
+      const { email, nickname } = user;
+      reset({ email, nickname });
+    }
+  }, [reset, user]);
 
   return (
     <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
       <h2>프로필</h2>
-      <FileInput name="imgFile" setValue={setValue} />
+      <FileInput<ProfileFormValues>
+        name="image"
+        setValue={setValue}
+        url={user?.profileImageUrl}
+      />
       <Input
         className={styles.input}
         type="text"
         name="email"
         label="이메일"
-        placeholder="test@email.com"
+        register={register('email')}
         readOnly
       />
       <Input
@@ -35,8 +56,11 @@ export default function ProfileForm() {
         name="nickname"
         label="닉네임"
         placeholder="닉네임 입력"
+        register={register('nickname')}
       />
-      <Button className={styles.button}>저장</Button>
+      <Button className={styles.button} type="submit" disabled={!customIsValid}>
+        저장
+      </Button>
     </form>
   );
 }

src/app/mypage/constants/message.ts

@@ -0,0 +1,6 @@
+export const ERROR_MESSAGES = {
+  CURRENT_PASSWORD_INCORRECT: '현재 비밀번호가 틀렸습니다.',
+  PASSWORDS_MATCH: '비밀번호가 일치하지 않습니다.',
+  SAME_AS_OLD_PASSWORD: '기존 비밀번호와 동일합니다.',
+  PASSWORD_TOO_SHORT: '비밀번호를 8자 이상 입력해주세요.',
+};

src/app/mypage/hooks/useAuth.ts

@@ -0,0 +1,46 @@
+import useAuthStore from '../store/authStore';
+import axios from '../lib/axios';
+
+const useAuth = () => {
+  const { user, accessToken, setUser, setAccessToken } = useAuthStore();
+  const isAuthenticated = !!accessToken;
+
+  const getMe = async () => {
+    try {
+      const response = await axios.get('/users/me');
+      console.log('user:', response.data);
+      setUser(response.data);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const login = async () => {
+    try {
+      const response = await axios.post('/auth/login', {
+        email: 'bono@example.com',
+        password: '12341234',
+      });
+      setAccessToken(response.data.accessToken);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const logout = async () => {
+    const setAccessToken = useAuthStore.getState().setAccessToken;
+
+    setAccessToken(null);
+  };
+
+  return {
+    user,
+    accessToken,
+    isAuthenticated,
+    getMe,
+    login,
+    logout,
+  };
+};
+
+export default useAuth;

src/app/mypage/lib/authHelper.ts

@@ -0,0 +1,62 @@
+import axios from './axios';
+import { UseFormSetError } from 'react-hook-form';
+import useAuthStore from '../store/authStore';
+import { ERROR_MESSAGES } from '../constants/message';
+import { ProfileFormValues } from '../components/ProfileForm';
+import { PasswordFormValues } from '../components/PasswordForm';
+
+export const updateProfile = async (data: ProfileFormValues) => {
+  const { image, nickname } = data;
+  const setUser = useAuthStore.getState().setUser;
+
+  let url = null;
+  try {
+    if (image) {
+      const formData = new FormData();
+      formData.append('image', image);
+      const response = await axios.post('/users/me/image', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      url = response.data.profileImageUrl;
+    }
+    const response = await axios.put('/users/me', {
+      nickname,
+      ...(url && { profileImageUrl: url }),
+    });
+    setUser(response.data);
+  } catch (error) {
+    if (error instanceof Error) {
+    }
+  }
+};
+
+export const updatePassword = async (
+  data: PasswordFormValues,
+  reset: () => void,
+  setError: UseFormSetError<PasswordFormValues>
+) => {
+  try {
+    await axios.put('/auth/password', {
+      password: data.currentPassword,
+      newPassword: data.newPassword,
+    });
+    reset();
+  } catch (error) {
+    if (error instanceof Error) {
+      if (error.message === ERROR_MESSAGES.CURRENT_PASSWORD_INCORRECT) {
+        setError('currentPassword', {
+          type: 'manual',
+          message: error.message,
+        });
+      }
+      if (error.message === ERROR_MESSAGES.SAME_AS_OLD_PASSWORD) {
+        setError('newPassword', {
+          type: 'manual',
+          message: error.message,
+        });
+      }
+    }
+  }
+};