[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,28 +1,35 @@
+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 styles from './FileInput.module.css';
 
 interface FileInputProps {
-  name: 'imgFile';
-  setValue: UseFormSetValue<FormValues>;
+  id: string;
+  name: 'image';
+  setValue: (name: 'image', value: File | null) => void;
+  url?: string | null;
 }
 
-export default function FileInput({ name, setValue }: FileInputProps) {
-  const [preview, setPreview] = useState('');
+export default function FileInput({ name, setValue, url, id }: FileInputProps) {
+  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);
     }
   };
 
+  useEffect(() => {
+    if (url) {
+      setPreview(url);
+    }
+  }, [url]);
+
   return (
     <>
-      <label className={styles.label} htmlFor={name}>
+      <label className={styles.label} htmlFor={id}>
         {preview ? (
           <Image src={preview} alt="미리보기" fill />
         ) : (
@@ -34,9 +41,9 @@ export default function FileInput({ name, setValue }: FileInputProps) {
       <input
         className={styles.input}
         type="file"
-        accept="image/png, image/jpeg"
+        id={id}
         name={name}
-        id={name}
+        accept="image/png, image/jpeg"
         onChange={handleChange}
       />
     </>

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,54 @@
-'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
+        id="image"
+        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 +57,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,43 @@
+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');
+      setUser(response.data);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const login = async () => {
+    try {
+      const response = await axios.post('/auth/login', {
+        email: '[email protected]',
+        password: '12341234',
+      });
+      setAccessToken(response.data.accessToken);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const logout = async () => {
+    setAccessToken(null);
+  };
+
+  return {
+    user,
+    accessToken,
+    isAuthenticated,
+    getMe,
+    login,
+    logout,
+  };
+};
+
+export default useAuth;