feat: 알바폼 리스트 스토리북 추가 및 레이아웃 수정

Author: cccwon2

.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;

package-lock.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",

package.json

@@ -26,13 +26,11 @@ export default function SortSection() {
   };
 
   return (
-    <div className="fixed right-6 top-[180px] z-10 md:right-28 md:top-[200px] lg:right-8">
-      <FilterDropdown
-        options={SORT_OPTIONS.map((option) => option.label)}
-        className="!w-28 md:!w-40"
-        initialValue={currentLabel}
-        onChange={handleSortChange}
-      />
-    </div>
+    <FilterDropdown
+      options={SORT_OPTIONS.map((option) => option.label)}
+      className="!w-28 md:!w-40"
+      initialValue={currentLabel}
+      onChange={handleSortChange}
+    />
   );
 }

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

@@ -1,11 +1,8 @@
 import React, { Suspense } from "react";
-import SortSection from "./components/SortSection";
 
 export default function AlbaListLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="mx-auto max-w-screen-lg px-4 py-8">
-      <SortSection />
-
+    <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">

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

@@ -6,6 +6,8 @@ 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;
 
@@ -29,7 +31,7 @@ export default function AlbaList() {
   // 무한 스크롤을 위한 Intersection Observer 설정
   const { ref, inView } = useInView({
     threshold: 0.1,
-    triggerOnce: true,
+    triggerOnce: false,
     rootMargin: "100px",
   });
 
@@ -88,13 +90,14 @@ export default function AlbaList() {
   return (
     <div className="space-y-4">
       {/* 필터 드롭다운 섹션 */}
-      <div className="border-b border-grayscale-100">
-        <div className="flex items-center gap-2 py-4">
+      <div className="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>
 
@@ -105,22 +108,17 @@ export default function AlbaList() {
         </div>
       ) : (
         <>
-          {data?.pages.map((page) => (
-            <React.Fragment key={page.nextCursor}>
-              {page.data.map((form) => (
-                <div key={form.id} className="rounded-lg border p-4 transition-all hover:border-primary-orange-200">
-                  <h3 className="font-bold">{form.title}</h3>
-                  <div className="mt-2 text-sm text-grayscale-500">
-                    <span>지원자 {form.applyCount}명</span>
-                    <span className="mx-2">•</span>
-                    <span>스크랩 {form.scrapCount}명</span>
-                    <span className="mx-2">•</span>
-                    <span>마감 {new Date(form.recruitmentEndDate).toLocaleDateString()}</span>
+          <div className="mx-auto grid max-w-screen-2xl grid-cols-1 gap-8 px-4 md:px-6 lg:grid-cols-2 lg:px-8 2xl:grid-cols-3 2xl:gap-12">
+            {data?.pages.map((page) => (
+              <React.Fragment key={page.nextCursor}>
+                {page.data.map((form) => (
+                  <div key={form.id} className="w-full">
+                    <AlbaListItem {...form} />
                   </div>
-                </div>
-              ))}
-            </React.Fragment>
-          ))}
+                ))}
+              </React.Fragment>
+            ))}
+          </div>
 
           {/* 무한 스크롤 트리거 영역 */}
           <div ref={ref} className="h-4 w-full">

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

@@ -82,7 +82,7 @@ const AlbaListItem = ({
   };
 
   return (
-    <div className="relative h-auto w-full overflow-hidden rounded-xl border border-grayscale-200 bg-white shadow-md transition-transform duration-300 hover:scale-[1.02] sm:h-[390px] sm:w-[327px] md:h-[536px] md:w-[477px]">
+    <div className="relative h-[390px] w-[327px] overflow-hidden rounded-xl border border-grayscale-200 bg-white shadow-md transition-transform duration-300 hover:scale-[1.02] lg:h-[536px] lg:w-[477px]">
       {/* 이미지 슬라이더 영역 */}
       <div className="relative h-[150px] overflow-hidden rounded-t-xl sm:h-[220px] md:h-[310px]">
         {/* 현재 이미지 */}

src/app/components/card/cardList/AlbaListItem.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import AlbaList from "./page";
+import AlbaListLayout from "@/app/(pages)/albaList/layout";
+
+const meta = {
+  title: "Design System/Pages/AlbaList",
+  component: AlbaList,
+  parameters: {
+    layout: "fullscreen",
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/albaList",
+        query: {
+          isRecruiting: "true",
+        },
+      },
+    },
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <AlbaListLayout>
+        <Story />
+      </AlbaListLayout>
+    ),
+  ],
+} satisfies Meta<typeof AlbaList>;
+
+export default meta;
+type Story = StoryObj<typeof AlbaList>;
+
+// 기본 목록 페이지
+export const Default: Story = {};
+
+// 모바일 뷰
+export const Mobile: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile",
+    },
+  },
+};
+
+// 태블릿 뷰
+export const Tablet: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: "tablet",
+    },
+  },
+};
+
+// 데스크톱 뷰
+export const Desktop: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: "desktop",
+    },
+  },
+};
+
+// 로딩 상태
+export const Loading: Story = {
+  parameters: {
+    mockData: {
+      loading: true,
+    },
+  },
+};
+
+// 빈 상태
+export const Empty: Story = {
+  parameters: {
+    mockData: {
+      empty: true,
+    },
+  },
+};

src/app/stories/design-system/pages/albaList/AlbaList.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import AlbaListLayout from "@/app/(pages)/albaList/layout";
+import { StoryComponent } from "./page.stories";
+
+const meta = {
+  title: "Design System/Pages/AlbaList/Layout",
+  component: AlbaListLayout,
+  parameters: {
+    layout: "fullscreen",
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof AlbaListLayout>;
+
+export default meta;
+type Story = StoryObj<typeof AlbaListLayout>;
+
+// 기본 레이아웃 (데스크톱)
+export const Desktop: Story = {
+  render: () => <StoryComponent />,
+  parameters: {
+    viewport: {
+      defaultViewport: "desktop",
+    },
+  },
+};
+
+// 태블릿 레이아웃
+export const Tablet: Story = {
+  render: () => <StoryComponent />,
+  parameters: {
+    viewport: {
+      defaultViewport: "tablet",
+    },
+  },
+};
+
+// 모바일 레이아웃
+export const Mobile: Story = {
+  render: () => <StoryComponent />,
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1",
+    },
+  },
+};
+
+// 로딩 상태
+export const Loading: Story = {
+  render: () => (
+    <div className="mx-auto max-w-screen-2xl px-4 py-8">
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <div>로딩 중...</div>
+      </div>
+    </div>
+  ),
+};
+
+// 빈 상태
+export const Empty: Story = {
+  render: () => (
+    <div className="mx-auto max-w-screen-2xl px-4 py-8">
+      <div className="flex h-[calc(100vh-200px)] items-center justify-center">
+        <p className="text-grayscale-500">등록된 알바 공고가 없습니다.</p>
+      </div>
+    </div>
+  ),
+};