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

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/userPage/userProjectList/UserProjectList.tsx

@@ -0,0 +1,44 @@
+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 />;
+  }
+
+  if (!userProjectData) return;
+
+  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/constants/user/routes.ts

@@ -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/hooks/queries/user/keys.ts

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

src/hooks/user/useGetNoticeDetail.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/useGetUserProjectList.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/useUserInfo.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/models/userProject.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[];
 }

src/pages/user/customerService/faq/FAQ.styled.ts

@@ -23,11 +23,9 @@ export const ShowMoreFAQWrapper = styled.div``;
 
 export const ShowMoreFAQ = styled.button`
   width: 100%;
-  padding: 1.2rem 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 0.5rem;
   font-weight: bold;
   font-size: 1rem;
 
@@ -39,3 +37,26 @@ export const ShowMoreFAQ = styled.button`
     background: ${({ theme }) => theme.color.lightgrey};
   }
 `;
+
+export const ShowMoreSpan = styled.span`
+  width: 100%;
+  padding: 1.2rem 0;
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  @keyframes bounce {
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-3px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  &:hover {
+    animation: bounce 0.4s infinite;
+  }
+`;

src/pages/user/customerService/faq/FAQ.tsx

@@ -57,8 +57,10 @@ export default function FAQ() {
                 type='button'
                 onClick={() => setShowFAQ((prev) => prev + 10)}
               >
-                더보기
-                <ChevronDownIcon />
+                <S.ShowMoreSpan>
+                  더보기
+                  <ChevronDownIcon />
+                </S.ShowMoreSpan>
               </S.ShowMoreFAQ>
               <ContentBorder />
             </>

src/pages/user/mypage/MyPage.tsx

@@ -20,7 +20,7 @@ const MyPage = () => {
     },
     {
       label: '참여 프로젝트',
-      path: `${ROUTES.mypage}/${ROUTES.mypageJoinedProjects}`,
+      path: `${ROUTES.mypage}/${ROUTES.joinedProjects}`,
       icon: <DocumentTextIcon />,
     },
     {

src/pages/user/userpage/UserPage.tsx

@@ -17,7 +17,12 @@ const UserPage = () => {
     },
     {
       label: '참여 프로젝트',
-      path: `${ROUTES.userpage}/${userId}/${ROUTES.userJoinedProject}`,
+      path: `${ROUTES.userpage}/${userId}/${ROUTES.joinedProjects}`,
+      icon: <DocumentTextIcon width='20px' height='20px' />,
+    },
+    {
+      label: '기획 프로젝트',
+      path: `${ROUTES.userpage}/${userId}/${ROUTES.managedProjects}`,
       icon: <DocumentTextIcon width='20px' height='20px' />,
     },
   ];

src/routes/AppRoutes.tsx

@@ -92,8 +92,8 @@ const ActivityLogInquiries = lazy(
 const UserProfile = lazy(
   () => import('../components/user/userPage/userProfile/UserProfile')
 );
-const UserJoinProject = lazy(
-  () => import('../components/user/userPage/joinedProject/UserJoinProject')
+const UserProjects = lazy(
+  () => import('../components/user/userPage/userProjectList/UserProjectList')
 );
 const ModifyProject = lazy(
   () => import('../pages/user/modifyProject/ModifyProject')
@@ -266,7 +266,7 @@ const AppRoutes = () => {
           ],
         },
         {
-          path: ROUTES.mypageJoinedProjects,
+          path: ROUTES.joinedProjects,
           element: <MyJoinProjects />,
         },
         {
@@ -322,8 +322,12 @@ const AppRoutes = () => {
           children: [{ index: true, element: <Profile /> }],
         },
         {
-          path: ROUTES.userJoinedProject,
-          element: <UserJoinProject />,
+          path: ROUTES.joinedProjects,
+          element: <UserProjects />,
+        },
+        {
+          path: ROUTES.managedProjects,
+          element: <UserProjects />,
         },
       ],
     },