[Feat] user 엔드포인트 API 연결

next.config.ts

@@ -22,6 +22,12 @@ const nextConfig: NextConfig = {
         protocol: 'https',
         hostname: 'plus.unsplash.com',
       },
+      {
+        protocol: 'https',
+        hostname: 'we-go-bucket.s3.ap-northeast-2.amazonaws.com',
+        port: '',
+        pathname: '/**',
+      },
     ],
     //imagesSizes, deviceSizes는 기본 설정
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],

src/api/service/user-service/index.ts

@@ -1,46 +1,58 @@
 import { api } from '@/api/core';
 import {
+  Availability,
   FollowParams,
+  GetEmailAvailabilityParams,
+  GetNickNameAvailabilityParams,
   GetUserParams,
   UpdateMePayload,
-  UpdateMyImagePayload,
   UpdateMyNotiParams,
+  UpdateMyProfileImagePayload,
   User,
 } from '@/types/service/user';
 
 export const userServiceRemote = () => ({
-  // 2. 프로필 편집
+  // 1. 사용자 팔로우
+  followUser: async (payload: FollowParams) => {
+    return api.post<void>(`/follows/${payload.followNickname}`);
+  },
+
+  // 2. 유저 프로필 변경
   updateMe: async (payload: UpdateMePayload) => {
-    return api.patch<User>('/users', payload);
+    return api.patch<User>('/users/profile', payload);
   },
 
-  // 3. 프로필 이미지 편집
-  updateMyImage: async (payload: UpdateMyImagePayload) => {
-    return api.patch<User>(`/users/profile-image`, payload);
+  // 3. 프로필 이미지 변경
+  updateMyProfileImage: async (payload: UpdateMyProfileImagePayload) => {
+    const formData = new FormData();
+    formData.append('file', payload.file);
+    return api.patch<User>(`/users/profile-image`, formData);
   },
 
   // 4. 알림 설정 변경
-  updatMyNotification: async (payload: UpdateMyNotiParams) => {
-    return api.patch<User>(`/users/notification/${payload.isNotificationEnabled}`);
+  updatMyNotification: async (params: UpdateMyNotiParams) => {
+    return api.patch<User>(
+      `/users/notification?isNotificationEnabled=${params.isNotificationEnabled}`,
+    );
   },
 
-  // 5. 사용자 단건 조회
+  // 5. 유저 프로필 조회
   getUser: async (payload: GetUserParams) => {
     return api.get<User>(`/users/${payload.userId}`);
   },
 
-  // 1. 사용자 팔로우
-  followUser: async (payload: FollowParams) => {
-    return api.post<void>(`/follows/${payload.followNickname}`);
+  // 6. 닉네임 중복 검사
+  getNicknameAvailability: async (params: GetNickNameAvailabilityParams) => {
+    return api.get<Availability>(`/users/nickname/availability?nickname=${params.nickName}`);
+  },
+
+  // 7. 이메일 중복 검사
+  getEmailAvailability: async (params: GetEmailAvailabilityParams) => {
+    return api.get<Availability>(`/users/email/availability?email=${params.email}`);
   },
 
-  // 6. 사용자 언팔로우
+  // 8. 사용자 언팔로우
   unfollowUser: async (payload: FollowParams) => {
     return api.delete<void>(`/follows/${payload.followNickname}`);
   },
-
-  // 7. 회원탈퇴
-  deleteMe: async () => api.delete<User>(`/users`),
-
-  // 8. 사용자 프로필 이미지 변경
 });

src/app/(user)/mypage/page.tsx

@@ -9,7 +9,6 @@ import { useGetUser } from '@/hooks/use-user';
 const MyPage = () => {
   // const [userId, setUserId] = useState(0);
   const [userId, setUserId] = useState(0);
-  // 여기서 user 정보를 확인해서 undefined이면 로그인페이지로 리다이렉트
 
   const { data: user } = useGetUser({ userId }, { enabled: !!userId });
 

src/components/pages/user/mypage/mypage-setting/index.tsx

@@ -1,6 +1,5 @@
 'use client';
-import { useState } from 'react';
-
+import { useUpdateMyNotification } from '@/hooks/use-user/use-user-notification';
 import { User } from '@/types/service/user';
 
 import { MyPageActionButton, MyPageToggleButton } from '../mypage-setting-button';
@@ -10,13 +9,14 @@ interface Props {
 }
 
 export const MyPageSetting = ({ user }: Props) => {
-  console.log(user);
-  // useState 로직은 추후 삭제 예정
-  const [isOn, setIsOn] = useState(false);
+  const { mutate } = useUpdateMyNotification();
 
   return (
     <section className='bg-mono-white flex flex-col gap-3 px-3 py-6'>
-      <MyPageToggleButton value={isOn} onClick={() => setIsOn((prev) => !prev)}>
+      <MyPageToggleButton
+        value={user.isNotificationEnabled}
+        onClick={() => mutate({ isNotificationEnabled: !user.isNotificationEnabled })}
+      >
         알림 받기
       </MyPageToggleButton>
       <MyPageActionButton onClick={() => console.log('로그아웃')}>로그아웃</MyPageActionButton>

src/components/pages/user/profile/profile-card/index.tsx

@@ -1,5 +1,4 @@
-import Image from 'next/image';
-
+import { ImageWithFallback } from '@/components/ui';
 import { User } from '@/types/service/user';
 
 interface Props {
@@ -11,7 +10,13 @@ export const ProfileCard = ({ user }: Props) => {
   return (
     <div className='flex-col-center mb-6'>
       <div className='relative mb-3 size-24 overflow-hidden rounded-full'>
-        <Image className='object-cover' alt='프로필 이미지' fill src={profileImage} />
+        <ImageWithFallback
+          className='object-cover'
+          alt='프로필 이미지'
+          fill
+          loading='eager'
+          src={profileImage}
+        />
       </div>
       <h1 className='text-text-xl-bold text-gray-900'>{nickName}</h1>
       <p className='text-text-sm-medium text-gray-600'>{profileMessage}</p>

src/components/pages/user/profile/profile-edit-fields/image-field/index.tsx

@@ -1,17 +1,15 @@
-import Image from 'next/image';
-
 import { AnyFieldApi } from '@tanstack/react-form';
 
 import { Icon } from '@/components/icon';
-import { ImageInput, ImageInputProps } from '@/components/ui';
+import { ImageInput, ImageInputProps, ImageWithFallback } from '@/components/ui';
 import { cn } from '@/lib/utils';
 
 type ImageUploadPropsWithoutChildren = Omit<ImageInputProps, 'children'>;
 
 interface Props extends ImageUploadPropsWithoutChildren {
   field: AnyFieldApi;
 }
-const ImageField = ({ field, initialImages }: Props) => {
+export const ImageField = ({ field, initialImages }: Props) => {
   return (
     <div className='flex-center py-6'>
       <ImageInput
@@ -23,34 +21,35 @@ const ImageField = ({ field, initialImages }: Props) => {
         value={field.state.value}
         onChange={field.handleChange}
       >
-        {(images, _onRemoveImageClick, onFileSelectClick) => (
-          <>
-            {Object.entries(images).map(([url, _file]) => (
-              <div key={url} className='relative aspect-square size-24'>
-                <Image
-                  className='rounded-full border-1 border-[rgba(0,0,0,0.04)]'
-                  alt='프로필 이미지'
-                  fill
-                  src={url}
-                />
-                <button
-                  className={cn(
-                    'flex-center absolute -right-1.75 bottom-0 size-8 cursor-pointer rounded-full border-1 border-gray-300 bg-gray-100',
-                    'hover:scale-110 hover:bg-gray-200',
-                    'transition-all duration-300',
-                  )}
-                  type='button'
-                  onClick={onFileSelectClick}
-                >
-                  <Icon id='edit' className='size-5 text-gray-600' />
-                </button>
-              </div>
-            ))}
-          </>
-        )}
+        {(images, _onRemoveImageClick, onFileSelectClick) => {
+          const nextImages = Object.keys(images).length > 0 ? images : { '': null };
+          return (
+            <>
+              {Object.entries(nextImages).map(([url, _file]) => (
+                <div key={url} className='relative aspect-square size-24'>
+                  <ImageWithFallback
+                    className='rounded-full border-1 border-[rgba(0,0,0,0.04)]'
+                    alt='프로필 이미지'
+                    fill
+                    src={url}
+                  />
+                  <button
+                    className={cn(
+                      'flex-center absolute -right-1.75 bottom-0 size-8 cursor-pointer rounded-full border-1 border-gray-300 bg-gray-100',
+                      'hover:scale-110 hover:bg-gray-200',
+                      'transition-all duration-300',
+                    )}
+                    type='button'
+                    onClick={onFileSelectClick}
+                  >
+                    <Icon id='edit' className='size-5 text-gray-600' />
+                  </button>
+                </div>
+              ))}
+            </>
+          );
+        }}
       </ImageInput>
     </div>
   );
 };
-
-export default ImageField;

src/components/pages/user/profile/profile-edit-fields/index.ts

@@ -0,0 +1,4 @@
+export { ImageField } from './image-field';
+export { MBTIField } from './mbti-field';
+export { MessageField } from './message-field';
+export { NickNameField } from './nickname-field';

src/components/pages/user/profile/profile-edit-modal/index.tsx

@@ -9,12 +9,11 @@ import {
   ModalTitle,
   useModal,
 } from '@/components/ui';
-import { User } from '@/types/service/user';
+import { useUpdateUser } from '@/hooks/use-user';
+import { useUserImageUpdate } from '@/hooks/use-user/use-user-image-update';
+import { UpdateMePayload, User } from '@/types/service/user';
 
-import ImageField from '../profile-edit-fields/image-field';
-import { MBTIField } from '../profile-edit-fields/mbti-field';
-import { MessageField } from '../profile-edit-fields/message-field';
-import { NickNameField } from '../profile-edit-fields/nickname-field';
+import { ImageField, MBTIField, MessageField, NickNameField } from '../profile-edit-fields';
 
 interface Props {
   user: User;
@@ -25,21 +24,40 @@ export const ProfileEditModal = ({ user }: Props) => {
 
   const { close } = useModal();
 
+  const { mutateAsync: updateUser, isPending: isUserInfoPending } = useUpdateUser();
+  const { mutateAsync: updateUserImage, isPending: isUserImagePending } = useUserImageUpdate();
+
   const form = useForm({
     defaultValues: {
-      profileImage: {
-        [image]: null,
-      } as ImageRecord,
+      profileImage: { [image]: null } as ImageRecord,
       nickName,
       profileMessage,
       mbti,
     },
     onSubmit: async ({ value }) => {
-      console.log(value);
+      const { profileImage, nickName, profileMessage, mbti } = value;
+
+      // 프로필 항목 업데이트 조건 체크
+      const nextProfileInfo: UpdateMePayload = {
+        ...(user.nickName !== value.nickName && { nickName }),
+        ...(user.profileMessage !== value.profileMessage && { profileMessage }),
+        ...(user.mbti !== value.mbti && { mbti }),
+      };
+      if (Object.values(nextProfileInfo).length > 0) {
+        await updateUser(nextProfileInfo);
+      }
+
+      // 이미지 업데이트 조건 체크
+      const imageFileObject = Object.values(profileImage)[0];
+      if (imageFileObject) {
+        await updateUserImage({ file: imageFileObject });
+      }
       close();
     },
   });
 
+  const isPending = isUserInfoPending || isUserImagePending;
+
   return (
     <ModalContent className='max-w-82.5'>
       <ModalTitle>프로필 수정</ModalTitle>
@@ -61,7 +79,9 @@ export const ProfileEditModal = ({ user }: Props) => {
           <Button variant='tertiary' onClick={close}>
             취소
           </Button>
-          <Button type='submit'>수정하기</Button>
+          <Button disabled={isPending} type='submit'>
+            {isPending ? '수정 중...' : '수정하기'}
+          </Button>
         </div>
       </form>
     </ModalContent>

src/components/ui/image-with-fallback/index.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import Image, { ImageProps } from 'next/image';
+
+import { useEffect, useState } from 'react';
+
+interface ImageWithFallbackProps extends Omit<ImageProps, 'src' | 'onError'> {
+  src: string;
+  fallbackSrc?: string;
+}
+
+export const ImageWithFallback = ({
+  src,
+  fallbackSrc = 'https://plus.unsplash.com/premium_photo-1738592736106-a17b897c0ab1?q=80&w=1934&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  ...rest
+}: ImageWithFallbackProps) => {
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setError(false);
+  }, [src]);
+
+  const imgSrc = error || !src || src === 'null' ? fallbackSrc : src;
+
+  return <Image {...rest} src={imgSrc} unoptimized onError={() => setError(true)} />;
+};

src/components/ui/index.ts

@@ -1,5 +1,6 @@
 export { Button } from './button';
 export { Hint } from './hint';
+export { ImageWithFallback } from './image-with-fallback';
 export type { ImageInputProps, ImageRecord } from './imageinput';
 export { ImageInput } from './imageinput';
 export { Input } from './input';

src/hooks/use-user/index.ts

@@ -1,4 +1,3 @@
-export { useDeleteUser } from './use-user-delete';
 export { useFollowUser } from './use-user-follow';
 export { useGetUser } from './use-user-get';
 export { useUnfollowUser } from './use-user-unfollow';

src/hooks/use-user/use-user-get/index.ts

@@ -9,6 +9,12 @@ export const useGetUser = ({ userId }: GetUserParams, options?: { enabled?: bool
     queryKey: userKeys.item(userId),
     queryFn: () => API.userService.getUser({ userId }),
     ...options,
+    select: (data) => ({
+      ...data,
+      profileImage: data.profileImage ?? '',
+      profileMessage: data.profileMessage ?? '',
+      mbti: data.mbti ?? '',
+    }),
   });
   return query;
 };

src/hooks/use-user/use-user-delete/index.ts → src/hooks/use-user/use-user-image-update/index.ts

@@ -2,18 +2,17 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { API } from '@/api';
 import { userKeys } from '@/lib/query-key/query-key-user';
+import { UpdateMyProfileImagePayload } from '@/types/service/user';
 
-export const useDeleteUser = () => {
+export const useUserImageUpdate = () => {
   const queryClient = useQueryClient();
   const query = useMutation({
-    mutationFn: () => API.userService.deleteMe(),
+    mutationFn: (payload: UpdateMyProfileImagePayload) =>
+      API.userService.updateMyProfileImage(payload),
     onSuccess: (data, _variables, _context) => {
       queryClient.invalidateQueries({ queryKey: userKeys.item(data.userId) });
-      console.log('요청 성공');
-    },
-    onError: () => {
-      console.log('요청 실패');
     },
+    onError: () => {},
   });
   return query;
 };