[#107] Feat: 유저페이지 구현

src/apis/follow.ts

@@ -0,0 +1,42 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { api } from './core';
+
+const postFollow = (userId: string) => {
+  return api.post({
+    url: `/follow/${userId}`,
+  });
+};
+
+const deleteFollow = (userId: string) => {
+  return api.delete({
+    url: `/unfollow/${userId}`,
+  });
+};
+
+export const usePostFollowAPI = (userId: string) => {
+  const QueryClient = useQueryClient();
+  const { mutateAsync } = useMutation({
+    mutationFn: () => postFollow(userId),
+    onSuccess: () =>
+      QueryClient.invalidateQueries({
+        queryKey: ['profile', userId],
+      }),
+  });
+
+  return mutateAsync;
+};
+
+export const useDeleteFollowAPI = (userId: string) => {
+  const QueryClient = useQueryClient();
+
+  const { mutateAsync } = useMutation({
+    mutationFn: () => deleteFollow(userId),
+    onSuccess: () =>
+      QueryClient.invalidateQueries({
+        queryKey: ['profile', userId],
+      }),
+  });
+
+  return mutateAsync;
+};

src/apis/logout.ts

@@ -0,0 +1,17 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { api } from './core';
+
+const logout = () => {
+  return api.post({
+    url: `/user/logout`,
+  });
+};
+
+export const useLogoutAPI = () => {
+  const { mutateAsync } = useMutation({
+    mutationFn: () => logout(),
+  });
+
+  return mutateAsync;
+};

src/apis/myInfo.ts

@@ -20,15 +20,15 @@ import { api } from './core';
 //   return data;
 // };
 
-interface UserStatus {
+interface GetUserStatusResponse {
   userId: number;
   nickname: string;
   profileImage: string | null;
   login: boolean;
 }
 
 const getUserStatus = () => {
-  return api.get<UserStatus>({
+  return api.get<GetUserStatusResponse>({
     url: `/user/status`,
   });
 };

src/apis/posting/index.ts

@@ -0,0 +1,73 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { PostingNavigation } from '@/src/app/users/profile/(posting)/layout';
+
+import { api } from '../core';
+
+export interface PostListContent {
+  postId: number;
+  voteId: number;
+  title: string;
+  commentCount: number;
+  likeCount: number;
+  voterCount: number;
+  author: string;
+  profileImageUrl: string | null;
+  postImageUrl: string | null;
+  createdAt: string;
+}
+
+interface PostListPageable {
+  pageNumber: number;
+  pageSize: number;
+  sort: PostListSort;
+  offset: number;
+  paged: boolean;
+  unpaged: boolean;
+}
+
+interface PostListSort {
+  empty: boolean;
+  unsorted: boolean;
+  sorted: boolean;
+}
+
+export interface PostList {
+  content: PostListContent[];
+  pageable: PostListPageable;
+  last: boolean;
+  totalPages: number;
+  totalElements: number;
+  first: boolean;
+  size: number;
+  number: number;
+  sort: PostListSort;
+  numberOfElements: number;
+  empty: boolean;
+}
+
+export interface PostListInitialParams {
+  page: number;
+  size: number;
+}
+
+export const getPosting = async (
+  params: PostListInitialParams,
+  category: PostingNavigation,
+) =>
+  await api.get<PostList>({
+    url: `/posts/${category}`,
+    params,
+  });
+
+export const useGetPostingAPI = (
+  params: PostListInitialParams,
+  category: PostingNavigation,
+) => {
+  const { data } = useSuspenseQuery({
+    queryKey: ['postList', category, ...Object.values(params)],
+    queryFn: () => getPosting(params, category),
+  });
+
+  return data.body;
+};

src/apis/profile.ts

@@ -2,15 +2,44 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { api } from './core';
 
-interface ProfileResponse {
+// interface ProfileResponse {
+//   email: string;
+//   nickname: string;
+//   profileImageUrl: string;
+//   introduction: string;
+//   createdAt: string;
+//   updatedAt: string;
+//   followerCount: number;
+//   followeeCount: number;
+// }
+
+export interface Body {
+  userId: number;
   email: string;
   nickname: string;
   profileImageUrl: string;
-  introduction: string;
-  createdAt: string;
-  updatedAt: string;
+  postCount: number;
   followerCount: number;
   followeeCount: number;
+  isFollowing: boolean;
+  posts: Post[];
+}
+
+export interface Post {
+  postId: number;
+  voteId: number;
+  title: string;
+  commentCount: number;
+  likeCount: number;
+  voterCount: number;
+  author: string;
+  profileImageUrl: string;
+  postImageUrl: string;
+  createdAt: string;
+  startDate: string;
+  endDate: string;
+  voteOptions: string[];
+  terminated: boolean;
 }
 
 // export const getProfile = async (userId: string) => {
@@ -23,7 +52,7 @@ interface ProfileResponse {
 // };
 
 const getProfile = (userId: string) => {
-  return api.get<ProfileResponse>({
+  return api.get<Body>({
     url: `/user/${userId}`,
   });
 };

src/app/_components/PostItem.tsx

@@ -6,9 +6,10 @@ import { isValidImageUrl } from '@/src/utils/isValidImageUrl';
 
 interface PostItemProps {
   post: PostListContent;
+  isNickname?: boolean;
 }
 
-const PostItem = ({ post }: PostItemProps) => {
+const PostItem = ({ post, isNickname = true }: PostItemProps) => {
   const {
     title,
     voterCount: votedCount,
@@ -33,7 +34,9 @@ const PostItem = ({ post }: PostItemProps) => {
         </div>
         <div className='flex items-center gap-4'>
           <span className='font-text-3-rg flex items-center gap-2'>
-            <span>{author}</span>
+            {isNickname ? (
+              <span className='font-text-3-rg'>{author}</span>
+            ) : null}
             <span className='text-gray-accent3'>{createdAt}</span>
           </span>
           <span className='flex items-center gap-2 text-gray-accent4'>

src/app/notification/page.tsx

@@ -42,7 +42,7 @@ const Notification = () => {
       <TopBar.Container>
         <p className='font-h2-sm'>알림</p>
       </TopBar.Container>
-      <main className='h-full grow overflow-y-scroll'>
+      <main className='grow overflow-y-scroll'>
         {ALARM_DUMMY.length === 0 ? (
           <div className='flex h-full flex-col items-center justify-center gap-2 text-white'>
             <Icon id='warning' aria-label='알림이 없습니다.' size={64} />

src/app/page.tsx

@@ -39,7 +39,7 @@ const Main = () => {
             </Link>
           ))
         ) : (
-          <EmptyPage />
+          <EmptyPage text='작성된 투표 글이 없습니다.' />
         )}
       </main>
       <GNB />