PostCard

PostCard

공고 하나를 카드 형태로 렌더링하는 컴포넌트입니다.

---

✅ Props

이름	타입	기본값	설명
name	string	❌	가게 이름
imageUrl	string	❌	이미지 URL
address1	string	❌	가게 주소
description	string	❌	공고 설명
originalHourlyPay	number (optional)	❌	기존 시급 (변동률 계산용)
hourlyPay	number (optional)	❌	현재 시급
startsAt	string (optional)	❌	공고 시작 시간 (ISO 8601 형식)
workhour	number (optional)	❌	근무 시간 (단위: 시간)
isShopInfo	boolean (optional)	false	가게 소개 카드 여부 (true면 시급 대신 가게명 표시)
backgroundColor	string (optional)	#ffffff	카드 배경색
buttons	React.ReactNode (optional)	null	카드 하단에 버튼 등 추가 렌더링

---

🎨 렌더링 형태

• 기본적으로 공고 정보를 카드 형태로 표시합니다.
• isShopInfo가 true이면 시급 대신 가게명을 강조해 표시합니다.
• 하단에 children을 통해 버튼 등을 자유롭게 추가할 수 있습니다.
• 반응형 Grid 레이아웃을 적용하여 PC, Tablet, Mobile 화면에 따라 레이아웃이 유연하게 조정됩니다.

---

🧾 사용 예시

가게 소개 카드 (isShopInfo = true)

PC

TABLET

MOBILE

      <ShopCard
        isShopInfo={true}
        name="도토리 식당"
        imageUrl="https://images.unsplash.com/photo-1627308595229-7830a5c91f9f?auto=format&fit=crop&w=800&q=80"
        address1="서울시 성북구"
        description="알바하기 좋은 나무그늘과 라떼맛집! 같이 알바해줄 귀여운 라떼 한입 정도의 쉬운 편에 속하는 가게입니다."
        backgroundColor="bg-red-10"
        buttons={
          <>
            <Button variant="white" fullWidth className="py-[14px]">
              편집하기
            </Button>
            <Button fullWidth className="py-[14px]">
              공고 등록하기
            </Button>
          </>
        }
      ></ShopCard>

일반 공고 카드 (isShopInfo = false)

      <ShopCard
        isShopInfo={false}
        name="도토리 식당"
        imageUrl="https://images.unsplash.com/photo-1627308595229-7830a5c91f9f?auto=format&fit=crop&w=800&q=80"
        address1="서울시 송파구"
        description="알바하기 편한 너구리네 라면집!\n라면 올려두고 끓이기만 하면 되어서 쉬운 편에 속하는 가게입니다."
        hourlyPay={15000}
        originalHourlyPay={10000}
        startsAt="2023-01-02T15:00:00"
        workhour={3}
        buttons={
          <>
            <Button fullWidth className="py-[14px]">
              신청하기
            </Button>
          </>
        }
      ></ShopCard>