PostList

PostList

여러 개의 Post(공고 카드)를 리스트로 렌더링하는 컴포넌트입니다.

---

✅ Props

이름	타입	필수	설명
posts	PostData[]	✅	공고 데이터 배열

✅ PostData 타입 구조

필드명	타입	설명
id	string	공고 ID
name	string	가게 이름
imageUrl	string	이미지 URL
address1	string	가게 주소
originalHourlyPay	number	기존 시급 (시급 변동률 계산용)
link	string	공고 상세 페이지 링크
hourlyPay	number	현재 시급
startsAt	string	시작 시간 (ISO 형식)
workhour	number	근무 시간 (단위: 시간)
closed	boolean	공고 마감 여부

---

🎨 렌더링 형태

• 공고 리스트를 2열(Grid)로 배치합니다.
• xl(1280px 이상) 화면에서는 3열(Grid)로 변경됩니다.

---

🧾 사용 예시

[PC]

[tablet]

[mobile]

import { PostList } from "./PostList";

const mockPosts = [
    {
      id: "1",
      name: "도토리식당",
      imageUrl: "https://images.unsplash.com/photo-1627308595229-7830a5c91f9fauto=format&fit=crop&w=800&q=80",
      address1: "서울시 송파구",
      originalHourlyPay: 10000,
      link: "/notices/1",
      hourlyPay: 15000,
      startsAt: "2023-06-02T15:00:00.000Z",
      workhour: 3,
      closed: true,
    },
    {
      id: "2",
      name: "카페 블루베리",
      imageUrl:"https://images.unsplash.com/photo-1627308595229-7830a5c91f9fauto=format&fit=crop&w=800&q=80",
      address1: "서울시 마포구",
      originalHourlyPay: 11000,
      link: "/notices/2",
      hourlyPay: 13000,
      startsAt: "2026-06-03T10:00:00.000Z",
      workhour: 4,
      closed: false,
    },
    {
      id: "3",
      name: "야식이네 치킨",
      imageUrl: "https://images.unsplash.com/photo-1627308595229-7830a5c91f9f?auto=format&fit=crop&w=800&q=80",
      address1: "서울시 관악구",
      originalHourlyPay: 10000,
      link: "/notices/3",
      hourlyPay: 12000,
      startsAt: "2026-06-05T18:30:00.000Z",
      workhour: 5,
      closed: false,
    },
    ...
  ];

<PostList posts={posts} />