[Feat] users/me api 함수 구현

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

@@ -1,4 +1,4 @@
-import { api } from '@/api/core';
+import { apiV1 } from '@/api/core';
 import {
   Availability,
   FollowPathParams,
@@ -15,52 +15,60 @@ import {
 export const userServiceRemote = () => ({
   // 1. 사용자 팔로우
   followUser: async (pathParams: FollowPathParams) => {
-    return api.post<string>(`/users/follow`, null, {
+    return apiV1.post<string>(`/users/follow`, null, {
       params: { followNickname: pathParams.followNickname },
     });
   },
 
   // 2. 유저 프로필 변경
   updateMyInfo: async (payloads: UpdateMyInfoPayloads) => {
-    return api.patch<User>('/users/profile', payloads);
+    return apiV1.patch<User>('/users/profile', payloads);
   },
 
   // 3. 프로필 이미지 변경
   updateMyImage: async (payloads: UpdateMyImagePayloads) => {
     const formData = new FormData();
     formData.append('file', payloads.file);
-    return api.patch<User>(`/users/profile-image`, formData);
+    return apiV1.patch<User>(`/users/profile-image`, formData);
   },
 
   // 4. 알림 설정 변경
   updateMyNotification: async (queryParams: UpdateMyNotificationQueryParams) => {
-    return api.patch<User>(
+    return apiV1.patch<User>(
       `/users/notification?isNotificationEnabled=${queryParams.isNotificationEnabled}`,
     );
   },
 
   // 5. 유저 프로필 조회
   getUser: async (pathParams: GetUserPathParams) => {
-    return api.get<User>(`/users/${pathParams.userId}`);
+    return apiV1.get<User>(`/users/${pathParams.userId}`);
   },
 
-  // 6. 닉네임 중복 검사
+  // 6. 팔로우 리스트 조회
+  // getfollowUsers
+
+  // 7. 닉네임 중복 검사
   getNicknameAvailability: async (queryParams: GetNicknameAvailabilityQueryParams) => {
-    return api.get<Availability>(`/users/nickname/availability`, {
+    return apiV1.get<Availability>(`/users/nickname/availability`, {
       params: { nickname: queryParams.nickName },
     });
   },
 
-  // 7. 이메일 중복 검사
+  // 8. 본인 프로필 조회
+  getMe: async () => {
+    return apiV1.get<User>(`/users/me`);
+  },
+
+  // 9. 이메일 중복 검사
   getEmailAvailability: async (queryParams: GetEmailAvailabilityQueryParams) => {
-    return api.get<Availability>(`/users/email/availability`, {
+    return apiV1.get<Availability>(`/users/email/availability`, {
       params: { email: queryParams.email },
     });
   },
 
-  // 8. 사용자 언팔로우
+  // 10. 사용자 언팔로우
   unfollowUser: async (params: UnfollowQueryParams) => {
-    return api.delete<string>(`/users/unfollow`, {
+    return apiV1.delete<string>(`/users/unfollow`, {
       params: { unFollowNickname: params.unFollowNickname },
     });
   },

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

@@ -1,25 +1,9 @@
 'use client';
-import { useEffect, useState } from 'react';
-
-import Cookies from 'js-cookie';
-
 import { MyPageInfo, MyPageSetting } from '@/components/pages/user/mypage';
-import { useGetUser } from '@/hooks/use-user';
+import { useGetMe } from '@/hooks/use-user/use-user-get-me';
 
 const MyPage = () => {
-  // const [userId, setUserId] = useState(0);
-  const [userId, setUserId] = useState(0);
-
-  const { data: user } = useGetUser({ userId }, { enabled: !!userId });
-
-  // userId가 MyPage의 파라미터로 전달되지 않기 때문에 직접 cookie로 꺼내와야함
-  // 하지만 서버에서는 js-cookie 활용 불가능 => hydration Error 발생
-  // 따라서 userId를 state롤 관리하고 useEffect 시 userId를 쿠키에 불러와야 해결가능
-  useEffect(() => {
-    const id = Cookies.get('userId');
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setUserId(Number(id));
-  }, []);
+  const { data: user } = useGetMe();
 
   if (!user) return null;
   return (

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

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { API } from '@/api';
+import { userKeys } from '@/lib/query-key/query-key-user';
+
+export const useGetMe = () => {
+  const query = useQuery({
+    queryKey: userKeys.me(),
+    queryFn: () => API.userService.getMe(),
+    select: (data) => ({
+      ...data,
+      profileImage: data.profileImage ?? '',
+      profileMessage: data.profileMessage ?? '',
+      mbti: data.mbti ?? '',
+    }),
+  });
+  return query;
+};

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

@@ -8,8 +8,8 @@ export const useUserImageUpdate = () => {
   const queryClient = useQueryClient();
   const query = useMutation({
     mutationFn: (payload: UpdateMyImagePayloads) => API.userService.updateMyImage(payload),
-    onSuccess: (data, _variables, _context) => {
-      queryClient.invalidateQueries({ queryKey: userKeys.item(data.userId) });
+    onSuccess: (_data, _variables, _context) => {
+      queryClient.invalidateQueries({ queryKey: userKeys.me() });
     },
     onError: () => {},
   });

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

@@ -8,8 +8,8 @@ export const useUpdateUser = () => {
   const queryClient = useQueryClient();
   const query = useMutation({
     mutationFn: (payload: UpdateMyInfoPayloads) => API.userService.updateMyInfo(payload),
-    onSuccess: (data, _variables, _context) => {
-      queryClient.invalidateQueries({ queryKey: userKeys.item(data.userId) });
+    onSuccess: (_data, _variables, _context) => {
+      queryClient.invalidateQueries({ queryKey: userKeys.me() });
     },
     onError: () => {},
   });

src/lib/query-key/query-key-user/index.ts

@@ -2,4 +2,5 @@ export const userKeys = {
   all: ['user'] as const,
   items: () => [...userKeys.all, 'item'],
   item: (id: number) => [...userKeys.all, 'item', id] as const,
+  me: () => [...userKeys.all, 'item', 'me'],
 };