Merge pull request #252 from Finders-Official/feat/photo-feed-search-filter(#228)

[FEAT] 사진수다 검색에서 빈화면에 필터링 추가

Author: jeonbinggu

src/pages/photoFeed/PhotoFeedSearchPage.tsx

@@ -20,6 +20,7 @@ import SearchItemSkeleton from "@/components/photoFeed/mainFeed/SearchItemSkelet
 import PhotoCardSkeleton from "@/components/photoFeed/mainFeed/PhotoCardSkeleton";
 import SearchPostSkeleton from "@/components/photoFeed/mainFeed/SearchPostSkeleton";
 import EmptyView from "@/components/common/EmptyView";
+import Masonry from "react-masonry-css";
 
 const FILTER_LABEL: Record<Filter, string> = {
   TITLE: "제목만",
@@ -38,6 +39,12 @@ const SKELETON_HEIGHTS = [
   "h-[340px]",
 ];
 
+const breakpointColumnsObj = {
+  default: 2, // 디자인이 2열이면 고정이 가장 안정적
+  768: 2,
+  1024: 2,
+};
+
 export default function PhotoFeedSearchPage() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -258,58 +265,67 @@ export default function PhotoFeedSearchPage() {
   const renderResult = () => {
     if (isSearchPending) {
       return (
-        <section className="columns-2 gap-4 md:columns-3 xl:columns-4">
-          {Array.from({ length: SKELETON_COUNT }).map((_, i) => {
-            const heightClass = SKELETON_HEIGHTS[i % SKELETON_HEIGHTS.length];
-
-            return (
-              <PhotoCardSkeleton
-                key={`skeleton-${i}`}
-                className={heightClass}
-              />
-            );
-          })}
+        <section className="mb-20">
+          <Masonry
+            breakpointCols={breakpointColumnsObj}
+            className="my-masonry-grid"
+            columnClassName="my-masonry-grid_column"
+          >
+            {Array.from({ length: SKELETON_COUNT }).map((_, i) => {
+              const heightClass = SKELETON_HEIGHTS[i % SKELETON_HEIGHTS.length];
+
+              return (
+                <PhotoCardSkeleton
+                  key={`skeleton-${i}`}
+                  className={heightClass}
+                />
+              );
+            })}
+          </Masonry>
         </section>
       );
     }
 
     if (isSearchError) return errorResponse();
 
-    if (previewList.length === 0) {
-      return <EmptyView />;
-    }
-
-    if (previewList.length > 0) {
-      return (
-        <div className="mt-4 flex flex-col gap-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <h2 className="text-[1rem] leading-[155%] font-semibold tracking-[-0.02em] text-neutral-100">
-                검색 결과
-              </h2>
-              <p className="text-[1rem] font-light text-neutral-100">
-                {totalCount}개
-              </p>
-            </div>
-            <button
-              type="button"
-              onClick={() => {
-                setBottomSheetOpen(true);
-              }}
-              className="flex items-center gap-[6px] text-[0.875rem] leading-[155%] font-normal tracking-[-0.02em] text-neutral-400"
-            >
-              <span>{FILTER_LABEL[filter]}</span>
-              <ChevronLeftIcon className="h-4 w-4 rotate-[-90deg] text-neutral-200" />
-            </button>
+    return (
+      <div className="mt-4 flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h2 className="text-[1rem] leading-[155%] font-semibold tracking-[-0.02em] text-neutral-100">
+              검색 결과
+            </h2>
+            <p className="text-[1rem] font-light text-neutral-100">
+              {totalCount}개
+            </p>
           </div>
-          <section className="columns-2 gap-4 md:columns-3 xl:columns-4">
-            {previewList.map((photo) => (
-              <PhotoCard key={photo.postId} photo={photo} />
-            ))}
-          </section>
+          <button
+            type="button"
+            onClick={() => {
+              setBottomSheetOpen(true);
+            }}
+            className="flex items-center gap-[6px] text-[0.875rem] leading-[155%] font-normal tracking-[-0.02em] text-neutral-400"
+          >
+            <span>{FILTER_LABEL[filter]}</span>
+            <ChevronLeftIcon className="h-4 w-4 rotate-[-90deg] text-neutral-200" />
+          </button>
         </div>
-      );
-    }
+        {previewList.length === 0 && <EmptyView />}
+        {previewList.length > 0 && (
+          <section className="mb-20">
+            <Masonry
+              breakpointCols={breakpointColumnsObj}
+              className="my-masonry-grid"
+              columnClassName="my-masonry-grid_column"
+            >
+              {previewList.map((photo) => (
+                <PhotoCard key={photo.postId} photo={photo} />
+              ))}
+            </Masonry>
+          </section>
+        )}
+      </div>
+    );
   };
 
   const searchBarProps = {