FE-27 ✨ 마이페이지 오늘의 감정 선택 main 머지 요청

src/apis/epigramComment.ts

@@ -30,6 +30,14 @@ export const getEpigramComments = async (params: CommentRequestType): Promise<Co
   }
 };
 
+export const getMyEpigramComments = async (params: CommentRequestType): Promise<CommentResponseType> => {
+  const { id, ...restParams } = params;
+  const response = await httpClient.get(`/users/${id}/comments`, {
+    params: restParams,
+  });
+  return response.data;
+};
+
 export const postComment = async (commentData: PostCommentRequest) => {
   const response = await httpClient.post('/comments', commentData);
   return response.data;

src/apis/queries.ts

@@ -4,9 +4,9 @@ import { EpigramRequestType } from '@/schema/epigram';
 import { CommentRequestType } from '@/schema/comment';
 import { GetMonthlyEmotionLogsRequestType } from '@/schema/emotion';
 import { GetEpigramsParamsType } from '@/schema/epigrams';
-import { getMe, getUser } from './user';
+import { getMe, getUser, getMyContentCount } from './user';
 import { getEpigram } from './epigram';
-import { getEpigramComments } from './epigramComment';
+import { getEpigramComments, getMyEpigramComments } from './epigramComment';
 import getMonthlyEmotionLogs from './emotion';
 import getEpigrams from './getEpigrams';
 
@@ -20,6 +20,10 @@ const queries = createQueryKeyStore({
       queryKey: [request],
       queryFn: () => getUser(request),
     }),
+    getMyContentCount: (request: GetUserRequestType) => ({
+      queryKey: ['getMyContentCount', request],
+      queryFn: () => getMyContentCount(request),
+    }),
   },
   // NOTE: Epigram 관련 query함수
   epigram: {
@@ -39,6 +43,10 @@ const queries = createQueryKeyStore({
       queryKey: ['epigramComments', request],
       queryFn: () => getEpigramComments(request),
     }),
+    getMyComments: (request: CommentRequestType) => ({
+      queryKey: ['myEpigramComments', request],
+      queryFn: () => getMyEpigramComments(request),
+    }),
   },
   emotion: {
     getMonthlyEmotionLogs: (request: GetMonthlyEmotionLogsRequestType) => ({

src/apis/user.ts

@@ -1,4 +1,4 @@
-import type { GetUserResponseType, GetUserRequestType, PatchMeRequestType, PostPresignedUrlRequestType, PostPresignedUrlResponseType } from '@/schema/user';
+import type { GetUserResponseType, GetUserRequestType, PatchMeRequestType, PostPresignedUrlRequestType, PostPresignedUrlResponseType, GetMyContentCountType } from '@/schema/user';
 import httpClient from '.';
 
 export const getMe = async (): Promise<GetUserResponseType> => {
@@ -23,3 +23,17 @@ export const createPresignedUrl = async (request: PostPresignedUrlRequestType):
   const response = await httpClient.post('/images/upload', formData);
   return response.data;
 };
+
+export const getMyContentCount = async (request: GetUserRequestType): Promise<GetMyContentCountType> => {
+  const { id } = request;
+
+  // 에피그램 카운트
+  const epigram = await httpClient.get(`/epigrams`, { params: { limit: 1, cursor: 0, writerId: id } });
+
+  // 댓글 카운트
+  const comment = await httpClient.get(`/users/${id}/comments`, { params: { limit: 1, cursor: 0 } });
+
+  const response = { epigramCount: epigram.data.totalCount, commentCount: comment.data.totalCount };
+
+  return response;
+};

src/components/main/TodayEmotion.tsx

@@ -6,7 +6,7 @@ function TodayEmotion() {
     <div className='w-[312px] md:w-[384px] lg:w-[640px]'>
       <h1 className='text-black-600 font-semibold font-pretendard leading-loose text-[16px] lg:text-[24px]'>오늘의 감정</h1>
       <div className='mt-[24px] lg:mt-[40px] flex justify-end'>
-        <EmotionSelector />;
+        <EmotionSelector />
       </div>
     </div>
   );

src/hooks/useCommentsHook.ts

@@ -0,0 +1,7 @@
+import quries from '@/apis/queries';
+import { CommentRequestType } from '@/schema/comment';
+import { useQuery } from '@tanstack/react-query';
+
+const useCommentsHook = (requset: CommentRequestType) => useQuery(quries.epigramComment.getMyComments(requset));
+
+export default useCommentsHook;

src/hooks/useGetMyContentHook.ts

@@ -0,0 +1,7 @@
+import quries from '@/apis/queries';
+import { GetUserRequestType } from '@/schema/user';
+import { useQuery } from '@tanstack/react-query';
+
+const useGetMyContentHook = (requset: GetUserRequestType) => useQuery(quries.user.getMyContentCount(requset));
+
+export default useGetMyContentHook;

src/pageLayout/MypageLayout/MyContent.tsx

@@ -4,68 +4,173 @@ import MyEpigrams from '@/user/ui-content/MyEpigrams';
 import Image from 'next/image';
 import { useToast } from '@/components/ui/use-toast';
 import { EpigramsResponse } from '@/types/epigram.types';
+import { CommentResponseType } from '@/schema/comment';
+import useCommentsHook from '@/hooks/useCommentsHook';
+import useGetMyContentHook from '@/hooks/useGetMyContentHook';
+import MyComment from '@/user/ui-content/MyComment';
+import UserInfo from '@/types/user';
+import useDeleteCommentMutation from '@/hooks/useDeleteCommentHook';
 import spinner from '../../../public/spinner.svg';
 
 interface MyContentProps {
-  userId: number;
+  user: UserInfo;
 }
 
-export default function MyContent({ userId }: MyContentProps) {
+export default function MyContent({ user }: MyContentProps) {
   const limit = 3;
-  const [cursor, setCursor] = useState(0);
-  const [epigrams, setEpigrams] = useState<EpigramsResponse>({ totalCount: 0, nextCursor: null, list: [] });
   const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [selectedTab, setSelectedTab] = useState<'epigrams' | 'comments'>('epigrams');
   const { toast } = useToast();
 
+  /** ************ 내 에피그램/댓글 카운트 조회 ************* */
+  const [epigramCount, setEpigramCount] = useState(0);
+  const [commentCount, setCommentCount] = useState(0);
+  const { data: count } = useGetMyContentHook({ id: user.id });
+  useEffect(() => {
+    if (count) {
+      setEpigramCount(count.epigramCount);
+      setCommentCount(count.commentCount);
+    }
+  }, [count]);
+
+  /** ************ 내 에피그램 조회 ************* */
+  const [epigramCursor, setEpigramCursor] = useState<number>(0);
+  const [epigrams, setEpigrams] = useState<EpigramsResponse>({ totalCount: 0, nextCursor: null, list: [] });
   const epigramsRequest = {
     limit,
-    cursor,
-    writerId: userId,
+    cursor: epigramCursor,
+    writerId: user.id,
+  };
+  const { data: epigramsData, isLoading: isEpigramsLoading, error: epigramsError } = useGetEpigrams(epigramsRequest);
+
+  /** ************ 내 댓글 조회 ************* */
+  const [commentCursor, setCommentCursor] = useState<number>(0);
+  const [comments, setComments] = useState<CommentResponseType>({ totalCount: 0, nextCursor: null, list: [] });
+  const commentsRequest = {
+    limit,
+    cursor: commentCursor,
+    id: user.id,
   };
-  const { data, isLoading, error } = useGetEpigrams(epigramsRequest);
+  const { data: commentData, isLoading: isCommentsLoading, error: commentsError, refetch: refetchComments } = useCommentsHook(commentsRequest);
 
+  // [내 에피그램] 탭 선택 시
   useEffect(() => {
-    if (data && data.list.length > 0) {
+    if (selectedTab === 'epigrams' && epigramsData) {
       setEpigrams((prev) => ({
-        totalCount: data.totalCount,
-        nextCursor: data.nextCursor,
-        list: [...prev.list, ...data.list],
+        totalCount: epigramsData.totalCount,
+        nextCursor: epigramsData.nextCursor,
+        list: [...prev.list, ...epigramsData.list],
+      }));
+      setIsLoadingMore(false);
+    }
+  }, [epigramsData, selectedTab]);
+
+  // [내 댓글] 탭 선택 시
+  useEffect(() => {
+    if (selectedTab === 'comments' && commentData) {
+      setComments((prev) => ({
+        totalCount: commentData.totalCount,
+        nextCursor: commentData.nextCursor,
+        list: [...prev.list, ...commentData.list],
       }));
       setIsLoadingMore(false);
     }
-  }, [data]);
+  }, [commentData, selectedTab]);
 
-  const handleMoreEpigramLoad = () => {
-    if (epigrams.nextCursor !== null) {
-      setCursor(epigrams.nextCursor);
+  // 더보기 버튼 클릭 시
+  const handleMoreLoad = () => {
+    if (selectedTab === 'epigrams' && epigrams.nextCursor) {
+      setEpigramCursor(epigrams.nextCursor);
+      setIsLoadingMore(true);
+    } else if (selectedTab === 'comments' && comments.nextCursor) {
+      setCommentCursor(comments.nextCursor);
       setIsLoadingMore(true);
     }
   };
 
-  if (isLoading && !isLoadingMore) {
+  // [내 에피그램] [내 댓글] 탭 선택
+  const handleTabClick = (tab: 'epigrams' | 'comments') => {
+    setSelectedTab(tab);
+    // 데이터 초기화
+    if (tab === 'epigrams') {
+      setEpigrams({ totalCount: 0, nextCursor: null, list: [] });
+      setEpigramCursor(0);
+    } else {
+      setComments({ totalCount: 0, nextCursor: null, list: [] });
+      setCommentCursor(0);
+    }
+    setIsLoadingMore(false);
+  };
+
+  // 댓글 삭제
+  const deleteCommentMutation = useDeleteCommentMutation();
+  const handleDeleteComment = async (commentId: number) => {
+    try {
+      await deleteCommentMutation.mutateAsync(commentId);
+      setComments((prev) => ({
+        totalCount: prev.totalCount - 1,
+        nextCursor: prev.nextCursor,
+        list: prev.list.filter((comment) => comment.id !== commentId),
+      }));
+      setCommentCount((prev) => prev - 1);
+      toast({
+        title: '댓글이 삭제되었습니다.',
+        variant: 'destructive',
+      });
+    } catch (error) {
+      toast({
+        title: '댓글 삭제 실패했습니다.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  // 댓글 수정
+  const handleEditComment = () => {
+    setComments({ totalCount: 0, nextCursor: null, list: [] });
+    setCommentCursor(0);
+    refetchComments();
+  };
+
+  // 로딩 중
+  if ((isEpigramsLoading || isCommentsLoading) && !isLoadingMore) {
     return <Image src={spinner} alt='로딩중' width={200} height={200} />;
   }
 
-  if (error) {
+  // 에러
+  if (epigramsError || commentsError) {
     toast({
-      description: error.message,
+      description: epigramsError?.message || commentsError?.message,
       className: 'border-state-error text-state-error font-semibold',
     });
   }
 
   return (
     <div className='flex flex-col w-full lg:max-w-[640px] md:max-w-[640px] gap-12'>
       <div className='inline-flex gap-6'>
-        <button type='button' className='text-black-600 font-semibold text-2xl'>
-          내 에피그램({epigrams.totalCount})
+        <button
+          type='button'
+          className={`font-semibold text-2xl ${selectedTab === 'epigrams' ? 'cursor-default text-black-600 ' : 'cursor-pointer text-neutral-400 '}`}
+          onClick={() => selectedTab !== 'epigrams' && handleTabClick('epigrams')}
+          disabled={selectedTab === 'epigrams'}
+        >
+          내 에피그램({epigramCount})
         </button>
-        <button type='button' className='text-neutral-400 font-semibold text-2xl'>
-          내 댓글(0)
+        <button
+          type='button'
+          className={`font-semibold text-2xl ${selectedTab === 'comments' ? 'cursor-default text-black-600 ' : 'cursor-pointer text-neutral-400 '}`}
+          onClick={() => selectedTab !== 'comments' && handleTabClick('comments')}
+          disabled={selectedTab === 'comments'}
+        >
+          내 댓글({commentCount})
         </button>
       </div>
       <div className='w-full py-[36px]'>
         <div className='flex flex-col gap-[48px]'>
-          <MyEpigrams epigrams={epigrams.list} totalCount={epigrams.totalCount} onMoreEpigramLoad={handleMoreEpigramLoad} />
+          {selectedTab === 'epigrams' && <MyEpigrams epigrams={epigrams.list} totalCount={epigrams.totalCount} onMoreEpigramLoad={handleMoreLoad} />}
+          {selectedTab === 'comments' && (
+            <MyComment comments={comments.list} totalCount={comments.totalCount} onMoreEpigramLoad={handleMoreLoad} onDeleteComment={handleDeleteComment} onEditComment={handleEditComment} />
+          )}
           {isLoadingMore && (
             <div className='w-full flex items-center justify-center lg:mt-[70px] md:mt-[50px]'>
               <Image src={spinner} alt='로딩중' width={200} height={200} />

src/pageLayout/MypageLayout/MyPageLayout.tsx

@@ -4,6 +4,7 @@ import UserInfo from '@/types/user';
 import EmotionMonthlyLogs from '@/pageLayout/MypageLayout/EmotionMonthlyLogs';
 import Profile from '@/user/ui-profile/Profile';
 import { useRouter } from 'next/navigation';
+import TodayEmotion from '@/components/main/TodayEmotion';
 import MyContent from './MyContent';
 
 export default function MyPageLayout() {
@@ -31,11 +32,13 @@ export default function MyPageLayout() {
       <div className='bg-background-100 w-full h-[200px]'></div>
       <div className='w-full flex flex-col items-center bg-blue-100 rounded-3xl relative shadow-3xl'>
         <Profile image={data.image} nickname={data.nickname} />
-        <div className='flex flex-col w-full lg:max-w-[640px] md:max-w-[640px] mt-[160px] space-y-0 md:mb-10 mb-5 border border-black'>오늘의 감정</div>
+        <div className='mt-[300px]'>
+          <TodayEmotion />
+        </div>
         <EmotionMonthlyLogs userId={data.id} />
       </div>
       <div className='bg-background-100 flex flex-col items-center w-full py-[100px]'>
-        <MyContent userId={data.id} />
+        <MyContent user={data} />
       </div>
     </div>
   );

src/schema/user.ts

@@ -30,9 +30,16 @@ export const PostPresignedUrlResponse = z.object({
   url: z.string().url(),
 });
 
+export const GetMyContentCount = z.object({
+  epigramCount: z.number(),
+  commentCount: z.number(),
+});
+
 export type GetUserResponseType = z.infer<typeof GetUserResponse>;
 export type GetUserRequestType = z.infer<typeof GetUserRequest>;
 export type PatchMeRequestType = z.infer<typeof PatchMeRequest>;
 
 export type PostPresignedUrlRequestType = z.infer<typeof PostPresignedUrlRequest>;
 export type PostPresignedUrlResponseType = z.infer<typeof PostPresignedUrlResponse>;
+
+export type GetMyContentCountType = z.infer<typeof GetMyContentCount>;