feat: 알바폼 카드 및 리스트 페이지 추가

.storybook/main.ts

@@ -5,8 +5,14 @@ interface StorybookConfig extends BaseStorybookConfig {
 }
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "@storybook/addon-styling",
+  ],
   framework: {
     name: "@storybook/nextjs",
     options: {},
@@ -20,6 +26,9 @@ const config: StorybookConfig = {
     };
     return config;
   },
+  docs: {
+    autodocs: "tag",
+  },
 };
 
 export default config;

.storybook/preview.tsx

@@ -26,20 +26,88 @@ const withProviders: Decorator = (Story) => {
   return (
     <MockNextRouter>
       <QueryClientProvider client={queryClient}>
-        <Story />
+        <div className="h-full w-full">
+          <Story />
+        </div>
       </QueryClientProvider>
     </MockNextRouter>
   );
 };
 
 const preview: Preview = {
   parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    viewport: {
+      defaultViewport: "desktop",
+      viewports: {
+        // 모바일 - 아이폰
+        iphone12: {
+          name: "iPhone 12",
+          styles: {
+            width: "390px",
+            height: "844px",
+          },
+        },
+        iphone12promax: {
+          name: "iPhone 12 Pro Max",
+          styles: {
+            width: "428px",
+            height: "926px",
+          },
+        },
+        // 모바일 - 갤럭시
+        galaxys8: {
+          name: "Galaxy S8",
+          styles: {
+            width: "360px",
+            height: "740px",
+          },
+        },
+        galaxys20: {
+          name: "Galaxy S20",
+          styles: {
+            width: "412px",
+            height: "915px",
+          },
+        },
+        // 태블릿 - 아이패드
+        ipadMini: {
+          name: "iPad Mini",
+          styles: {
+            width: "768px",
+            height: "1024px",
+          },
+        },
+        ipadAir: {
+          name: "iPad Air",
+          styles: {
+            width: "820px",
+            height: "1180px",
+          },
+        },
+        ipadPro: {
+          name: "iPad Pro",
+          styles: {
+            width: "1024px",
+            height: "1366px",
+          },
+        },
+        // 데스크톱
+        desktop: {
+          name: "Desktop",
+          styles: {
+            width: "1440px",
+            height: "1024px",
+          },
+        },
+      },
+    },
   },
   decorators: [withProviders],
 };

package.json

@@ -39,6 +39,7 @@
     "@chromatic-com/storybook": "^3.2.2",
     "@storybook/addon-essentials": "^8.4.4",
     "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.7",
     "@storybook/addon-onboarding": "^8.4.4",
     "@storybook/addon-styling": "^2.0.0",
     "@storybook/blocks": "^8.4.4",

src/app/(pages)/albaList/components/SortSection.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import React, { useState } from "react";
+import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
+import { formSortOptions } from "@/constants/formOptions";
+
+type FormSortOption = (typeof formSortOptions)[keyof typeof formSortOptions];
+
+const SORT_OPTIONS = [
+  { label: "최신순", value: formSortOptions.MOST_RECENT },
+  { label: "시급높은순", value: formSortOptions.HIGHEST_WAGE },
+  { label: "지원자 많은순", value: formSortOptions.MOST_APPLIED },
+  { label: "스크랩 많은순", value: formSortOptions.MOST_SCRAPPED },
+];
+
+export default function SortSection() {
+  const [currentSort, setCurrentSort] = useState<FormSortOption>(formSortOptions.MOST_RECENT);
+
+  const currentLabel = SORT_OPTIONS.find((opt) => opt.value === currentSort)?.label || SORT_OPTIONS[0].label;
+
+  const handleSortChange = (selected: string) => {
+    const option = SORT_OPTIONS.find((opt) => opt.label === selected);
+    if (option) {
+      setCurrentSort(option.value);
+    }
+  };
+
+  return (
+    <FilterDropdown
+      options={SORT_OPTIONS.map((option) => option.label)}
+      className="!w-28 md:!w-40"
+      initialValue={currentLabel}
+      onChange={handleSortChange}
+    />
+  );
+}

src/app/(pages)/albaList/layout.tsx

@@ -0,0 +1,17 @@
+import React, { Suspense } from "react";
+
+export default function AlbaListLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-auto max-w-screen-2xl px-4 py-8">
+      <Suspense
+        fallback={
+          <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+            <div>로딩 중...</div>
+          </div>
+        }
+      >
+        {children}
+      </Suspense>
+    </div>
+  );
+}

src/app/(pages)/albaList/page.tsx

@@ -1,5 +1,135 @@
 "use client";
 
+import React, { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
+import { useForms } from "@/hooks/queries/form/useForms";
+import FilterDropdown from "@/app/components/button/dropdown/FilterDropdown";
+import { filterRecruitingOptions } from "@/constants/filterOptions";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import SortSection from "./components/SortSection";
+import AlbaListItem from "@/app/components/card/cardList/AlbaListItem";
+
+const FORMS_PER_PAGE = 10;
+
 export default function AlbaList() {
-  return <div>AlbaList</div>;
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // URL 쿼리 파라미터에서 필터 상태 가져오기
+  const isRecruiting = searchParams.get("isRecruiting");
+
+  // 초기 마운트 시 필터 값 설정
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams);
+    if (!params.has("isRecruiting")) {
+      params.set("isRecruiting", "true");
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  }, []);
+
+  // 무한 스크롤을 위한 Intersection Observer 설정
+  const { ref, inView } = useInView({
+    threshold: 0.1,
+    triggerOnce: false,
+    rootMargin: "100px",
+  });
+
+  // 알바폼 목록 조회
+  const { data, isLoading, error, hasNextPage, fetchNextPage, isFetchingNextPage } = useForms({
+    limit: FORMS_PER_PAGE,
+    isRecruiting: isRecruiting === "true" ? true : isRecruiting === "false" ? false : undefined,
+  });
+
+  // 모집 여부 필터 변경 함수
+  const handleRecruitingFilter = (selected: string) => {
+    const option = filterRecruitingOptions.find((opt) => opt.label === selected);
+    if (option) {
+      const params = new URLSearchParams(searchParams);
+      if (selected === "전체") {
+        params.delete("isRecruiting");
+      } else {
+        params.set("isRecruiting", String(option.value));
+      }
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
+  // 현재 필터 상태에 따른 초기값 설정
+  const getInitialRecruitingValue = (isRecruiting: string | null) => {
+    if (!isRecruiting) return "전체";
+    const option = filterRecruitingOptions.find((opt) => String(opt.value) === isRecruiting);
+    return option?.label || "전체";
+  };
+
+  // 스크롤이 하단에 도달하면 다음 페이지 로드
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, fetchNextPage, isFetchingNextPage]);
+
+  // 에러 상태 처리
+  if (error) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <p className="text-red-500">알바 목록을 불러오는데 실패했습니다.</p>
+      </div>
+    );
+  }
+
+  // 로딩 상태 처리
+  if (isLoading) {
+    return (
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <div>로딩 중...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center">
+      {/* 필터 드롭다운 섹션 */}
+      <div className="w-full border-b border-grayscale-100 bg-white">
+        <div className="mx-auto flex max-w-screen-2xl items-center justify-between gap-2 px-4 py-4 md:px-6 lg:px-8">
+          <FilterDropdown
+            options={filterRecruitingOptions.map((option) => option.label)}
+            initialValue={getInitialRecruitingValue(isRecruiting)}
+            onChange={handleRecruitingFilter}
+          />
+          <SortSection />
+        </div>
+      </div>
+
+      {/* 알바폼 목록 랜더링 */}
+      {!data?.pages?.[0]?.data?.length ? (
+        <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+          <p className="text-grayscale-500">등록된 알바 공고가 없습니다.</p>
+        </div>
+      ) : (
+        <div className="mx-auto mt-4 w-full max-w-screen-2xl px-4 md:px-6 lg:px-8">
+          <div className="flex flex-wrap items-center justify-center gap-6 space-x-6">
+            {data?.pages.map((page) => (
+              <React.Fragment key={page.nextCursor}>
+                {page.data.map((form) => (
+                  <div key={form.id}>
+                    <AlbaListItem {...form} />
+                  </div>
+                ))}
+              </React.Fragment>
+            ))}
+          </div>
+
+          {/* 무한 스크롤 트리거 영역 */}
+          <div ref={ref} className="h-4 w-full">
+            {isFetchingNextPage && (
+              <div className="flex justify-center py-4">
+                <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary-orange-300 border-t-transparent" />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }