feat: 메인페이지 크루 api 부착

Author: 1eecan

src/api/crews/getNearCrewList.ts

@@ -10,5 +10,7 @@ export const getNearCrewList = async (params: GetNearCrewListRequest) => {
     params: params,
   });
 
+  console.log(params);
+
   return data;
 };

src/mocks/data/crew/nearCrewList.ts

@@ -0,0 +1,60 @@
+import { CrewProfile } from '@type/models';
+
+export const crewList: CrewProfile[] = Array(100)
+  .fill({
+    id: 1,
+    name: '노드크루',
+    content: '안녕하세요, 노드크루입니다. 백둥체육관 201호에서 진행합니다.',
+    memberCount: 10,
+    maxMemberCount: 15,
+    profileImageUrl: 'pickpleCrewProfileImage.s3.ap-northeast-2.amazonaws.com',
+    backgroundImageUrl:
+      'pickpleCrewBackgroundImage.s3.ap-northeast-2.amazonaws.com',
+    status: '모집 중',
+    likeCount: 9,
+    competitionPoint: 104,
+    leader: {
+      id: 1,
+      email: 'james123@pickple.kr',
+      nickname: 'james123',
+      introduction: '안녕하십니까. 제임스입니다. 아이고~ 사장님~~',
+      profileImageUrl: 'https://s3.amazonaws.com/pickple/james123.jpg',
+      mannerScore: 21,
+      mannerScoreCount: 30,
+      addressDepth1: '서울시',
+      addressDepth2: '강남구',
+      positions: ['C', 'PF'],
+    },
+    addressDepth1: '서울시',
+    addressDepth2: '강남구',
+    members: [
+      {
+        id: 1,
+        email: 'james123@pickple.kr',
+        nickname: 'james123',
+        introduction: '안녕하십니까. 제임스입니다. 아이고~ 사장님~~',
+        profileImageUrl: 'https://s3.amazonaws.com/pickple/james123.jpg',
+        mannerScore: 21,
+        mannerScoreCount: 30,
+        addressDepth1: '서울시',
+        addressDepth2: '강남구',
+        positions: ['C', 'PF'],
+      },
+      {
+        id: 2,
+        email: 'james456@pickple.kr',
+        nickname: 'james456',
+        introduction: '안녕하십니까. 제임스456입니다. 아이고~ 사장님~~',
+        profileImageUrl: 'https://s3.amazonaws.com/pickple/james456.jpg',
+        mannerScore: 26,
+        mannerScoreCount: 30,
+        addressDepth1: '서울시',
+        addressDepth2: '강남구',
+        positions: ['C'],
+      },
+    ],
+  })
+  .map((crewList: CrewProfile, index) => ({
+    ...crewList,
+    id: index + 1,
+  }));

src/mocks/handlers/crew/nearCrewList.ts

@@ -0,0 +1,25 @@
+import { HttpResponse, http } from 'msw';
+
+import { crewList } from '@mocks/data/crew/nearCrewList';
+
+export const mockGetNearCrewList = http.get('/api/crews', ({ request }) => {
+  const { searchParams } = new URL(request.url);
+  const addressDepth1Value = searchParams.get('addressDepth1');
+  const addressDepth2Value = searchParams.get('addressDepth2');
+  const page = Number(searchParams.get('page'));
+  const size = Number(searchParams.get('size'));
+
+  const startIndex = page * size;
+
+  return HttpResponse.json(
+    crewList
+      .filter(({ addressDepth1, addressDepth2 }) => {
+        if (
+          addressDepth1 === addressDepth1Value &&
+          addressDepth2 === addressDepth2Value
+        )
+          return true;
+      })
+      .slice(startIndex, startIndex + size)
+  );
+});

src/pages/AllServicesPage/AllServicesPage.tsx

@@ -32,7 +32,7 @@ export const AllServicesPage = () => {
   };
 
   const getMyId = (): string | null => {
-    const data = localStorage.getItem('USER_INFO');
+    const data = localStorage.getItem('LOGIN_INFO');
 
     if (!data) {
       return null;

src/pages/MainPage/MainPage.tsx

@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { Authenticated, Registration } from '@/type/models';
 
+import { CrewItem } from '@components/CrewItem';
 import { Header } from '@components/Header';
 import { MatchItem } from '@components/MatchItem';
 import { Button } from '@components/shared/Button';
@@ -12,6 +13,7 @@ import { theme } from '@styles/theme';
 import { PATH_NAME } from '@consts/pathName';
 
 import { MainPageContainer, MainPageSubContainer } from './MainPage.style';
+import { useMainPageNearCrewListQuery } from './useMainPageNearCrewListQuery';
 import { useMainPageNearGamesQuery } from './useMainPageNearGamesQuery';
 
 export const MainPage = () => {
@@ -36,14 +38,18 @@ export const MainPage = () => {
         };
 
   const { addressDepth1, addressDepth2 } = loginInfo;
-  const { data } = useMainPageNearGamesQuery({
+  const { data: gameData } = useMainPageNearGamesQuery({
     category: 'location',
     value:
       addressDepth1 === null ? '서울시+강남구' : addressDepth2 + addressDepth2,
   });
-  console.log(data);
 
-  const filteredData = data.map(
+  const { data: crewData } = useMainPageNearCrewListQuery({
+    addressDepth1: addressDepth1 === null ? '서울시' : addressDepth1,
+    addressDepth2: addressDepth2 === null ? '영등포구' : addressDepth2,
+  });
+
+  const filteredGameData = gameData.map(
     ({
       id,
       //playStartTime,
@@ -68,12 +74,40 @@ export const MainPage = () => {
     )
   );
 
+  console.log(crewData);
+
+  const filteredCrewData = crewData.map(
+    ({
+      id,
+      name,
+      addressDepth1,
+      addressDepth2,
+      profileImageUrl,
+      members,
+      memberCount,
+      maxMemberCount,
+    }) => (
+      <CrewItem
+        key={id.toString()}
+        name={name}
+        address={`${addressDepth1} ${addressDepth2}`}
+        imgSrc={profileImageUrl}
+        membersProfileImageUrls={members.map(
+          ({ profileImageUrl }) => profileImageUrl
+        )}
+        memberCount={memberCount}
+        maxMemberCount={maxMemberCount}
+        onClick={() => navigate(PATH_NAME.GET_CREWS_PATH(id.toString()))}
+      />
+    )
+  );
+
   return (
     <MainPageContainer>
       <Header isLogo={true} />
       <MainPageSubContainer>
         <Text children={'내 근처의 경기'} weight={700} size={'1.25rem'} />
-        {filteredData}
+        {filteredGameData}
         <Button
           {...MAIN_PAGE_BUTTON_PROP}
           onClick={() => navigate(PATH_NAME.GAMES_NEAR)}
@@ -83,8 +117,11 @@ export const MainPage = () => {
       </MainPageSubContainer>
       <MainPageSubContainer>
         <Text children={'추천 크루'} weight={700} size={'1.25rem'} />
-        {filteredData}
-        <Button {...MAIN_PAGE_BUTTON_PROP} onClick={() => console.log('hi')}>
+        {filteredCrewData}
+        <Button
+          {...MAIN_PAGE_BUTTON_PROP}
+          onClick={() => navigate(PATH_NAME.CREWS_RECOMMEND)}
+        >
           더보기
         </Button>
       </MainPageSubContainer>

src/pages/MainPage/useMainPageNearCrewListQuery.ts

@@ -17,7 +17,7 @@ export const useMainPageNearCrewListQuery = ({
       getNearCrewList({
         addressDepth1,
         addressDepth2,
-        page: 1,
+        page: 0,
         size: FETCH_SIZE,
       }),
   });