[feat] 마이페이지 API 연동

src/api/follow/apis.ts

@@ -25,12 +25,17 @@ interface FollowingRes {
   userName: string;
 }
 
-const getFollowingList = (userId: number) => {
+export type GetFollowListParamType = {
+  userId: number;
+  type: 'followings' | 'followers';
+};
+
+const getFollowList = ({ userId, type }: GetFollowListParamType) => {
   const res = authInstance<FollowingRes[]>({
     method: 'get',
-    url: `/users/${userId}/followings`,
+    url: `/users/${userId}/${type}`,
   });
   return res;
 };
-
-export { followUser, unfollowUser, getFollowingList };
+export { followUser, unfollowUser, getFollowList };
+export type { FollowingRes };

src/api/follow/followQueries.ts

@@ -1,14 +1,17 @@
 import { useQuery } from '@tanstack/react-query';
-import { getFollowingList } from './apis';
+import { GetFollowListParamType, getFollowList } from './apis';
 
 export const FOLLOWINGS_QUERY_KEYS = {
-  followings: ['followings'] as const,
+  FOLLOW: (keys: (string | number)[]) => ['follow', ...keys],
 };
 
-export const useGetFollowingList = (userId: number, options = {}) => {
+export const useGetFollowList = (
+  { userId, type }: GetFollowListParamType,
+  options = {},
+) => {
   return useQuery({
-    queryKey: FOLLOWINGS_QUERY_KEYS.followings,
-    queryFn: () => getFollowingList(userId),
+    queryKey: FOLLOWINGS_QUERY_KEYS.FOLLOW([userId, type]),
+    queryFn: () => getFollowList({ userId, type }),
     ...options,
   });
 };

src/api/info.ts

@@ -1,24 +1,24 @@
 import { authInstance } from './httpRequest';
 
-const postSocialAccount = async (socialAccount: string) => {
+const postSocialAccount = async (socialAccountUrl: string) => {
   const url = `/social-accounts`;
 
   const result = await authInstance({
     method: 'POST',
     url,
-    data: socialAccount,
+    data: { socialAccountUrl },
   });
 
   return result;
 };
 
-const removeSocialAccount = async (socialAccount: string) => {
+const removeSocialAccount = async (socialAccountUrl: string) => {
   const url = `/social-accounts`;
 
   const result = await authInstance({
     method: 'DELETE',
     url,
-    data: socialAccount,
+    data: { socialAccountUrl },
   });
 
   return result;
@@ -50,7 +50,6 @@ const removeInterest = async ({
   hashTagId: number;
   name: string;
 }) => {
-  console.log(name);
   const url = `/users/${userId}/interests?hashTagId=${hashTagId}&name=${encodeURIComponent(name)}`;
 
   const result = await authInstance({

src/api/profile.ts

@@ -1,5 +1,6 @@
-import { UserType } from '@/app/profile/types/my';
 import { getUserId } from '@/utils/manageToken';
+import { UserType } from '@/app/profile/types/profile';
+
 import { authInstance, defaultInstance } from './httpRequest';
 
 export const updateMyLinks = async (myLinks: (File | string)[]) => {

src/api/profile/apis.ts

@@ -0,0 +1,137 @@
+import { getUserId } from '@/utils/manageToken';
+import { UserType } from '@/app/profile/types/profile';
+import { authInstance } from '../httpRequest';
+
+export const getProfile = async (userId: number) => {
+  const result = await authInstance<UserType>({
+    method: 'GET',
+    url: `/users/${userId}/profile_page`,
+  });
+
+  return result;
+};
+
+export const getProfileFeeds = async ({
+  userId,
+  pageParam,
+}: {
+  userId: number;
+  pageParam?: number;
+}) => {
+  const result = await authInstance<Feed.FeedsResponse>({
+    method: 'GET',
+    url: `/users/${userId}/profile-feeds`,
+    params: {
+      lastPostId: pageParam,
+    },
+  });
+
+  return {
+    data: result.result?.data ?? [],
+    hasNextPage:
+      result.result?.hasNextPage && result.result?.data.at(-1)?.post.postId,
+  };
+};
+
+export const updateProfileInfo = async (data: {
+  username: string;
+  departmentName: string;
+  selfIntroduction: string;
+}) => {
+  const userId = getUserId();
+
+  const result = await authInstance({
+    method: 'PATCH',
+    url: `/users/${userId}/profile-info`,
+    data,
+  });
+
+  return result;
+};
+
+type UploadImageUrlType = {
+  contentUrls: string[];
+  preSignedUrls: string[];
+};
+
+const requestProfileImageUrls = async (imageCount: number) => {
+  const result = await authInstance<UploadImageUrlType>({
+    method: 'POST',
+    url: `/images`,
+    data: { imageCount, fileType: 'PROFILE_IMAGE' },
+  });
+
+  return result;
+};
+
+const uploadImageWithPresignedUrl = async ({
+  contentUrls,
+  preSignedUrls,
+  imgFiles,
+}: {
+  contentUrls: string[];
+  preSignedUrls: string[];
+  imgFiles: File[];
+}) => {
+  const response = await Promise.all(
+    preSignedUrls.map((url, index) =>
+      fetch(url, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': imgFiles[index].type,
+        },
+        body: imgFiles[index],
+      }),
+    ),
+  );
+
+  if (response.some((res) => !res?.ok)) {
+    throw new Error('이미지 업로드에 실패 했습니다. 다시 시도해주세요.');
+  }
+
+  return response.map((_, index) => ({
+    contentUrl: contentUrls[index],
+  }));
+};
+
+const uploadContentUrl = async (
+  userId: number,
+  urls: { contentUrl: string }[],
+) => {
+  return Promise.all(
+    urls.map((imgUrl) =>
+      authInstance({
+        method: 'PATCH',
+        url: `/users/${userId}/profile-image`,
+        data: imgUrl,
+      }),
+    ),
+  );
+};
+
+export const updateProfileImage = async ({
+  imgFiles,
+}: {
+  imgFiles: File[];
+}) => {
+  const userId = getUserId();
+
+  const { isSuccess, result: urls } = await requestProfileImageUrls(
+    imgFiles.length,
+  );
+
+  if (isSuccess && urls) {
+    const { contentUrls, preSignedUrls } = urls;
+    const imageContentUrls = await uploadImageWithPresignedUrl({
+      contentUrls,
+      preSignedUrls,
+      imgFiles,
+    });
+
+    const response = await uploadContentUrl(userId, imageContentUrls);
+
+    return response;
+  }
+
+  return [];
+};

src/api/profile/profileMutation.ts

@@ -0,0 +1,42 @@
+import { UseMutationOptions, useMutation } from '@tanstack/react-query';
+
+import { updateProfileImage, updateProfileInfo } from './apis';
+import {
+  HttpResponseType,
+  HttpSuccessType,
+  ResponseError,
+} from '../httpRequest';
+
+const useProfileInfoMutation = (
+  options?: UseMutationOptions<
+    HttpSuccessType<unknown>,
+    ResponseError,
+    {
+      username: string;
+      departmentName: string;
+      selfIntroduction: string;
+    }
+  >,
+) => {
+  return useMutation({
+    mutationFn: updateProfileInfo,
+    ...options,
+  });
+};
+
+const useProfileImageMutation = (
+  options?: UseMutationOptions<
+    (HttpResponseType & {
+      result?: unknown;
+    })[],
+    ResponseError,
+    { imgFiles: File[] }
+  >,
+) => {
+  return useMutation({
+    mutationFn: updateProfileImage,
+    ...options,
+  });
+};
+
+export { useProfileInfoMutation, useProfileImageMutation };

src/api/profile/profileQuery.ts

@@ -0,0 +1,63 @@
+import {
+  UseInfiniteQueryOptions,
+  UseQueryOptions,
+  useInfiniteQuery,
+  useQuery,
+} from '@tanstack/react-query';
+
+import { UserType } from '@/app/profile/types/profile';
+import { getProfileFeeds, getProfile } from './apis';
+import { HttpSuccessType, ResponseError } from '../httpRequest';
+
+export const PROPFILE_QUERY_KEYS = {
+  DEFAULT: 'default_profile',
+  PROFILE: (keys: number[]) => [
+    'my_profile',
+    PROPFILE_QUERY_KEYS.DEFAULT,
+    ...keys,
+  ],
+  FEEDS: (keys: (string | number)[]) => [
+    'feeds',
+    PROPFILE_QUERY_KEYS.DEFAULT,
+    ...keys,
+  ],
+};
+
+const useGetProfileInformation = (
+  userId: number,
+  options?: UseQueryOptions<HttpSuccessType<UserType>, ResponseError>,
+) => {
+  return useQuery({
+    queryKey: PROPFILE_QUERY_KEYS.PROFILE([userId]),
+    queryFn: () => getProfile(userId),
+    ...options,
+  });
+};
+
+type ProfileFeedType = {
+  data: Feed.FeedData[];
+  hasNextPage: number | false | undefined;
+};
+
+const useGetProfileFeeds = (
+  userId: number,
+  options?: UseInfiniteQueryOptions<
+    ProfileFeedType,
+    ResponseError,
+    Feed.FeedData[],
+    ProfileFeedType,
+    ReturnType<typeof PROPFILE_QUERY_KEYS.FEEDS>,
+    number | undefined
+  >,
+) => {
+  return useInfiniteQuery({
+    queryKey: PROPFILE_QUERY_KEYS.FEEDS([userId]),
+    queryFn: async ({ pageParam }) => getProfileFeeds({ userId, pageParam }),
+    select: (data) => data.pages[0].data,
+    getNextPageParam: (lastPage) => lastPage.hasNextPage || undefined,
+    initialPageParam: undefined,
+    ...options,
+  });
+};
+
+export { useGetProfileInformation, useGetProfileFeeds };

src/app/(MainLayout)/components/FollowingList/FollowingList.tsx

@@ -3,15 +3,16 @@
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import Typo from '@/components/common/Typo';
-import { useGetFollowingList } from '@/api/follow/followQueries';
+
 import { getUserId } from '@/utils/manageToken';
+import { useGetFollowList } from '@/api/follow/followQueries';
 
 import styles from './FollowingList.module.scss';
 
 const FollowingList = () => {
   const userId = getUserId();
 
-  const { data: followings } = useGetFollowingList(userId);
+  const { data: followings } = useGetFollowList({ type: 'followings', userId });
   const router = useRouter();
 
   const moveUserProfilePage = (followingUserId: number) => {
@@ -24,6 +25,7 @@ const FollowingList = () => {
         followings?.result?.map((user) => {
           return (
             <li
+              key={user.userId}
               className={styles.following_li}
               onClick={() => moveUserProfilePage(user.userId!)}
               aria-hidden="true"

src/app/profile/[slug]/page.module.scss

@@ -0,0 +1,12 @@
+@use '../../../styles/helpers/index' as *;
+
+.container {
+  @include res--desktop {
+    width: 66.875rem;
+    border: 1px solid $COLOR_GRAY_3;
+    border-radius: 10px;
+    background-color: $COLOR_WHITE;
+    margin: 1.875rem auto 10rem auto;
+    overflow: hidden;
+  }
+}