diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 601a6ce26..70a9c3e74 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -10,7 +10,45 @@ on:
   workflow_dispatch:
 
 jobs:
-  unit:
+  hard-basic:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+      - run: |
+          pnpm install
+          pnpm run test:hard:basic
+  hard-advanced:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: |
+          pnpm install
+          npx playwright install --with-deps
+          pnpm run test:hard:advanced
+  easy-basic:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -27,8 +65,9 @@ jobs:
       - name: Install dependencies
         run: |
           pnpm install
-          pnpm run test
-  e2e:
+          npx playwright install --with-deps
+          pnpm run test:easy:basic
+  easy-advanced:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
@@ -47,4 +86,4 @@ jobs:
         run: |
           pnpm install
           npx playwright install --with-deps
-          pnpm run test:e2e
+          pnpm run test:easy:advanced
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 000000000..9451f409a
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,38 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
+        env:
+          NODE_ENV: production
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        if: github.ref == 'refs/heads/main'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
diff --git a/cart-modal.html b/cart-modal.html
index 66455103d..6e2695c78 100644
--- a/cart-modal.html
+++ b/cart-modal.html
@@ -28,7 +28,7 @@
       <div class="max-w-md mx-auto px-4 py-4">
         <div class="flex items-center justify-between">
           <h1 class="text-xl font-bold text-gray-900">
-            <a href="/" data-link="">쇼핑몰</a>
+            <a href="${router.BASE_PATH}" data-link="">쇼핑몰</a>
           </h1>
           <div class="flex items-center space-x-2">
             <!-- 장바구니 아이콘 -->
diff --git a/e2e/e2e-easy.advanced.spec.js b/e2e/e2e-easy.advanced.spec.js
new file mode 100644
index 000000000..259379c41
--- /dev/null
+++ b/e2e/e2e-easy.advanced.spec.js
@@ -0,0 +1,305 @@
+import { expect, test } from "@playwright/test";
+
+// 테스트 설정
+test.describe.configure({ mode: "serial" });
+
+// 헬퍼 함수들
+class E2EHelpers {
+  constructor(page) {
+    this.page = page;
+  }
+
+  // 페이지 로딩 대기
+  async waitForPageLoad() {
+    await this.page.waitForSelector('[data-testid="products-grid"], #products-grid', { timeout: 10000 });
+    await this.page.waitForFunction(() => {
+      const text = document.body.textContent;
+      return text.includes("총") && text.includes("개");
+    });
+  }
+
+  // 상품을 장바구니에 추가
+  async addProductToCart(productName) {
+    await this.page.click(
+      `text=${productName} >> xpath=ancestor::*[contains(@class, 'product-card')] >> .add-to-cart-btn`,
+    );
+    await this.page.waitForSelector("text=장바구니에 추가되었습니다", { timeout: 5000 });
+  }
+
+  // 장바구니 모달 열기
+  async openCartModal() {
+    await this.page.click("#cart-icon-btn");
+    await this.page.waitForSelector(".cart-modal-overlay", { timeout: 5000 });
+  }
+}
+
+test.describe("E2E: 쇼핑몰 전체 사용자 시나리오", () => {
+  test.beforeEach(async ({ page }) => {
+    // 로컬 스토리지 초기화
+    await page.goto("/");
+    await page.evaluate(() => {
+      localStorage.clear();
+      sessionStorage.clear();
+    });
+  });
+
+  test.describe("1. 검색 및 필터링 기능이 URL과 연동된다.", () => {
+    test("검색어 입력 후 Enter 키로 검색하고 URL이 업데이트된다", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+      await helpers.waitForPageLoad();
+
+      // 검색어 입력
+      await page.fill("#search-input", "젤리");
+      await page.press("#search-input", "Enter");
+
+      // URL 업데이트 확인
+      await expect(page).toHaveURL(/search=%EC%A0%A4%EB%A6%AC/);
+
+      // 검색 결과 확인
+      await expect(page.locator("text=3개")).toBeVisible();
+
+      // 검색어가 검색창에 유지되는지 확인
+      await expect(page.locator("#search-input")).toHaveValue("젤리");
+
+      // 검색어 입력
+      await page.fill("#search-input", "아이패드");
+      await page.press("#search-input", "Enter");
+
+      // URL 업데이트 확인
+      await expect(page).toHaveURL(/search=%EC%95%84%EC%9D%B4%ED%8C%A8%EB%93%9C/);
+
+      // 검색 결과 확인
+      await expect(page.locator("text=21개")).toBeVisible();
+
+      // 새로고침을 해도 유지 되는지 확인
+      await page.reload();
+      await helpers.waitForPageLoad();
+      await expect(page.locator("text=21개")).toBeVisible();
+    });
+
+    test("정렬 옵션 변경 시 URL이 업데이트된다", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+      await helpers.waitForPageLoad();
+
+      // 가격 높은순으로 정렬
+      await page.selectOption("#sort-select", "price_desc");
+
+      // 첫 번째 상품 이 가격 높은 순으로 정렬되었는지 확인
+      await expect(page.locator(".product-card").first()).toMatchAriaSnapshot(`
+    - img "ASUS ROG Flow Z13 GZ302EA-RU110W 64GB, 1TB"
+    - heading "ASUS ROG Flow Z13 GZ302EA-RU110W 64GB, 1TB" [level=3]
+    - paragraph: ASUS
+    - paragraph: 3,749,000원
+    - button "장바구니 담기"
+      `);
+
+      await page.selectOption("#sort-select", "name_asc");
+      await expect(page.locator(".product-card").nth(1)).toMatchAriaSnapshot(`
+    - img "[매일출발]유로블루플러스 차량용 요소수 국내산 Adblue 호스포함"
+    - heading "[매일출발]유로블루플러스 차량용 요소수 국내산 Adblue 호스포함" [level=3]
+    - paragraph: 유로블루플러스
+    - paragraph: 8,700원
+    - button "장바구니 담기"
+    `);
+
+      await page.selectOption("#sort-select", "name_desc");
+      await expect(page.locator(".product-card").nth(1)).toMatchAriaSnapshot(`
+    - img "P&G 다우니 울트라 섬유유연제 에이프릴 프레쉬, 5.03L, 1개"
+    - heading "P&G 다우니 울트라 섬유유연제 에이프릴 프레쉬, 5.03L, 1개" [level=3]
+    - paragraph: 다우니
+    - paragraph: 16,610원
+    - button "장바구니 담기"
+      `);
+
+      await page.reload();
+      await helpers.waitForPageLoad();
+      await expect(page.locator(".product-card").nth(1)).toMatchAriaSnapshot(`
+    - img "P&G 다우니 울트라 섬유유연제 에이프릴 프레쉬, 5.03L, 1개"
+    - heading "P&G 다우니 울트라 섬유유연제 에이프릴 프레쉬, 5.03L, 1개" [level=3]
+    - paragraph: 다우니
+    - paragraph: 16,610원
+    - button "장바구니 담기"
+      `);
+    });
+
+    test("페이지당 상품 수 변경 시 URL이 업데이트된다", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+      await helpers.waitForPageLoad();
+
+      // 10개로 변경
+      await page.selectOption("#limit-select", "10");
+      await expect(page).toHaveURL(/limit=10/);
+      await page.waitForFunction(() => {
+        return document.querySelectorAll(".product-card").length === 10;
+      });
+      await expect(page.locator(".product-card").last()).toMatchAriaSnapshot(
+        `- heading "탈부착 방충망 자석쫄대 방풍비닐 창문방충망 셀프시공 DIY 백색 100cm" [level=3]`,
+      );
+
+      await page.selectOption("#limit-select", "20");
+      await expect(page).toHaveURL(/limit=20/);
+      await page.waitForFunction(() => {
+        return document.querySelectorAll(".product-card").length === 20;
+      });
+      await expect(page.locator(".product-card").last()).toMatchAriaSnapshot(
+        `- heading "고양이 난간 안전망 복층 베란다 방묘창 방묘문 방충망 캣도어 일반형검정1mx1m" [level=3]`,
+      );
+
+      await page.selectOption("#limit-select", "50");
+      await expect(page).toHaveURL(/limit=50/);
+      await page.waitForFunction(() => {
+        return document.querySelectorAll(".product-card").length === 50;
+      });
+      await expect(page.locator(".product-card").last()).toMatchAriaSnapshot(
+        `- heading "강아지 고양이 아이스팩 파우치 여름 베개 젤리곰 M사이즈" [level=3]`,
+      );
+
+      await page.selectOption("#limit-select", "100");
+      await expect(page).toHaveURL(/limit=100/);
+      await page.waitForFunction(() => {
+        return document.querySelectorAll(".product-card").length === 100;
+      });
+      await expect(page.locator(".product-card").last()).toMatchAriaSnapshot(
+        `- heading "고양이 스크래쳐 숨숨집 하우스 대형 원목 스크레쳐 A type" [level=3]`,
+      );
+
+      await page.reload();
+      await helpers.waitForPageLoad();
+      await expect(page.locator(".product-card").last()).toMatchAriaSnapshot(
+        `- heading "고양이 스크래쳐 숨숨집 하우스 대형 원목 스크레쳐 A type" [level=3]`,
+      );
+    });
+
+    test("검색어와 필터 조건이 URL에서 복원된다", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+
+      await page.goto("/?search=젤리&sort=price_desc&limit=10");
+      await helpers.waitForPageLoad();
+
+      await expect(page.locator("#search-input")).toHaveValue("젤리");
+      await expect(page.locator("#sort-select")).toHaveValue("price_desc");
+      await expect(page.locator("#limit-select")).toHaveValue("10");
+      await expect(page.getByRole("main")).toMatchAriaSnapshot(`- text: /총 3개의 상품/`);
+
+      await page.goto("/?search=고양이&sort=name_desc&limit=50");
+      await helpers.waitForPageLoad();
+
+      await expect(page.locator("#search-input")).toHaveValue("고양이");
+      await expect(page.locator("#sort-select")).toHaveValue("name_desc");
+      await expect(page.locator("#limit-select")).toHaveValue("50");
+      await expect(page.getByRole("main")).toMatchAriaSnapshot(`- text: /총 84개의 상품/`);
+    });
+  });
+
+  test.describe("2. 상품 상세 페이지와 URL이 연동된다.", () => {
+    test("상품 클릭부터 관련 상품 이동까지 전체 플로우", async ({ page }) => {
+      await page.evaluate(() => {
+        window.loadFlag = true;
+        window.history.pushState({}, "", "/product/85067212996");
+        window.dispatchEvent(new Event("popstate"));
+      });
+
+      // 상세 페이지 로딩 확인
+      await expect(page.locator("text=상품 상세")).toBeVisible();
+
+      // h1 태그에 상품명 확인
+      await expect(
+        page.locator('h1:text("PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장")'),
+      ).toBeVisible();
+
+      // 관련 상품 섹션 확인
+      await expect(page.locator("text=관련 상품")).toBeVisible();
+      const relatedProducts = page.locator(".related-product-card");
+      await expect(relatedProducts.first()).toBeVisible();
+
+      // 첫 번째 관련 상품 클릭
+      await relatedProducts.first().click();
+
+      // 다른 상품의 상세 페이지로 이동했는지 확인
+      await expect(page).toHaveURL("/product/86940857379");
+      await expect(
+        page.locator('h1:text("샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이")'),
+      ).toBeVisible();
+
+      await expect(await page.evaluate(() => window.loadFlag)).toBe(true);
+
+      await page.reload();
+
+      await expect(
+        page.locator('h1:text("샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이")'),
+      ).toBeVisible();
+
+      await expect(await page.evaluate(() => window.loadFlag)).toBe(undefined);
+    });
+  });
+
+  test.describe("3. SPA 네비게이션", () => {
+    test("브라우저 뒤로가기/앞으로가기가 올바르게 작동한다", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+      await page.evaluate(() => {
+        window.loadFlag = true;
+      });
+      await helpers.waitForPageLoad();
+
+      // 상품 상세 페이지로 이동
+      const productCard = page
+        .locator("text=PVC 투명 젤리 쇼핑백")
+        .locator('xpath=ancestor::*[contains(@class, "product-card")]');
+      await productCard.locator("img").click();
+
+      await expect(page).toHaveURL("/product/85067212996");
+      await expect(
+        page.locator('h1:text("PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장")'),
+      ).toBeVisible();
+      await expect(page.locator("text=관련 상품")).toBeVisible();
+      const relatedProducts = page.locator(".related-product-card");
+      await relatedProducts.first().click();
+
+      await expect(page).toHaveURL("/product/86940857379");
+      await expect(
+        page.locator('h1:text("샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이")'),
+      ).toBeVisible();
+
+      // 브라우저 뒤로가기
+      await page.goBack();
+      await expect(page).toHaveURL("/product/85067212996");
+      await expect(
+        page.locator('h1:text("PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장")'),
+      ).toBeVisible();
+
+      // 브라우저 앞으로가기
+      await page.goForward();
+      await expect(page).toHaveURL("/product/86940857379");
+      await expect(
+        page.locator('h1:text("샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이")'),
+      ).toBeVisible();
+
+      await page.goBack();
+      await page.goBack();
+      await expect(page).toHaveURL("/");
+      const firstProductCard = page.locator(".product-card").first();
+      await expect(firstProductCard.locator("img")).toBeVisible();
+
+      expect(await page.evaluate(() => window.loadFlag)).toBe(true);
+
+      await page.reload();
+      expect(
+        await page.evaluate(() => {
+          return window.loadFlag;
+        }),
+      ).toBe(undefined);
+    });
+
+    // 404 페이지 테스트
+    test("존재하지 않는 페이지 접근 시 404 페이지가 표시된다", async ({ page }) => {
+      // 존재하지 않는 경로로 이동
+      await page.goto("/non-existent-page");
+
+      // 404 페이지 확인
+      await expect(page.getByRole("main")).toMatchAriaSnapshot(`
+    - img: /404 페이지를 찾을 수 없습니다/
+    - link "홈으로"
+    `);
+    });
+  });
+});
diff --git a/e2e/e2e-easy.basic.spec.js b/e2e/e2e-easy.basic.spec.js
new file mode 100644
index 000000000..9b10a55fa
--- /dev/null
+++ b/e2e/e2e-easy.basic.spec.js
@@ -0,0 +1,278 @@
+import { expect, test } from "@playwright/test";
+
+// 테스트 설정
+test.describe.configure({ mode: "serial" });
+
+// 헬퍼 함수들
+class E2EHelpers {
+  constructor(page) {
+    this.page = page;
+  }
+
+  // 페이지 로딩 대기
+  async waitForPageLoad() {
+    await this.page.waitForSelector('[data-testid="products-grid"], #products-grid', { timeout: 10000 });
+    await this.page.waitForFunction(() => {
+      const text = document.body.textContent;
+      return text.includes("총") && text.includes("개");
+    });
+  }
+
+  // 상품을 장바구니에 추가
+  async addProductToCart(productName) {
+    await this.page.click(
+      `text=${productName} >> xpath=ancestor::*[contains(@class, 'product-card')] >> .add-to-cart-btn`,
+    );
+  }
+}
+
+test.describe("E2E: 쇼핑몰 전체 사용자 시나리오 > 난이도 쉬움 > 기본과제", () => {
+  test.beforeEach(async ({ page }) => {
+    // 로컬 스토리지 초기화
+    await page.goto("/");
+    await page.evaluate(() => {
+      localStorage.clear();
+      sessionStorage.clear();
+    });
+  });
+
+  test.describe("1. 애플리케이션 초기화 및 기본 기능", () => {
+    test("페이지 접속 시 로딩 상태가 표시되고 상품 목록이 정상적으로 로드된다", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+
+      // 로딩 상태 확인
+      await expect(page.locator("text=카테고리 로딩 중...")).toBeVisible();
+
+      // 상품 목록 로드 완료 대기
+      await helpers.waitForPageLoad();
+
+      // 상품 개수 확인 (340개)
+      await expect(page.locator("text=340개")).toBeVisible();
+
+      // 기본 UI 요소들 존재 확인
+      await expect(page.locator("#search-input")).toBeVisible();
+      await expect(page.locator("#cart-icon-btn")).toBeVisible();
+      await expect(page.locator("#limit-select")).toBeVisible();
+      await expect(page.locator("#sort-select")).toBeVisible();
+    });
+
+    test("상품 카드에 기본 정보가 올바르게 표시된다", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+      await helpers.waitForPageLoad();
+
+      // 첫 번째 상품 카드 확인
+      const firstProductCard = page.locator(".product-card").first();
+
+      // 상품 이미지 존재 확인
+      await expect(firstProductCard.locator("img")).toBeVisible();
+
+      // 상품명 확인
+      await expect(firstProductCard).toContainText(/pvc 투명 젤리 쇼핑백|고양이 난간 안전망/i);
+
+      // 가격 정보 확인 (숫자 + 원)
+      await expect(firstProductCard).toContainText(/\d{1,3}(,\d{3})*원/);
+
+      // 장바구니 버튼 확인
+      await expect(firstProductCard.locator(".add-to-cart-btn")).toBeVisible();
+    });
+  });
+
+  test.describe("2. 검색 및 필터링 기능", () => {
+    test("검색어 입력 후 Enter 키로 검색할 수 있다.", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+      await helpers.waitForPageLoad();
+
+      // 검색어 입력
+      await page.fill("#search-input", "젤리");
+      await page.press("#search-input", "Enter");
+
+      // 검색 결과 확인
+      await expect(page.locator("text=3개")).toBeVisible();
+
+      // 검색어가 검색창에 유지되는지 확인
+      await expect(page.locator("#search-input")).toHaveValue("젤리");
+
+      // 검색어 입력
+      await page.fill("#search-input", "아이패드");
+      await page.press("#search-input", "Enter");
+
+      // 검색 결과 확인
+      await expect(page.locator("text=21개")).toBeVisible();
+    });
+
+    test("상품의 정렬을 변경할 수 있다.", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+      await helpers.waitForPageLoad();
+
+      // 가격 높은순으로 정렬
+      await page.selectOption("#sort-select", "price_desc");
+
+      // 첫 번째 상품 이 가격 높은 순으로 정렬되었는지 확인
+      await expect(page.locator(".product-card").first()).toMatchAriaSnapshot(`
+    - img "ASUS ROG Flow Z13 GZ302EA-RU110W 64GB, 1TB"
+    - heading "ASUS ROG Flow Z13 GZ302EA-RU110W 64GB, 1TB" [level=3]
+    - paragraph: ASUS
+    - paragraph: 3,749,000원
+    - button "장바구니 담기"
+      `);
+
+      await page.selectOption("#sort-select", "name_asc");
+      await expect(page.locator(".product-card").nth(1)).toMatchAriaSnapshot(`
+    - img "[매일출발]유로블루플러스 차량용 요소수 국내산 Adblue 호스포함"
+    - heading "[매일출발]유로블루플러스 차량용 요소수 국내산 Adblue 호스포함" [level=3]
+    - paragraph: 유로블루플러스
+    - paragraph: 8,700원
+    - button "장바구니 담기"
+    `);
+
+      await page.selectOption("#sort-select", "name_desc");
+      await expect(page.locator(".product-card").nth(1)).toMatchAriaSnapshot(`
+    - img "P&G 다우니 울트라 섬유유연제 에이프릴 프레쉬, 5.03L, 1개"
+    - heading "P&G 다우니 울트라 섬유유연제 에이프릴 프레쉬, 5.03L, 1개" [level=3]
+    - paragraph: 다우니
+    - paragraph: 16,610원
+    - button "장바구니 담기"
+      `);
+
+      await page.reload();
+      await helpers.waitForPageLoad();
+      await expect(page.locator(".product-card").nth(1)).toMatchAriaSnapshot(`
+    - img "P&G 다우니 울트라 섬유유연제 에이프릴 프레쉬, 5.03L, 1개"
+    - heading "P&G 다우니 울트라 섬유유연제 에이프릴 프레쉬, 5.03L, 1개" [level=3]
+    - paragraph: 다우니
+    - paragraph: 16,610원
+    - button "장바구니 담기"
+      `);
+    });
+
+    test("페이지당 상품 수 변경이 가능하다.", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+
+      await page.goto("/");
+      await helpers.waitForPageLoad();
+
+      // 10개로 변경
+      await page.selectOption("#limit-select", "10");
+
+      await page.waitForFunction(() => document.querySelectorAll(".product-card").length === 10);
+      await expect(page.locator(".product-card").last()).toMatchAriaSnapshot(
+        `- heading "탈부착 방충망 자석쫄대 방풍비닐 창문방충망 셀프시공 DIY 백색 100cm" [level=3]`,
+      );
+
+      await page.selectOption("#limit-select", "20");
+
+      await page.waitForFunction(() => document.querySelectorAll(".product-card").length === 20);
+      await expect(page.locator(".product-card").last()).toMatchAriaSnapshot(
+        `- heading "고양이 난간 안전망 복층 베란다 방묘창 방묘문 방충망 캣도어 일반형검정1mx1m" [level=3]`,
+      );
+
+      await page.selectOption("#limit-select", "50");
+
+      await page.waitForFunction(() => document.querySelectorAll(".product-card").length === 50);
+      await expect(page.locator(".product-card").last()).toMatchAriaSnapshot(
+        `- heading "강아지 고양이 아이스팩 파우치 여름 베개 젤리곰 M사이즈" [level=3]`,
+      );
+
+      await page.selectOption("#limit-select", "100");
+
+      await page.waitForFunction(() => document.querySelectorAll(".product-card").length === 100);
+      await expect(page.locator(".product-card").last()).toMatchAriaSnapshot(
+        `- heading "고양이 스크래쳐 숨숨집 하우스 대형 원목 스크레쳐 A type" [level=3]`,
+      );
+    });
+  });
+
+  test.describe("3. 장바구니 상태 유지", () => {
+    test("장바구니 아이콘에 상품 개수가 정확히 표시된다", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+      await helpers.waitForPageLoad();
+
+      // 초기에는 개수 표시가 없어야 함
+      await expect(page.locator("#cart-icon-btn span")).not.toBeVisible();
+
+      // 첫 번째 상품 추가
+      await helpers.addProductToCart("PVC 투명 젤리 쇼핑백");
+      await expect(page.locator("#cart-icon-btn span")).toHaveText("1");
+
+      // 두 번째 상품 추가
+      await helpers.addProductToCart("샷시 풍지판");
+      await expect(page.locator("#cart-icon-btn span")).toHaveText("2");
+
+      // 첫 번째 상품 한 번 더 추가
+      await helpers.addProductToCart("PVC 투명 젤리 쇼핑백");
+      await expect(page.locator("#cart-icon-btn span")).toHaveText("2");
+    });
+  });
+
+  test.describe("4. 상품 상세 페이지 워크플로우", () => {
+    test("상품 클릭부터 관련 상품 이동까지 전체 플로우", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+      await page.evaluate(() => {
+        window.loadFlag = true;
+      });
+      await helpers.waitForPageLoad();
+
+      // 상품 이미지 클릭하여 상세 페이지로 이동
+      const productCard = page
+        .locator("text=PVC 투명 젤리 쇼핑백")
+        .locator('xpath=ancestor::*[contains(@class, "product-card")]');
+      await productCard.locator("img").click();
+
+      // 상세 페이지 로딩 확인
+      await expect(page.locator("text=상품 상세")).toBeVisible();
+
+      // h1 태그에 상품명 확인
+      await expect(
+        page.locator('h1:text("PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장")'),
+      ).toBeVisible();
+
+      // 수량 조절 후 장바구니 담기
+      await page.click("#quantity-increase");
+      await expect(page.locator("#quantity-input")).toHaveValue("2");
+
+      await page.click("#add-to-cart-btn");
+
+      // 관련 상품 섹션 확인
+      await expect(page.locator("text=관련 상품")).toBeVisible();
+
+      const relatedProducts = page.locator(".related-product-card");
+      await expect(relatedProducts.first()).toBeVisible();
+
+      // 첫 번째 관련 상품 클릭
+      await relatedProducts.first().click();
+
+      // 다른 상품의 상세 페이지로 이동했는지 확인
+      await expect(
+        page.locator('h1:text("샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이")'),
+      ).toBeVisible();
+
+      await expect(await page.evaluate(() => window.loadFlag)).toBe(true);
+    });
+  });
+
+  test.describe("5. 무한 스크롤 기능", () => {
+    test("페이지 하단 스크롤 시 추가 상품이 로드된다", async ({ page }) => {
+      const helpers = new E2EHelpers(page);
+      await helpers.waitForPageLoad();
+
+      // 초기 상품 카드 수 확인
+      const initialCards = await page.locator(".product-card").count();
+      expect(initialCards).toBe(20);
+
+      // 페이지 하단으로 스크롤
+      await page.evaluate(() => {
+        window.scrollTo(0, document.body.scrollHeight);
+      });
+
+      // 로딩 인디케이터 확인
+      await expect(page.locator("text=상품을 불러오는 중...")).toBeVisible();
+
+      // 추가 상품 로드 대기
+      await page.waitForFunction(() => document.querySelectorAll(".product-card").length === 40);
+
+      // 상품 수가 증가했는지 확인
+      const updatedCards = await page.locator(".product-card").count();
+      expect(updatedCards).toBe(40);
+    });
+  });
+});
diff --git a/e2e/e2e.spec.js b/e2e/e2e-hard.spec.js
similarity index 98%
rename from e2e/e2e.spec.js
rename to e2e/e2e-hard.spec.js
index 23f773492..ec8d552d4 100644
--- a/e2e/e2e.spec.js
+++ b/e2e/e2e-hard.spec.js
@@ -26,22 +26,11 @@ class E2EHelpers {
     await this.page.waitForSelector("text=장바구니에 추가되었습니다", { timeout: 5000 });
   }
 
-  // 토스트 메시지가 사라질 때까지 대기
-  async waitForToastToDisappear() {
-    await this.page.waitForSelector("text=장바구니에 추가되었습니다", { state: "hidden", timeout: 5000 });
-  }
-
   // 장바구니 모달 열기
   async openCartModal() {
     await this.page.click("#cart-icon-btn");
     await this.page.waitForSelector(".cart-modal-overlay", { timeout: 5000 });
   }
-
-  // 현재 상품 개수 가져오기
-  async getCurrentProductCount() {
-    const countText = await this.page.textContent('[data-testid="product-count"]');
-    return countText ? parseInt(countText.replace(/[^\d]/g, "")) : 0;
-  }
 }
 
 test.describe("E2E: 쇼핑몰 전체 사용자 시나리오", () => {
diff --git a/package.json b/package.json
index 7b2368941..3d2f932dd 100644
--- a/package.json
+++ b/package.json
@@ -11,14 +11,19 @@
     "prettier:write": "prettier --write ./src",
     "preview": "vite preview",
     "test": "vitest",
-    "test:basic": "vitest basic.test.js",
-    "test:advanced": "vitest advanced",
+    "test:hard:basic": "vitest --run",
+    "test:hard:advanced": "playwright test e2e-hard",
+    "test:easy:basic": "playwright test e2e-easy.basic",
+    "test:easy:advanced": "playwright test e2e-easy.advanced",
     "test:ui": "vitest --ui",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:report": "npx playwright show-report",
     "test:generate": "playwright codegen localhost:5173",
-    "prepare": "husky"
+    "prepare": "husky",
+      "build:prod": "NODE_ENV=production vite build",
+      "preview:prod": "NODE_ENV=production vite preview",
+      "deploy": "pnpm build:prod && pnpm preview:prod"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -50,5 +55,8 @@
     "workerDirectory": [
       "public"
     ]
+  },
+  "dependencies": {
+    "playwright": "^1.53.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8137d4c85..e76942948 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      playwright:
+        specifier: ^1.53.2
+        version: 1.53.2
     devDependencies:
       '@eslint/js':
         specifier: ^9.16.0
diff --git a/public/404.html b/public/404.html
new file mode 100644
index 000000000..0f143d481
--- /dev/null
+++ b/public/404.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>상품 쇼핑몰</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: "#3b82f6",
+              secondary: "#6b7280",
+            },
+          },
+        },
+      };
+    </script>
+    <script type="text/javascript">
+      var pathSegmentsToKeep = 1;
+      var l = window.location;
+      l.replace(
+        l.protocol +
+          "//" +
+          l.hostname +
+          (l.port ? ":" + l.port : "") +
+          l.pathname
+            .split("/")
+            .slice(0, 1 + pathSegmentsToKeep)
+            .join("/") +
+          "/?/" +
+          l.pathname.slice(1).split("/").slice(pathSegmentsToKeep).join("/").replace(/&/g, "~and~") +
+          (l.search ? "&" + l.search.slice(1).replace(/&/g, "~and~") : "") +
+          l.hash,
+      );
+    </script>
+  </head>
+  <body class="bg-gray-50">
+    <!-- 메인 앱 컨테이너 -->
+    <div id="root"></div>
+
+    <!-- 리다이렉트 실패시 대체 콘텐츠 -->
+    <div id="fallback-content" style="display: none">
+      <!-- Header -->
+      <header class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-md mx-auto px-4 py-4">
+          <div class="flex items-center justify-between">
+            <h1 class="text-xl font-bold text-gray-900">
+              <a href="/front_6th_chapter1-1/">404 페이지</a>
+            </h1>
+          </div>
+        </div>
+      </header>
+
+      <!-- Main Content -->
+      <main class="max-w-md mx-auto px-4 py-4">
+        <div class="text-center my-4 py-20 shadow-md p-6 bg-white rounded-lg">
+          <svg viewBox="0 0 320 180" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" style="stop-color: #4285f4; stop-opacity: 1" />
+                <stop offset="100%" style="stop-color: #1a73e8; stop-opacity: 1" />
+              </linearGradient>
+              <filter id="softShadow" x="-50%" y="-50%" width="200%" height="200%">
+                <feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000000" flood-opacity="0.1" />
+              </filter>
+            </defs>
+
+            <!-- 404 Numbers -->
+            <text
+              x="160"
+              y="85"
+              font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+              font-size="48"
+              font-weight="600"
+              fill="url(#blueGradient)"
+              text-anchor="middle"
+            >
+              404
+            </text>
+
+            <!-- Icon decoration -->
+            <circle cx="80" cy="60" r="3" fill="#e8f0fe" opacity="0.8" />
+            <circle cx="240" cy="60" r="3" fill="#e8f0fe" opacity="0.8" />
+            <circle cx="90" cy="45" r="2" fill="#4285f4" opacity="0.5" />
+            <circle cx="230" cy="45" r="2" fill="#4285f4" opacity="0.5" />
+
+            <!-- Message -->
+            <text
+              x="160"
+              y="110"
+              font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+              font-size="14"
+              font-weight="400"
+              fill="#5f6368"
+              text-anchor="middle"
+            >
+              페이지를 찾을 수 없습니다
+            </text>
+
+            <!-- Subtle bottom accent -->
+            <rect x="130" y="130" width="60" height="2" rx="1" fill="url(#blueGradient)" opacity="0.3" />
+          </svg>
+
+          <a
+            href="/front_6th_chapter1-1/"
+            class="inline-block px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+            >홈으로</a
+          >
+        </div>
+      </main>
+
+      <!-- Footer -->
+      <footer class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
+          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
index d2b729641..b1f186b65 100644
--- a/public/mockServiceWorker.js
+++ b/public/mockServiceWorker.js
@@ -100,10 +100,7 @@ addEventListener("fetch", function (event) {
 
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
-  if (
-    event.request.cache === "only-if-cached" &&
-    event.request.mode !== "same-origin"
-  ) {
+  if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {
     return;
   }
 
@@ -219,9 +216,7 @@ async function getResponse(event, client, requestId) {
     const acceptHeader = headers.get("accept");
     if (acceptHeader) {
       const values = acceptHeader.split(",").map((value) => value.trim());
-      const filteredValues = values.filter(
-        (value) => value !== "msw/passthrough",
-      );
+      const filteredValues = values.filter((value) => value !== "msw/passthrough");
 
       if (filteredValues.length > 0) {
         headers.set("accept", filteredValues.join(", "));
@@ -291,10 +286,7 @@ function sendToClient(client, message, transferrables = []) {
       resolve(event.data);
     };
 
-    client.postMessage(message, [
-      channel.port2,
-      ...transferrables.filter(Boolean),
-    ]);
+    client.postMessage(message, [channel.port2, ...transferrables.filter(Boolean)]);
   });
 }
 
diff --git a/src/components/LoadingCard.js b/src/components/LoadingCard.js
new file mode 100644
index 000000000..177c079f1
--- /dev/null
+++ b/src/components/LoadingCard.js
@@ -0,0 +1,11 @@
+const LoadingCard = `<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
+<div class="aspect-square bg-gray-200"></div>
+<div class="p-3">
+    <div class="h-4 bg-gray-200 rounded mb-2"></div>
+    <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
+    <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
+    <div class="h-8 bg-gray-200 rounded"></div>
+</div>
+</div>`;
+
+export const LoadingCardList = LoadingCard.repeat(4);
diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
new file mode 100644
index 000000000..be037a28c
--- /dev/null
+++ b/src/components/ProductCard.js
@@ -0,0 +1,30 @@
+export default function ProductCard(product) {
+  return `
+  <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden product-card"
+    data-product-id="${product.productId}">
+<!-- 상품 이미지 -->
+<div class="aspect-square bg-gray-100 overflow-hidden cursor-pointer product-image">
+    <img src="${product.image}"
+        alt="${product.title}"
+        class="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
+        loading="lazy">
+</div>
+<!-- 상품 정보 -->
+<div class="p-3">
+    <div class="cursor-pointer product-info mb-3">
+    <h3 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
+        ${product.title}
+    </h3>
+    <p class="text-xs text-gray-500 mb-2">${product.brand}</p>
+    <p class="text-lg font-bold text-gray-900">
+        ${Number(product.lprice).toLocaleString()}원
+    </p>
+    </div>
+    <!-- 장바구니 버튼 -->
+    <button class="w-full bg-blue-600 text-white text-sm py-2 px-3 rounded-md
+            hover:bg-blue-700 transition-colors add-to-cart-btn" data-product-id="${product.productId}">
+    장바구니 담기
+    </button>
+</div>
+</div>`;
+}
diff --git a/src/components/Toast.js b/src/components/Toast.js
new file mode 100644
index 000000000..bb103d660
--- /dev/null
+++ b/src/components/Toast.js
@@ -0,0 +1,50 @@
+const COLORS = {
+  success: "bg-green-600",
+  info: "bg-blue-600",
+  error: "bg-red-600",
+};
+
+/**
+ * 토스트를 화면에 표시
+ * @param {string} message
+ * @param {"success"|"info"|"error"} type
+ * @param {number} duration
+ */
+export function showToast(message, type = "success", duration = 3000) {
+  // 이미 표시중인 토스트가 있다면 제거 (동일/다른 메시지 구분 X, 한 번에 하나만 표시)
+  document.querySelectorAll(".toast-notification").forEach((el) => el.remove());
+  const wrapper = document.createElement("div");
+  wrapper.className = "toast-notification fixed bottom-6 left-1/2 -translate-x-1/2 z-[60]";
+
+  wrapper.innerHTML = `
+    <div class="${COLORS[type]} text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
+      <div class="flex-shrink-0">
+        ${
+          type === "success"
+            ? ` <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+          </svg>`
+            : type === "info"
+              ? ` <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>`
+              : ` <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+          </svg>`
+        }
+      </div>
+      <p class="text-sm font-medium flex-1">${message}</p>
+      <button class="toast-close-btn flex-shrink-0 ml-2">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </button>
+    </div>`;
+
+  document.body.appendChild(wrapper);
+
+  const close = () => wrapper.remove();
+  wrapper.querySelector(".toast-close-btn").onclick = close;
+  setTimeout(close, duration);
+}
diff --git a/src/controllers/HomePageController.js b/src/controllers/HomePageController.js
new file mode 100644
index 000000000..f7bc03543
--- /dev/null
+++ b/src/controllers/HomePageController.js
@@ -0,0 +1,256 @@
+import HomePage from "../pages/HomePage.js";
+import productService from "../services/ProductService.js";
+import router from "../router/Router.js";
+import InfiniteScrollManager from "../services/InfiniteScrollManager.js";
+import { addToCart, updateCartBadge, openCartModal, loadCart } from "../features/cart/index.js";
+
+class HomePageController {
+  constructor(rootSelector = "#root") {
+    this.rootEl = document.querySelector(rootSelector);
+    this.state = {
+      products: [],
+      total: 0,
+      loading: false,
+      loadingMore: false,
+      categories: {},
+      limit: 20,
+      page: 1,
+      search: "",
+      category1: "",
+      category2: "",
+      sort: "price_asc",
+    };
+    this.scrollManager = null;
+
+    // URL 쿼리 → 초기 상태 반영
+    this.applyQueryParams();
+  }
+
+  // 현재 URL 의 쿼리스트링을 읽어 state 에 반영
+  applyQueryParams() {
+    const params = new URLSearchParams(window.location.search);
+    if (params.has("sort")) this.state.sort = params.get("sort");
+    if (params.has("limit")) this.state.limit = Number(params.get("limit"));
+    if (params.has("search")) this.state.search = params.get("search");
+    if (params.has("category1")) this.state.category1 = params.get("category1");
+    if (params.has("category2")) this.state.category2 = params.get("category2");
+  }
+
+  // state 값을 쿼리스트링으로 직렬화하여 pushState (페이지 새로고침 시 유지)
+  updateQueryParams({ replace = false } = {}) {
+    const params = new URLSearchParams();
+    if (this.state.sort && this.state.sort !== "price_asc") params.set("sort", this.state.sort);
+    if (!(replace && this.state.limit === 20)) {
+      params.set("limit", String(this.state.limit));
+    }
+    if (this.state.search) params.set("search", this.state.search);
+    if (this.state.category1) params.set("category1", this.state.category1);
+    if (this.state.category2) params.set("category2", this.state.category2);
+
+    const qs = params.toString();
+    const newUrl = qs ? `${router.BASE_PATH}/?${qs}` : router.BASE_PATH;
+    let method = replace ? "replaceState" : "pushState";
+    // limit 가 기본값(20)으로 돌아가는 경우 히스토리 덮어쓰기
+    if (!replace && this.state.limit === 20 && params.size === 1 && params.has("limit")) {
+      method = "replaceState";
+    }
+    if (newUrl !== window.location.pathname + window.location.search) {
+      window.history[method]({}, "", newUrl);
+    }
+  }
+
+  async init() {
+    // 테스트 등 여러 번 init 될 때 이전 상태가 남아있지 않도록 기본 상태로 초기화
+    this.state = {
+      products: [],
+      total: 0,
+      loading: false,
+      loadingMore: false,
+      categories: {},
+      limit: 20,
+      page: 1,
+      search: "",
+      category1: "",
+      category2: "",
+      sort: "price_asc",
+    };
+
+    // URL 쿼리 적용 (초기화 이후 다시 적용)
+    this.applyQueryParams();
+
+    loadCart();
+    // 1) 초깃값 로딩 상태 활성화 → 로딩 UI(스켈레톤, "카테고리 로딩 중...") 표시
+    this.state.loading = true;
+    this.render();
+
+    // 2) 상품·카테고리 동시 요청
+    const [, categories] = await Promise.all([this.fetchProducts(), productService.getCategories().then((c) => c)]);
+
+    // 3) 응답 데이터 상태 반영
+    this.state.categories = categories;
+    this.state.loading = false;
+
+    // 4) 최종 렌더링 및 스크롤 설정
+    this.render();
+    this.setupInfiniteScroll();
+    // 렌더링 후 현재 상태를 URL에 반영
+    this.updateQueryParams({ replace: true });
+  }
+
+  async fetchProducts() {
+    // (테스트 디버그용 로그 제거)
+    const { products, pagination } = await productService.getProducts({
+      limit: this.state.limit,
+      page: this.state.page,
+      search: this.state.search,
+      category1: this.state.category1,
+      category2: this.state.category2,
+      sort: this.state.sort,
+    });
+    this.state.products = products;
+    this.state.total = pagination.total;
+  }
+
+  async loadMore() {
+    this.state.loadingMore = true;
+    this.render();
+    const nextPage = this.state.page + 1;
+    const { products: newProducts, pagination } = await productService.getProducts({
+      limit: this.state.limit,
+      page: nextPage,
+      search: this.state.search,
+      category1: this.state.category1,
+      category2: this.state.category2,
+      sort: this.state.sort,
+    });
+    this.state.products = [...this.state.products, ...newProducts];
+    this.state.total = pagination.total;
+    this.state.page = nextPage;
+    this.state.loadingMore = false;
+    this.render();
+  }
+
+  setupInfiniteScroll() {
+    if (this.scrollManager) return;
+    this.scrollManager = new InfiniteScrollManager(async () => {
+      if (!this.state.loading && !this.state.loadingMore && this.state.products.length < this.state.total) {
+        await this.loadMore();
+      }
+    });
+    this.scrollManager.attach();
+  }
+
+  render() {
+    this.rootEl.innerHTML = HomePage(this.state);
+    this.attachEventListeners();
+    updateCartBadge();
+  }
+
+  attachEventListeners() {
+    const { state } = this;
+    const limitSelect = document.querySelector("#limit-select");
+    if (limitSelect) {
+      limitSelect.value = String(state.limit);
+      limitSelect.onchange = async (e) => {
+        state.limit = Number(e.target.value);
+        state.page = 1;
+        this.updateQueryParams();
+        await this.fetchProducts();
+        this.render();
+      };
+    }
+
+    const searchInput = document.querySelector("#search-input");
+    if (searchInput) {
+      searchInput.value = state.search;
+      searchInput.onkeydown = async (e) => {
+        if (e.key === "Enter") {
+          const keyword = searchInput.value.trim();
+          if (state.search !== keyword) {
+            state.search = keyword;
+            state.page = 1;
+            this.updateQueryParams();
+            await this.fetchProducts();
+            this.render();
+          }
+        }
+      };
+    }
+
+    document.querySelectorAll(".add-to-cart-btn").forEach((btn) => {
+      btn.onclick = () => {
+        const product = state.products.find((p) => String(p.productId) === btn.dataset.productId);
+        if (product) addToCart(product);
+      };
+    });
+
+    document.querySelector("#cart-icon-btn")?.addEventListener("click", openCartModal);
+
+    // 카테고리 필터
+    document.querySelectorAll(".category1-filter-btn").forEach((btn) => {
+      btn.onclick = async () => {
+        state.category1 = btn.dataset.category1;
+        state.category2 = "";
+        state.page = 1;
+        this.updateQueryParams();
+        await this.fetchProducts();
+        this.render();
+      };
+    });
+
+    document.querySelectorAll(".category2-filter-btn").forEach((btn) => {
+      btn.onclick = async () => {
+        state.category1 = btn.dataset.category1;
+        state.category2 = btn.dataset.category2;
+        state.page = 1;
+        this.updateQueryParams();
+        await this.fetchProducts();
+        this.render();
+      };
+    });
+
+    document.querySelector('[data-breadcrumb="reset"]')?.addEventListener("click", async () => {
+      state.category1 = "";
+      state.category2 = "";
+      state.page = 1;
+      this.updateQueryParams();
+      await this.fetchProducts();
+      this.render();
+    });
+
+    document.querySelector('[data-breadcrumb="category1"]')?.addEventListener("click", async (e) => {
+      state.category1 = e.target.dataset.category1;
+      state.category2 = "";
+      state.page = 1;
+      this.updateQueryParams();
+      await this.fetchProducts();
+      this.render();
+    });
+
+    // 상품 카드 클릭 → 상세 페이지 이동
+    document.querySelectorAll(".product-image, .product-info").forEach((el) => {
+      el.onclick = () => {
+        const card = el.closest(".product-card");
+        const pid = card.dataset.productId;
+        router.navigate(`/product/${pid}`);
+      };
+    });
+
+    // 정렬 드롭다운
+    const sortSelect = document.querySelector("#sort-select");
+    if (sortSelect) {
+      sortSelect.value = state.sort;
+      sortSelect.onchange = async (e) => {
+        state.sort = e.target.value;
+        state.page = 1;
+        this.updateQueryParams();
+        await this.fetchProducts();
+        this.render();
+      };
+    }
+  }
+}
+
+// 싱글톤 인스턴스로 export
+const homePageController = new HomePageController();
+export default homePageController;
diff --git a/src/controllers/ProductDetailController.js b/src/controllers/ProductDetailController.js
new file mode 100644
index 000000000..c9611141f
--- /dev/null
+++ b/src/controllers/ProductDetailController.js
@@ -0,0 +1,54 @@
+import ProductDetailPage from "../pages/ProductDetailPage.js";
+import productService from "../services/ProductService.js";
+import router from "../router/Router.js";
+import { addToCart, updateCartBadge } from "../features/cart/index.js";
+
+class ProductDetailController {
+  constructor(rootSelector = "#root") {
+    this.rootEl = document.querySelector(rootSelector);
+  }
+
+  async show(productId) {
+    this.rootEl.innerHTML = ProductDetailPage({ loading: true });
+
+    // 1) 상품 기본 정보 로드
+    const product = await productService.getProduct(productId);
+
+    // 2) 우선 상품 정보만 렌더링 (관련 상품 제외)
+    this.rootEl.innerHTML = ProductDetailPage({ loading: false, product, related: [] });
+    this.attachEvents(product);
+    updateCartBadge();
+
+    // 3) 관련 상품 비동기 로드 → 준비되면 다시 렌더링
+    const { products: all } = await productService.getProducts({ limit: 100 });
+    const related = all.filter((p) => p.productId !== productId).slice(0, 19);
+
+    this.rootEl.innerHTML = ProductDetailPage({ loading: false, product, related });
+    this.attachEvents(product);
+    updateCartBadge();
+  }
+
+  attachEvents(product) {
+    const qtyInput = document.querySelector("#quantity-input");
+    document.querySelector("#quantity-increase").onclick = () => (qtyInput.value = Number(qtyInput.value) + 1);
+    document.querySelector("#quantity-decrease").onclick = () => {
+      if (qtyInput.value > 1) qtyInput.value = Number(qtyInput.value) - 1;
+    };
+
+    document.querySelector("#add-to-cart-btn").onclick = () => {
+      const qty = Number(qtyInput.value);
+      addToCart(product, qty);
+    };
+
+    document.querySelectorAll(".related-product-card").forEach((card) => {
+      card.onclick = () => router.navigate(`/product/${card.dataset.productId}`);
+    });
+
+    document.querySelector(".go-to-product-list")?.addEventListener("click", () => {
+      router.navigate(router.BASE_PATH);
+    });
+  }
+}
+
+const productDetailController = new ProductDetailController();
+export default productDetailController;
diff --git a/src/data.js b/src/data.js
new file mode 100644
index 000000000..b4ecc2076
--- /dev/null
+++ b/src/data.js
@@ -0,0 +1,1112 @@
+// const 상품목록_레이아웃_로딩 = `
+//     <div class="min-h-screen bg-gray-50">
+//       <header class="bg-white shadow-sm sticky top-0 z-40">
+//         <div class="max-w-md mx-auto px-4 py-4">
+//           <div class="flex items-center justify-between">
+//             <h1 class="text-xl font-bold text-gray-900">
+//               <a href="/" data-link="">쇼핑몰</a>
+//             </h1>
+//             <div class="flex items-center space-x-2">
+//               <!-- 장바구니 아이콘 -->
+//               <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
+//                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+//                         d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+//                 </svg>
+//               </button>
+//             </div>
+//           </div>
+//         </div>
+//       </header>
+//       <main class="max-w-md mx-auto px-4 py-4">
+//         <!-- 검색 및 필터 -->
+//         <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
+//           <!-- 검색창 -->
+//           <div class="mb-4">
+//             <div class="relative">
+//               <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
+//                           focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+//               <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+//                 <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+//                         d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+//                 </svg>
+//               </div>
+//             </div>
+//           </div>
+//           <!-- 필터 옵션 -->
+//           <div class="space-y-3">
+//             <!-- 카테고리 필터 -->
+//             <div class="space-y-2">
+//               <div class="flex items-center gap-2">
+//                 <label class="text-sm text-gray-600">카테고리:</label>
+//                 <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button>
+//               </div>
+//               <!-- 1depth 카테고리 -->
+//               <div class="flex flex-wrap gap-2">
+//                 <div class="text-sm text-gray-500 italic">카테고리 로딩 중...</div>
+//               </div>
+//               <!-- 2depth 카테고리 -->
+//             </div>
+//             <!-- 기존 필터들 -->
+//             <div class="flex gap-2 items-center justify-between">
+//               <!-- 페이지당 상품 수 -->
+//               <div class="flex items-center gap-2">
+//                 <label class="text-sm text-gray-600">개수:</label>
+//                 <select id="limit-select"
+//                         class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+//                   <option value="10">
+//                     10개
+//                   </option>
+//                   <option value="20" selected="">
+//                     20개
+//                   </option>
+//                   <option value="50">
+//                     50개
+//                   </option>
+//                   <option value="100">
+//                     100개
+//                   </option>
+//                 </select>
+//               </div>
+//               <!-- 정렬 -->
+//               <div class="flex items-center gap-2">
+//                 <label class="text-sm text-gray-600">정렬:</label>
+//                 <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
+//                              focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+//                   <option value="price_asc" selected="">가격 낮은순</option>
+//                   <option value="price_desc">가격 높은순</option>
+//                   <option value="name_asc">이름순</option>
+//                   <option value="name_desc">이름 역순</option>
+//                 </select>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//         <!-- 상품 목록 -->
+//         <div class="mb-6">
+//           <div>
+//             <!-- 상품 그리드 -->
+//             <div class="grid grid-cols-2 gap-4 mb-6" id="products-grid">
+//               <!-- 로딩 스켈레톤 -->
+//               <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
+//                 <div class="aspect-square bg-gray-200"></div>
+//                 <div class="p-3">
+//                   <div class="h-4 bg-gray-200 rounded mb-2"></div>
+//                   <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
+//                   <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
+//                   <div class="h-8 bg-gray-200 rounded"></div>
+//                 </div>
+//               </div>
+//               <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
+//                 <div class="aspect-square bg-gray-200"></div>
+//                 <div class="p-3">
+//                   <div class="h-4 bg-gray-200 rounded mb-2"></div>
+//                   <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
+//                   <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
+//                   <div class="h-8 bg-gray-200 rounded"></div>
+//                 </div>
+//               </div>
+//               <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
+//                 <div class="aspect-square bg-gray-200"></div>
+//                 <div class="p-3">
+//                   <div class="h-4 bg-gray-200 rounded mb-2"></div>
+//                   <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
+//                   <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
+//                   <div class="h-8 bg-gray-200 rounded"></div>
+//                 </div>
+//               </div>
+//               <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
+//                 <div class="aspect-square bg-gray-200"></div>
+//                 <div class="p-3">
+//                   <div class="h-4 bg-gray-200 rounded mb-2"></div>
+//                   <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
+//                   <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
+//                   <div class="h-8 bg-gray-200 rounded"></div>
+//                 </div>
+//               </div>
+//             </div>
+
+//             <div class="text-center py-4">
+//               <div class="inline-flex items-center">
+//                 <svg class="animate-spin h-5 w-5 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24">
+//                   <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+//                   <path class="opacity-75" fill="currentColor"
+//                         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+//                 </svg>
+//                 <span class="text-sm text-gray-600">상품을 불러오는 중...</span>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//       </main>
+//       <footer class="bg-white shadow-sm sticky top-0 z-40">
+//         <div class="max-w-md mx-auto py-8 text-center text-gray-500">
+//           <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
+//         </div>
+//       </footer>
+//     </div>
+//   `;
+
+//   const 상품목록_레이아웃_로딩완료 = `
+//     <div class="bg-gray-50">
+//       <header class="bg-white shadow-sm sticky top-0 z-40">
+//         <div class="max-w-md mx-auto px-4 py-4">
+//           <div class="flex items-center justify-between">
+//             <h1 class="text-xl font-bold text-gray-900">
+//               <a href="/" data-link="">쇼핑몰</a>
+//             </h1>
+//             <div class="flex items-center space-x-2">
+//               <!-- 장바구니 아이콘 -->
+//               <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
+//                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+//                         d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+//                 </svg>
+//                 <span
+//                   class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">4</span>
+//               </button>
+//             </div>
+//           </div>
+//         </div>
+//       </header>
+//       <main class="max-w-md mx-auto px-4 py-4">
+//         <!-- 검색 및 필터 -->
+//         <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
+//           <!-- 검색창 -->
+//           <div class="mb-4">
+//             <div class="relative">
+//               <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
+//                           focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+//               <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+//                 <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+//                         d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+//                 </svg>
+//               </div>
+//             </div>
+//           </div>
+//           <!-- 필터 옵션 -->
+//           <div class="space-y-3">
+//             <!-- 카테고리 필터 -->
+//             <div class="space-y-2">
+//               <div class="flex items-center gap-2">
+//                 <label class="text-sm text-gray-600">카테고리:</label>
+//                 <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button>
+//               </div>
+//               <!-- 1depth 카테고리 -->
+//               <div class="flex flex-wrap gap-2">
+//                 <button data-category1="생활/건강" class="category1-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors
+//                    bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+//                   생활/건강
+//                 </button>
+//                 <button data-category1="디지털/가전" class="category1-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors
+//                    bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+//                   디지털/가전
+//                 </button>
+//               </div>
+//               <!-- 2depth 카테고리 -->
+//             </div>
+//             <!-- 기존 필터들 -->
+//             <div class="flex gap-2 items-center justify-between">
+//               <!-- 페이지당 상품 수 -->
+//               <div class="flex items-center gap-2">
+//                 <label class="text-sm text-gray-600">개수:</label>
+//                 <select id="limit-select"
+//                         class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+//                   <option value="10">
+//                     10개
+//                   </option>
+//                   <option value="20" selected="">
+//                     20개
+//                   </option>
+//                   <option value="50">
+//                     50개
+//                   </option>
+//                   <option value="100">
+//                     100개
+//                   </option>
+//                 </select>
+//               </div>
+//               <!-- 정렬 -->
+//               <div class="flex items-center gap-2">
+//                 <label class="text-sm text-gray-600">정렬:</label>
+//                 <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
+//                              focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+//                   <option value="price_asc" selected="">가격 낮은순</option>
+//                   <option value="price_desc">가격 높은순</option>
+//                   <option value="name_asc">이름순</option>
+//                   <option value="name_desc">이름 역순</option>
+//                 </select>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//         <!-- 상품 목록 -->
+//         <div class="mb-6">
+//           <div>
+//             <!-- 상품 개수 정보 -->
+//             <div class="mb-4 text-sm text-gray-600">
+//               총 <span class="font-medium text-gray-900">340개</span>의 상품
+//             </div>
+//             <!-- 상품 그리드 -->
+//             <div class="grid grid-cols-2 gap-4 mb-6" id="products-grid">
+//               <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden product-card"
+//                    data-product-id="85067212996">
+//                 <!-- 상품 이미지 -->
+//                 <div class="aspect-square bg-gray-100 overflow-hidden cursor-pointer product-image">
+//                   <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg"
+//                        alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장"
+//                        class="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
+//                        loading="lazy">
+//                 </div>
+//                 <!-- 상품 정보 -->
+//                 <div class="p-3">
+//                   <div class="cursor-pointer product-info mb-3">
+//                     <h3 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
+//                       PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
+//                     </h3>
+//                     <p class="text-xs text-gray-500 mb-2"></p>
+//                     <p class="text-lg font-bold text-gray-900">
+//                       220원
+//                     </p>
+//                   </div>
+//                   <!-- 장바구니 버튼 -->
+//                   <button class="w-full bg-blue-600 text-white text-sm py-2 px-3 rounded-md
+//                          hover:bg-blue-700 transition-colors add-to-cart-btn" data-product-id="85067212996">
+//                     장바구니 담기
+//                   </button>
+//                 </div>
+//               </div>
+//               <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden product-card"
+//                    data-product-id="86940857379">
+//                 <!-- 상품 이미지 -->
+//                 <div class="aspect-square bg-gray-100 overflow-hidden cursor-pointer product-image">
+//                   <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg"
+//                        alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이"
+//                        class="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
+//                        loading="lazy">
+//                 </div>
+//                 <!-- 상품 정보 -->
+//                 <div class="p-3">
+//                   <div class="cursor-pointer product-info mb-3">
+//                     <h3 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
+//                       샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
+//                     </h3>
+//                     <p class="text-xs text-gray-500 mb-2">이지웨이건축자재</p>
+//                     <p class="text-lg font-bold text-gray-900">
+//                       230원
+//                     </p>
+//                   </div>
+//                   <!-- 장바구니 버튼 -->
+//                   <button class="w-full bg-blue-600 text-white text-sm py-2 px-3 rounded-md
+//                          hover:bg-blue-700 transition-colors add-to-cart-btn" data-product-id="86940857379">
+//                     장바구니 담기
+//                   </button>
+//                 </div>
+//               </div>
+//             </div>
+
+//             <div class="text-center py-4 text-sm text-gray-500">
+//               모든 상품을 확인했습니다
+//             </div>
+//           </div>
+//         </div>
+//       </main>
+//       <footer class="bg-white shadow-sm sticky top-0 z-40">
+//         <div class="max-w-md mx-auto py-8 text-center text-gray-500">
+//           <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
+//         </div>
+//       </footer>
+//     </div>
+//   `;
+
+//   const 상품목록_레이아웃_카테고리_1Depth = `
+//     <main class="max-w-md mx-auto px-4 py-4">
+//       <!-- 검색 및 필터 -->
+//       <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
+//         <!-- 검색창 -->
+//         <div class="mb-4">
+//           <div class="relative">
+//             <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
+//                         focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+//             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+//               <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+//                       d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+//               </svg>
+//             </div>
+//           </div>
+//         </div>
+
+//         <!-- 필터 옵션 -->
+//         <div class="space-y-3">
+
+//           <!-- 카테고리 필터 -->
+//           <div class="space-y-2">
+//             <div class="flex items-center gap-2">
+//               <label class="text-sm text-gray-600">카테고리:</label>
+//               <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button><span class="text-xs text-gray-500">&gt;</span><button data-breadcrumb="category1" data-category1="생활/건강" class="text-xs hover:text-blue-800 hover:underline">생활/건강</button>
+//             </div>
+//             <div class="space-y-2">
+//               <div class="flex flex-wrap gap-2">
+//                 <button data-category1="생활/건강" data-category2="생활용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+//                   생활용품
+//                 </button>
+//                 <button data-category1="생활/건강" data-category2="주방용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+//                   주방용품
+//                 </button>
+//                 <button data-category1="생활/건강" data-category2="문구/사무용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+//                   문구/사무용품
+//                 </button>
+//               </div>
+//             </div>
+//           </div>
+
+//           <!-- 기존 필터들 -->
+//           <div class="flex gap-2 items-center justify-between">
+//             <!-- 페이지당 상품 수 -->
+//             <div class="flex items-center gap-2">
+//               <label class="text-sm text-gray-600">개수:</label>
+//               <select id="limit-select"
+//                       class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+//                 <option value="10">
+//                   10개
+//                 </option>
+//                 <option value="20" selected="">
+//                   20개
+//                 </option>
+//                 <option value="50">
+//                   50개
+//                 </option>
+//                 <option value="100">
+//                   100개
+//                 </option>
+//               </select>
+//             </div>
+//             <!-- 정렬 -->
+//             <div class="flex items-center gap-2">
+//               <label class="text-sm text-gray-600">정렬:</label>
+//               <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
+//                            focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+//                 <option value="price_asc" selected="">가격 낮은순</option>
+//                 <option value="price_desc">가격 높은순</option>
+//                 <option value="name_asc">이름순</option>
+//                 <option value="name_desc">이름 역순</option>
+//               </select>
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </main>
+//   `;
+
+//   const 상품목록_레이아웃_카테고리_2Depth = `
+//     <main class="max-w-md mx-auto px-4 py-4">
+//       <!-- 검색 및 필터 -->
+//       <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
+//         <!-- 검색창 -->
+//         <div class="mb-4">
+//           <div class="relative">
+//             <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
+//                         focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+//             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+//               <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+//                       d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+//               </svg>
+//             </div>
+//           </div>
+//         </div>
+
+//         <!-- 필터 옵션 -->
+//         <div class="space-y-3">
+
+//           <!-- 카테고리 필터 -->
+//           <div class="space-y-2">
+//             <div class="flex items-center gap-2">
+//               <label class="text-sm text-gray-600">카테고리:</label>
+//               <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button><span class="text-xs text-gray-500">&gt;</span><button data-breadcrumb="category1" data-category1="생활/건강" class="text-xs hover:text-blue-800 hover:underline">생활/건강</button><span class="text-xs text-gray-500">&gt;</span><span class="text-xs text-gray-600 cursor-default">주방용품</span>
+//             </div>
+//             <div class="space-y-2">
+//               <div class="flex flex-wrap gap-2">
+//                 <button data-category1="생활/건강" data-category2="생활용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+//                   생활용품
+//                 </button>
+//                 <button data-category1="생활/건강" data-category2="주방용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-blue-100 border-blue-300 text-blue-800">
+//                   주방용품
+//                 </button>
+//                 <button data-category1="생활/건강" data-category2="문구/사무용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+//                   문구/사무용품
+//                 </button>
+//               </div>
+//             </div>
+//           </div>
+
+//           <!-- 기존 필터들 -->
+//           <div class="flex gap-2 items-center justify-between">
+//             <!-- 페이지당 상품 수 -->
+//             <div class="flex items-center gap-2">
+//               <label class="text-sm text-gray-600">개수:</label>
+//               <select id="limit-select"
+//                       class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+//                 <option value="10">
+//                   10개
+//                 </option>
+//                 <option value="20" selected="">
+//                   20개
+//                 </option>
+//                 <option value="50">
+//                   50개
+//                 </option>
+//                 <option value="100">
+//                   100개
+//                 </option>
+//               </select>
+//             </div>
+//             <!-- 정렬 -->
+//             <div class="flex items-center gap-2">
+//               <label class="text-sm text-gray-600">정렬:</label>
+//               <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
+//                            focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+//                 <option value="price_asc" selected="">가격 낮은순</option>
+//                 <option value="price_desc">가격 높은순</option>
+//                 <option value="name_asc">이름순</option>
+//                 <option value="name_desc">이름 역순</option>
+//               </select>
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </main>
+//   `;
+
+//   const 토스트 = `
+//     <div class="flex flex-col gap-2 items-center justify-center mx-auto" style="width: fit-content;">
+//       <div class="bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
+//         <div class="flex-shrink-0">
+//           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+//           </svg>
+//         </div>
+//         <p class="text-sm font-medium">장바구니에 추가되었습니다</p>
+//         <button id="toast-close-btn" class="flex-shrink-0 ml-2 text-white hover:text-gray-200">
+//           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+//           </svg>
+//         </button>
+//       </div>
+
+//       <div class="bg-blue-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
+//         <div class="flex-shrink-0">
+//           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+//          </svg>
+//         </div>
+//         <p class="text-sm font-medium">선택된 상품들이 삭제되었습니다</p>
+//         <button id="toast-close-btn" class="flex-shrink-0 ml-2 text-white hover:text-gray-200">
+//           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+//           </svg>
+//         </button>
+//       </div>
+
+//       <div class="bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
+//         <div class="flex-shrink-0">
+//           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+//           </svg>
+//         </div>
+//         <p class="text-sm font-medium">오류가 발생했습니다.</p>
+//         <button id="toast-close-btn" class="flex-shrink-0 ml-2 text-white hover:text-gray-200">
+//           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+//           </svg>
+//         </button>
+//       </div>
+//     </div>
+//   `;
+
+//   const 장바구니_비어있음 = `
+//     <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
+//       <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
+//         <!-- 헤더 -->
+//         <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
+//           <h2 class="text-lg font-bold text-gray-900 flex items-center">
+//             <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+//             </svg>
+//             장바구니
+//           </h2>
+
+//           <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
+//             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+//             </svg>
+//           </button>
+//         </div>
+
+//         <!-- 컨텐츠 -->
+//         <div class="flex flex-col max-h-[calc(90vh-120px)]">
+//           <!-- 빈 장바구니 -->
+//           <div class="flex-1 flex items-center justify-center p-8">
+//             <div class="text-center">
+//               <div class="text-gray-400 mb-4">
+//                 <svg class="mx-auto h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+//                 </svg>
+//               </div>
+//               <h3 class="text-lg font-medium text-gray-900 mb-2">장바구니가 비어있습니다</h3>
+//               <p class="text-gray-600">원하는 상품을 담아보세요!</p>
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </div>
+//   `;
+
+//   const 장바구니_선택없음 = `
+//     <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
+//       <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
+//         <!-- 헤더 -->
+//         <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
+//           <h2 class="text-lg font-bold text-gray-900 flex items-center">
+//             <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+//             </svg>
+//             장바구니
+//             <span class="text-sm font-normal text-gray-600 ml-1">(2)</span>
+//           </h2>
+//           <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
+//             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+//             </svg>
+//           </button>
+//         </div>
+//         <!-- 컨텐츠 -->
+//         <div class="flex flex-col max-h-[calc(90vh-120px)]">
+//           <!-- 전체 선택 섹션 -->
+//           <div class="p-4 border-b border-gray-200 bg-gray-50">
+//             <label class="flex items-center text-sm text-gray-700">
+//               <input type="checkbox" id="cart-modal-select-all-checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
+//               전체선택 (2개)
+//             </label>
+//           </div>
+//           <!-- 아이템 목록 -->
+//           <div class="flex-1 overflow-y-auto">
+//             <div class="p-4 space-y-4">
+//               <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="85067212996">
+//                 <!-- 선택 체크박스 -->
+//                 <label class="flex items-center mr-3">
+//                   <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded
+//                 focus:ring-blue-500" data-product-id="85067212996">
+//                 </label>
+//                 <!-- 상품 이미지 -->
+//                 <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
+//                   <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="85067212996">
+//                 </div>
+//                 <!-- 상품 정보 -->
+//                 <div class="flex-1 min-w-0">
+//                   <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="85067212996">
+//                     PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
+//                   </h4>
+//                   <p class="text-sm text-gray-600 mt-1">
+//                     220원
+//                   </p>
+//                   <!-- 수량 조절 -->
+//                   <div class="flex items-center mt-2">
+//                     <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center
+//                  border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
+//                       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+//                       </svg>
+//                     </button>
+//                     <input type="number" value="2" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b
+//                 border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="85067212996">
+//                     <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center
+//                  border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
+//                       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+//                       </svg>
+//                     </button>
+//                   </div>
+//                 </div>
+//                 <!-- 가격 및 삭제 -->
+//                 <div class="text-right ml-3">
+//                   <p class="text-sm font-medium text-gray-900">
+//                     440원
+//                   </p>
+//                   <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="85067212996">
+//                     삭제
+//                   </button>
+//                 </div>
+//               </div>
+//               <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="86940857379">
+//                 <!-- 선택 체크박스 -->
+//                 <label class="flex items-center mr-3">
+//                   <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded
+//                 focus:ring-blue-500" data-product-id="86940857379">
+//                 </label>
+//                 <!-- 상품 이미지 -->
+//                 <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
+//                   <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="86940857379">
+//                 </div>
+//                 <!-- 상품 정보 -->
+//                 <div class="flex-1 min-w-0">
+//                   <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="86940857379">
+//                     샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
+//                   </h4>
+//                   <p class="text-sm text-gray-600 mt-1">
+//                     230원
+//                   </p>
+//                   <!-- 수량 조절 -->
+//                   <div class="flex items-center mt-2">
+//                     <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center
+//                  border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
+//                       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+//                       </svg>
+//                     </button>
+//                     <input type="number" value="1" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b
+//                 border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="86940857379">
+//                     <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center
+//                  border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
+//                       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+//                       </svg>
+//                     </button>
+//                   </div>
+//                 </div>
+//                 <!-- 가격 및 삭제 -->
+//                 <div class="text-right ml-3">
+//                   <p class="text-sm font-medium text-gray-900">
+//                     230원
+//                   </p>
+//                   <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="86940857379">
+//                     삭제
+//                   </button>
+//                 </div>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//         <!-- 하단 액션 -->
+//         <div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
+//           <!-- 선택된 아이템 정보 -->
+//           <!-- 총 금액 -->
+//           <div class="flex justify-between items-center mb-4">
+//             <span class="text-lg font-bold text-gray-900">총 금액</span>
+//             <span class="text-xl font-bold text-blue-600">670원</span>
+//           </div>
+//           <!-- 액션 버튼들 -->
+//           <div class="space-y-2">
+//             <div class="flex gap-2">
+//               <button id="cart-modal-clear-cart-btn" class="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md
+//                        hover:bg-gray-700 transition-colors text-sm">
+//                 전체 비우기
+//               </button>
+//               <button id="cart-modal-checkout-btn" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md
+//                        hover:bg-blue-700 transition-colors text-sm">
+//                 구매하기
+//               </button>
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </div>
+//   `;
+
+//   const 장바구니_선택있음 = `
+//     <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
+//       <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
+//         <!-- 헤더 -->
+//         <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
+//           <h2 class="text-lg font-bold text-gray-900 flex items-center">
+//             <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+//             </svg>
+//             장바구니
+//             <span class="text-sm font-normal text-gray-600 ml-1">(2)</span>
+//           </h2>
+//           <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
+//             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+//             </svg>
+//           </button>
+//         </div>
+//         <!-- 컨텐츠 -->
+//         <div class="flex flex-col max-h-[calc(90vh-120px)]">
+//           <!-- 전체 선택 섹션 -->
+//           <div class="p-4 border-b border-gray-200 bg-gray-50">
+//             <label class="flex items-center text-sm text-gray-700">
+//               <input type="checkbox" id="cart-modal-select-all-checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
+//               전체선택 (2개)
+//             </label>
+//           </div>
+//           <!-- 아이템 목록 -->
+//           <div class="flex-1 overflow-y-auto">
+//             <div class="p-4 space-y-4">
+//               <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="85067212996">
+//                 <!-- 선택 체크박스 -->
+//                 <label class="flex items-center mr-3">
+//                   <input type="checkbox" checked="" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded
+//                 focus:ring-blue-500" data-product-id="85067212996">
+//                 </label>
+//                 <!-- 상품 이미지 -->
+//                 <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
+//                   <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="85067212996">
+//                 </div>
+//                 <!-- 상품 정보 -->
+//                 <div class="flex-1 min-w-0">
+//                   <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="85067212996">
+//                     PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
+//                   </h4>
+//                   <p class="text-sm text-gray-600 mt-1">
+//                     220원
+//                   </p>
+//                   <!-- 수량 조절 -->
+//                   <div class="flex items-center mt-2">
+//                     <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center
+//                  border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
+//                       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+//                       </svg>
+//                     </button>
+//                     <input type="number" value="2" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b
+//                 border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="85067212996">
+//                     <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center
+//                  border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
+//                       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+//                       </svg>
+//                     </button>
+//                   </div>
+//                 </div>
+//                 <!-- 가격 및 삭제 -->
+//                 <div class="text-right ml-3">
+//                   <p class="text-sm font-medium text-gray-900">
+//                     440원
+//                   </p>
+//                   <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="85067212996">
+//                     삭제
+//                   </button>
+//                 </div>
+//               </div>
+//               <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="86940857379">
+//                 <!-- 선택 체크박스 -->
+//                 <label class="flex items-center mr-3">
+//                   <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded
+//                 focus:ring-blue-500" data-product-id="86940857379">
+//                 </label>
+//                 <!-- 상품 이미지 -->
+//                 <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
+//                   <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="86940857379">
+//                 </div>
+//                 <!-- 상품 정보 -->
+//                 <div class="flex-1 min-w-0">
+//                   <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="86940857379">
+//                     샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
+//                   </h4>
+//                   <p class="text-sm text-gray-600 mt-1">
+//                     230원
+//                   </p>
+//                   <!-- 수량 조절 -->
+//                   <div class="flex items-center mt-2">
+//                     <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center
+//                  border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
+//                       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+//                       </svg>
+//                     </button>
+//                     <input type="number" value="1" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b
+//                 border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="86940857379">
+//                     <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center
+//                  border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
+//                       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+//                       </svg>
+//                     </button>
+//                   </div>
+//                 </div>
+//                 <!-- 가격 및 삭제 -->
+//                 <div class="text-right ml-3">
+//                   <p class="text-sm font-medium text-gray-900">
+//                     230원
+//                   </p>
+//                   <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="86940857379">
+//                     삭제
+//                   </button>
+//                 </div>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//         <!-- 하단 액션 -->
+//         <div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
+//           <!-- 선택된 아이템 정보 -->
+//           <div class="flex justify-between items-center mb-3 text-sm">
+//             <span class="text-gray-600">선택한 상품 (1개)</span>
+//             <span class="font-medium">440원</span>
+//           </div>
+//           <!-- 총 금액 -->
+//           <div class="flex justify-between items-center mb-4">
+//             <span class="text-lg font-bold text-gray-900">총 금액</span>
+//             <span class="text-xl font-bold text-blue-600">670원</span>
+//           </div>
+//           <!-- 액션 버튼들 -->
+//           <div class="space-y-2">
+//             <button id="cart-modal-remove-selected-btn" class="w-full bg-red-600 text-white py-2 px-4 rounded-md
+//                        hover:bg-red-700 transition-colors text-sm">
+//               선택한 상품 삭제 (1개)
+//             </button>
+//             <div class="flex gap-2">
+//               <button id="cart-modal-clear-cart-btn" class="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md
+//                        hover:bg-gray-700 transition-colors text-sm">
+//                 전체 비우기
+//               </button>
+//               <button id="cart-modal-checkout-btn" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md
+//                        hover:bg-blue-700 transition-colors text-sm">
+//                 구매하기
+//               </button>
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </div>
+//   `;
+
+//   const 상세페이지_로딩 = `
+//     <div class="min-h-screen bg-gray-50">
+//       <header class="bg-white shadow-sm sticky top-0 z-40">
+//         <div class="max-w-md mx-auto px-4 py-4">
+//           <div class="flex items-center justify-between">
+//             <div class="flex items-center space-x-3">
+//               <button onclick="window.history.back()" class="p-2 text-gray-700 hover:text-gray-900 transition-colors">
+//                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+//                 </svg>
+//               </button>
+//               <h1 class="text-lg font-bold text-gray-900">상품 상세</h1>
+//             </div>
+//             <div class="flex items-center space-x-2">
+//               <!-- 장바구니 아이콘 -->
+//               <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
+//                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+//                 </svg>
+//               </button>
+//             </div>
+//           </div>
+//         </div>
+//       </header>
+//       <main class="max-w-md mx-auto px-4 py-4">
+//         <div class="py-20 bg-gray-50 flex items-center justify-center">
+//           <div class="text-center">
+//             <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+//             <p class="text-gray-600">상품 정보를 불러오는 중...</p>
+//           </div>
+//         </div>
+//       </main>
+//       <footer class="bg-white shadow-sm sticky top-0 z-40">
+//         <div class="max-w-md mx-auto py-8 text-center text-gray-500">
+//           <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
+//         </div>
+//       </footer>
+//     </div>
+//   `;
+
+//   const 상세페이지_로딩완료 = `
+//     <div class="min-h-screen bg-gray-50">
+//       <header class="bg-white shadow-sm sticky top-0 z-40">
+//         <div class="max-w-md mx-auto px-4 py-4">
+//           <div class="flex items-center justify-between">
+//             <div class="flex items-center space-x-3">
+//               <button onclick="window.history.back()" class="p-2 text-gray-700 hover:text-gray-900 transition-colors">
+//                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+//                 </svg>
+//               </button>
+//               <h1 class="text-lg font-bold text-gray-900">상품 상세</h1>
+//             </div>
+//             <div class="flex items-center space-x-2">
+//               <!-- 장바구니 아이콘 -->
+//               <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
+//                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+//                 </svg>
+//                 <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+//                   1
+//                 </span>
+//               </button>
+//             </div>
+//           </div>
+//         </div>
+//       </header>
+//       <main class="max-w-md mx-auto px-4 py-4">
+//         <!-- 브레드크럼 -->
+//         <nav class="mb-4">
+//           <div class="flex items-center space-x-2 text-sm text-gray-600">
+//             <a href="/" data-link="" class="hover:text-blue-600 transition-colors">홈</a>
+//             <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+//             </svg>
+//             <button class="breadcrumb-link" data-category1="생활/건강">
+//               생활/건강
+//             </button>
+//             <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+//             </svg>
+//             <button class="breadcrumb-link" data-category2="생활용품">
+//               생활용품
+//             </button>
+//           </div>
+//         </nav>
+//         <!-- 상품 상세 정보 -->
+//         <div class="bg-white rounded-lg shadow-sm mb-6">
+//           <!-- 상품 이미지 -->
+//           <div class="p-4">
+//             <div class="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
+//               <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover product-detail-image">
+//             </div>
+//             <!-- 상품 정보 -->
+//             <div>
+//               <p class="text-sm text-gray-600 mb-1"></p>
+//               <h1 class="text-xl font-bold text-gray-900 mb-3">PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장</h1>
+//               <!-- 평점 및 리뷰 -->
+//               <div class="flex items-center mb-3">
+//                 <div class="flex items-center">
+//                   <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+//                     <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+//                   </svg>
+//                   <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+//                     <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+//                   </svg>
+//                   <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+//                     <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+//                   </svg>
+//                   <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+//                     <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+//                   </svg>
+//                   <svg class="w-4 h-4 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
+//                     <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+//                   </svg>
+//                 </div>
+//                 <span class="ml-2 text-sm text-gray-600">4.0 (749개 리뷰)</span>
+//               </div>
+//               <!-- 가격 -->
+//               <div class="mb-4">
+//                 <span class="text-2xl font-bold text-blue-600">220원</span>
+//               </div>
+//               <!-- 재고 -->
+//               <div class="text-sm text-gray-600 mb-4">
+//                 재고 107개
+//               </div>
+//               <!-- 설명 -->
+//               <div class="text-sm text-gray-700 leading-relaxed mb-6">
+//                 PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장에 대한 상세 설명입니다. 브랜드의 우수한 품질을 자랑하는 상품으로, 고객 만족도가 높은 제품입니다.
+//               </div>
+//             </div>
+//           </div>
+//           <!-- 수량 선택 및 액션 -->
+//           <div class="border-t border-gray-200 p-4">
+//             <div class="flex items-center justify-between mb-4">
+//               <span class="text-sm font-medium text-gray-900">수량</span>
+//               <div class="flex items-center">
+//                 <button id="quantity-decrease" class="w-8 h-8 flex items-center justify-center border border-gray-300
+//                    rounded-l-md bg-gray-50 hover:bg-gray-100">
+//                   <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+//                   </svg>
+//                 </button>
+//                 <input type="number" id="quantity-input" value="1" min="1" max="107" class="w-16 h-8 text-center text-sm border-t border-b border-gray-300
+//                   focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+//                 <button id="quantity-increase" class="w-8 h-8 flex items-center justify-center border border-gray-300
+//                    rounded-r-md bg-gray-50 hover:bg-gray-100">
+//                   <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+//                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+//                   </svg>
+//                 </button>
+//               </div>
+//             </div>
+//             <!-- 액션 버튼 -->
+//             <button id="add-to-cart-btn" data-product-id="85067212996" class="w-full bg-blue-600 text-white py-3 px-4 rounded-md
+//                  hover:bg-blue-700 transition-colors font-medium">
+//               장바구니 담기
+//             </button>
+//           </div>
+//         </div>
+//         <!-- 상품 목록으로 이동 -->
+//         <div class="mb-6">
+//           <button class="block w-full text-center bg-gray-100 text-gray-700 py-3 px-4 rounded-md
+//             hover:bg-gray-200 transition-colors go-to-product-list">
+//             상품 목록으로 돌아가기
+//           </button>
+//         </div>
+//         <!-- 관련 상품 -->
+//         <div class="bg-white rounded-lg shadow-sm">
+//           <div class="p-4 border-b border-gray-200">
+//             <h2 class="text-lg font-bold text-gray-900">관련 상품</h2>
+//             <p class="text-sm text-gray-600">같은 카테고리의 다른 상품들</p>
+//           </div>
+//           <div class="p-4">
+//             <div class="grid grid-cols-2 gap-3 responsive-grid">
+//               <div class="bg-gray-50 rounded-lg p-3 related-product-card cursor-pointer" data-product-id="86940857379">
+//                 <div class="aspect-square bg-white rounded-md overflow-hidden mb-2">
+//                   <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover" loading="lazy">
+//                 </div>
+//                 <h3 class="text-sm font-medium text-gray-900 mb-1 line-clamp-2">샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이</h3>
+//                 <p class="text-sm font-bold text-blue-600">230원</p>
+//               </div>
+//               <div class="bg-gray-50 rounded-lg p-3 related-product-card cursor-pointer" data-product-id="82094468339">
+//                 <div class="aspect-square bg-white rounded-md overflow-hidden mb-2">
+//                   <img src="https://shopping-phinf.pstatic.net/main_8209446/82094468339.4.jpg" alt="실리카겔 50g 습기제거제 제품 /산업 신발 의류 방습제" class="w-full h-full object-cover" loading="lazy">
+//                 </div>
+//                 <h3 class="text-sm font-medium text-gray-900 mb-1 line-clamp-2">실리카겔 50g 습기제거제 제품 /산업 신발 의류 방습제</h3>
+//                 <p class="text-sm font-bold text-blue-600">280원</p>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//       </main>
+//       <footer class="bg-white shadow-sm sticky top-0 z-40">
+//         <div class="max-w-md mx-auto py-8 text-center text-gray-500">
+//           <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
+//         </div>
+//       </footer>
+//     </div>
+//   `;
+
+//   const _404_ = `
+//     <main class="max-w-md mx-auto px-4 py-4">
+//       <div class="text-center my-4 py-20 shadow-md p-6 bg-white rounded-lg">
+//       <svg viewBox="0 0 320 180" xmlns="http://www.w3.org/2000/svg">
+//         <defs>
+//           <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+//             <stop offset="0%" style="stop-color:#4285f4;stop-opacity:1" />
+//             <stop offset="100%" style="stop-color:#1a73e8;stop-opacity:1" />
+//           </linearGradient>
+//           <filter id="softShadow" x="-50%" y="-50%" width="200%" height="200%">
+//             <feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000000" flood-opacity="0.1"/>
+//           </filter>
+//         </defs>
+
+//         <!-- 404 Numbers -->
+//         <text x="160" y="85" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="48" font-weight="600" fill="url(#blueGradient)" text-anchor="middle">404</text>
+
+//         <!-- Icon decoration -->
+//         <circle cx="80" cy="60" r="3" fill="#e8f0fe" opacity="0.8"/>
+//         <circle cx="240" cy="60" r="3" fill="#e8f0fe" opacity="0.8"/>
+//         <circle cx="90" cy="45" r="2" fill="#4285f4" opacity="0.5"/>
+//         <circle cx="230" cy="45" r="2" fill="#4285f4" opacity="0.5"/>
+
+//         <!-- Message -->
+//         <text x="160" y="110" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="400" fill="#5f6368" text-anchor="middle">페이지를 찾을 수 없습니다</text>
+
+//         <!-- Subtle bottom accent -->
+//         <rect x="130" y="130" width="60" height="2" rx="1" fill="url(#blueGradient)" opacity="0.3"/>
+//       </svg>
+
+//       <a href="/" data-link class="inline-block px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">홈으로</a>
+//     </div>
+//     </main>
+//   `;
diff --git a/src/features/cart/cart.modal.js b/src/features/cart/cart.modal.js
new file mode 100644
index 000000000..f1d07cf5d
--- /dev/null
+++ b/src/features/cart/cart.modal.js
@@ -0,0 +1,276 @@
+import { cart, saveCart, updateCartBadge } from "./cart.state.js";
+import { showToast } from "../../components/Toast.js";
+
+const format = (won) => `${Number(won).toLocaleString()}원`;
+
+export function openCartModal() {
+  const existing = document.querySelector(".cart-modal-overlay");
+  if (existing) {
+    existing.remove();
+  }
+
+  const overlay = document.createElement("div");
+  overlay.className =
+    "cart-modal-overlay fixed inset-0 bg-black/50 z-50 flex items-end sm:items-center justify-center p-4";
+  document.body.appendChild(overlay);
+
+  const escHandler = (e) => {
+    if (e.key === "Escape") closeCartModal();
+  };
+  document.addEventListener("keydown", escHandler);
+
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) closeCartModal();
+  });
+
+  renderCartModal();
+
+  function closeCartModal() {
+    overlay.remove();
+    document.removeEventListener("keydown", escHandler);
+  }
+
+  function renderCartModal() {
+    overlay.innerHTML = "";
+
+    const cartItems = Object.values(cart);
+    // 디버그 로그 제거
+
+    if (cartItems.length === 0) {
+      overlay.innerHTML = `
+          <div class="cart-modal relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
+            <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
+              <h2 class="text-lg font-bold text-gray-900 flex items-center">
+                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+                </svg>
+                장바구니
+              </h2>
+              <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+              </button>
+            </div>
+            <div class="flex-1 flex items-center justify-center p-8">
+              <div class="text-center">
+                <div class="text-gray-400 mb-4">
+                  <svg class="mx-auto h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+                  </svg>
+                </div>
+                <h3 class="text-lg font-medium text-gray-900 mb-2">장바구니가 비어있습니다</h3>
+                <p class="text-gray-600">원하는 상품을 담아보세요!</p>
+              </div>
+            </div>
+          </div>`;
+      overlay.querySelector("#cart-modal-close-btn").onclick = closeCartModal;
+      return;
+    }
+
+    const totalCount = cartItems.length;
+    const totalPrice = cartItems.reduce((sum, i) => sum + i.product.lprice * i.quantity, 0);
+
+    const modal = document.createElement("div");
+    modal.className =
+      "cart-modal relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden";
+    overlay.appendChild(modal);
+
+    modal.innerHTML = `
+        <!-- 헤더 -->
+        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
+          <h2 class="text-lg font-bold text-gray-900 flex items-center">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+            </svg>
+            장바구니 <span class="text-sm text-gray-600 ml-1">(${totalCount})</span>
+          </h2>
+          <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+  
+        <!-- 아이템 목록 -->
+        <div class="flex flex-col max-h-[calc(90vh-120px)]">
+          <div class="p-4 border-b border-gray-200 bg-gray-50">
+            <label class="flex items-center text-sm text-gray-700">
+              <input type="checkbox" id="cart-modal-select-all-checkbox"
+                class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
+              전체선택 (${totalCount}개)
+            </label>
+          </div>
+          <div class="flex-1 overflow-y-auto">
+            <div class="p-4 space-y-4">
+              ${cartItems
+                .map(
+                  ({ product, quantity }) => `
+                <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="${product.productId}">
+                  <label class="flex items-center mr-3">
+                    <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" data-product-id="${product.productId}">
+                  </label>
+                  <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
+                    <img src="${product.image}" alt="${product.title}" class="w-full h-full object-cover cursor-pointer cart-item-image">
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <h4 class="text-sm font-medium text-gray-900 truncate">${product.title}</h4>
+                    <p class="text-sm text-gray-600 mt-1">${format(product.lprice)}</p>
+                    <div class="flex items-center mt-2">
+                      <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="${product.productId}">
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
+                      </button>
+                      <input type="number" class="quantity-input w-12 h-7 text-center text-sm border-t border-b border-gray-300" value="${quantity}" min="1" disabled data-product-id="${product.productId}">
+                      <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="${product.productId}">
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="text-right ml-3">
+                    <p class="text-sm font-medium text-gray-900 price-field" data-product-id="${product.productId}">${format(product.lprice * quantity)}</p>
+                    <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="${product.productId}">삭제</button>
+                  </div>
+                </div>`,
+                )
+                .join("")}
+            </div>
+          </div>
+  
+          <!-- 하단 -->
+          <div class="sticky bottom-0 bg-white border-t border-gray-200 p-4 space-y-2">
+            <!-- 선택 요약 (초기 hidden) -->
+            <div id="cart-modal-selected-summary" class="flex justify-between items-center text-sm hidden">
+              <span class="text-gray-600">선택한 상품 (<span id="selected-count">0</span>개)</span>
+              <span class="font-medium" id="selected-amount">0원</span>
+            </div>
+  
+            <!-- 총 금액 -->
+            <div class="flex justify-between items-center mb-1 text-sm">
+              <span class="text-gray-600">총 금액</span>
+              <span class="font-bold" id="cart-modal-total-amount">${format(totalPrice)}</span>
+            </div>
+  
+            <!-- 액션 버튼 -->
+            <button id="cart-modal-remove-selected-btn"
+                    class="w-full bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 transition-colors text-sm hidden">
+              선택한 상품 삭제 (0개)
+            </button>
+  
+            <div class="flex gap-2">
+              <button id="cart-modal-clear-cart-btn"
+                      class="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md hover:bg-gray-700 transition-colors text-sm">
+                전체 비우기
+              </button>
+              <button id="cart-modal-checkout-btn"
+                      class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors text-sm">
+                구매하기
+              </button>
+            </div>
+          </div>
+        </div>`;
+
+    modal.querySelector("#cart-modal-close-btn").onclick = closeCartModal;
+    modal.querySelectorAll(".quantity-increase-btn").forEach((btn) => {
+      btn.onclick = () => {
+        const pid = btn.dataset.productId;
+        cart[pid].quantity += 1;
+        saveCart();
+        const qtyInput = modal.querySelector(`.quantity-input[data-product-id="${pid}"]`);
+        const priceField = modal.querySelector(`.price-field[data-product-id="${pid}"]`);
+        qtyInput.value = cart[pid].quantity;
+        priceField.textContent = format(cart[pid].quantity * cart[pid].product.lprice);
+        modal.querySelector("#cart-modal-total-amount").textContent = format(
+          Object.values(cart).reduce((s, c) => s + c.product.lprice * c.quantity, 0),
+        );
+      };
+    });
+    modal.querySelectorAll(".quantity-decrease-btn").forEach((btn) => {
+      btn.onclick = () => {
+        const pid = btn.dataset.productId;
+        if (cart[pid].quantity === 1) return;
+        cart[pid].quantity -= 1;
+        saveCart();
+        const qtyInput = modal.querySelector(`.quantity-input[data-product-id="${pid}"]`);
+        const priceField = modal.querySelector(`.price-field[data-product-id="${pid}"]`);
+        qtyInput.value = cart[pid].quantity;
+        priceField.textContent = format(cart[pid].quantity * cart[pid].product.lprice);
+        modal.querySelector("#cart-modal-total-amount").textContent = format(
+          Object.values(cart).reduce((s, c) => s + c.product.lprice * c.quantity, 0),
+        );
+      };
+    });
+    modal.querySelectorAll(".cart-item-remove-btn").forEach((btn) => {
+      btn.onclick = () => {
+        const pid = btn.dataset.productId;
+        delete cart[pid];
+        saveCart();
+        updateCartBadge();
+        renderCartModal();
+        showToast("삭제되었습니다", "info");
+      };
+    });
+
+    const selectAllChk = modal.querySelector("#cart-modal-select-all-checkbox");
+    const itemChks = modal.querySelectorAll(".cart-item-checkbox");
+    const removeSelBtn = modal.querySelector("#cart-modal-remove-selected-btn");
+
+    const recalcSelection = () => {
+      const selectedCnt = [...itemChks].filter((c) => c.checked).length;
+
+      selectAllChk.checked = selectedCnt === itemChks.length;
+      selectAllChk.indeterminate = selectedCnt > 0 && selectedCnt < itemChks.length;
+
+      const selSummary = modal.querySelector("#cart-modal-selected-summary");
+      const selAmount = modal.querySelector("#selected-amount");
+      const selBtn = modal.querySelector("#cart-modal-remove-selected-btn");
+
+      if (selectedCnt === 0) {
+        selSummary.classList.add("hidden");
+        selBtn.classList.add("hidden");
+      } else {
+        const sum = [...itemChks]
+          .filter((c) => c.checked)
+          .reduce((s, c) => {
+            const pid = c.dataset.productId;
+            return s + cart[pid].product.lprice * cart[pid].quantity;
+          }, 0);
+
+        selSummary.classList.remove("hidden");
+        selBtn.classList.remove("hidden");
+        selSummary.querySelector("#selected-count").textContent = selectedCnt;
+        selAmount.textContent = format(sum);
+        selBtn.textContent = `선택한 상품 삭제 (${selectedCnt}개)`;
+      }
+    };
+
+    selectAllChk.onchange = () => {
+      itemChks.forEach((c) => (c.checked = selectAllChk.checked));
+      recalcSelection();
+    };
+    itemChks.forEach((c) => (c.onchange = recalcSelection));
+    recalcSelection();
+
+    removeSelBtn.onclick = () => {
+      const selectedPids = [...itemChks].filter((c) => c.checked).map((c) => c.dataset.productId);
+
+      selectedPids.forEach((pid) => delete cart[pid]);
+      saveCart();
+      updateCartBadge();
+      renderCartModal();
+      showToast("선택한 상품이 삭제되었습니다", "info");
+    };
+
+    modal.querySelector("#cart-modal-clear-cart-btn").onclick = () => {
+      Object.keys(cart).forEach((pid) => delete cart[pid]);
+      saveCart();
+      updateCartBadge();
+      renderCartModal();
+      showToast("장바구니를 비웠습니다", "info");
+    };
+  }
+}
diff --git a/src/features/cart/cart.state.js b/src/features/cart/cart.state.js
new file mode 100644
index 000000000..402873c98
--- /dev/null
+++ b/src/features/cart/cart.state.js
@@ -0,0 +1,21 @@
+import cartService from "../../services/CartService.js";
+// showToast 는 CartService 내부에서 호출됨
+
+// CartService 의 카트 객체를 그대로 노출 (레거시 호환)
+export const cart = cartService.getCart();
+
+export function loadCart() {
+  cartService.loadFromStorage();
+}
+
+export function saveCart() {
+  cartService.saveToStorage();
+}
+
+export function updateCartBadge() {
+  cartService.updateBadge();
+}
+
+export function addToCart(product, qty = 1) {
+  cartService.add(product, qty);
+}
diff --git a/src/features/cart/index.js b/src/features/cart/index.js
new file mode 100644
index 000000000..adf80d1ae
--- /dev/null
+++ b/src/features/cart/index.js
@@ -0,0 +1,2 @@
+export * from "./cart.state.js";
+export { openCartModal } from "./cart.modal.js";
diff --git a/src/main.js b/src/main.js
index 4b055b89d..78a56e256 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,1152 +1,184 @@
+import HomePage from "./pages/HomePage.js";
+import productService from "./services/ProductService.js";
+import { updateCartBadge, addToCart, openCartModal } from "./features/cart/index.js";
+import router from "./router/Router.js";
+import InfiniteScrollManager from "./services/InfiniteScrollManager.js";
+import homePageController from "./controllers/HomePageController.js";
+import productDetailController from "./controllers/ProductDetailController.js";
+import NotFoundPage from "./pages/NotFoundPage.js";
+
 const enableMocking = () =>
-  import("./mocks/browser.js").then(({ worker }) =>
-    worker.start({
-      onUnhandledRequest: "bypass",
-    }),
-  );
+  import("./mocks/browser.js").then(({ worker, workerOptions }) => worker.start(workerOptions));
+
+let state = {
+  products: [],
+  total: 0,
+  loading: false,
+  loadingMore: false,
+  categories: {},
+  limit: 20,
+  page: 1,
+  cart: {},
+  search: "",
+  category1: "",
+  category2: "",
+};
 
-function main() {
-  const 상품목록_레이아웃_로딩 = `
-    <div class="min-h-screen bg-gray-50">
-      <header class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto px-4 py-4">
-          <div class="flex items-center justify-between">
-            <h1 class="text-xl font-bold text-gray-900">
-              <a href="/" data-link="">쇼핑몰</a>
-            </h1>
-            <div class="flex items-center space-x-2">
-              <!-- 장바구니 아이콘 -->
-              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-      <main class="max-w-md mx-auto px-4 py-4">
-        <!-- 검색 및 필터 -->
-        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
-          <!-- 검색창 -->
-          <div class="mb-4">
-            <div class="relative">
-              <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
-                          focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                </svg>
-              </div>
-            </div>
-          </div>
-          <!-- 필터 옵션 -->
-          <div class="space-y-3">
-            <!-- 카테고리 필터 -->
-            <div class="space-y-2">
-              <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600">카테고리:</label>
-                <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button>
-              </div>
-              <!-- 1depth 카테고리 -->
-              <div class="flex flex-wrap gap-2">
-                <div class="text-sm text-gray-500 italic">카테고리 로딩 중...</div>
-              </div>
-              <!-- 2depth 카테고리 -->
-            </div>
-            <!-- 기존 필터들 -->
-            <div class="flex gap-2 items-center justify-between">
-              <!-- 페이지당 상품 수 -->
-              <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600">개수:</label>
-                <select id="limit-select"
-                        class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                  <option value="10">
-                    10개
-                  </option>
-                  <option value="20" selected="">
-                    20개
-                  </option>
-                  <option value="50">
-                    50개
-                  </option>
-                  <option value="100">
-                    100개
-                  </option>
-                </select>
-              </div>
-              <!-- 정렬 -->
-              <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600">정렬:</label>
-                <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
-                             focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                  <option value="price_asc" selected="">가격 낮은순</option>
-                  <option value="price_desc">가격 높은순</option>
-                  <option value="name_asc">이름순</option>
-                  <option value="name_desc">이름 역순</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 상품 목록 -->
-        <div class="mb-6">
-          <div>
-            <!-- 상품 그리드 -->
-            <div class="grid grid-cols-2 gap-4 mb-6" id="products-grid">
-              <!-- 로딩 스켈레톤 -->
-              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
-                <div class="aspect-square bg-gray-200"></div>
-                <div class="p-3">
-                  <div class="h-4 bg-gray-200 rounded mb-2"></div>
-                  <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
-                  <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
-                  <div class="h-8 bg-gray-200 rounded"></div>
-                </div>
-              </div>
-              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
-                <div class="aspect-square bg-gray-200"></div>
-                <div class="p-3">
-                  <div class="h-4 bg-gray-200 rounded mb-2"></div>
-                  <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
-                  <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
-                  <div class="h-8 bg-gray-200 rounded"></div>
-                </div>
-              </div>
-              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
-                <div class="aspect-square bg-gray-200"></div>
-                <div class="p-3">
-                  <div class="h-4 bg-gray-200 rounded mb-2"></div>
-                  <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
-                  <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
-                  <div class="h-8 bg-gray-200 rounded"></div>
-                </div>
-              </div>
-              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
-                <div class="aspect-square bg-gray-200"></div>
-                <div class="p-3">
-                  <div class="h-4 bg-gray-200 rounded mb-2"></div>
-                  <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
-                  <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
-                  <div class="h-8 bg-gray-200 rounded"></div>
-                </div>
-              </div>
-            </div>
-            
-            <div class="text-center py-4">
-              <div class="inline-flex items-center">
-                <svg class="animate-spin h-5 w-5 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24">
-                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                  <path class="opacity-75" fill="currentColor" 
-                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                </svg>
-                <span class="text-sm text-gray-600">상품을 불러오는 중...</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-      <footer class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
-          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
-        </div>
-      </footer>
-    </div>
-  `;
+function attachEventListeners() {
+  const limitSelect = document.querySelector("#limit-select");
+  if (limitSelect) {
+    limitSelect.value = String(state.limit);
 
-  const 상품목록_레이아웃_로딩완료 = `
-    <div class="bg-gray-50">
-      <header class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto px-4 py-4">
-          <div class="flex items-center justify-between">
-            <h1 class="text-xl font-bold text-gray-900">
-              <a href="/" data-link="">쇼핑몰</a>
-            </h1>
-            <div class="flex items-center space-x-2">
-              <!-- 장바구니 아이콘 -->
-              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-                </svg>
-                <span
-                  class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">4</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-      <main class="max-w-md mx-auto px-4 py-4">
-        <!-- 검색 및 필터 -->
-        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
-          <!-- 검색창 -->
-          <div class="mb-4">
-            <div class="relative">
-              <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
-                          focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                </svg>
-              </div>
-            </div>
-          </div>
-          <!-- 필터 옵션 -->
-          <div class="space-y-3">
-            <!-- 카테고리 필터 -->
-            <div class="space-y-2">
-              <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600">카테고리:</label>
-                <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button>
-              </div>
-              <!-- 1depth 카테고리 -->
-              <div class="flex flex-wrap gap-2">
-                <button data-category1="생활/건강" class="category1-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors
-                   bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  생활/건강
-                </button>
-                <button data-category1="디지털/가전" class="category1-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors
-                   bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  디지털/가전
-                </button>
-              </div>
-              <!-- 2depth 카테고리 -->
-            </div>
-            <!-- 기존 필터들 -->
-            <div class="flex gap-2 items-center justify-between">
-              <!-- 페이지당 상품 수 -->
-              <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600">개수:</label>
-                <select id="limit-select"
-                        class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                  <option value="10">
-                    10개
-                  </option>
-                  <option value="20" selected="">
-                    20개
-                  </option>
-                  <option value="50">
-                    50개
-                  </option>
-                  <option value="100">
-                    100개
-                  </option>
-                </select>
-              </div>
-              <!-- 정렬 -->
-              <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600">정렬:</label>
-                <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
-                             focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                  <option value="price_asc" selected="">가격 낮은순</option>
-                  <option value="price_desc">가격 높은순</option>
-                  <option value="name_asc">이름순</option>
-                  <option value="name_desc">이름 역순</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 상품 목록 -->
-        <div class="mb-6">
-          <div>
-            <!-- 상품 개수 정보 -->
-            <div class="mb-4 text-sm text-gray-600">
-              총 <span class="font-medium text-gray-900">340개</span>의 상품
-            </div>
-            <!-- 상품 그리드 -->
-            <div class="grid grid-cols-2 gap-4 mb-6" id="products-grid">
-              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden product-card"
-                   data-product-id="85067212996">
-                <!-- 상품 이미지 -->
-                <div class="aspect-square bg-gray-100 overflow-hidden cursor-pointer product-image">
-                  <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg"
-                       alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장"
-                       class="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
-                       loading="lazy">
-                </div>
-                <!-- 상품 정보 -->
-                <div class="p-3">
-                  <div class="cursor-pointer product-info mb-3">
-                    <h3 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
-                      PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
-                    </h3>
-                    <p class="text-xs text-gray-500 mb-2"></p>
-                    <p class="text-lg font-bold text-gray-900">
-                      220원
-                    </p>
-                  </div>
-                  <!-- 장바구니 버튼 -->
-                  <button class="w-full bg-blue-600 text-white text-sm py-2 px-3 rounded-md
-                         hover:bg-blue-700 transition-colors add-to-cart-btn" data-product-id="85067212996">
-                    장바구니 담기
-                  </button>
-                </div>
-              </div>
-              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden product-card"
-                   data-product-id="86940857379">
-                <!-- 상품 이미지 -->
-                <div class="aspect-square bg-gray-100 overflow-hidden cursor-pointer product-image">
-                  <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg"
-                       alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이"
-                       class="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
-                       loading="lazy">
-                </div>
-                <!-- 상품 정보 -->
-                <div class="p-3">
-                  <div class="cursor-pointer product-info mb-3">
-                    <h3 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
-                      샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
-                    </h3>
-                    <p class="text-xs text-gray-500 mb-2">이지웨이건축자재</p>
-                    <p class="text-lg font-bold text-gray-900">
-                      230원
-                    </p>
-                  </div>
-                  <!-- 장바구니 버튼 -->
-                  <button class="w-full bg-blue-600 text-white text-sm py-2 px-3 rounded-md
-                         hover:bg-blue-700 transition-colors add-to-cart-btn" data-product-id="86940857379">
-                    장바구니 담기
-                  </button>
-                </div>
-              </div>
-            </div>
-            
-            <div class="text-center py-4 text-sm text-gray-500">
-              모든 상품을 확인했습니다
-            </div>
-          </div>
-        </div>
-      </main>
-      <footer class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
-          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
-        </div>
-      </footer>
-    </div>
-  `;
+    limitSelect.onchange = async (e) => {
+      state.limit = Number(e.target.value);
+      state.page = 1;
+      fetchProductsAndRender();
+    };
+  }
 
-  const 상품목록_레이아웃_카테고리_1Depth = `
-    <main class="max-w-md mx-auto px-4 py-4">
-      <!-- 검색 및 필터 -->
-      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
-        <!-- 검색창 -->
-        <div class="mb-4">
-          <div class="relative">
-            <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
-                        focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-              </svg>
-            </div>
-          </div>
-        </div>
-        
-        <!-- 필터 옵션 -->
-        <div class="space-y-3">
+  const searchInput = document.querySelector("#search-input");
+  if (searchInput) {
+    searchInput.value = state.search;
 
-          <!-- 카테고리 필터 -->
-          <div class="space-y-2">
-            <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600">카테고리:</label>
-              <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button><span class="text-xs text-gray-500">&gt;</span><button data-breadcrumb="category1" data-category1="생활/건강" class="text-xs hover:text-blue-800 hover:underline">생활/건강</button>
-            </div>
-            <div class="space-y-2">
-              <div class="flex flex-wrap gap-2">
-                <button data-category1="생활/건강" data-category2="생활용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  생활용품
-                </button>
-                <button data-category1="생활/건강" data-category2="주방용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  주방용품
-                </button>
-                <button data-category1="생활/건강" data-category2="문구/사무용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  문구/사무용품
-                </button>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 기존 필터들 -->
-          <div class="flex gap-2 items-center justify-between">
-            <!-- 페이지당 상품 수 -->
-            <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600">개수:</label>
-              <select id="limit-select"
-                      class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                <option value="10">
-                  10개
-                </option>
-                <option value="20" selected="">
-                  20개
-                </option>
-                <option value="50">
-                  50개
-                </option>
-                <option value="100">
-                  100개
-                </option>
-              </select>
-            </div>
-            <!-- 정렬 -->
-            <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600">정렬:</label>
-              <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
-                           focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                <option value="price_asc" selected="">가격 낮은순</option>
-                <option value="price_desc">가격 높은순</option>
-                <option value="name_asc">이름순</option>
-                <option value="name_desc">이름 역순</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  `;
+    searchInput.onkeydown = (e) => {
+      if (e.key === "Enter") {
+        const keyword = searchInput.value.trim();
+        if (state.search !== keyword) {
+          state.search = keyword;
+          state.page = 1;
+          fetchProductsAndRender();
+        }
+      }
+    };
+  }
 
-  const 상품목록_레이아웃_카테고리_2Depth = `
-    <main class="max-w-md mx-auto px-4 py-4">
-      <!-- 검색 및 필터 -->
-      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
-        <!-- 검색창 -->
-        <div class="mb-4">
-          <div class="relative">
-            <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
-                        focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-              </svg>
-            </div>
-          </div>
-        </div>
-        
-        <!-- 필터 옵션 -->
-        <div class="space-y-3">
+  document.querySelectorAll(".add-to-cart-btn").forEach((btn) => {
+    btn.onclick = () => {
+      const product = state.products.find((p) => String(p.productId) === btn.dataset.productId);
+      if (product) addToCart(product);
+    };
+  });
 
-          <!-- 카테고리 필터 -->
-          <div class="space-y-2">
-            <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600">카테고리:</label>
-              <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button><span class="text-xs text-gray-500">&gt;</span><button data-breadcrumb="category1" data-category1="생활/건강" class="text-xs hover:text-blue-800 hover:underline">생활/건강</button><span class="text-xs text-gray-500">&gt;</span><span class="text-xs text-gray-600 cursor-default">주방용품</span>
-            </div>
-            <div class="space-y-2">
-              <div class="flex flex-wrap gap-2">
-                <button data-category1="생활/건강" data-category2="생활용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  생활용품
-                </button>
-                <button data-category1="생활/건강" data-category2="주방용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-blue-100 border-blue-300 text-blue-800">
-                  주방용품
-                </button>
-                <button data-category1="생활/건강" data-category2="문구/사무용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  문구/사무용품
-                </button>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 기존 필터들 -->
-          <div class="flex gap-2 items-center justify-between">
-            <!-- 페이지당 상품 수 -->
-            <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600">개수:</label>
-              <select id="limit-select"
-                      class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                <option value="10">
-                  10개
-                </option>
-                <option value="20" selected="">
-                  20개
-                </option>
-                <option value="50">
-                  50개
-                </option>
-                <option value="100">
-                  100개
-                </option>
-              </select>
-            </div>
-            <!-- 정렬 -->
-            <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600">정렬:</label>
-              <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
-                           focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                <option value="price_asc" selected="">가격 낮은순</option>
-                <option value="price_desc">가격 높은순</option>
-                <option value="name_asc">이름순</option>
-                <option value="name_desc">이름 역순</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  `;
+  document.querySelector("#cart-icon-btn")?.addEventListener("click", openCartModal);
 
-  const 토스트 = `
-    <div class="flex flex-col gap-2 items-center justify-center mx-auto" style="width: fit-content;">
-      <div class="bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
-        <div class="flex-shrink-0">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-          </svg>
-        </div>
-        <p class="text-sm font-medium">장바구니에 추가되었습니다</p>
-        <button id="toast-close-btn" class="flex-shrink-0 ml-2 text-white hover:text-gray-200">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-          </svg>
-        </button>
-      </div>
-      
-      <div class="bg-blue-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
-        <div class="flex-shrink-0">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-         </svg>
-        </div>
-        <p class="text-sm font-medium">선택된 상품들이 삭제되었습니다</p>
-        <button id="toast-close-btn" class="flex-shrink-0 ml-2 text-white hover:text-gray-200">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-          </svg>
-        </button>
-      </div>
-      
-      <div class="bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
-        <div class="flex-shrink-0">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-          </svg>
-        </div>
-        <p class="text-sm font-medium">오류가 발생했습니다.</p>
-        <button id="toast-close-btn" class="flex-shrink-0 ml-2 text-white hover:text-gray-200">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-          </svg>
-        </button>
-      </div>
-    </div>
-  `;
+  document.querySelectorAll(".category1-filter-btn").forEach((btn) => {
+    btn.onclick = () => {
+      state.category1 = btn.dataset.category1;
+      state.category2 = "";
+      state.page = 1;
+      fetchProductsAndRender();
+    };
+  });
+  document.querySelectorAll(".category2-filter-btn").forEach((btn) => {
+    btn.onclick = () => {
+      state.category1 = btn.dataset.category1;
+      state.category2 = btn.dataset.category2;
+      state.page = 1;
+      fetchProductsAndRender();
+    };
+  });
+  document.querySelector('[data-breadcrumb="reset"]')?.addEventListener("click", () => {
+    state.category1 = "";
+    state.category2 = "";
+    state.page = 1;
+    fetchProductsAndRender();
+  });
+  document.querySelector('[data-breadcrumb="category1"]')?.addEventListener("click", (e) => {
+    state.category1 = e.target.dataset.category1;
+    state.category2 = "";
+    state.page = 1;
+    fetchProductsAndRender();
+  });
+
+  document.querySelectorAll(".product-image, .product-info").forEach((el) => {
+    el.onclick = () => {
+      const card = el.closest(".product-card");
+      const pid = card.dataset.productId;
+      navigate(`/product/${pid}`);
+    };
+  });
+}
+
+let scrollManager;
+
+export function setupInfiniteScroll() {
+  if (scrollManager) return;
+  scrollManager = new InfiniteScrollManager(async () => {
+    if (!state.loading && !state.loadingMore && state.products.length < state.total) {
+      await loadMore();
+    }
+  });
+  scrollManager.attach();
+}
 
-  const 장바구니_비어있음 = `
-    <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
-      <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
-        <!-- 헤더 -->
-        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
-          <h2 class="text-lg font-bold text-gray-900 flex items-center">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-            </svg>
-            장바구니 
-          </h2>
-          
-          <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-            </svg>
-          </button>
-        </div>
-        
-        <!-- 컨텐츠 -->
-        <div class="flex flex-col max-h-[calc(90vh-120px)]">
-          <!-- 빈 장바구니 -->
-          <div class="flex-1 flex items-center justify-center p-8">
-            <div class="text-center">
-              <div class="text-gray-400 mb-4">
-                <svg class="mx-auto h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-                </svg>
-              </div>
-              <h3 class="text-lg font-medium text-gray-900 mb-2">장바구니가 비어있습니다</h3>
-              <p class="text-gray-600">원하는 상품을 담아보세요!</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
+async function fetchProducts() {
+  const { products, pagination } = await productService.getProducts({
+    limit: state.limit,
+    page: state.page,
+    search: state.search,
+    category1: state.category1,
+    category2: state.category2,
+  });
+  state.products = products;
+  state.total = pagination.total;
+}
 
-  const 장바구니_선택없음 = `
-    <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
-      <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
-        <!-- 헤더 -->
-        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
-          <h2 class="text-lg font-bold text-gray-900 flex items-center">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-            </svg>
-            장바구니
-            <span class="text-sm font-normal text-gray-600 ml-1">(2)</span>
-          </h2>
-          <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-            </svg>
-          </button>
-        </div>
-        <!-- 컨텐츠 -->
-        <div class="flex flex-col max-h-[calc(90vh-120px)]">
-          <!-- 전체 선택 섹션 -->
-          <div class="p-4 border-b border-gray-200 bg-gray-50">
-            <label class="flex items-center text-sm text-gray-700">
-              <input type="checkbox" id="cart-modal-select-all-checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
-              전체선택 (2개)
-            </label>
-          </div>
-          <!-- 아이템 목록 -->
-          <div class="flex-1 overflow-y-auto">
-            <div class="p-4 space-y-4">
-              <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="85067212996">
-                <!-- 선택 체크박스 -->
-                <label class="flex items-center mr-3">
-                  <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
-                focus:ring-blue-500" data-product-id="85067212996">
-                </label>
-                <!-- 상품 이미지 -->
-                <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
-                  <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="85067212996">
-                </div>
-                <!-- 상품 정보 -->
-                <div class="flex-1 min-w-0">
-                  <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="85067212996">
-                    PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
-                  </h4>
-                  <p class="text-sm text-gray-600 mt-1">
-                    220원
-                  </p>
-                  <!-- 수량 조절 -->
-                  <div class="flex items-center mt-2">
-                    <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
-                      </svg>
-                    </button>
-                    <input type="number" value="2" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
-                border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="85067212996">
-                    <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <!-- 가격 및 삭제 -->
-                <div class="text-right ml-3">
-                  <p class="text-sm font-medium text-gray-900">
-                    440원
-                  </p>
-                  <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="85067212996">
-                    삭제
-                  </button>
-                </div>
-              </div>
-              <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="86940857379">
-                <!-- 선택 체크박스 -->
-                <label class="flex items-center mr-3">
-                  <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
-                focus:ring-blue-500" data-product-id="86940857379">
-                </label>
-                <!-- 상품 이미지 -->
-                <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
-                  <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="86940857379">
-                </div>
-                <!-- 상품 정보 -->
-                <div class="flex-1 min-w-0">
-                  <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="86940857379">
-                    샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
-                  </h4>
-                  <p class="text-sm text-gray-600 mt-1">
-                    230원
-                  </p>
-                  <!-- 수량 조절 -->
-                  <div class="flex items-center mt-2">
-                    <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
-                      </svg>
-                    </button>
-                    <input type="number" value="1" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
-                border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="86940857379">
-                    <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <!-- 가격 및 삭제 -->
-                <div class="text-right ml-3">
-                  <p class="text-sm font-medium text-gray-900">
-                    230원
-                  </p>
-                  <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="86940857379">
-                    삭제
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 하단 액션 -->
-        <div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
-          <!-- 선택된 아이템 정보 -->
-          <!-- 총 금액 -->
-          <div class="flex justify-between items-center mb-4">
-            <span class="text-lg font-bold text-gray-900">총 금액</span>
-            <span class="text-xl font-bold text-blue-600">670원</span>
-          </div>
-          <!-- 액션 버튼들 -->
-          <div class="space-y-2">
-            <div class="flex gap-2">
-              <button id="cart-modal-clear-cart-btn" class="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md 
-                       hover:bg-gray-700 transition-colors text-sm">
-                전체 비우기
-              </button>
-              <button id="cart-modal-checkout-btn" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md 
-                       hover:bg-blue-700 transition-colors text-sm">
-                구매하기
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
+async function fetchProductsAndRender() {
+  state.loading = true;
+  render();
+  await fetchProducts();
+  state.loading = false;
+  render();
+}
 
-  const 장바구니_선택있음 = `
-    <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
-      <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
-        <!-- 헤더 -->
-        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
-          <h2 class="text-lg font-bold text-gray-900 flex items-center">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-            </svg>
-            장바구니
-            <span class="text-sm font-normal text-gray-600 ml-1">(2)</span>
-          </h2>
-          <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-            </svg>
-          </button>
-        </div>
-        <!-- 컨텐츠 -->
-        <div class="flex flex-col max-h-[calc(90vh-120px)]">
-          <!-- 전체 선택 섹션 -->
-          <div class="p-4 border-b border-gray-200 bg-gray-50">
-            <label class="flex items-center text-sm text-gray-700">
-              <input type="checkbox" id="cart-modal-select-all-checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
-              전체선택 (2개)
-            </label>
-          </div>
-          <!-- 아이템 목록 -->
-          <div class="flex-1 overflow-y-auto">
-            <div class="p-4 space-y-4">
-              <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="85067212996">
-                <!-- 선택 체크박스 -->
-                <label class="flex items-center mr-3">
-                  <input type="checkbox" checked="" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
-                focus:ring-blue-500" data-product-id="85067212996">
-                </label>
-                <!-- 상품 이미지 -->
-                <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
-                  <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="85067212996">
-                </div>
-                <!-- 상품 정보 -->
-                <div class="flex-1 min-w-0">
-                  <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="85067212996">
-                    PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
-                  </h4>
-                  <p class="text-sm text-gray-600 mt-1">
-                    220원
-                  </p>
-                  <!-- 수량 조절 -->
-                  <div class="flex items-center mt-2">
-                    <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
-                      </svg>
-                    </button>
-                    <input type="number" value="2" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
-                border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="85067212996">
-                    <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <!-- 가격 및 삭제 -->
-                <div class="text-right ml-3">
-                  <p class="text-sm font-medium text-gray-900">
-                    440원
-                  </p>
-                  <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="85067212996">
-                    삭제
-                  </button>
-                </div>
-              </div>
-              <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="86940857379">
-                <!-- 선택 체크박스 -->
-                <label class="flex items-center mr-3">
-                  <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
-                focus:ring-blue-500" data-product-id="86940857379">
-                </label>
-                <!-- 상품 이미지 -->
-                <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
-                  <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="86940857379">
-                </div>
-                <!-- 상품 정보 -->
-                <div class="flex-1 min-w-0">
-                  <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="86940857379">
-                    샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
-                  </h4>
-                  <p class="text-sm text-gray-600 mt-1">
-                    230원
-                  </p>
-                  <!-- 수량 조절 -->
-                  <div class="flex items-center mt-2">
-                    <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
-                      </svg>
-                    </button>
-                    <input type="number" value="1" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
-                border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="86940857379">
-                    <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <!-- 가격 및 삭제 -->
-                <div class="text-right ml-3">
-                  <p class="text-sm font-medium text-gray-900">
-                    230원
-                  </p>
-                  <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="86940857379">
-                    삭제
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 하단 액션 -->
-        <div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
-          <!-- 선택된 아이템 정보 -->
-          <div class="flex justify-between items-center mb-3 text-sm">
-            <span class="text-gray-600">선택한 상품 (1개)</span>
-            <span class="font-medium">440원</span>
-          </div>
-          <!-- 총 금액 -->
-          <div class="flex justify-between items-center mb-4">
-            <span class="text-lg font-bold text-gray-900">총 금액</span>
-            <span class="text-xl font-bold text-blue-600">670원</span>
-          </div>
-          <!-- 액션 버튼들 -->
-          <div class="space-y-2">
-            <button id="cart-modal-remove-selected-btn" class="w-full bg-red-600 text-white py-2 px-4 rounded-md 
-                       hover:bg-red-700 transition-colors text-sm">
-              선택한 상품 삭제 (1개)
-            </button>
-            <div class="flex gap-2">
-              <button id="cart-modal-clear-cart-btn" class="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md 
-                       hover:bg-gray-700 transition-colors text-sm">
-                전체 비우기
-              </button>
-              <button id="cart-modal-checkout-btn" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md 
-                       hover:bg-blue-700 transition-colors text-sm">
-                구매하기
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
+async function loadMore() {
+  state.loadingMore = true;
+  render();
 
-  const 상세페이지_로딩 = `
-    <div class="min-h-screen bg-gray-50">
-      <header class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto px-4 py-4">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center space-x-3">
-              <button onclick="window.history.back()" class="p-2 text-gray-700 hover:text-gray-900 transition-colors">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-                </svg>
-              </button>
-              <h1 class="text-lg font-bold text-gray-900">상품 상세</h1>
-            </div>
-            <div class="flex items-center space-x-2">
-              <!-- 장바구니 아이콘 -->
-              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-      <main class="max-w-md mx-auto px-4 py-4">
-        <div class="py-20 bg-gray-50 flex items-center justify-center">
-          <div class="text-center">
-            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-            <p class="text-gray-600">상품 정보를 불러오는 중...</p>
-          </div>
-        </div>
-      </main>
-      <footer class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
-          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
-        </div>
-      </footer>
-    </div>
-  `;
+  const nextPage = state.page + 1;
+  const { products: newProducts, pagination } = await productService.getProducts({
+    limit: state.limit,
+    page: nextPage,
+    search: state.search,
+    category1: state.category1,
+    category2: state.category2,
+  });
 
-  const 상세페이지_로딩완료 = `
-    <div class="min-h-screen bg-gray-50">
-      <header class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto px-4 py-4">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center space-x-3">
-              <button onclick="window.history.back()" class="p-2 text-gray-700 hover:text-gray-900 transition-colors">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-                </svg>
-              </button>
-              <h1 class="text-lg font-bold text-gray-900">상품 상세</h1>
-            </div>
-            <div class="flex items-center space-x-2">
-              <!-- 장바구니 아이콘 -->
-              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-                </svg>
-                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
-                  1
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-      <main class="max-w-md mx-auto px-4 py-4">
-        <!-- 브레드크럼 -->
-        <nav class="mb-4">
-          <div class="flex items-center space-x-2 text-sm text-gray-600">
-            <a href="/" data-link="" class="hover:text-blue-600 transition-colors">홈</a>
-            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-            </svg>
-            <button class="breadcrumb-link" data-category1="생활/건강">
-              생활/건강
-            </button>
-            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-            </svg>
-            <button class="breadcrumb-link" data-category2="생활용품">
-              생활용품
-            </button>
-          </div>
-        </nav>
-        <!-- 상품 상세 정보 -->
-        <div class="bg-white rounded-lg shadow-sm mb-6">
-          <!-- 상품 이미지 -->
-          <div class="p-4">
-            <div class="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
-              <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover product-detail-image">
-            </div>
-            <!-- 상품 정보 -->
-            <div>
-              <p class="text-sm text-gray-600 mb-1"></p>
-              <h1 class="text-xl font-bold text-gray-900 mb-3">PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장</h1>
-              <!-- 평점 및 리뷰 -->
-              <div class="flex items-center mb-3">
-                <div class="flex items-center">
-                  <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
-                  </svg>
-                  <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
-                  </svg>
-                  <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
-                  </svg>
-                  <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
-                  </svg>
-                  <svg class="w-4 h-4 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
-                  </svg>
-                </div>
-                <span class="ml-2 text-sm text-gray-600">4.0 (749개 리뷰)</span>
-              </div>
-              <!-- 가격 -->
-              <div class="mb-4">
-                <span class="text-2xl font-bold text-blue-600">220원</span>
-              </div>
-              <!-- 재고 -->
-              <div class="text-sm text-gray-600 mb-4">
-                재고 107개
-              </div>
-              <!-- 설명 -->
-              <div class="text-sm text-gray-700 leading-relaxed mb-6">
-                PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장에 대한 상세 설명입니다. 브랜드의 우수한 품질을 자랑하는 상품으로, 고객 만족도가 높은 제품입니다.
-              </div>
-            </div>
-          </div>
-          <!-- 수량 선택 및 액션 -->
-          <div class="border-t border-gray-200 p-4">
-            <div class="flex items-center justify-between mb-4">
-              <span class="text-sm font-medium text-gray-900">수량</span>
-              <div class="flex items-center">
-                <button id="quantity-decrease" class="w-8 h-8 flex items-center justify-center border border-gray-300 
-                   rounded-l-md bg-gray-50 hover:bg-gray-100">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
-                  </svg>
-                </button>
-                <input type="number" id="quantity-input" value="1" min="1" max="107" class="w-16 h-8 text-center text-sm border-t border-b border-gray-300 
-                  focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                <button id="quantity-increase" class="w-8 h-8 flex items-center justify-center border border-gray-300 
-                   rounded-r-md bg-gray-50 hover:bg-gray-100">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <!-- 액션 버튼 -->
-            <button id="add-to-cart-btn" data-product-id="85067212996" class="w-full bg-blue-600 text-white py-3 px-4 rounded-md 
-                 hover:bg-blue-700 transition-colors font-medium">
-              장바구니 담기
-            </button>
-          </div>
-        </div>
-        <!-- 상품 목록으로 이동 -->
-        <div class="mb-6">
-          <button class="block w-full text-center bg-gray-100 text-gray-700 py-3 px-4 rounded-md 
-            hover:bg-gray-200 transition-colors go-to-product-list">
-            상품 목록으로 돌아가기
-          </button>
-        </div>
-        <!-- 관련 상품 -->
-        <div class="bg-white rounded-lg shadow-sm">
-          <div class="p-4 border-b border-gray-200">
-            <h2 class="text-lg font-bold text-gray-900">관련 상품</h2>
-            <p class="text-sm text-gray-600">같은 카테고리의 다른 상품들</p>
-          </div>
-          <div class="p-4">
-            <div class="grid grid-cols-2 gap-3 responsive-grid">
-              <div class="bg-gray-50 rounded-lg p-3 related-product-card cursor-pointer" data-product-id="86940857379">
-                <div class="aspect-square bg-white rounded-md overflow-hidden mb-2">
-                  <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover" loading="lazy">
-                </div>
-                <h3 class="text-sm font-medium text-gray-900 mb-1 line-clamp-2">샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이</h3>
-                <p class="text-sm font-bold text-blue-600">230원</p>
-              </div>
-              <div class="bg-gray-50 rounded-lg p-3 related-product-card cursor-pointer" data-product-id="82094468339">
-                <div class="aspect-square bg-white rounded-md overflow-hidden mb-2">
-                  <img src="https://shopping-phinf.pstatic.net/main_8209446/82094468339.4.jpg" alt="실리카겔 50g 습기제거제 제품 /산업 신발 의류 방습제" class="w-full h-full object-cover" loading="lazy">
-                </div>
-                <h3 class="text-sm font-medium text-gray-900 mb-1 line-clamp-2">실리카겔 50g 습기제거제 제품 /산업 신발 의류 방습제</h3>
-                <p class="text-sm font-bold text-blue-600">280원</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-      <footer class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
-          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
-        </div>
-      </footer>
-    </div>
-  `;
+  state.products = [...state.products, ...newProducts];
+  state.total = pagination.total;
+  state.page = nextPage;
+  state.loadingMore = false;
+  render();
+}
 
-  const _404_ = `
-    <main class="max-w-md mx-auto px-4 py-4">
-      <div class="text-center my-4 py-20 shadow-md p-6 bg-white rounded-lg">
-      <svg viewBox="0 0 320 180" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#4285f4;stop-opacity:1" />
-            <stop offset="100%" style="stop-color:#1a73e8;stop-opacity:1" />
-          </linearGradient>
-          <filter id="softShadow" x="-50%" y="-50%" width="200%" height="200%">
-            <feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000000" flood-opacity="0.1"/>
-          </filter>
-        </defs>
-        
-        <!-- 404 Numbers -->
-        <text x="160" y="85" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="48" font-weight="600" fill="url(#blueGradient)" text-anchor="middle">404</text>
-        
-        <!-- Icon decoration -->
-        <circle cx="80" cy="60" r="3" fill="#e8f0fe" opacity="0.8"/>
-        <circle cx="240" cy="60" r="3" fill="#e8f0fe" opacity="0.8"/>
-        <circle cx="90" cy="45" r="2" fill="#4285f4" opacity="0.5"/>
-        <circle cx="230" cy="45" r="2" fill="#4285f4" opacity="0.5"/>
-        
-        <!-- Message -->
-        <text x="160" y="110" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="400" fill="#5f6368" text-anchor="middle">페이지를 찾을 수 없습니다</text>
-        
-        <!-- Subtle bottom accent -->
-        <rect x="130" y="130" width="60" height="2" rx="1" fill="url(#blueGradient)" opacity="0.3"/>
-      </svg>
-      
-      <a href="/" data-link class="inline-block px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">홈으로</a>
-    </div>
-    </main>
-  `;
+function render() {
+  document.body.querySelector("#root").innerHTML = HomePage(state);
+  attachEventListeners();
+  updateCartBadge();
+}
 
-  document.body.innerHTML = `
-    ${상품목록_레이아웃_로딩}
-    <br />
-    ${상품목록_레이아웃_로딩완료}
-    <br />
-    ${상품목록_레이아웃_카테고리_1Depth}
-    <br />
-    ${상품목록_레이아웃_카테고리_2Depth}
-    <br />
-    ${토스트}
-    <br />
-    ${장바구니_비어있음}
-    <br />
-    ${장바구니_선택없음}
-    <br />
-    ${장바구니_선택있음}
-    <br />
-    ${상세페이지_로딩}
-    <br />
-    ${상세페이지_로딩완료}
-    <br />
-    ${_404_}
-  `;
+async function main() {
+  // 초깃값 렌더링은 컨트롤러/라우터가 담당
+  router.handle(window.location.pathname);
 }
 
-// 애플리케이션 시작
 if (import.meta.env.MODE !== "test") {
   enableMocking().then(main);
 } else {
   main();
 }
+
+function navigate(path) {
+  router.navigate(path);
+}
+
+// 라우트 등록 (컨트롤러 활용)
+router.add(router.BASE_PATH, () => {
+  homePageController.init();
+});
+router.add(router.BASE_PATH + "/product/:id", async ({ id }) => {
+  await productDetailController.show(id);
+});
+router.setNotFound(() => {
+  document.querySelector("#root").innerHTML = NotFoundPage();
+});
diff --git a/src/mocks/browser.js b/src/mocks/browser.js
index be3dedca2..b19b86c07 100644
--- a/src/mocks/browser.js
+++ b/src/mocks/browser.js
@@ -3,3 +3,17 @@ import { handlers } from "./handlers";
 
 // MSW 워커 설정
 export const worker = setupWorker(...handlers);
+
+const basePath = import.meta.env.PROD ? "/front_6th_chapter1-1" : "";
+
+// Worker start 옵션을 export하여 main.js에서 사용
+export const workerOptions = import.meta.env.PROD
+  ? {
+      serviceWorker: {
+        url: `${basePath}/mockServiceWorker.js`,
+      },
+      onUnhandledRequest: "bypass",
+    }
+  : {
+      onUnhandledRequest: "bypass",
+    };
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
new file mode 100644
index 000000000..2a347ba7d
--- /dev/null
+++ b/src/pages/HomePage.js
@@ -0,0 +1,207 @@
+import ProductCard from "../components/ProductCard.js";
+import { LoadingCardList } from "../components/LoadingCard.js";
+import router from "../router/Router.js";
+
+export default function HomePage({
+  products = [],
+  total = 0,
+  loading = false,
+  loadingMore = false,
+  categories = {},
+  category1 = "",
+  category2 = "",
+}) {
+  return 상품목록_레이아웃_로딩(products, total, loading, loadingMore, categories, category1, category2);
+}
+
+const 상품목록_레이아웃_로딩 = (products, total, loading, loadingMore, categories, category1, category2) => `
+    <div class="min-h-screen bg-gray-50">
+      <header class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-md mx-auto px-4 py-4">
+          <div class="flex items-center justify-between">
+            <h1 class="text-xl font-bold text-gray-900">
+              <a href="${router.BASE_PATH}" data-link="">쇼핑몰</a>
+            </h1>
+            <div class="flex items-center space-x-2">
+              <!-- 장바구니 아이콘 -->
+              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+      <main class="max-w-md mx-auto px-4 py-4">
+        <!-- 검색 및 필터 -->
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
+          <!-- 검색창 -->
+          <div class="mb-4">
+            <div class="relative">
+              <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
+                          focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                </svg>
+              </div>
+            </div>
+          </div>
+          <!-- 필터 옵션 -->
+          <div class="space-y-3">
+            <!-- 카테고리 필터 -->
+            <div class="space-y-2">
+              <!-- 브레드크럼 -->
+              <div class="flex items-center gap-2">
+                <label class="text-sm text-gray-600">카테고리:</label>
+                ${breadcrumb(category1, category2)}
+              </div>
+              <!-- 1depth -->
+              ${
+                category1
+                  ? ""
+                  : `<div class="flex flex-wrap gap-2">
+                ${
+                  loading
+                    ? '<div class="text-sm text-gray-500 italic">카테고리 로딩 중...</div>'
+                    : renderCategory1(categories, category1)
+                }
+                </div>`
+              }
+              <!-- 2depth -->
+              ${
+                category1
+                  ? `<div class="flex flex-wrap gap-2 mt-2">
+                       ${renderCategory2(categories, category1, category2)}
+                     </div>`
+                  : ""
+              }
+            </div>
+            <!-- 기존 필터들 -->
+            <div class="flex gap-2 items-center justify-between">
+              <!-- 페이지당 상품 수 -->
+              <div class="flex items-center gap-2">
+                <label class="text-sm text-gray-600">개수:</label>
+                <select id="limit-select"
+                        class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+                  <option value="10">
+                    10개
+                  </option>
+                  <option value="20" selected="">
+                    20개
+                  </option>
+                  <option value="50">
+                    50개
+                  </option>
+                  <option value="100">
+                    100개
+                  </option>
+                </select>
+              </div>
+              <!-- 정렬 -->
+              <div class="flex items-center gap-2">
+                <label class="text-sm text-gray-600">정렬:</label>
+                <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
+                             focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+                  <option value="price_asc" selected="">가격 낮은순</option>
+                  <option value="price_desc">가격 높은순</option>
+                  <option value="name_asc">이름순</option>
+                  <option value="name_desc">이름 역순</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 상품 목록 -->
+        <div class="mb-6">
+          <div>
+            ${
+              loading
+                ? ""
+                : `
+            <div class="mb-4 text-sm text-gray-600">
+              <span>총 </span><span class="font-medium text-gray-900">${total}</span><span>개의 상품</span>
+            </div>
+            `
+            }
+            <!-- 상품 그리드 -->
+            <div class="grid grid-cols-2 gap-4 mb-6" id="products-grid">
+              ${
+                loading
+                  ? LoadingCardList /* 초기 로딩 */
+                  : products.map(ProductCard).join("") + (loadingMore ? LoadingCardList : "") /* 추가 로딩 */
+              }
+            </div>
+            ${
+              loadingMore /* 인디케이터 */
+                ? `<div class="text-center py-4">
+                     <div class="inline-flex items-center">
+                       <svg class="animate-spin h-5 w-5 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24">
+                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                         <path class="opacity-75" fill="currentColor"
+                               d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                       </svg>
+                       <span class="text-sm text-gray-600">상품을 불러오는 중...</span>
+                     </div>
+                   </div>`
+                : ""
+            }
+          </div>
+        </div>
+      </main>
+      <footer class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
+          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
+        </div>
+      </footer>
+    </div>
+  `;
+
+const renderCategory1 = (cats, selected) =>
+  Object.keys(cats)
+    .map(
+      (c) => `<button data-category1="${c}"
+            class="category1-filter-btn px-3 py-2 text-sm rounded-md border
+            ${
+              selected === c
+                ? "bg-blue-100 border-blue-300 text-blue-800"
+                : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50"
+            }">
+            ${c}
+          </button>`,
+    )
+    .join("");
+
+const renderCategory2 = (cats, c1, c2) =>
+  c1 && cats[c1]
+    ? Object.keys(cats[c1])
+        .map(
+          (c) => `<button data-category1="${c1}" data-category2="${c}"
+                  class="category2-filter-btn px-3 py-2 text-sm rounded-md border
+                  ${
+                    c2 === c
+                      ? "bg-blue-100 border-blue-300 text-blue-800"
+                      : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50"
+                  }">
+                  ${c}
+                </button>`,
+        )
+        .join("")
+    : "";
+
+const breadcrumb = (c1, c2) => {
+  let html = '<button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button>';
+  if (c1) {
+    html += `<span class="text-xs text-gray-500">&gt;</span>
+             <button data-breadcrumb="category1" data-category1="${c1}"
+               class="text-xs hover:text-blue-800 hover:underline">${c1}</button>`;
+  }
+  if (c2) {
+    html += `<span class="text-xs text-gray-500">&gt;</span>
+             <span class="text-xs text-gray-600 cursor-default">${c2}</span>`;
+  }
+  return html;
+};
diff --git a/src/pages/NotFoundPage.js b/src/pages/NotFoundPage.js
new file mode 100644
index 000000000..5ae48e2e0
--- /dev/null
+++ b/src/pages/NotFoundPage.js
@@ -0,0 +1,38 @@
+import router from "../router/Router.js";
+
+export default function NotFoundPage() {
+  return `
+      <main class="max-w-md mx-auto px-4 py-4">
+        <div class="text-center my-4 py-20 shadow-md p-6 bg-white rounded-lg">
+        <svg viewBox="0 0 320 180" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" style="stop-color:#4285f4;stop-opacity:1" />
+              <stop offset="100%" style="stop-color:#1a73e8;stop-opacity:1" />
+            </linearGradient>
+            <filter id="softShadow" x="-50%" y="-50%" width="200%" height="200%">
+              <feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000000" flood-opacity="0.1"/>
+            </filter>
+          </defs>
+  
+          <!-- 404 Numbers -->
+          <text x="160" y="85" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="48" font-weight="600" fill="url(#blueGradient)" text-anchor="middle">404</text>
+  
+          <!-- Icon decoration -->
+          <circle cx="80" cy="60" r="3" fill="#e8f0fe" opacity="0.8"/>
+          <circle cx="240" cy="60" r="3" fill="#e8f0fe" opacity="0.8"/>
+          <circle cx="90" cy="45" r="2" fill="#4285f4" opacity="0.5"/>
+          <circle cx="230" cy="45" r="2" fill="#4285f4" opacity="0.5"/>
+  
+          <!-- Message -->
+          <text x="160" y="110" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="400" fill="#5f6368" text-anchor="middle">페이지를 찾을 수 없습니다</text>
+  
+          <!-- Subtle bottom accent -->
+          <rect x="130" y="130" width="60" height="2" rx="1" fill="url(#blueGradient)" opacity="0.3"/>
+        </svg>
+  
+        <a href="${router.BASE_PATH}" data-link class="inline-block px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">홈으로</a>
+      </div>
+      </main>
+    `;
+}
diff --git a/src/pages/ProductDetailPage.js b/src/pages/ProductDetailPage.js
new file mode 100644
index 000000000..a9ca2803b
--- /dev/null
+++ b/src/pages/ProductDetailPage.js
@@ -0,0 +1,103 @@
+export default function ProductDetailPage({ loading = true, product = null, related = [] }) {
+  if (loading || !product) {
+    return `
+    <div class="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+    </div>`;
+  }
+
+  return `
+  <div class="min-h-screen bg-gray-50">
+    <!-- 헤더 -->
+    <header class="bg-white shadow-sm sticky top-0 z-40">
+      <div class="max-w-md mx-auto px-4 py-4 flex items-center space-x-3">
+        <button onclick="history.back()" class="p-2 text-gray-700 hover:text-gray-900 transition-colors">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+          </svg>
+        </button>
+        <h1 class="text-lg font-bold text-gray-900">상품 상세</h1>
+      </div>
+    </header>
+
+    <main class="max-w-md mx-auto px-4 py-4">
+      <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
+        <div class="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
+          <img src="${product.image}" alt="${product.title}" class="w-full h-full object-cover">
+        </div>
+        <h1 class="text-xl font-bold text-gray-900 mb-3">${product.title}</h1>
+
+        <!-- 평점 및 리뷰 수 -->
+        <div class="flex items-center mb-3">
+          <div class="flex items-center">
+            ${[1, 2, 3, 4, 5]
+              .map(
+                (n) => `<svg class="w-4 h-4 ${
+                  product.rating >= n ? "text-yellow-400" : "text-gray-300"
+                }" fill="currentColor" viewBox="0 0 20 20">
+                          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
+                       </svg>`,
+              )
+              .join("")}
+          </div>
+          <span class="ml-2 text-sm text-gray-600">${product.rating.toFixed(1)} (${product.reviewCount}개 리뷰)</span>
+        </div>
+
+        <p class="text-2xl font-bold text-blue-600 mb-4">${Number(product.lprice).toLocaleString()}원</p>
+
+        <!-- 재고 -->
+        <div class="text-sm text-gray-600 mb-4">재고 ${product.stock}개</div>
+
+        <div class="flex items-center justify-between mb-4">
+          <span class="text-sm font-medium text-gray-900">수량</span>
+          <div class="flex items-center">
+            <button id="quantity-decrease" class="w-8 h-8 flex items-center justify-center border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
+            </button>
+            <input id="quantity-input" type="number" value="1" min="1" class="w-16 h-8 text-center text-sm border-t border-b border-gray-300">
+            <button id="quantity-increase" class="w-8 h-8 flex items-center justify-center border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+            </button>
+          </div>
+        </div>
+        <button id="add-to-cart-btn" data-product-id="${product.productId}"
+          class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition-colors font-medium">
+          장바구니 담기
+        </button>
+      </div>
+
+      <!-- 목록 돌아가기 -->
+      <div class="mb-6">
+        <button class="block w-full text-center bg-gray-100 text-gray-700 py-3 px-4 rounded-md hover:bg-gray-200 transition-colors go-to-product-list">
+          상품 목록으로 돌아가기
+        </button>
+      </div>
+
+      ${
+        related && related.length
+          ? `
+      <!-- 관련 상품 -->
+      <div class="bg-white rounded-lg shadow-sm">
+        <div class="p-4 border-b border-gray-200">
+          <h2 class="text-lg font-bold text-gray-900">관련 상품</h2>
+        </div>
+        <div class="p-4 grid grid-cols-2 gap-3">
+          ${related
+            .map(
+              (r) => `
+            <div class="bg-gray-50 rounded-lg p-3 related-product-card cursor-pointer" data-product-id="${r.productId}">
+              <div class="aspect-square bg-white rounded-md overflow-hidden mb-2">
+                <img src="${r.image}" alt="${r.title}" class="w-full h-full object-cover" loading="lazy">
+              </div>
+              <h3 class="text-sm font-medium text-gray-900 mb-1 line-clamp-2">${r.title}</h3>
+              <p class="text-sm font-bold text-blue-600">${Number(r.lprice).toLocaleString()}원</p>
+            </div>`,
+            )
+            .join("")}
+        </div>
+      </div>`
+          : ""
+      }
+    </main>
+  </div>`;
+}
diff --git a/src/router/Router.js b/src/router/Router.js
new file mode 100644
index 000000000..26253ce11
--- /dev/null
+++ b/src/router/Router.js
@@ -0,0 +1,92 @@
+class Router {
+  constructor() {
+    this.routes = [];
+    this.notFoundHandler = null;
+
+    // BASE_PATH 설정 (프로덕션 환경에서 서브패스 지원)
+    this.BASE_PATH = import.meta.env.PROD ? "/front_6th_chapter1-1" : "";
+
+    // 브라우저 뒤로가기/앞으로가기 처리
+    window.addEventListener("popstate", () => {
+      const appPath = this.getAppPath(window.location.pathname);
+      this.handle(appPath);
+    });
+  }
+
+  // 전체 경로에서 앱 경로 추출
+  getAppPath(fullPath = window.location.pathname) {
+    return fullPath.startsWith(this.BASE_PATH) ? fullPath.slice(this.BASE_PATH.length) || "/" : fullPath;
+  }
+
+  // 앱 경로를 전체 경로로 변환
+  getFullPath(appPath) {
+    return this.BASE_PATH + appPath;
+  }
+
+  // 라우트 등록: 패턴(예: '/product/:id')과 핸들러 함수
+  add(pattern, handler) {
+    this.routes.push({ pattern, handler });
+  }
+
+  // 404(매칭 안됨) 핸들러 등록
+  setNotFound(handler) {
+    this.notFoundHandler = handler;
+  }
+
+  // 내비게이션 (pushState 후 핸들)
+  navigate(appPath) {
+    const currentAppPath = this.getAppPath();
+    if (currentAppPath === appPath) return;
+
+    const fullPath = this.getFullPath(appPath);
+    history.pushState({}, "", fullPath);
+    this.handle(appPath);
+  }
+
+  // 현재 경로 처리 (앱 경로 기준)
+  handle(appPath) {
+    for (const { pattern, handler } of this.routes) {
+      const params = this.match(pattern, appPath);
+      if (params) {
+        handler(params);
+        return;
+      }
+    }
+    // 매칭 실패 시 notFound
+    if (this.notFoundHandler) this.notFoundHandler();
+  }
+
+  // 패턴 매칭 (간단한 ':' 파라미터 지원)
+  match(pattern, path) {
+    const patternParts = pattern.split("/").filter(Boolean);
+    const pathParts = path.split("/").filter(Boolean);
+
+    if (patternParts.length !== pathParts.length) return null;
+
+    const params = {};
+    for (let i = 0; i < patternParts.length; i++) {
+      const pp = patternParts[i];
+      const cp = pathParts[i];
+      if (pp.startsWith(":")) {
+        params[pp.slice(1)] = decodeURIComponent(cp);
+      } else if (pp !== cp) {
+        return null;
+      }
+    }
+    return params;
+  }
+
+  // 현재 앱 경로 가져오기
+  getCurrentAppPath() {
+    return this.getAppPath();
+  }
+
+  // 현재 전체 경로 가져오기
+  getCurrentFullPath() {
+    return window.location.pathname;
+  }
+}
+
+// 싱글톤 인스턴스 export
+const router = new Router();
+export default router;
diff --git a/src/services/CartService.js b/src/services/CartService.js
new file mode 100644
index 000000000..d559881f6
--- /dev/null
+++ b/src/services/CartService.js
@@ -0,0 +1,109 @@
+import { showToast } from "../components/Toast.js";
+
+class CartService {
+  constructor() {
+    this.cart = {};
+    this.loadFromStorage();
+  }
+
+  // 로컬스토리지에서 장바구니 불러오기
+  loadFromStorage() {
+    try {
+      const stored = JSON.parse(localStorage.getItem("shopping_cart") || "{}");
+      // 기존 객체 내용을 모두 제거하고, 저장된 데이터를 병합하여
+      // cart 객체의 참조를 유지한다.
+      Object.keys(this.cart).forEach((k) => delete this.cart[k]);
+      Object.assign(this.cart, stored);
+    } catch {
+      Object.keys(this.cart).forEach((k) => delete this.cart[k]);
+    }
+  }
+
+  // 로컬스토리지에 저장
+  saveToStorage() {
+    localStorage.setItem("shopping_cart", JSON.stringify(this.cart));
+  }
+
+  // 장바구니 배지 업데이트 (UI)
+  updateBadge() {
+    const btn = document.querySelector("#cart-icon-btn");
+    if (!btn) return;
+    btn.querySelector("span")?.remove();
+
+    const count = Object.keys(this.cart).length;
+    if (count) {
+      const badge = document.createElement("span");
+      badge.textContent = count;
+      badge.className =
+        "absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center";
+      btn.appendChild(badge);
+    }
+  }
+
+  // 장바구니 추가
+  add(product, qty = 1) {
+    const { productId } = product;
+    if (this.cart[productId]) this.cart[productId].quantity += qty;
+    else this.cart[productId] = { product, quantity: qty };
+
+    // 디버그 로그 제거
+
+    this.saveToStorage();
+    this.updateBadge();
+    showToast("장바구니에 추가되었습니다", "success");
+  }
+
+  // 수량 변경 (절대 값 설정)
+  setQuantity(productId, quantity) {
+    if (!this.cart[productId]) return;
+    if (quantity < 1) return;
+    this.cart[productId].quantity = quantity;
+    this.saveToStorage();
+    this.updateBadge();
+  }
+
+  // 수량 증가
+  increase(productId) {
+    if (!this.cart[productId]) return;
+    this.cart[productId].quantity += 1;
+    this.saveToStorage();
+    this.updateBadge();
+  }
+
+  // 수량 감소
+  decrease(productId) {
+    if (!this.cart[productId]) return;
+    if (this.cart[productId].quantity === 1) return;
+    this.cart[productId].quantity -= 1;
+    this.saveToStorage();
+    this.updateBadge();
+  }
+
+  // 항목 제거
+  remove(productId) {
+    if (!this.cart[productId]) return;
+    delete this.cart[productId];
+    this.saveToStorage();
+    this.updateBadge();
+  }
+
+  // 전체 비우기
+  clear() {
+    Object.keys(this.cart).forEach((k) => delete this.cart[k]);
+    this.saveToStorage();
+    this.updateBadge();
+  }
+
+  // 장바구니 객체 가져오기 (참조)
+  getCart() {
+    return this.cart;
+  }
+
+  // 항목 수 반환
+  getCount() {
+    return Object.keys(this.cart).length;
+  }
+}
+
+const cartService = new CartService();
+export default cartService;
diff --git a/src/services/InfiniteScrollManager.js b/src/services/InfiniteScrollManager.js
new file mode 100644
index 000000000..a130272e9
--- /dev/null
+++ b/src/services/InfiniteScrollManager.js
@@ -0,0 +1,36 @@
+class InfiniteScrollManager {
+  constructor(callback, options = {}) {
+    this.callback = callback;
+    this.threshold = options.threshold ?? 200; // px before bottom
+    this.loading = false;
+    this.attached = false;
+    this.onScroll = this.onScroll.bind(this);
+  }
+
+  attach() {
+    if (this.attached) return;
+    window.addEventListener("scroll", this.onScroll);
+    this.attached = true;
+  }
+
+  detach() {
+    if (!this.attached) return;
+    window.removeEventListener("scroll", this.onScroll);
+    this.attached = false;
+  }
+
+  async onScroll() {
+    if (this.loading) return;
+    const nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - this.threshold;
+    if (nearBottom) {
+      this.loading = true;
+      try {
+        await this.callback();
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
+}
+
+export default InfiniteScrollManager;
diff --git a/src/services/ProductService.js b/src/services/ProductService.js
new file mode 100644
index 000000000..4229b4b8e
--- /dev/null
+++ b/src/services/ProductService.js
@@ -0,0 +1,22 @@
+import * as productApi from "../api/productApi.js";
+
+class ProductService {
+  // 상품 목록 조회
+  async getProducts(params = {}) {
+    return await productApi.getProducts(params);
+  }
+
+  // 단일 상품 조회
+  async getProduct(productId) {
+    return await productApi.getProduct(productId);
+  }
+
+  // 카테고리 목록 조회
+  async getCategories() {
+    return await productApi.getCategories();
+  }
+}
+
+// 애플리케이션 전역에서 공유되는 싱글톤 인스턴스
+const productService = new ProductService();
+export default productService;
diff --git a/src/setupTests.js b/src/setupTests.js
index d72b8905a..659279d1e 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -4,7 +4,7 @@ import { afterAll, beforeAll } from "vitest";
 import { server } from "./__tests__/mockServerHandler.js";
 
 configure({
-  asyncUtilTimeout: 5000,
+  asyncUtilTimeout: 1000,
 });
 
 beforeAll(() => {
diff --git a/vite.config.js b/vite.config.js
index 2eef1c44e..5d987e62c 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,19 @@
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
+  base: process.env.NODE_ENV === "production" ? "/front_6th_chapter1-1/" : "/",
+
+  build: {
+    outDir: "dist",
+    assetsDir: "assets",
+    sourcemap: false,
+    rollupOptions: {
+      output: {
+        manualChunks: undefined,
+      },
+    },
+  },
+
   test: {
     globals: true,
     environment: "jsdom",