feat: search 로직 변경, 무한 스크롤 추가

src/components/search/GroupSearchResult.tsx

@@ -8,11 +8,16 @@ import type { SearchRoomItem } from '@/api/rooms/getSearchRooms';
 const FILTER = ['마감임박순', '인기순'];
 const CATEGORIES = ['문학', '과학·IT', '사회과학', '인문학', '예술'] as const;
 
+type ResultType = 'searching' | 'searched';
+
 interface Props {
+  type: ResultType;
   rooms: SearchRoomItem[];
   isLoading: boolean;
-  isLast: boolean;
-  onLoadMore: () => void;
+  isLoadingMore?: boolean;
+  hasMore?: boolean;
+  lastRoomElementCallback?: (node: HTMLDivElement | null) => void;
+
   error: string | null;
   selectedFilter: string;
   setSelectedFilter: (v: string) => void;
@@ -33,10 +38,12 @@ const mapToGroupCardModel = (r: SearchRoomItem) => ({
 });
 
 const GroupSearchResult = ({
+  type,
   rooms,
   isLoading,
-  isLast,
-  onLoadMore,
+  isLoadingMore = false,
+  hasMore = false,
+  lastRoomElementCallback,
   error,
   selectedFilter,
   setSelectedFilter,
@@ -63,33 +70,41 @@ const GroupSearchResult = ({
           );
         })}
       </TabContainer>
+
       <GroupCardHeader>
-        <GroupNum>전체 {mapped.length}</GroupNum>
+        {type === 'searched' && <GroupNum>전체 {mapped.length}</GroupNum>}
         <Filter
           filters={FILTER}
           selectedFilter={selectedFilter}
           setSelectedFilter={setSelectedFilter}
         />
       </GroupCardHeader>
+
       <Content>
         {error && <ErrorText>{error}</ErrorText>}
+
         {isEmpty ? (
           <EmptyContent>
             <EmptyMainText>해당하는 모임방이 없어요</EmptyMainText>
             <EmptySubText>검색어를 바꿔보거나 직접 모임방을 만들어보세요.</EmptySubText>
           </EmptyContent>
         ) : (
-          mapped.map(group => (
-            <GroupCard key={group.id} group={group} isOngoing={group.isOnGoing} type="search" />
+          mapped.map((group, idx) => (
+            <div
+              key={group.id}
+              ref={
+                lastRoomElementCallback && idx === mapped.length - 1
+                  ? lastRoomElementCallback
+                  : undefined
+              }
+            >
+              <GroupCard group={group} isOngoing={group.isOnGoing} type="search" />
+            </div>
           ))
         )}
 
-        <LoadMoreArea>
-          {isLoading && <LoadingText>불러오는 중...</LoadingText>}
-          {!isLoading && !isLast && mapped.length > 0 && (
-            <LoadMoreButton onClick={onLoadMore}>더 보기</LoadMoreButton>
-          )}
-        </LoadMoreArea>
+        {isLoadingMore && mapped.length > 0 && <LoadingText>불러오는 중...</LoadingText>}
+        {!hasMore && mapped.length > 0 && <EndText>더 이상 결과가 없어요</EndText>}
       </Content>
     </>
   );
@@ -121,9 +136,9 @@ const Tab = styled.button<{ selected?: boolean }>`
 const Content = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 12px;
   overflow-y: auto;
-  padding: 0 20px;
+  padding: 0 20px 24px;
 `;
 
 const GroupCardHeader = styled.div`
@@ -136,7 +151,7 @@ const GroupCardHeader = styled.div`
 const GroupNum = styled.span`
   display: flex;
   align-items: center;
-  color: ${colors.grey[100]};
+  color: ${colors.white};
   font-size: ${typography.fontSize.sm};
   font-weight: ${typography.fontWeight.medium};
 `;
@@ -164,25 +179,16 @@ const EmptySubText = styled.p`
   text-align: center;
 `;
 
-const LoadMoreArea = styled.div`
-  display: flex;
-  justify-content: center;
-  padding: 12px 0 24px;
-`;
-
-const LoadMoreButton = styled.button`
-  padding: 10px 16px;
-  border: none;
-  border-radius: 8px;
-  background: var(--color-darkgrey-main);
-  color: #fff;
-  font-size: ${typography.fontSize.sm};
-  cursor: pointer;
-`;
-
 const LoadingText = styled.p`
   color: ${colors.grey[100]};
   font-size: ${typography.fontSize.sm};
+  text-align: center;
+`;
+
+const EndText = styled.p`
+  color: ${colors.grey[200]};
+  font-size: ${typography.fontSize.xs};
+  text-align: center;
 `;
 
 const ErrorText = styled.p`