Merge pull request #304 from devpalsPlus/feat/#302

유저페이지 카테고리 분리, 공지사항 상세 인피티니 삭제, FAQ 더보기 애니메이션 추가 #302

Author: YouD0313

src/api/userpage.api.ts

@@ -1,5 +1,5 @@
 import type { ApiUserInfo } from '../models/userInfo';
-import type { ApiSelectUserProject } from '../models/userProject';
+import type { ApiUserProject } from '../models/userProject';
 import { httpClient } from './http.api';
 
 export const getUserInfo = async (id: number) => {
@@ -15,8 +15,8 @@ export const getUserInfo = async (id: number) => {
 
 export const getUserJoinedProjectList = async (id: number) => {
   try {
-    const response = await httpClient.get<ApiSelectUserProject>(
-      `/user/${id}/project`
+    const response = await httpClient.get<ApiUserProject>(
+      `/user/${id}/participated`
     );
 
     return response.data;
@@ -25,3 +25,16 @@ export const getUserJoinedProjectList = async (id: number) => {
     throw error;
   }
 };
+
+export const getUserManagedProjectList = async (id: number) => {
+  try {
+    const response = await httpClient.get<ApiUserProject>(
+      `/user/${id}/project`
+    );
+
+    return response.data;
+  } catch (error) {
+    console.error('다른 유저 기획 프로젝트 조회: ', error);
+    throw error;
+  }
+};

src/components/user/mypage/joinedProject/MyJoinProjects.tsx

@@ -14,8 +14,6 @@ const MyJoinProjects = () => {
     return <Spinner />;
   }
 
-  if (!myJoinedProjectListData) return;
-
   return (
     <S.Container>
       <S.FilterWrapper>

src/components/user/userPage/joinedProject/UserJoinProject.tsx

@@ -0,0 +1,42 @@
+import { Link } from 'react-router-dom';
+import * as S from '../../mypage/joinedProject/MyJoinProjects.styled';
+import { ROUTES } from '../../../../constants/user/routes';
+import NoContent from '../../../common/noContent/NoContent';
+import ScrollWrapper from '../../mypage/ScrollWrapper';
+import Spinner from '../../mypage/Spinner';
+import Project from '../../mypage/joinedProject/Project';
+import { useGetUserProjectList } from '../../../../hooks/user/useGetUserProjectList';
+
+export default function UserProjects() {
+  const { userProjectData, isLoading, title } = useGetUserProjectList();
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <S.Container>
+      <S.FilterWrapper>
+        <S.FilterTitle>{title}</S.FilterTitle>
+      </S.FilterWrapper>
+      {userProjectData && userProjectData.length > 0 ? (
+        <ScrollWrapper>
+          <S.WrapperProject>
+            {userProjectData?.map((project) => (
+              <Link
+                key={project.id}
+                to={`${ROUTES.projectDetail}/${project.id}`}
+              >
+                <Project project={project} />
+              </Link>
+            ))}
+          </S.WrapperProject>
+        </ScrollWrapper>
+      ) : (
+        <S.NoWrapper>
+          <NoContent type='projects' />
+        </S.NoWrapper>
+      )}
+    </S.Container>
+  );
+}

src/components/user/userPage/userProjectList/UserProjectList.tsx

@@ -11,16 +11,15 @@ export const ROUTES = {
   manageProjectsPassNonPass: '/manage/pass-nonpass',
   mypage: '/mypage',
   mypageEdit: '/mypage/edit',
-  mypageJoinedProjects: 'joined-projects',
-  mypageAppliedProjects: 'apply-projects',
+  joinedProjects: 'joined-projects',
+  managedProjects: 'managed-projects',
   myPageNotifications: 'notifications',
   notificationsAppliedProjects: 'applied-projects',
   notificationsCheckedApplicants: 'checked-applicants',
   activityInquiries: 'inquiries',
   comments: 'comments',
   myPageActivityLog: 'activity-log',
   userpage: '/user',
-  userJoinedProject: 'joined-projects',
   modifyProject: '/project-modify',
   notFound: '/not-found',
   customerService: '/customer-service',

src/constants/user/routes.ts

@@ -16,6 +16,7 @@ export const myInfoKey = {
 export const userInfoKey = {
   userProfile: ['userProfile'],
   userJoinedList: ['userJoinedProjectList'],
+  userManagedList: ['userManagedProjectList'],
 } as const;
 
 export const ProjectListKey = {

src/hooks/queries/user/keys.ts

@@ -6,8 +6,6 @@ export const useGetNoticeDetail = (id: string) => {
   const { data: noticeDetailData, isLoading } = useQuery({
     queryKey: [CustomerService.noticeDetail, id],
     queryFn: () => getNoticeDetail(id),
-    staleTime: Infinity,
-    gcTime: Infinity,
   });
 
   return { noticeDetail: noticeDetailData, isLoading };

src/hooks/user/useGetNoticeDetail.ts

@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  getUserJoinedProjectList,
+  getUserManagedProjectList,
+} from '../../api/userpage.api';
+import { userInfoKey } from '../queries/user/keys';
+import { useLocation, useParams } from 'react-router-dom';
+import type { ApiUserProject } from '../../models/userProject';
+
+export const useGetUserProjectList = () => {
+  const { userId } = useParams();
+  const location = useLocation();
+  const isJoinedPage = location.pathname.includes('joined') ? true : false;
+  const title = isJoinedPage
+    ? '참여한 프로젝트 리스트'
+    : '기획한 프로젝트 리스트';
+
+  const { data, isLoading } = useQuery<ApiUserProject>({
+    queryKey: [userInfoKey.userManagedList, userId, isJoinedPage],
+    queryFn: () =>
+      isJoinedPage
+        ? getUserJoinedProjectList(Number(userId))
+        : getUserManagedProjectList(Number(userId)),
+  });
+
+  return { userProjectData: data?.data, isLoading, title };
+};

src/hooks/user/useGetUserProjectList.ts

@@ -2,8 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { userInfoKey } from '../queries/user/keys';
 import useAuthStore from '../../store/authStore';
 import { ApiUserInfo } from '../../models/userInfo';
-import { getUserInfo, getUserJoinedProjectList } from '../../api/userpage.api';
-import { ApiSelectUserProject } from '../../models/userProject';
+import { getUserInfo } from '../../api/userpage.api';
 
 export const useUserProfileInfo = (id: number) => {
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
@@ -17,16 +16,3 @@ export const useUserProfileInfo = (id: number) => {
 
   return { userData: data?.data, isLoading };
 };
-
-export const useUserJoinedProjectList = (id: number) => {
-  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
-
-  const { data, isLoading } = useQuery<ApiSelectUserProject>({
-    queryKey: [userInfoKey.userJoinedList, id],
-    queryFn: () => getUserJoinedProjectList(id),
-    staleTime: 1 * 60 * 1000,
-    enabled: isLoggedIn,
-  });
-
-  return { userJoinedProjectListData: data?.data, isLoading };
-};

src/hooks/user/useUserInfo.ts

@@ -25,11 +25,6 @@ export interface ApiAppliedProject extends ApiCommonType {
   data: AppliedProject[] | null;
 }
 
-export interface SelectUserProject {
-  acceptedProjects: JoinedProject[];
-  ownProjects: JoinedProject[];
-}
-
-export interface ApiSelectUserProject extends ApiCommonType {
-  data: SelectUserProject;
+export interface ApiUserProject extends ApiCommonType {
+  data: JoinedProject[];
 }