Feat/56/my crew page

src/app/(auth)/signup/_component/signup-form.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { UseFormReturn, useForm } from 'react-hook-form';
+import { UseFormReturn } from 'react-hook-form';
 import { Button } from '@mantine/core';
 import { useDebouncedCallback } from '@mantine/hooks';
 import PasswordInput from '@/src/components/common/input/password-input';

src/app/(crew)/crew/_components/create-crew-form/index.tsx

@@ -6,7 +6,7 @@ import { useRouter } from 'next/navigation';
 import { NumberInput } from '@mantine/core';
 import categoryData from '@/src/data/category.json';
 import regionData from '@/src/data/region.json';
-import Button from '@/src/components/common/button';
+import Button from '@/src/components/common/input/button';
 import DropDown from '@/src/components/common/input/drop-down';
 import FileInputWrap from '@/src/components/common/input/file-input-wrap';
 import TextInput from '@/src/components/common/input/text-input';

src/app/(crew)/crew/_components/create-gathering-form/index.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { NumberInput } from '@mantine/core';
-import Button from '@/src/components/common/button';
+import Button from '@/src/components/common/input/button';
 import DateTimePicker from '@/src/components/common/input/date-time-picker';
 import FileInputWrap from '@/src/components/common/input/file-input-wrap';
 import TextInput from '@/src/components/common/input/text-input';

src/components/gathering-detail-modal/container.tsx → src/app/(crew)/crew/_components/gathering-detail-modal/container.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import GatheringDetailModalPresenter from '@/src/components/gathering-detail-modal/presenter';
 import { GatheringDetailType } from '@/src/types/gathering-data';
+import GatheringDetailModalPresenter from './presenter';
 
 export interface GatheringDetailModalContainerProps {
   opened: boolean;

src/components/gathering-detail-modal/presenter.tsx → src/app/(crew)/crew/_components/gathering-detail-modal/presenter.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image';
 import { Modal, ScrollArea } from '@mantine/core';
 import { formatDate } from '@/src/utils/format-date';
 import isToday from '@/src/utils/is-today';
-import Button from '@/src/components/common/button';
+import Button from '@/src/components/common/input/button';
 import { Profile } from '@/src/components/common/profile';
 import { GatheringDetailType } from '@/src/types/gathering-data';
 import IcoClock from '@/public/assets/icons/ic-clock.svg';

src/app/(crew)/crew/create/page.tsx

@@ -21,7 +21,7 @@ export default function CreateCrewPage() {
   };
 
   return (
-    <div className="lg:px-8.5 flex flex-col gap-3 gap-8 px-3 md:gap-4 md:px-8">
+    <div className="lg:px-8.5 flex flex-col gap-3 px-3 py-8 md:gap-4 md:px-8 md:py-12.5 lg:gap-8">
       <div className="flex items-center gap-3">
         <figure className="relative h-16 w-20">
           <Image

src/app/(crew)/crew/detail/[id]/edit/page.tsx

@@ -22,7 +22,7 @@ export default function EditCrewPage() {
   };
 
   return (
-    <div className="lg:px-8.5 flex flex-col gap-3 px-3 md:gap-4 md:px-8 lg:gap-8">
+    <div className="lg:px-8.5 flex flex-col gap-3 px-3 py-8 md:gap-4 md:px-8 md:py-12.5 lg:gap-8">
       <div className="flex items-center gap-3">
         <figure className="relative h-16 w-20">
           <Image

src/app/(crew)/crew/detail/[id]/page.tsx

@@ -1,7 +1,7 @@
 import { getCrewDetail } from '@/src/_apis/detail/get-crew-detail';
 import { getGatheringList } from '@/src/_apis/detail/get-gathering-list';
-import Button from '@/src/components/common/button';
 import DetailCrewCard from '@/src/components/common/crew-list/detail-crew-card';
+import Button from '@/src/components/common/input/button';
 import GatheringCardCarousel from '@/src/components/gathering-list/gathering-card-carousel';
 import CrewReviewSection from './_components/review-section';
 

src/app/(crew)/layout.tsx

@@ -11,7 +11,9 @@ export default function RootLayout({
     <>
       <Header />
       <div className="flex min-h-screen flex-col items-center bg-gray-50">
-        <main className="container flex max-w-pc flex-col md:shadow-bg">{children}</main>
+        <main className="container flex min-h-screen max-w-pc flex-col md:shadow-bg">
+          {children}
+        </main>
       </div>
     </>
   );

src/app/(crew)/my-crew/page.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useState } from 'react';
+import { useInfiniteScroll } from '@/src/hooks/useInfiniteScroll';
+import { fetchCrewData } from '@/src/app/api/mock-api/crew';
+import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
+import Tabs from '@/src/components/common/tab';
+import { CrewCardInformResponse } from '@/src/types/crew-card';
+
+export default function MyCrePage() {
+  const myPageTabs = [
+    { label: '내가 참여한 크루', id: 'joined-crew' },
+    { label: '내가 만든 크루', id: 'made-crew' },
+  ];
+  const [currentTab, setCurrentTab] = useState(myPageTabs[0].id);
+
+  // TODO: fetchCrewData 함수를 사용하여 데이터를 불러오기 : 파라미터 수정 필요
+  const { data, ref, isFetchingNextPage } = useInfiniteScroll<CrewCardInformResponse>({
+    queryKey: ['crew'],
+    queryFn: ({ pageParam = 0 }) => {
+      return fetchCrewData(pageParam, 3);
+    },
+    getNextPageParam: (lastPage, allPages) =>
+      lastPage.hasNextPage ? allPages.length + 1 : undefined,
+  });
+  return (
+    <div className="py-8 md:py-12.5">
+      <div className="px-3 md:px-8 lg:px-11.5">
+        <Tabs
+          variant="default"
+          tabs={myPageTabs}
+          activeTab={currentTab}
+          onTabClick={(id) => {
+            setCurrentTab(id);
+          }}
+        />
+      </div>
+      <div className="mt-8 px-3 md:px-8 lg:px-11.5">
+        <CrewCardList
+          inWhere="my-crew"
+          data={data}
+          ref={ref}
+          isFetchingNextPage={isFetchingNextPage}
+        />
+      </div>
+    </div>
+  );
+}

src/app/(crew)/mypage/page.tsx

@@ -3,9 +3,9 @@
 import { useState } from 'react';
 import { Divider } from '@mantine/core';
 import { useInfiniteScroll } from '@/src/hooks/useInfiniteScroll';
+import ProfileCardContainer from '@/src/app/(crew)/mypage/_components/profile-card/container';
 import ReviewCardList from '@/src/components/common/review-list/review-card-list';
 import Tabs from '@/src/components/common/tab';
-import ProfileCardContainer from '@/src/components/my-page/profile-card/container';
 import { ReviewInformResponse } from '@/src/types/review';
 import { fetchMyReviewData } from '../../api/mock-api/review';
 

src/app/(crew)/page.tsx

@@ -5,21 +5,15 @@ import Image from 'next/image';
 import { Divider } from '@mantine/core';
 import regionData from '@/src/data/region.json';
 import { useInfiniteScroll } from '@/src/hooks/useInfiniteScroll';
+import CategoryContainer from '@/src/app/_components/category/category-container';
+import HeroCrew from '@/src/app/_components/hero/hero-crew';
 import { fetchCrewData } from '@/src/app/api/mock-api/crew';
-import CategoryContainer from '@/src/components/common/category/category-container';
 import CrewCardList from '@/src/components/common/crew-list/crew-card-list';
-import HeroCrew from '@/src/components/common/hero/hero-crew';
 import DropDown from '@/src/components/common/input/drop-down';
 import TextInput from '@/src/components/common/input/text-input';
 import { CrewCardInformResponse } from '@/src/types/crew-card';
 import IcoSearch from '@/public/assets/icons/ic-search.svg';
 
-export interface ValuesType {
-  region: string;
-  date: Date;
-  sort: string;
-}
-
 export default function Home() {
   const [mainCategory, setMainCategory] = useState('cardio_strength');
   const [subCategory, setSubCategory] = useState('running');
@@ -37,7 +31,7 @@ export default function Home() {
   });
 
   return (
-    <>
+    <div className="py-8 md:py-12.5">
       <div className="flex flex-col px-3 md:px-8 lg:px-11.5">
         <HeroCrew />
         <CategoryContainer
@@ -90,6 +84,6 @@ export default function Home() {
       <div className="mt-8 px-3 md:px-8 lg:px-11.5">
         <CrewCardList data={data} ref={ref} isFetchingNextPage={isFetchingNextPage} />
       </div>
-    </>
+    </div>
   );
 }

src/components/common/category/category-container/index.tsx → src/app/_components/category/category-container/index.tsx

@@ -2,8 +2,8 @@
 
 import { useEffect, useState } from 'react';
 import category from '@/src/data/category.json';
-import InternalCategory from '@/src/components/common/category/internal-category';
-import MainCategory from '@/src/components/common/category/main-category';
+import InternalCategory from '@/src/app/_components/category/internal-category';
+import MainCategory from '@/src/app/_components/category/main-category';
 
 export interface CategoryContainerProps {
   mainCategory: string;

src/components/common/category/internal-category/index.tsx → src/app/_components/category/internal-category/index.tsx

@@ -2,7 +2,7 @@
 
 import { usePathname } from 'next/navigation';
 import { useSlider } from '@/src/hooks/useSlider';
-import Button from '@/src/components/common/button';
+import Button from '@/src/components/common/input/button';
 import { CategoryItem } from '@/src/types/category';
 
 export interface InternalCategoryProps {

src/components/common/category/main-category/index.tsx → src/app/_components/category/main-category/index.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { usePathname } from 'next/navigation';
-import Button from '@/src/components/common/button';
+import Button from '@/src/components/common/input/button';
 import { MainCategoryItem } from '@/src/types/category';
 
 export interface MainCategoryProps {

src/components/common/crew-list/crew-card.tsx

@@ -7,6 +7,7 @@ import ProgressBar from '@/src/components/common/progress-bar/index';
 import { CrewMemberList } from '@/src/types/crew-card';
 import Check from '@/public/assets/icons/ic-check.svg';
 import UserIco from '@/public/assets/icons/ic-user.svg';
+import Profiles from './profiles';
 
 interface CrewCardProps {
   id: number;
@@ -18,8 +19,8 @@ interface CrewCardProps {
   isConfirmed: boolean;
   thumbnail: string;
   gatheringCount: number;
-  inWhere?: 'my-crew';
   crewMember?: CrewMemberList[];
+  inWhere?: 'my-crew';
 }
 
 export default function CrewCard({
@@ -57,7 +58,7 @@ export default function CrewCard({
       className="relative mx-auto flex h-[430px] w-full animate-fade cursor-pointer flex-col overflow-hidden rounded-[14px] bg-white shadow-bg md:h-[203px] md:flex-row"
     >
       {/* 썸네일 */}
-      <div className="relative h-[203px] w-full flex-shrink-0 md:w-[230px] lg:w-[200px]">
+      <div className="relative h-[203px] w-full flex-shrink-0 md:w-[230px]">
         <Image fill objectFit="cover" alt={name} src={thumbnail} />
       </div>
 
@@ -83,6 +84,11 @@ export default function CrewCard({
                 <span className="text-base font-medium">
                   {participantCount}/{capacity}
                 </span>
+                {inWhere === 'my-crew' && (
+                  <span>
+                    <Profiles size="medium" profiles={crewMember ?? []} />
+                  </span>
+                )}
               </div>
               {isConfirmed && (
                 <span className="flex items-center gap-[1px] text-blue-600">

src/components/common/crew-list/profiles.tsx

@@ -7,7 +7,7 @@ interface ProfilesProps {
 }
 
 export default function Profiles({ size = 'small', profiles }: ProfilesProps) {
-  const shows = 4;
+  const shows = 4; // 최대 표시할 프로필 수를 고정값으로 설정
   const visibleProfiles = profiles.slice(0, shows);
   const extraCount = profiles.length - shows;
 

src/components/common/gathering-card/container.tsx

@@ -2,8 +2,8 @@
 
 import { useState } from 'react';
 import { useDisclosure } from '@mantine/hooks';
+import GatheringDetailModalContainer from '@/src/app/(crew)/crew/_components/gathering-detail-modal/container';
 import { GatheringDetailType } from '@/src/types/gathering-data';
-import GatheringDetailModalContainer from '../../gathering-detail-modal/container';
 import GatheringCardPresenter from './presenter';
 
 interface GatheringCardContainerProps {

src/components/common/gathering-card/presenter.tsx

@@ -3,8 +3,8 @@ import Image from 'next/image';
 import { Badge } from '@mantine/core';
 import { cn } from '@/src/hooks/cn';
 import { formatDate } from '@/src/utils/format-date';
-import Button from '@/src/components/common/button';
-import LikeBtn from '@/src/components/common/button/like-btn';
+import Button from '@/src/components/common/input/button';
+import LikeBtn from '@/src/components/common/input/button/like-btn';
 import IcoPerson from '@/public/assets/icons/person.svg';
 import IcoTimer from '@/public/assets/icons/timer.svg';
 

src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { Badge } from '@mantine/core';
 import { formatDate } from '@/src/utils/format-date';
-import LikeBtn from '@/src/components/common/button/like-btn';
+import LikeBtn from '@/src/components/common/input/button/like-btn';
 import IcoPerson from '@/public/assets/icons/person.svg';
 
 interface ScheduledGatheringCardPresenterProps {

src/components/common/header/container.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuthStore } from '@/src/store/use-auth-store';
 import HeaderPresenter from '@/src/components/common/header/presenter';

src/components/common/modal/confirm-cancel-modal.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Modal } from '@mantine/core';
-import Button from '@/src/components/common/button/index';
+import Button from '@/src/components/common/input/button/index';
 
 interface ConfirmCancelModalProps {
   children: ReactNode;

src/components/common/modal/confirm-modal.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Modal } from '@mantine/core';
-import Button from '@/src/components/common/button/index';
+import Button from '@/src/components/common/input/button/index';
 
 interface ConfirmModalProps {
   children: ReactNode;