diff --git a/src/components/layout/header/nav.tsx b/src/components/layout/header/nav.tsx
index 6154791..03d08c3 100644
--- a/src/components/layout/header/nav.tsx
+++ b/src/components/layout/header/nav.tsx
@@ -18,16 +18,12 @@ const NAV_ITEMS: Record<UserRole, NavItems[]> = {
   employer: [{ href: '/my-shop', label: '내 가게' }],
 };
 
-const getNavVariant = (isLogin: boolean, role: UserRole): UserRole =>
-  !isLogin ? 'guest' : role === 'employer' ? 'employer' : 'employee';
-
 const Nav = () => {
   const { role, isLogin, logout } = useAuth();
-  const navVariant = getNavVariant(isLogin, role);
 
   return (
     <nav className={cn('flex shrink-0 items-center gap-4 text-body-m font-bold', 'desktop:gap-10')}>
-      {NAV_ITEMS[navVariant].map(({ href, label }) => (
+      {NAV_ITEMS[role].map(({ href, label }) => (
         <Link key={href} href={href}>
           {label}
         </Link>
diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button/button.tsx
index 788959b..4959958 100644
--- a/src/components/ui/button/button.tsx
+++ b/src/components/ui/button/button.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@/lib/utils/cn';
 import { ButtonHTMLAttributes, ElementType } from 'react';
 
 type ButtonProps = {
@@ -45,7 +46,7 @@ export default function Button({
   const variantClass = VARIANT_CLASS[variant];
   return (
     <Component
-      className={`${BASE_CLASS} ${variantClass} ${sizeClass} ${full ? 'w-full' : ''} ${className ?? ''}`}
+      className={cn(BASE_CLASS, variantClass, sizeClass, full && 'w-full', className)}
       {...(Component === 'button'
         ? {
             disabled: variant === 'disabled' || disabled,
diff --git a/src/components/ui/card/card.styles.ts b/src/components/ui/card/card.styles.ts
new file mode 100644
index 0000000..90318e8
--- /dev/null
+++ b/src/components/ui/card/card.styles.ts
@@ -0,0 +1,61 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const cardFrame = cva('rounded-xl border border-gray-200 bg-white');
+
+export const cardImageWrapper = cva('relative rounded-xl overflow-hidden');
+
+export const cardHeading = cva('font-bold', {
+  variants: {
+    size: {
+      sm: 'text-heading-s',
+      md: 'text-heading-m',
+      lg: 'text-heading-l',
+    },
+    status: {
+      open: 'text-black',
+      inactive: 'text-gray-300',
+    },
+  },
+  defaultVariants: { size: 'md', status: 'open' },
+});
+
+export const cardInfoLayout = cva('flex flex-nowrap items-start tablet:items-center gap-1.5');
+
+export const cardInfoText = cva('text-caption tablet:text-body-s', {
+  variants: {
+    status: {
+      open: 'text-gray-500',
+      inactive: 'text-gray-300',
+    },
+  },
+  defaultVariants: { status: 'open' },
+});
+
+export const cardInfoIcon = cva('', {
+  variants: {
+    status: {
+      open: 'bg-red-300',
+      inactive: 'bg-gray-300',
+    },
+  },
+  defaultVariants: { status: 'open' },
+});
+
+export const cardPayLayout = cva('flex items-center gap-x-3');
+
+export const cardBadge = cva('flex items-center gap-x-0.5 rounded-full');
+
+export const cardBadgeText = cva('whitespace-nowrap text-caption tablet:text-body-s');
+
+export const cardLayout = {
+  frame: cardFrame,
+  imageWrapper: cardImageWrapper,
+  heading: cardHeading,
+  infoLayout: cardInfoLayout,
+  info: cardInfoText,
+  infoIcon: cardInfoIcon,
+  payLayout: cardPayLayout,
+  badge: cardBadge,
+  badgeText: cardBadgeText,
+};
+export type CardStatusVariant = VariantProps<typeof cardHeading>['status'];
diff --git a/src/components/ui/card/index.ts b/src/components/ui/card/index.ts
new file mode 100644
index 0000000..4e9fcac
--- /dev/null
+++ b/src/components/ui/card/index.ts
@@ -0,0 +1,2 @@
+export { default as Notice } from '@/components/ui/card/notice/notice';
+export { default as Post } from '@/components/ui/card/post/post';
diff --git a/src/components/ui/card/notice/components/noticeHeader.tsx b/src/components/ui/card/notice/components/noticeHeader.tsx
new file mode 100644
index 0000000..bad17c3
--- /dev/null
+++ b/src/components/ui/card/notice/components/noticeHeader.tsx
@@ -0,0 +1,15 @@
+import { cardLayout } from '@/components/ui/card/card.styles';
+import { noticeLabel } from '@/components/ui/card/notice/notice.styles';
+
+interface NoticeHeaderProps {
+  name?: string;
+  category?: string;
+  className?: string;
+}
+const NoticeHeader = ({ name, category, className }: NoticeHeaderProps) => (
+  <div className={className}>
+    <p className={noticeLabel()}>{category}</p>
+    <h2 className={cardLayout.heading({ size: 'lg' })}>{name}</h2>
+  </div>
+);
+export default NoticeHeader;
diff --git a/src/components/ui/card/notice/components/noticeImage.tsx b/src/components/ui/card/notice/components/noticeImage.tsx
new file mode 100644
index 0000000..501d663
--- /dev/null
+++ b/src/components/ui/card/notice/components/noticeImage.tsx
@@ -0,0 +1,20 @@
+import { noticeImageWrapper } from '@/components/ui/card/notice/notice.styles';
+import Image from 'next/image';
+
+interface NoticeImageProps {
+  name?: string;
+  imageUrl?: string;
+}
+const NoticeImage = ({ name, imageUrl }: NoticeImageProps) => (
+  <div className={noticeImageWrapper()}>
+    <Image
+      src={imageUrl ?? ''}
+      alt={`${name} 가게 이미지`}
+      fill
+      sizes='(max-width: 744px) 630px, 540px'
+      className='object-cover'
+      priority
+    />
+  </div>
+);
+export default NoticeImage;
diff --git a/src/components/ui/card/notice/components/noticeInfo.tsx b/src/components/ui/card/notice/components/noticeInfo.tsx
new file mode 100644
index 0000000..caa31be
--- /dev/null
+++ b/src/components/ui/card/notice/components/noticeInfo.tsx
@@ -0,0 +1,91 @@
+import { cardLayout } from '@/components/ui/card/card.styles';
+import { NoticeVariant } from '@/components/ui/card/notice/notice';
+import {
+  badgeText,
+  noticeButton,
+  noticeInfoWrapper,
+  noticeLabel,
+  payBadge,
+} from '@/components/ui/card/notice/notice.styles';
+import { Icon } from '@/components/ui/icon';
+import { calcPayIncreasePercent } from '@/lib/utils/calcPayIncrease';
+import { getTime } from '@/lib/utils/dateFormatter';
+import { formatNumber } from '@/lib/utils/formatNumber';
+import { NoticeCard } from '@/types/notice';
+import { ReactNode } from 'react';
+import NoticeHeader from './noticeHeader';
+
+interface NoticeInfoProps<T extends Partial<NoticeCard>> {
+  value: T;
+  variant: NoticeVariant;
+  buttonComponent: ReactNode;
+}
+
+const NoticeInfo = <T extends Partial<NoticeCard>>({
+  value,
+  variant,
+  buttonComponent,
+}: NoticeInfoProps<T>) => {
+  const {
+    name,
+    category,
+    hourlyPay,
+    originalHourlyPay,
+    startsAt,
+    workhour,
+    address1,
+    shopDescription,
+  } = value;
+  const payIncreasePercent = calcPayIncreasePercent(hourlyPay ?? 0, originalHourlyPay ?? 0);
+  const { date, startTime, endTime } = getTime(startsAt ?? '', workhour ?? 0);
+  const payIncreaseLabel =
+    payIncreasePercent && (payIncreasePercent > 100 ? '100% 이상' : `${payIncreasePercent}%`);
+  return (
+    <div className={noticeInfoWrapper()}>
+      <ul className='flex flex-col gap-3'>
+        {variant === 'notice' && (
+          <>
+            <li>
+              <p className={noticeLabel()}>시급</p>
+              <div className={cardLayout.payLayout()}>
+                <span className='text-heading-s font-bold tracking-wide'>
+                  {formatNumber(hourlyPay ?? 0)}원
+                </span>
+                {payIncreasePercent !== null && (
+                  <div className={payBadge()}>
+                    <span className={badgeText()}>기존 시급 {payIncreaseLabel}</span>
+                    <Icon
+                      iconName='arrowUp'
+                      iconSize='sm'
+                      bigScreenSize='rg'
+                      decorative
+                      className='self-start bg-white'
+                    />
+                  </div>
+                )}
+              </div>
+            </li>
+            <li className={cardLayout.infoLayout()}>
+              <Icon iconName='clock' iconSize='sm' ariaLabel='근무시간' className='bg-red-300' />
+              <p className={cardLayout.info()}>
+                {date} {startTime} ~ {endTime} ({workhour}시간)
+              </p>
+            </li>
+          </>
+        )}
+        {variant === 'shop' && (
+          <li>
+            <NoticeHeader name={name} category={category} className='mt-4' />
+          </li>
+        )}
+        <li className={cardLayout.infoLayout()}>
+          <Icon iconName='map' iconSize='sm' ariaLabel='근무위치' className='bg-red-300' />
+          <p className={cardLayout.info()}>{address1}</p>
+        </li>
+        <li className='text-body-l'>{shopDescription}</li>
+      </ul>
+      <div className={noticeButton()}>{buttonComponent}</div>
+    </div>
+  );
+};
+export default NoticeInfo;
diff --git a/src/components/ui/card/notice/components/renderNotice.tsx b/src/components/ui/card/notice/components/renderNotice.tsx
new file mode 100644
index 0000000..fbd5b67
--- /dev/null
+++ b/src/components/ui/card/notice/components/renderNotice.tsx
@@ -0,0 +1,39 @@
+import { noticeFrame } from '@/components/ui/card/notice/notice.styles';
+import { NoticeCard } from '@/types/notice';
+import { ReactNode } from 'react';
+import NoticeHeader from './noticeHeader';
+import NoticeImage from './noticeImage';
+import NoticeInfo from './noticeInfo';
+
+interface RenderNoticeProps<T extends Partial<NoticeCard>> {
+  items: {
+    name?: string;
+    category?: string;
+    imageUrl?: string;
+    description?: string;
+    variant: 'notice';
+    value: T;
+  };
+  buttonComponent: ReactNode;
+}
+
+const RenderNotice = <T extends Partial<NoticeCard>>({
+  items,
+  buttonComponent,
+}: RenderNoticeProps<T>) => {
+  const { name, imageUrl, category, description, variant, value } = items;
+  return (
+    <>
+      <NoticeHeader name={name} category={category} />
+      <section className={noticeFrame()}>
+        <NoticeImage name={name} imageUrl={imageUrl} />
+        <NoticeInfo variant={variant} value={value} buttonComponent={buttonComponent} />
+      </section>
+      <section className='flex flex-col gap-3 rounded-xl bg-gray-100 p-8'>
+        <h3 className='text-body-l font-bold'>공고 설명</h3>
+        <p className='text-body-l'>{description}</p>
+      </section>
+    </>
+  );
+};
+export default RenderNotice;
diff --git a/src/components/ui/card/notice/components/renderShop.tsx b/src/components/ui/card/notice/components/renderShop.tsx
new file mode 100644
index 0000000..2f67f0c
--- /dev/null
+++ b/src/components/ui/card/notice/components/renderShop.tsx
@@ -0,0 +1,35 @@
+import { cardLayout } from '@/components/ui/card/card.styles';
+import { noticeFrame } from '@/components/ui/card/notice/notice.styles';
+import { cn } from '@/lib/utils/cn';
+import { NoticeShopCard } from '@/types/shop';
+import { ReactNode } from 'react';
+import NoticeImage from './noticeImage';
+import NoticeInfo from './noticeInfo';
+
+type ShopCard = Omit<NoticeShopCard, 'shopId'>;
+
+interface RenderShopItems {
+  name?: string;
+  imageUrl?: string;
+  variant: 'shop';
+  value: ShopCard;
+}
+
+interface RenderShopProps {
+  items: RenderShopItems;
+  buttonComponent: ReactNode;
+}
+
+const RenderShop = ({ items, buttonComponent }: RenderShopProps) => {
+  const { name, imageUrl, variant, value } = items;
+  return (
+    <>
+      <h2 className={cardLayout.heading({ size: 'lg' })}>내 가게</h2>
+      <section className={cn(noticeFrame(), 'bg-red-100')}>
+        <NoticeImage name={name} imageUrl={imageUrl} />
+        <NoticeInfo variant={variant} value={value} buttonComponent={buttonComponent} />
+      </section>
+    </>
+  );
+};
+export default RenderShop;
diff --git a/src/components/ui/card/notice/mockData/mockData.json b/src/components/ui/card/notice/mockData/mockData.json
new file mode 100644
index 0000000..3803363
--- /dev/null
+++ b/src/components/ui/card/notice/mockData/mockData.json
@@ -0,0 +1,76 @@
+{
+  "item": {
+    "id": "notice-001",
+    "hourlyPay": 20000,
+    "startsAt": "2025-10-11T11:00:00Z",
+    "workhour": 4,
+    "description": "주말 점심 시간대 근무자를 모집합니다.",
+    "closed": false,
+    "shop": {
+      "item": {
+        "id": "shop-bridge",
+        "name": "여의도 베이커리 카페",
+        "category": "카페",
+        "address1": "서울시 영등포구",
+        "address2": "여의도동 2가 123-45",
+        "description": "여의도 한강 뷰를 즐길 수 있는 베이커리 카페! 직장인이 많은 곳이라 평일 점심에만 많이바쁘고 그 외는 한가한 편입니다.",
+        "imageUrl": "https://picsum.photos/id/16/640/360",
+        "originalHourlyPay": 18000
+      },
+      "href": "/shops/shop-bridge"
+    },
+    "currentUserApplication": null
+  },
+  "links": [
+    {
+      "rel": "self",
+      "description": "공고 정보",
+      "method": "GET",
+      "href": "/shops/shop-bridge/notices/notice-001"
+    },
+    {
+      "rel": "update",
+      "description": "공고 수정",
+      "method": "PUT",
+      "href": "/shops/shop-bridge/notices/notice-001",
+      "body": {
+        "hourlyPay": "number",
+        "startsAt": "string",
+        "workhour": "string",
+        "description": "string"
+      }
+    },
+    {
+      "rel": "applications",
+      "description": "지원 목록",
+      "method": "GET",
+      "href": "/shops/shop-bridge/notices/notice-001/applications",
+      "query": {
+        "offset": "undefined | number",
+        "limit": "undefined | number"
+      }
+    },
+    {
+      "rel": "create",
+      "description": "지원하기",
+      "method": "POST",
+      "href": "/shops/shop-bridge/notices/notice-001/applications"
+    },
+    {
+      "rel": "shop",
+      "description": "가게 정보",
+      "method": "GET",
+      "href": "/shops/shop-bridge"
+    },
+    {
+      "rel": "list",
+      "description": "공고 목록",
+      "method": "GET",
+      "href": "/shops/shop-bridge/notices",
+      "query": {
+        "offset": "undefined | number",
+        "limit": "undefined | number"
+      }
+    }
+  ]
+}
diff --git a/src/components/ui/card/notice/mockData/noticeWrapper.tsx b/src/components/ui/card/notice/mockData/noticeWrapper.tsx
new file mode 100644
index 0000000..38eb510
--- /dev/null
+++ b/src/components/ui/card/notice/mockData/noticeWrapper.tsx
@@ -0,0 +1,76 @@
+import { Button } from '@/components/ui/button';
+import Notice from '@/components/ui/card/notice/notice';
+import { getNoticeStatus } from '@/lib/utils/getNoticeStatus';
+import type { NoticeCard } from '@/types/notice';
+import { NoticeShopCard } from '@/types/shop';
+import Link from 'next/link';
+import mockResponse from './mockData.json';
+import shopMockResponse from './shopMockData.json';
+
+// mockData
+type RawNotice = typeof mockResponse;
+type RawShopNotice = typeof shopMockResponse;
+
+const toNoticeCard = ({ item }: RawNotice): NoticeCard => {
+  const shop = item.shop.item;
+
+  return {
+    id: item.id,
+    hourlyPay: item.hourlyPay,
+    startsAt: item.startsAt,
+    workhour: item.workhour,
+    description: item.description,
+    closed: item.closed,
+    shopId: shop.id,
+    name: shop.name,
+    category: shop.category,
+    address1: shop.address1,
+    shopDescription: shop.description,
+    imageUrl: shop.imageUrl,
+    originalHourlyPay: shop.originalHourlyPay,
+  };
+};
+const toShopCard = ({ item }: RawShopNotice): NoticeShopCard => {
+  const shop = item;
+
+  return {
+    shopId: shop.id,
+    name: shop.name,
+    category: shop.category,
+    address1: shop.address1,
+    shopDescription: shop.description,
+    imageUrl: shop.imageUrl,
+  };
+};
+
+const NoticeWrapper = () => {
+  //  notice
+  const notice: NoticeCard = toNoticeCard(mockResponse);
+  const status = getNoticeStatus(notice.closed, notice.startsAt);
+  const href = `/shops/${notice.shopId}/notices/${notice.id}`;
+  //  shop
+  const shopItem: NoticeShopCard = toShopCard(shopMockResponse);
+  return (
+    <>
+      <Notice notice={notice}>
+        <Button
+          as={Link}
+          href={href}
+          size='xs38'
+          full
+          className='font-bold'
+          variant={status !== 'open' ? 'disabled' : 'primary'}
+        >
+          {status !== 'open' ? '신청 불가' : '신청하기'}
+        </Button>
+      </Notice>
+      <Notice notice={shopItem} variant='shop'>
+        <Button as={Link} href={href} size='xs38' full className='font-bold'>
+          가게 편집하기
+        </Button>
+      </Notice>
+    </>
+  );
+};
+
+export default NoticeWrapper;
diff --git a/src/components/ui/card/notice/mockData/shopMockData.json b/src/components/ui/card/notice/mockData/shopMockData.json
new file mode 100644
index 0000000..95e2909
--- /dev/null
+++ b/src/components/ui/card/notice/mockData/shopMockData.json
@@ -0,0 +1,59 @@
+{
+  "item": {
+    "id": "4490151c-5217-4157-b072-9c37b05bed47",
+    "name": "진주회관",
+    "category": "한식",
+    "address1": "서울시 중구",
+    "address2": "세종대로11길 26",
+    "description": "콩국수 맛집 인정따리",
+    "imageUrl": "https://bootcamp-project-api.s3.ap-northeast-2.amazonaws.com/0-1/the-julge/1bdb43c8-ff08-4a46-81b0-7f91efced98c-jinju4.png",
+    "originalHourlyPay": 10000,
+    "user": {
+      "item": {
+        "id": "4e560aa8-ae5a-40e1-a6e0-2a1e8b866d17",
+        "email": "test-employer1@codeit.com",
+        "type": "employer"
+      },
+      "href": "/users/4e560aa8-ae5a-40e1-a6e0-2a1e8b866d17"
+    }
+  },
+  "links": [
+    {
+      "rel": "self",
+      "description": "가게 정보",
+      "method": "GET",
+      "href": "/shops/4490151c-5217-4157-b072-9c37b05bed47"
+    },
+    {
+      "rel": "update",
+      "description": "가게 정보 수정",
+      "method": "PUT",
+      "href": "/shops/4490151c-5217-4157-b072-9c37b05bed47",
+      "body": {
+        "name": "string",
+        "category": "한식 | 중식 | 일식 | 양식 | 분식 | 카페 | 편의점 | 기타",
+        "address1": "서울시 종로구 | 서울시 중구 | 서울시 용산구 | 서울시 성동구 | 서울시 광진구 | 서울시 동대문구 | 서울시 중랑구 | 서울시 성북구 | 서울시 강북구 | 서울시 도봉구 | 서울시 노원구 | 서울시 은평구 | 서울시 서대문구 | 서울시 마포구 | 서울시 양천구 | 서울시 강서구 | 서울시 구로구 | 서울시 금천구 | 서울시 영등포구 | 서울시 동작구 | 서울시 관악구 | 서울시 서초구 | 서울시 강남구 | 서울시 송파구 | 서울시 강동구",
+        "address2": "string",
+        "description": "string",
+        "imageUrl": "string",
+        "originalHourlyPay": "number"
+      }
+    },
+    {
+      "rel": "user",
+      "description": "가게 주인 정보",
+      "method": "GET",
+      "href": "/users/4e560aa8-ae5a-40e1-a6e0-2a1e8b866d17"
+    },
+    {
+      "rel": "notices",
+      "description": "공고 목록",
+      "method": "GET",
+      "href": "/shops/4490151c-5217-4157-b072-9c37b05bed47/notices",
+      "query": {
+        "offset": "undefined | number",
+        "limit": "undefined | number"
+      }
+    }
+  ]
+}
diff --git a/src/components/ui/card/notice/notice.stories.tsx b/src/components/ui/card/notice/notice.stories.tsx
new file mode 100644
index 0000000..102362d
--- /dev/null
+++ b/src/components/ui/card/notice/notice.stories.tsx
@@ -0,0 +1,61 @@
+import type { NoticeCard } from '@/types/notice';
+import type { Meta, StoryObj } from '@storybook/react';
+import Notice from './notice';
+
+const oneDayMs = 24 * 60 * 60 * 1000;
+
+const baseNotice: NoticeCard = {
+  id: 'notice-001',
+  hourlyPay: 20000,
+  startsAt: new Date(Date.now() + oneDayMs).toISOString(),
+  workhour: 4,
+  description: '주말 점심 시간대 근무자를 모집합니다.',
+  closed: false,
+  shopId: 'shop-bridge',
+  name: '한강 브런치 카페',
+  category: '카페',
+  address1: '서울시 용산구',
+  shopDescription: '한강 뷰를 자랑하는 브런치 카페',
+  imageUrl: 'https://picsum.photos/id/1080/640/360',
+  originalHourlyPay: 18000,
+};
+
+const meta = {
+  title: 'UI/Notice',
+  component: Notice,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    Story => (
+      <div className='mx-auto w-full max-w-[1094px] p-6'>
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof Notice>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    notice: baseNotice,
+    variant: 'notice',
+    children: <button className='base-button'>지원하기</button>,
+  },
+};
+
+export const ShopVariant: Story = {
+  args: {
+    notice: {
+      ...baseNotice,
+      name: '내 가게 한강 브런치',
+      category: '브런치',
+    },
+    variant: 'shop',
+    children: <button className='base-button'>공고 등록</button>,
+  },
+};
diff --git a/src/components/ui/card/notice/notice.styles.ts b/src/components/ui/card/notice/notice.styles.ts
new file mode 100644
index 0000000..f57afdb
--- /dev/null
+++ b/src/components/ui/card/notice/notice.styles.ts
@@ -0,0 +1,27 @@
+import { cardLayout } from '@/components/ui/card/card.styles';
+import { cn } from '@/lib/utils/cn';
+import { cva } from 'class-variance-authority';
+
+export const noticeWrapper = cva('flex flex-col gap-4 tablet:gap-6');
+
+export const noticeFrame = cva(
+  cn(
+    cardLayout.frame(),
+    'flex flex-col gap-3 p-5 tablet:gap-4 tablet:p-6 desktop:flex-row desktop:gap-8'
+  )
+);
+
+export const noticeImageWrapper = cva(
+  cn(cardLayout.imageWrapper(), 'w-full h-[180px] tablet:h-[360px] desktop:h-auto')
+);
+
+export const noticeInfoWrapper = cva('shrink-0 desktop:w-[346px]');
+
+export const noticeLabel = cva('pb-2 text-body-m font-bold text-red-400');
+
+export const payBadge = cva(cn(cardLayout.badge(), 'bg-red-400 px-2 py-1 tablet:py-2 tablet:px-3'));
+
+export const badgeText = cva(cn(cardLayout.badgeText(), 'text-white font-bold'));
+export const description = cva('rounded-xl bg-gray-100 p-8');
+
+export const noticeButton = cva('mt-6 tablet:mt-10 desktop:mt-8');
diff --git a/src/components/ui/card/notice/notice.tsx b/src/components/ui/card/notice/notice.tsx
new file mode 100644
index 0000000..ed901de
--- /dev/null
+++ b/src/components/ui/card/notice/notice.tsx
@@ -0,0 +1,76 @@
+import { Container } from '@/components/layout';
+import { NoticeCard } from '@/types/notice';
+import { ReactNode } from 'react';
+import RenderNotice from './components/renderNotice';
+import RenderShop from './components/renderShop';
+import { noticeWrapper } from './notice.styles';
+
+export type NoticeVariant = 'notice' | 'shop';
+interface NoticeProps<T extends Partial<NoticeCard>> {
+  notice: T;
+  variant?: NoticeVariant;
+  children: ReactNode;
+}
+
+const Notice = <T extends Partial<NoticeCard>>({
+  notice,
+  variant = 'notice',
+  children,
+}: NoticeProps<T>) => {
+  const {
+    hourlyPay,
+    startsAt,
+    workhour,
+    description,
+    name,
+    category,
+    address1,
+    shopDescription,
+    imageUrl,
+    originalHourlyPay,
+  } = notice;
+
+  const noticeValue = {
+    hourlyPay: hourlyPay ?? 0,
+    originalHourlyPay: originalHourlyPay ?? 0,
+    startsAt: startsAt ?? '',
+    workhour: workhour ?? 0,
+    address1: address1 ?? '',
+    shopDescription: shopDescription ?? '',
+  };
+
+  const noticeItem = {
+    name,
+    category,
+    imageUrl,
+    description,
+    variant: 'notice' as const,
+    value: noticeValue,
+  };
+
+  const shopValue = {
+    name: name ?? '',
+    category: category ?? '',
+    address1: address1 ?? '',
+    imageUrl: imageUrl ?? '',
+    shopDescription: shopDescription ?? '',
+  };
+
+  const shopItem = {
+    name,
+    imageUrl,
+    variant: 'shop' as const,
+    value: shopValue,
+  };
+
+  return (
+    <Container className={noticeWrapper()}>
+      {variant === 'notice' ? (
+        <RenderNotice items={noticeItem} buttonComponent={children} />
+      ) : (
+        <RenderShop items={shopItem} buttonComponent={children} />
+      )}
+    </Container>
+  );
+};
+export default Notice;
diff --git a/src/components/ui/post/mockData.json b/src/components/ui/card/post/mockData/mockData.json
similarity index 100%
rename from src/components/ui/post/mockData.json
rename to src/components/ui/card/post/mockData/mockData.json
diff --git a/src/components/ui/post/postWrapper.tsx b/src/components/ui/card/post/mockData/postWrapper.tsx
similarity index 72%
rename from src/components/ui/post/postWrapper.tsx
rename to src/components/ui/card/post/mockData/postWrapper.tsx
index b8927eb..17e018b 100644
--- a/src/components/ui/post/postWrapper.tsx
+++ b/src/components/ui/card/post/mockData/postWrapper.tsx
@@ -1,27 +1,25 @@
+import Post from '@/components/ui/card/post/post';
 import type { PostCard } from '@/types/notice';
 import mockResponse from './mockData.json';
-import Post from './post';
 
 // mockData 용 페이지
 
 type RawNotice = (typeof mockResponse)['items'][number];
 
-const toPostCard = ({ item, links }: RawNotice): PostCard => {
+const toPostCard = ({ item }: RawNotice): PostCard => {
   const shop = item.shop.item;
-  const href = links.find(link => link.rel === 'self')?.href ?? item.shop.href;
 
   return {
     id: item.id,
     hourlyPay: item.hourlyPay,
     startsAt: item.startsAt,
     workhour: item.workhour,
-    description: item.description,
     closed: item.closed,
+    shopId: shop.id,
     name: shop.name,
     address1: shop.address1,
     imageUrl: shop.imageUrl,
     originalHourlyPay: shop.originalHourlyPay,
-    href,
   };
 };
 
@@ -29,7 +27,7 @@ const PostWrapper = () => {
   const notices: PostCard[] = mockResponse.items.map(toPostCard);
 
   return (
-    <div className='grid gap-6 grid-cols-2 desktop:grid-cols-3'>
+    <div className='grid grid-cols-2 gap-6 desktop:grid-cols-3'>
       {notices.map(notice => (
         <Post key={notice.id} notice={notice} />
       ))}
diff --git a/src/components/ui/post/post.stories.tsx b/src/components/ui/card/post/post.stories.tsx
similarity index 85%
rename from src/components/ui/post/post.stories.tsx
rename to src/components/ui/card/post/post.stories.tsx
index e0e3085..accae4c 100644
--- a/src/components/ui/post/post.stories.tsx
+++ b/src/components/ui/card/post/post.stories.tsx
@@ -1,20 +1,18 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Post } from '.';
 import type { PostCard } from '@/types/notice';
+import type { Meta, StoryObj } from '@storybook/react';
+import Post from './post';
 
 const baseNotice: PostCard = {
   id: 'notice-001',
   hourlyPay: 18000,
   startsAt: new Date(Date.now() + 1000 * 60 * 60 * 24).toISOString(),
   workhour: 4,
-  description: '주말 점심 시간대 근무자를 모집합니다.',
   closed: false,
   name: '한강 브런치 카페',
   address1: '서울시 용산구',
   imageUrl: 'https://picsum.photos/id/1080/640/360',
   originalHourlyPay: 15000,
-  href: '/notices/notice-001',
+  shopId: 'notice-001',
 };
 
 const meta = {
@@ -44,7 +42,7 @@ export const Expired: Story = {
       startsAt: '2023-08-01T11:00:00Z',
       hourlyPay: 20000,
       originalHourlyPay: 13000,
-      href: '/notices/notice-002',
+      shopId: 'notice-002',
     },
   },
 };
@@ -58,7 +56,7 @@ export const Closed: Story = {
       hourlyPay: 9500,
       originalHourlyPay: 9000,
       startsAt: '2023-07-01T09:00:00Z',
-      href: '/notices/notice-003',
+      shopId: 'notice-003',
     },
   },
 };
diff --git a/src/components/ui/card/post/post.styles.ts b/src/components/ui/card/post/post.styles.ts
new file mode 100644
index 0000000..512e10b
--- /dev/null
+++ b/src/components/ui/card/post/post.styles.ts
@@ -0,0 +1,45 @@
+import { cardLayout } from '@/components/ui/card/card.styles';
+import { cn } from '@/lib/utils/cn';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const postFrame = cva(cn(cardLayout.frame(), 'block p-3 tablet:rounded-2xl tablet:p-4'));
+
+export const postImageWrapper = cva(cn(cardLayout.imageWrapper(), 'h-[120px] tablet:h-[160px]'));
+
+export const postImageDimmed = cva(
+  'absolute inset-0 flex items-center justify-center bg-modal-dimmed text-heading-s text-zinc-300 font-bold'
+);
+
+export const payLayout = cva(
+  cn(cardLayout.payLayout(), 'mt-4 flex-wrap justify-between tablet:flex-nowrap')
+);
+
+export const payBadge = cva(cn(cardLayout.badge(), 'tablet:py-2 tablet:px-3'), {
+  variants: {
+    status: {
+      open: 'tablet:bg-red-400',
+      inactive: 'tablet:bg-gray-200',
+    },
+  },
+  defaultVariants: { status: 'open' },
+});
+
+export const badgeText = cva(cn(cardLayout.badgeText(), 'tablet:font-bold tablet:text-white'), {
+  variants: {
+    status: {
+      open: 'text-red-400',
+      inactive: 'text-gray-300',
+    },
+  },
+  defaultVariants: { status: 'open' },
+});
+export const badgeIcon = cva('self-start tablet:bg-white', {
+  variants: {
+    status: {
+      open: 'bg-red-400',
+      inactive: 'bg-gray-300',
+    },
+  },
+  defaultVariants: { status: 'open' },
+});
+export type PostStatusVariant = VariantProps<typeof badgeIcon>['status'];
diff --git a/src/components/ui/post/post.tsx b/src/components/ui/card/post/post.tsx
similarity index 57%
rename from src/components/ui/post/post.tsx
rename to src/components/ui/card/post/post.tsx
index a32ac45..1d2814c 100644
--- a/src/components/ui/post/post.tsx
+++ b/src/components/ui/card/post/post.tsx
@@ -1,27 +1,22 @@
+import { cardLayout, CardStatusVariant } from '@/components/ui/card/card.styles';
 import { Icon } from '@/components/ui/icon';
 import { calcPayIncreasePercent } from '@/lib/utils/calcPayIncrease';
 import { cn } from '@/lib/utils/cn';
 import { getTime } from '@/lib/utils/dateFormatter';
 import { formatNumber } from '@/lib/utils/formatNumber';
+import { getNoticeStatus } from '@/lib/utils/getNoticeStatus';
 import type { PostCard } from '@/types/notice';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useMemo } from 'react';
 import {
   badgeIcon,
   badgeText,
-  postBadge,
-  postHeading,
+  payBadge,
+  payLayout,
+  postFrame,
   postImageDimmed,
   postImageWrapper,
-  postWrapper,
-  workInfoIcon,
-  workInfoLayout,
-  workInfoText,
-  workPayLayout,
-  type PostStatusVariant,
 } from './post.styles';
-type NoticeStatus = 'open' | 'expired' | 'closed';
 
 interface PostProps {
   notice: PostCard;
@@ -31,13 +26,6 @@ const STATUS_LABEL = {
   closed: '공고 마감',
 } as const;
 
-const hasShiftStarted = (startsAt: string) => Date.now() >= new Date(startsAt).getTime();
-
-const getNoticeStatus = (closed: boolean, startsAt: string): NoticeStatus => {
-  if (closed) return 'closed';
-  return hasShiftStarted(startsAt) ? 'expired' : 'open';
-};
-
 const Post = ({ notice }: PostProps) => {
   const {
     hourlyPay,
@@ -48,53 +36,64 @@ const Post = ({ notice }: PostProps) => {
     imageUrl,
     name,
     address1,
-    href,
+    shopId,
   } = notice;
-  const status = useMemo(() => getNoticeStatus(closed, startsAt), [closed, startsAt]);
-  const payIncreasePercent = useMemo(
-    () => calcPayIncreasePercent(hourlyPay, originalHourlyPay),
-    [hourlyPay, originalHourlyPay]
-  );
+  const status = getNoticeStatus(closed, startsAt);
+  const payIncreasePercent = calcPayIncreasePercent(hourlyPay, originalHourlyPay);
   const { date, startTime, endTime } = getTime(startsAt, workhour);
-  const statusVariant: PostStatusVariant = status === 'open' ? 'open' : 'inactive';
+  const statusVariant: CardStatusVariant = status === 'open' ? 'open' : 'inactive';
   const payIncreaseLabel =
     payIncreasePercent && (payIncreasePercent > 100 ? '100% 이상' : `${payIncreasePercent}%`);
+  const href = `/notices/${shopId}`;
+
   return (
-    <Link href={href} className={postWrapper()}>
+    <Link href={href} className={postFrame()} aria-label={`${name} 공고 상세로 이동`}>
       <div className={postImageWrapper()}>
-        <Image src={imageUrl} alt={`${name} 가게 이미지`} fill className='object-cover' />
+        <Image
+          src={imageUrl}
+          alt={`${name} 가게 이미지`}
+          fill
+          sizes='(max-width: 744px) 120px, 160px'
+          className='object-cover'
+        />
         {status !== 'open' && <div className={postImageDimmed()}>{STATUS_LABEL[status]}</div>}
       </div>
       <div className={cn('mt-4', 'tablet:mt-6')}>
         <ul className='flex flex-col flex-nowrap gap-2'>
-          <li className={postHeading({ status: statusVariant })}>{name}</li>
-          <li className={workInfoLayout()}>
+          <li className={cardLayout.heading({ size: 'sm', status: statusVariant })}>{name}</li>
+          <li className={cardLayout.infoLayout()}>
             <Icon
               iconName='clock'
               iconSize='sm'
               ariaLabel='근무시간'
-              className={workInfoIcon({ status: statusVariant })}
+              className={cardLayout.infoIcon({ status: statusVariant })}
             />
-            <p className={workInfoText({ status: statusVariant })}>
+            <p className={cardLayout.info({ status: statusVariant })}>
               {date} {startTime} ~ {endTime} ({workhour}시간)
             </p>
           </li>
-          <li className={workInfoLayout()}>
+          <li className={cardLayout.infoLayout()}>
             <Icon
               iconName='map'
               iconSize='sm'
               ariaLabel='근무위치'
-              className={workInfoIcon({ status: statusVariant })}
+              className={cardLayout.infoIcon({ status: statusVariant })}
             />
-            <p className={workInfoText({ status: statusVariant })}>{address1}</p>
+            <p className={cardLayout.info({ status: statusVariant })}>{address1}</p>
           </li>
         </ul>
-        <div className={workPayLayout()}>
-          <span className={postHeading({ status: statusVariant, className: 'w-full' })}>
+        <div className={payLayout()}>
+          <span
+            className={cardLayout.heading({
+              size: 'sm',
+              status: statusVariant,
+              className: 'w-full tracking-wide',
+            })}
+          >
             {formatNumber(hourlyPay)}원
           </span>
           {payIncreasePercent !== null && (
-            <div className={postBadge({ status: statusVariant })}>
+            <div className={payBadge({ status: statusVariant })}>
               <span className={badgeText({ status: statusVariant })}>
                 기존 시급 {payIncreaseLabel}
               </span>
@@ -102,7 +101,7 @@ const Post = ({ notice }: PostProps) => {
                 iconName='arrowUp'
                 iconSize='sm'
                 bigScreenSize='rg'
-                ariaLabel='시급정보'
+                decorative
                 className={badgeIcon({ status: statusVariant })}
               />
             </div>
diff --git a/src/components/ui/dropdown/dropdown.stories.tsx b/src/components/ui/dropdown/dropdown.stories.tsx
index e0c215c..a70f527 100644
--- a/src/components/ui/dropdown/dropdown.stories.tsx
+++ b/src/components/ui/dropdown/dropdown.stories.tsx
@@ -1,27 +1,30 @@
+// src/components/ui/dropdown/dropdown.stories.tsx
 import { ADDRESS_CODE, CATEGORY_CODE, SORT_CODE } from '@/constants/dropdown';
 import type { Meta, StoryObj } from '@storybook/nextjs';
+import { useState } from 'react';
 import Dropdown from './dropdown';
-const OPTIONS_MAP = {
-  CATEGORY_CODE,
-  ADDRESS_CODE,
-  SORT_CODE,
-};
+
+const OPTIONS_MAP = { CATEGORY_CODE, ADDRESS_CODE, SORT_CODE };
+
 const meta: Meta<typeof Dropdown> = {
   title: 'UI/Dropdown',
   component: Dropdown,
   tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <div className='h-64'>
+        <Story />
+      </div>
+    ),
+  ],
   args: {
     name: 'status',
     ariaLabel: '카테고리',
     placeholder: '카테고리를 선택하세요',
-    values: CATEGORY_CODE, // 기본값
+    values: CATEGORY_CODE,
   },
   argTypes: {
-    values: {
-      control: 'select',
-      options: Object.keys(OPTIONS_MAP),
-      mapping: OPTIONS_MAP,
-    },
+    values: { control: 'select', options: Object.keys(OPTIONS_MAP), mapping: OPTIONS_MAP },
   },
 };
 export default meta;
@@ -29,21 +32,24 @@ export default meta;
 type Story = StoryObj<typeof Dropdown>;
 
 export const Medium: Story = {
-  args: {
-    values: ADDRESS_CODE,
-    className: 'w-full',
+  render: args => {
+    const [value, setValue] = useState<string | undefined>();
+    return <Dropdown {...args} selected={value} onChange={setValue} className='w-full' />;
   },
+  args: { values: ADDRESS_CODE },
 };
 
 export const Small: Story = {
-  args: {
-    size: 'sm',
-    name: 'status-sm',
+  render: args => {
+    const [value, setValue] = useState<string | undefined>();
+    return <Dropdown {...args} selected={value} onChange={setValue} />;
   },
+  args: { size: 'sm', name: 'status-sm' },
 };
 
-export const WithDefaultValue: Story = {
-  args: {
-    selected: CATEGORY_CODE[1],
+export const WithInitialValue: Story = {
+  render: args => {
+    const [value, setValue] = useState<string | undefined>(CATEGORY_CODE[1]);
+    return <Dropdown {...args} selected={value} onChange={setValue} />;
   },
 };
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index aa21aaa..77b7a1a 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -9,7 +9,7 @@ export {
 export { DateInput, Input, TimeInput } from '@/components/ui/input';
 export { Table } from '@/components/ui/table';
 export { Button } from './button';
+export { Notice, Post } from './card';
 export { Dropdown } from './dropdown';
 export { Icon } from './icon';
 export { Modal, Notification } from './modal';
-export { Post } from './post';
diff --git a/src/components/ui/modal/modal.tsx b/src/components/ui/modal/modal.tsx
index 699e54d..b413c02 100644
--- a/src/components/ui/modal/modal.tsx
+++ b/src/components/ui/modal/modal.tsx
@@ -57,9 +57,7 @@ function ModalHeader({ variant, title }: { variant: Variant; title: string }) {
           ariaLabel={`${variant} glyph`}
         />
       </span>
-      <h2 className='font-medium leading-[var(--lh-modal)] text-[var(--fs-modal)] text-black'>
-        {title}
-      </h2>
+      <h2 className='text-modal font-medium text-black'>{title}</h2>
     </div>
   );
 }
@@ -67,11 +65,7 @@ function ModalHeader({ variant, title }: { variant: Variant; title: string }) {
 /** Body (optional) */
 function ModalBody({ description }: { description?: ReactNode }) {
   if (!description) return null;
-  return (
-    <div className='px-6 py-4 leading-[var(--lh-body-m)] text-[var(--fs-body-m)] text-black'>
-      {description}
-    </div>
-  );
+  return <div className='px-6 py-4 text-modal text-black'>{description}</div>;
 }
 
 /** Footer */
diff --git a/src/components/ui/post/index.ts b/src/components/ui/post/index.ts
deleted file mode 100644
index b59c9af..0000000
--- a/src/components/ui/post/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Post } from './post';
diff --git a/src/components/ui/post/post.styles.ts b/src/components/ui/post/post.styles.ts
deleted file mode 100644
index 4efcdea..0000000
--- a/src/components/ui/post/post.styles.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-// src/components/post.styles.ts
-import { cva, type VariantProps } from 'class-variance-authority';
-
-export const postWrapper = cva(
-  'block rounded-xl  border border-gray-200 p-3 tablet:rounded-2xl tablet:p-4'
-);
-
-export const postImageWrapper = cva(
-  'relative rounded-xl overflow-hidden h-[120px] tablet:h-[160px]'
-);
-
-export const postImageDimmed = cva(
-  'absolute inset-0 flex items-center justify-center bg-modal-dimmed text-heading-s text-zinc-300 font-bold'
-);
-
-export const postHeading = cva('text-heading-s font-bold', {
-  variants: {
-    status: {
-      open: '',
-      inactive: 'text-gray-300',
-    },
-  },
-  defaultVariants: { status: 'open' },
-});
-
-export const workInfoLayout = cva('flex flex-nowrap items-start tablet:items-center gap-1.5');
-
-export const workInfoText = cva('text-caption tablet:text-body-s', {
-  variants: {
-    status: {
-      open: 'text-gray-500',
-      inactive: 'text-gray-300',
-    },
-  },
-  defaultVariants: { status: 'open' },
-});
-
-export const workInfoIcon = cva('', {
-  variants: {
-    status: {
-      open: 'bg-red-300',
-      inactive: 'bg-gray-300',
-    },
-  },
-  defaultVariants: { status: 'open' },
-});
-
-export const workPayLayout = cva(
-  'mt-4 flex flex-wrap items-center justify-between gap-x-3 tablet:flex-nowrap'
-);
-
-export const postBadge = cva('flex items-center gap-x-0.5 rounded-full tablet:py-2 tablet:px-3', {
-  variants: {
-    status: {
-      open: 'tablet:bg-red-400',
-      inactive: 'tablet:bg-gray-200',
-    },
-  },
-  defaultVariants: { status: 'open' },
-});
-
-export const badgeText = cva(
-  'whitespace-nowrap text-caption tablet:text-body-s tablet:font-bold tablet:text-white',
-  {
-    variants: {
-      status: {
-        open: 'text-red-400',
-        inactive: 'text-gray-300',
-      },
-    },
-    defaultVariants: { status: 'open' },
-  }
-);
-export const badgeIcon = cva('tablet:bg-white', {
-  variants: {
-    status: {
-      open: 'bg-red-400',
-      inactive: 'bg-gray-300',
-    },
-  },
-  defaultVariants: { status: 'open' },
-});
-export type PostStatusVariant = VariantProps<typeof postHeading>['status'];
diff --git a/src/lib/utils/getNoticeStatus.ts b/src/lib/utils/getNoticeStatus.ts
new file mode 100644
index 0000000..994013e
--- /dev/null
+++ b/src/lib/utils/getNoticeStatus.ts
@@ -0,0 +1,7 @@
+type NoticeStatus = 'open' | 'expired' | 'closed';
+export const hasShiftStarted = (startsAt: string) => Date.now() >= new Date(startsAt).getTime();
+
+export const getNoticeStatus = (closed: boolean, startsAt: string): NoticeStatus => {
+  if (closed) return 'closed';
+  return hasShiftStarted(startsAt) ? 'expired' : 'open';
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a19827f..6a7ccb1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,8 +1,10 @@
-import PostWrapper from '@/components/ui/post/postWrapper';
+import NoticeWrapper from '@/components/ui/card/notice/mockData/noticeWrapper';
+import PostWrapper from '@/components/ui/card/post/mockData/postWrapper';
 
 export default function Home() {
   return (
     <>
+      <NoticeWrapper />
       <PostWrapper />
     </>
   );
diff --git a/src/stories/example/Button.stories.ts b/src/stories/example/Button.stories.ts
deleted file mode 100644
index a49e0d6..0000000
--- a/src/stories/example/Button.stories.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs';
-import { fn } from 'storybook/test';
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};
diff --git a/src/stories/example/Button.tsx b/src/stories/example/Button.tsx
deleted file mode 100644
index 87ac759..0000000
--- a/src/stories/example/Button.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import './button.css';
-
-export interface ButtonProps {
-  /** Is this the principal call to action on the page? */
-  primary?: boolean;
-  /** What background color to use */
-  backgroundColor?: string;
-  /** How large should the button be? */
-  size?: 'small' | 'medium' | 'large';
-  /** Button contents */
-  label: string;
-  /** Optional click handler */
-  onClick?: () => void;
-}
-
-/** Primary UI component for user interaction */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type='button'
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {label}
-      <style jsx>{`
-        button {
-          background-color: ${backgroundColor};
-        }
-      `}</style>
-    </button>
-  );
-};
diff --git a/src/stories/example/Header.stories.ts b/src/stories/example/Header.stories.ts
deleted file mode 100644
index 56ed5e0..0000000
--- a/src/stories/example/Header.stories.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs';
-
-import { fn } from 'storybook/test';
-
-import { Header } from './Header';
-
-const meta = {
-  title: 'Example/Header',
-  component: Header,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-  args: {
-    onLogin: fn(),
-    onLogout: fn(),
-    onCreateAccount: fn(),
-  },
-} satisfies Meta<typeof Header>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const LoggedIn: Story = {
-  args: {
-    user: {
-      name: 'Jane Doe',
-    },
-  },
-};
-
-export const LoggedOut: Story = {};
diff --git a/src/stories/example/Header.tsx b/src/stories/example/Header.tsx
deleted file mode 100644
index 31dec79..0000000
--- a/src/stories/example/Header.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Button } from './Button';
-import './header.css';
-
-type User = {
-  name: string;
-};
-
-export interface HeaderProps {
-  user?: User;
-  onLogin?: () => void;
-  onLogout?: () => void;
-  onCreateAccount?: () => void;
-}
-
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
-  <header>
-    <div className='storybook-header'>
-      <div>
-        <svg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>
-          <g fill='none' fillRule='evenodd'>
-            <path
-              d='M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z'
-              fill='#FFF'
-            />
-            <path
-              d='M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z'
-              fill='#555AB9'
-            />
-            <path
-              d='M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z'
-              fill='#91BAF8'
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        {user ? (
-          <>
-            <span className='welcome'>
-              Welcome, <b>{user.name}</b>!
-            </span>
-            <Button size='small' onClick={onLogout} label='Log out' />
-          </>
-        ) : (
-          <>
-            <Button size='small' onClick={onLogin} label='Log in' />
-            <Button primary size='small' onClick={onCreateAccount} label='Sign up' />
-          </>
-        )}
-      </div>
-    </div>
-  </header>
-);
diff --git a/src/stories/example/button.css b/src/stories/example/button.css
deleted file mode 100644
index 4e3620b..0000000
--- a/src/stories/example/button.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-.storybook-button--primary {
-  background-color: #555ab9;
-  color: white;
-}
-.storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
-}
-.storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
-}
-.storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
-}
-.storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
-}
diff --git a/src/stories/example/header.css b/src/stories/example/header.css
deleted file mode 100644
index 5efd46c..0000000
--- a/src/stories/example/header.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.storybook-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-.storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header h1 {
-  display: inline-block;
-  vertical-align: top;
-  margin: 6px 0 6px 10px;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1;
-}
-
-.storybook-header button + button {
-  margin-left: 10px;
-}
-
-.storybook-header .welcome {
-  margin-right: 10px;
-  color: #333;
-  font-size: 14px;
-}
diff --git a/src/types/applications.ts b/src/types/applications.ts
new file mode 100644
index 0000000..13dd1cd
--- /dev/null
+++ b/src/types/applications.ts
@@ -0,0 +1,8 @@
+export type ApplicationStatus = 'pending' | 'accepted' | 'rejected' | 'canceled';
+export interface ApplicationBase {
+  item: {
+    id: string;
+    status: ApplicationStatus;
+    createdAt: string;
+  };
+}
diff --git a/src/types/notice.ts b/src/types/notice.ts
index 60a8202..abb3294 100644
--- a/src/types/notice.ts
+++ b/src/types/notice.ts
@@ -16,5 +16,11 @@ export interface Notice extends NoticeBase {
   closed: boolean;
 }
 
+export type PostCard = Omit<Notice, 'description'> & ShopSummary & { shopId: string };
 
-export type PostCard = Notice & ShopSummary & { href: string };
+export type NoticeCard = Notice &
+  ShopSummary & {
+    shopId: string;
+    category: string;
+    shopDescription: string;
+  };
diff --git a/src/types/shop.ts b/src/types/shop.ts
index ac50676..65c50a2 100644
--- a/src/types/shop.ts
+++ b/src/types/shop.ts
@@ -21,3 +21,12 @@ export interface Shop extends ShopBase {
 }
 
 export type ShopSummary = Pick<ShopBase, 'name' | 'address1' | 'imageUrl' | 'originalHourlyPay'>;
+
+export interface NoticeShopCard {
+  shopId: string;
+  name: string;
+  category: string;
+  address1: string;
+  imageUrl: string;
+  shopDescription: string;
+}