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

next.config.ts

@@ -21,6 +21,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,67 @@
 import { api } from '@/api/core';
 import {
-  FollowParams,
-  GetUserParams,
-  UpdateMePayload,
-  UpdateMyImagePayload,
-  UpdateMyNotiParams,
+  Availability,
+  FollowPathParams,
+  GetEmailAvailabilityQueryParams,
+  GetNicknameAvailabilityQueryParams,
+  GetUserPathParams,
+  UnfollowQueryParams,
+  UpdateMyImagePayloads,
+  UpdateMyInfoPayloads,
+  UpdateMyNotificationQueryParams,
   User,
 } from '@/types/service/user';
 
 export const userServiceRemote = () => ({
-  // 2. 프로필 편집
-  updateMe: async (payload: UpdateMePayload) => {
-    return api.patch<User>('/users', payload);
+  // 1. 사용자 팔로우
+  followUser: async (pathParams: FollowPathParams) => {
+    return api.post<string>(`/users/follow`, null, {
+      params: { followNickname: pathParams.followNickname },
+    });
   },
 
-  // 3. 프로필 이미지 편집
-  updateMyImage: async (payload: UpdateMyImagePayload) => {
-    return api.patch<User>(`/users/profile-image`, payload);
+  // 2. 유저 프로필 변경
+  updateMyInfo: async (payloads: UpdateMyInfoPayloads) => {
+    return api.patch<User>('/users/profile', payloads);
   },
 
-  // 4. 알림 설정 변경
-  updatMyNotification: async (payload: UpdateMyNotiParams) => {
-    return api.patch<User>(`/users/notification/${payload.isNotificationEnabled}`);
+  // 3. 프로필 이미지 변경
+  updateMyImage: async (payloads: UpdateMyImagePayloads) => {
+    const formData = new FormData();
+    formData.append('file', payloads.file);
+    return api.patch<User>(`/users/profile-image`, formData);
   },
 
-  // 5. 사용자 단건 조회
-  getUser: async (payload: GetUserParams) => {
-    return api.get<User>(`/users/${payload.userId}`);
+  // 4. 알림 설정 변경
+  updateMyNotification: async (queryParams: UpdateMyNotificationQueryParams) => {
+    return api.patch<User>(
+      `/users/notification?isNotificationEnabled=${queryParams.isNotificationEnabled}`,
+    );
   },
 
-  // 1. 사용자 팔로우
-  followUser: async (payload: FollowParams) => {
-    return api.post<void>(`/follows/${payload.followNickname}`);
+  // 5. 유저 프로필 조회
+  getUser: async (pathParams: GetUserPathParams) => {
+    return api.get<User>(`/users/${pathParams.userId}`);
   },
 
-  // 6. 사용자 언팔로우
-  unfollowUser: async (payload: FollowParams) => {
-    return api.delete<void>(`/follows/${payload.followNickname}`);
+  // 6. 닉네임 중복 검사
+  getNicknameAvailability: async (queryParams: GetNicknameAvailabilityQueryParams) => {
+    return api.get<Availability>(`/users/nickname/availability`, {
+      params: { nickname: queryParams.nickName },
+    });
   },
 
-  // 7. 회원탈퇴
-  deleteMe: async () => api.delete<User>(`/users`),
+  // 7. 이메일 중복 검사
+  getEmailAvailability: async (queryParams: GetEmailAvailabilityQueryParams) => {
+    return api.get<Availability>(`/users/email/availability`, {
+      params: { email: queryParams.email },
+    });
+  },
 
-  // 8. 사용자 프로필 이미지 변경
+  // 8. 사용자 언팔로우
+  unfollowUser: async (params: UnfollowQueryParams) => {
+    return api.delete<string>(`/users/unfollow`, {
+      params: { unFollowNickname: params.unFollowNickname },
+    });
+  },
 });

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/app/(user)/profile/[userId]/page.test.tsx

@@ -73,7 +73,7 @@ describe('프로필 페이지 테스트', () => {
         return HttpResponse.json(
           createMockSuccessResponse({
             ...mockUserItems[1],
-            isFollowing: false,
+            isFollow: false,
           }),
         );
       }),
@@ -93,7 +93,7 @@ describe('프로필 페이지 테스트', () => {
         return HttpResponse.json(
           createMockSuccessResponse({
             ...mockUserItems[1],
-            isFollowing: true,
+            isFollow: true,
           }),
         );
       }),

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 { UpdateMyInfoPayloads, 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,66 @@ export const ProfileEditModal = ({ user }: Props) => {
 
   const { close } = useModal();
 
+  const {
+    mutateAsync: updateUser,
+    isPending: isUserInfoPending,
+    error: _userInfoError,
+  } = useUpdateUser();
+  const {
+    mutateAsync: updateUserImage,
+    isPending: isUserImagePending,
+    error: _userImageError,
+  } = useUserImageUpdate();
+
   const form = useForm({
     defaultValues: {
-      profileImage: {
-        [image]: null,
-      } as ImageRecord,
+      profileImage: { [image]: null } as ImageRecord,
       nickName,
       profileMessage,
       mbti,
     },
+
     onSubmit: async ({ value }) => {
-      console.log(value);
-      close();
+      const { profileImage, nickName, profileMessage, mbti } = value;
+
+      // 프로필 항목 업데이트 조건 체크
+      const nextProfileInfo: UpdateMyInfoPayloads = {
+        ...(user.nickName !== value.nickName && { nickName }),
+        ...(user.profileMessage !== value.profileMessage && { profileMessage }),
+        ...(user.mbti !== value.mbti && { mbti }),
+      };
+
+      const promises = [];
+
+      // 프로필 정보 업데이트 조건 체크
+      if (Object.keys(nextProfileInfo).length > 0) {
+        promises.push(updateUser(nextProfileInfo));
+      }
+
+      // 프로필 이미지 업데이트 조건 체크
+      const imageFileObject = Object.values(profileImage)[0];
+      if (imageFileObject) {
+        promises.push(updateUserImage({ file: imageFileObject }));
+      }
+
+      /*
+      Promise 체이닝 사용 시 catch를 먹어버리기 때문에 각 mutation의 error가 업데이트 되지않음
+      따라서 try catch 방식 사용
+      */
+      /*
+      todo: 이미지 변경과 정보 변경 중 하나라도 실패하면 각 항목에 대한 에러메시지 보여줘야함
+      */
+      try {
+        await Promise.all(promises);
+        close();
+      } catch (error) {
+        console.log('요청 실패', error);
+      }
     },
   });
 
+  const isPending = isUserInfoPending || isUserImagePending;
+
   return (
     <ModalContent className='max-w-82.5'>
       <ModalTitle>프로필 수정</ModalTitle>
@@ -61,7 +105,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>