feat: 추천 크루 목록 페이지 구현

Author: dlwl98

src/pages/CrewsRecommendPage/CrewsRecommendPage.styles.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const PageWrapper = styled.div`
+  ${({ theme }) => theme.STYLES.LAYOUT}
+  background-color: ${({ theme }) => theme.PALETTE.GRAY_100};
+  height: 100dvh;
+`;
+
+export const PageContent = styled.div`
+  padding: 10px 0 20px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;

src/pages/CrewsRecommendPage/CrewsRecommendPage.tsx

@@ -0,0 +1,70 @@
+import { useNavigate } from 'react-router-dom';
+
+import { CrewItem } from '@components/CrewItem';
+import { Header } from '@components/Header';
+import { Text } from '@components/shared/Text';
+
+import { useNearCrewListQuery } from '@hooks/queries/useNearCrewListQuery';
+import { useHeaderTitle } from '@hooks/useHeaderTitle';
+import { useInfiniteScroll } from '@hooks/useInfiniteScroll';
+
+import { useLoginInfoStore } from '@stores/loginInfo.store';
+
+import { PATH_NAME } from '@consts/pathName';
+
+import { PageContent, PageWrapper } from './CrewsRecommendPage.styles';
+
+const DEFAULT_ADDRESS_DEPTHS = {
+  addressDepth1: '서울시',
+  addressDepth2: '강남구',
+} as const;
+
+export const CrewsRecommendPage = () => {
+  const loginInfo = useLoginInfoStore((state) => state.loginInfo);
+
+  const { nearCrews, fetchNextPage } = useNearCrewListQuery(
+    loginInfo && loginInfo.addressDepth1 !== null
+      ? {
+          addressDepth1: loginInfo.addressDepth1,
+          addressDepth2: loginInfo.addressDepth2,
+        }
+      : DEFAULT_ADDRESS_DEPTHS
+  );
+
+  const { entryRef, showHeaderTitle } = useHeaderTitle<HTMLDivElement>();
+  const lastElementRef = useInfiniteScroll<HTMLDivElement>(fetchNextPage);
+  const navigate = useNavigate();
+
+  return (
+    <PageWrapper>
+      <Header title={showHeaderTitle ? '추천 크루' : ''} />
+      <PageContent>
+        <div ref={entryRef}>
+          <Text size={20} weight={700}>
+            추천 크루
+          </Text>
+        </div>
+        {nearCrews.map((crew) => {
+          const membersProfileImageUrls = crew.members.map(
+            (member) => member.profileImageUrl
+          );
+          return (
+            <CrewItem
+              key={crew.id}
+              name={crew.name}
+              address={`${crew.addressDepth1} ${crew.addressDepth2}`}
+              imgSrc={crew.profileImageUrl}
+              membersProfileImageUrls={membersProfileImageUrls}
+              memberCount={crew.memberCount}
+              maxMemberCount={crew.maxMemberCount}
+              onClick={() =>
+                navigate(PATH_NAME.GET_CREWS_PATH(String(crew.id)))
+              }
+            />
+          );
+        })}
+        <div ref={lastElementRef}></div>
+      </PageContent>
+    </PageWrapper>
+  );
+};

src/pages/CrewsRecommendPage/index.ts

@@ -0,0 +1 @@
+export * from './CrewsRecommendPage';

src/routes/router.tsx

@@ -4,6 +4,7 @@ import { createBrowserRouter } from 'react-router-dom';
 import { AllServicesPage } from '@pages/AllServicesPage';
 import { CreateGamePage } from '@pages/CreateGamePage';
 import { CreatePage } from '@pages/CreatePage';
+import { CrewsRecommendPage } from '@pages/CrewsRecommendPage';
 import { GamesDetailPage } from '@pages/GamesDetailPage';
 import { GamesHostPage } from '@pages/GamesHostPage';
 import { GamesManagePage } from '@pages/GamesManagePage';
@@ -79,7 +80,11 @@ export const router = createBrowserRouter([
       },
       {
         path: 'crews/recommend',
-        element: <h3>crews/recommend</h3>,
+        element: (
+          <Suspense fallback={null}>
+            <CrewsRecommendPage />
+          </Suspense>
+        ),
       },
       {
         path: 'crews/chief',