diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 0000000000..6f877efb53
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,58 @@
+## 📦 장바구니 미션
+
+이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 합니다.
+
+### 1단계
+
+- 클라이언트 상태를 효과적으로 모델링하고 관리할 수 있다.
+- Jest, React Testing Library(RTL)를 활용하여 주요 기능에 대한 테스트를 작성할 수 있다.
+
+## 🕵️ 셀프 리뷰(Self-Review)
+
+### 제출 전 체크 리스트
+
+- [ ] 기능 요구 사항을 모두 구현했고, 정상적으로 동작하는지 확인했나요?
+- [ ] RTL 테스트 케이스를 모두 작성했나요?
+- [ ] 배포한 데모 페이지에 정상적으로 접근할 수 있나요?
+
+  - 배포 링크 기입: **\_\_**
+
+- [ ] 리뷰어가 장바구니 추가를 쉽게 할 수 있도록 Curl 명령어를 DM 으로 전달해주세요.
+
+  ```
+  curl -X 'POST' \
+  '<url>' \
+  -H 'accept: */*' \
+  -H 'Authorization: Basic <토큰>' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "productId": 1,
+  "quantity": 1
+  }'
+  ```
+
+### 리뷰 요청 & 논의하고 싶은 내용
+
+### 1) 상태 설계 의도
+
+### 2) 이번 단계에서 가장 많이 고민했던 문제와 해결 과정에서 배운 점
+
+### 3) 이번 리뷰를 통해 논의하고 싶은 부분
+
+---
+
+## ✅ 리뷰어 체크 포인트
+
+<!-- 리뷰어가 이 PR을 검토할 때 중점적으로 확인할 사항입니다.
+코드의 완성도뿐만 아니라, 리뷰이가 구현 과정에서 어떤 고민과 결정을 하며 학습했는지도 함께 고려해 주세요. -->
+
+### 1. 클라이언트 상태관리
+
+- 원본상태/파생상태를 적절히 구분하여 선언하였나요?
+- React state 를 불필요하게 선언한 부분은 없나요?
+- 상태 관리 로직의 책임이 적절히 응집/분리되었나요? (ex. reducer, hook, Context)
+
+### 2. MSW/Test
+
+- 주요 기능을 적절히 정의하였나요?
+- 주요 기능/예외에 대한 테스트가 충분히 이루어졌나요?
diff --git a/.gitignore b/.gitignore
index a547bf36d8..3ece3c8a78 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env*
\ No newline at end of file
diff --git a/README.md b/README.md
index 16cbc81937..5a8b9970ee 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,18 @@
-# react-shopping-cart
+# 1단계.
+
+react-shopping-cart
+
+# 기능 요구 명세서
+
+- [x] /cart-items API를 호출하여 장바구니 상품 데이터를 불러온다.
+- [x]불러온 데이터를 기반으로 클라이언트 상태를 구성하고 관리한다.
+  - 개별 상품의 선택 여부, 결제 금액, 배송비 등의 상태를 관리한다.
+- [x]상품 선택에 따른 결제 금액, 배송비 등의 동적인 변경 사항을 처리한다.
+  - 진입 시, 전체 선택 되어 있는 것이 디폴트이다.
+  - 상품 선택/해제 시 결제 금액을 동적으로 변경한다.
+  - 결제 금액이 10만원 이상일 경우 배송비는 무료이다.
+- [x] 장바구니 상품의 수량을 변경할 수 있다.
+- [x] 장바구니에 담긴 상품을 제거할 수 있다.
+
+- [x] 장바구니에 상품이 없을 시 UI 보여줌
+- [x] 주문을 완료하면 주문 확인 페이지로 라우팅
diff --git a/__test__/cart.test.tsx b/__test__/cart.test.tsx
new file mode 100644
index 0000000000..448bc2ccc2
--- /dev/null
+++ b/__test__/cart.test.tsx
@@ -0,0 +1,121 @@
+import { MemoryRouter } from 'react-router';
+import CartPage from '../src/pages/CartPage/CartPage';
+import { CartProvider } from '../src/shared/context/CartProvider';
+import { screen, render, within, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it } from 'vitest';
+import { DELIVERY_FEE, DELIVERY_FEE_THRESHOLD } from '../src/features/cart/constants/orderPriceSummary';
+import { server } from '../src/mocks/server';
+import { http, HttpResponse } from 'msw';
+
+const BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+function renderCartPage() {
+  return render(
+    <MemoryRouter initialEntries={['/']}>
+      <CartProvider>
+        <CartPage />
+      </CartProvider>
+    </MemoryRouter>
+  );
+}
+
+describe('빈 장바구니 테스트', () => {
+  it('장바구니에 상품이 없으면 EmptyCartItemUI가 보인다', async () => {
+    server.use(
+      http.get(`${BASE_URL}/cart-items*`, () => {
+        return HttpResponse.json({ content: [] });
+      })
+    );
+
+    renderCartPage();
+
+    const emptyMessage = await screen.findByText('장바구니에 담은 상품이 없습니다.');
+    expect(emptyMessage).toBeInTheDocument();
+  });
+});
+
+describe('장바구니에 상품이 1개 이상일 때의 Vitest + RTL 테스트', () => {
+  beforeEach(() => {
+    renderCartPage();
+  });
+
+  it('장바구니가 1개 이상일 때 장바구니 페이지에 장바구니 카드들이 잘 렌더링된다.', async () => {
+    const cartItemCards = await screen.findAllByTestId('cart-item-card');
+    expect(cartItemCards.length).toBeGreaterThan(0);
+  });
+
+  it('장바구니에서 체크박스를 누르면 배송비를 고려하여 해당 금액이 반영된다.', async () => {
+    const user = userEvent.setup();
+
+    const cartItemCards = await screen.findAllByTestId('cart-item-card');
+    const allSelectCheckbox = screen.getByLabelText('전체 선택');
+
+    await user.click(allSelectCheckbox);
+
+    const firstCard = cartItemCards[0];
+    const checkbox = within(firstCard).getByRole('checkbox');
+
+    const priceElement = within(firstCard).getByTestId('card-item-price');
+    const expectedPriceText = priceElement.textContent?.trim() || '';
+
+    // 쉼표 제거 후 숫자 변환
+    const itemPrice = parseInt(expectedPriceText.replace(/,/g, ''), 10);
+
+    const deliveryFeeElement = screen.getByTestId('delivery-fee');
+    const expectedDeliveryFeeText = deliveryFeeElement.textContent?.trim() || '';
+
+    let expectedTotal = itemPrice;
+    if (itemPrice > DELIVERY_FEE_THRESHOLD) {
+      expect(expectedDeliveryFeeText).toBe('0원');
+    } else {
+      expect(expectedDeliveryFeeText).toContain('3,000원');
+      expectedTotal += DELIVERY_FEE;
+    }
+
+    const totalPurchasePrice = screen.getByTestId('total-purchase-price');
+
+    await user.click(checkbox);
+
+    await waitFor(() => {
+      expect(totalPurchasePrice.textContent).toContain(expectedTotal.toLocaleString() + '원');
+    });
+  });
+
+  it('장바구니에서 상품을 삭제하면 해당 상품이 화면에서 사라진다.', async () => {
+    const user = userEvent.setup();
+
+    const cartItemCards = await screen.findAllByTestId('cart-item-card');
+    const firstCard = cartItemCards[0];
+
+    const deleteButton = within(firstCard).getByRole('button', { name: '삭제' });
+
+    await user.click(deleteButton);
+
+    const updatedCartItemCards = await screen.queryAllByTestId('cart-item-card');
+
+    await waitFor(() => {
+      expect(updatedCartItemCards.length).toBe(cartItemCards.length - 1);
+    });
+  });
+
+  it('장바구니에서 + 버튼을 누르면 현재 수량보다 1 증가한다.', async () => {
+    const user = userEvent.setup();
+
+    const cartItemCards = await screen.findAllByTestId('cart-item-card');
+
+    const firstCard = cartItemCards[0];
+
+    const quantityPlusButton = within(firstCard).getByRole('button', { name: '+' });
+    const quantityElement = within(firstCard).getByTestId('card-item-quantity');
+
+    const initialQuantity = parseInt(quantityElement.textContent ?? '1', 10);
+
+    await user.click(quantityPlusButton);
+
+    await waitFor(() => {
+      const updatedQuantity = parseInt(quantityElement.textContent ?? '0', 10);
+      expect(updatedQuantity).toBe(initialQuantity + 1);
+    });
+  });
+});
diff --git a/jest.config.ts b/jest.config.ts
deleted file mode 100644
index f39d237cf6..0000000000
--- a/jest.config.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-  testEnvironment: "jsdom",
-  transform: {
-    "^.+\\.tsx?$": ["ts-jest"],
-  },
-  moduleNameMapper: {
-    "^.+\\.svg$": "jest-svg-transformer",
-    "\\.(css|less|sass|scss)$": "identity-obj-proxy",
-  },
-  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
-};
diff --git a/jest.setup.ts b/jest.setup.ts
deleted file mode 100644
index d0de870dc5..0000000000
--- a/jest.setup.ts
+++ /dev/null
@@ -1 +0,0 @@
-import "@testing-library/jest-dom";
diff --git a/package-lock.json b/package-lock.json
index 301c677872..22acfa8f74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,15 +8,18 @@
       "name": "react-shopping-cart",
       "version": "0.0.0",
       "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-error-boundary": "^4.0.13",
-        "recoil": "^0.7.7",
+        "react-router": "^7.6.1",
         "styled-components": "^6.1.11"
       },
       "devDependencies": {
-        "@testing-library/jest-dom": "^6.4.5",
+        "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^15.0.7",
+        "@testing-library/user-event": "^14.6.1",
         "@types/jest": "^29.5.12",
         "@types/node": "^20.12.11",
         "@types/react": "^18.2.66",
@@ -29,17 +32,20 @@
         "eslint-plugin-react-refresh": "^0.4.6",
         "identity-obj-proxy": "^3.0.0",
         "jest-environment-jsdom": "^29.7.0",
+        "msw": "^2.8.5",
         "ts-jest": "^29.1.2",
         "ts-node": "^10.9.2",
         "typescript": "^5.2.2",
-        "vite": "^5.2.0"
+        "vite": "^5.2.0",
+        "vitest": "^3.1.4"
       }
     },
     "node_modules/@adobe/css-tools": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz",
-      "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==",
-      "dev": true
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.3.tgz",
+      "integrity": "sha512-VQKMkwriZbaOgVCby1UDY/LDk5fIjhQicCvVPFqfe+69fWaPWydbWJ3wRt59/YzIwda1I81loas3oCoHxnqvdA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
@@ -59,7 +65,6 @@
       "version": "7.24.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
       "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.24.2",
         "picocolors": "^1.0.0"
@@ -203,8 +208,6 @@
       "version": "7.24.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
       "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "@babel/types": "^7.24.0"
       },
@@ -272,8 +275,6 @@
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
       "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
-      "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -282,7 +283,6 @@
       "version": "7.24.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz",
       "integrity": "sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -316,7 +316,6 @@
       "version": "7.24.5",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.5.tgz",
       "integrity": "sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.24.5",
         "chalk": "^2.4.2",
@@ -331,7 +330,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -343,7 +341,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -357,7 +354,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -365,14 +361,12 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -381,7 +375,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -390,7 +383,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -664,8 +656,6 @@
       "version": "7.24.5",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.5.tgz",
       "integrity": "sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.24.1",
         "@babel/helper-validator-identifier": "^7.24.5",
@@ -682,6 +672,47 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@bundled-es-modules/cookie": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.1.tgz",
+      "integrity": "sha512-8o+5fRPLNbjbdGRRmJj3h6Hh1AQJf2dk3qQ/5ZFb+PXkRNiSoMGGUKlsgLfrxneb72axVJyIYji64E2+nNfYyw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cookie": "^0.7.2"
+      }
+    },
+    "node_modules/@bundled-es-modules/cookie/node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@bundled-es-modules/statuses": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/statuses/-/statuses-1.0.1.tgz",
+      "integrity": "sha512-yn7BklA5acgcBr+7w064fGV+SGIFySjCKpqjcWgBAIfrAkY+4GQTJJHQMeT3V/sgz23VTEVV8TtOmkvJAhFVfg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "statuses": "^2.0.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/tough-cookie": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/tough-cookie/-/tough-cookie-0.1.6.tgz",
+      "integrity": "sha512-dvMHbL464C0zI+Yqxbz6kZ5TOEp7GLW+pry/RWndAR8MJQAXZ2rPmIs8tziTZjeIyhSNZgZbCePtfSbdWqStJw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@types/tough-cookie": "^4.0.5",
+        "tough-cookie": "^4.1.4"
+      }
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -704,6 +735,83 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/cache/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
@@ -717,11 +825,125 @@
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz",
+      "integrity": "sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
+      "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/styled/node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
     "node_modules/@emotion/unitless": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
       "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
     },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -1223,6 +1445,112 @@
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
+    "node_modules/@inquirer/confirm": {
+      "version": "5.1.12",
+      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.1.12.tgz",
+      "integrity": "sha512-dpq+ielV9/bqgXRUbNH//KsY6WEw9DrGPmipkpmgC1Y46cwuBTNx7PXFWTjc3MQ+urcc0QxoVHcMI0FW4Ok0hg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^10.1.13",
+        "@inquirer/type": "^3.0.7"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@inquirer/core": {
+      "version": "10.1.13",
+      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.1.13.tgz",
+      "integrity": "sha512-1viSxebkYN2nJULlzCxES6G9/stgHSepZ9LqqfdIGPHj5OHhiBUXVS0a6R0bEC2A+VL4D9w6QB66ebCr6HGllA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/figures": "^1.0.12",
+        "@inquirer/type": "^3.0.7",
+        "ansi-escapes": "^4.3.2",
+        "cli-width": "^4.1.0",
+        "mute-stream": "^2.0.0",
+        "signal-exit": "^4.1.0",
+        "wrap-ansi": "^6.2.0",
+        "yoctocolors-cjs": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@inquirer/core/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@inquirer/core/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@inquirer/figures": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.12.tgz",
+      "integrity": "sha512-MJttijd8rMFcKJC8NYmprWr6hD3r9Gd9qUC0XwPNwoEPWSMVJwA2MlXxF+nhZZNMY+HXsWa+o7KY2emWYIn0jQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@inquirer/type": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.7.tgz",
+      "integrity": "sha512-PfunHQcjwnju84L+ycmcMKB/pTPIngjUJvfnRhKY6FKPuYXlM4aQCb/nIdTFR6BEhMjFvngzvng/vBAJMZpLSA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -1781,10 +2109,11 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
@@ -1797,6 +2126,24 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mswjs/interceptors": {
+      "version": "0.38.7",
+      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.38.7.tgz",
+      "integrity": "sha512-Jkb27iSn7JPdkqlTqKfhncFfnEZsIJVYxsFbUSWEkxdIPdsyngrhoDBk0/BGD2FQcRH99vlRrkHpNTyKqI+0/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@open-draft/deferred-promise": "^2.2.0",
+        "@open-draft/logger": "^0.3.0",
+        "@open-draft/until": "^2.0.0",
+        "is-node-process": "^1.2.0",
+        "outvariant": "^1.4.3",
+        "strict-event-emitter": "^0.5.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1832,6 +2179,31 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@open-draft/deferred-promise": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
+      "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@open-draft/logger": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/logger/-/logger-0.3.0.tgz",
+      "integrity": "sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-node-process": "^1.2.0",
+        "outvariant": "^1.4.0"
+      }
+    },
+    "node_modules/@open-draft/until": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@open-draft/until/-/until-2.1.0.tgz",
+      "integrity": "sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.17.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
@@ -2319,13 +2691,13 @@
       "dev": true
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.4.5",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.5.tgz",
-      "integrity": "sha512-AguB9yvTXmCnySBP1lWjfNNUwpbElsaQ567lt2VdGqAdHtpieLgjmcVyv1q7PMIvLbgpDdkWV5Ydv3FEejyp2A==",
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz",
+      "integrity": "sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@adobe/css-tools": "^4.3.2",
-        "@babel/runtime": "^7.9.2",
+        "@adobe/css-tools": "^4.4.0",
         "aria-query": "^5.0.0",
         "chalk": "^3.0.0",
         "css.escape": "^1.5.1",
@@ -2337,30 +2709,6 @@
         "node": ">=14",
         "npm": ">=6",
         "yarn": ">=1"
-      },
-      "peerDependencies": {
-        "@jest/globals": ">= 28",
-        "@types/bun": "latest",
-        "@types/jest": ">= 28",
-        "jest": ">= 28",
-        "vitest": ">= 0.32"
-      },
-      "peerDependenciesMeta": {
-        "@jest/globals": {
-          "optional": true
-        },
-        "@types/bun": {
-          "optional": true
-        },
-        "@types/jest": {
-          "optional": true
-        },
-        "jest": {
-          "optional": true
-        },
-        "vitest": {
-          "optional": true
-        }
       }
     },
     "node_modules/@testing-library/react": {
@@ -2387,6 +2735,20 @@
         }
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -2471,6 +2833,13 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -2579,6 +2948,12 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -2616,6 +2991,13 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "dev": true
     },
+    "node_modules/@types/statuses": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/statuses/-/statuses-2.0.5.tgz",
+      "integrity": "sha512-jmIUGWrAiwu3dZpxntxieC+1n/5c3mjrImkmOSQ2NC5uP6cYO4aAZDdSmRcI5C1oiTmqlZGHC+/NmJrKogbP5A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/stylis": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
@@ -2850,6 +3232,119 @@
         "vite": "^4 || ^5"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.1.4.tgz",
+      "integrity": "sha512-xkD/ljeliyaClDYqHPNCiJ0plY5YIcM0OlRiZizLhlPmpXWpxnGMyTZXOHFhFeG7w9P5PBeL4IdtJ/HeQwTbQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "3.1.4",
+        "@vitest/utils": "3.1.4",
+        "chai": "^5.2.0",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.1.4.tgz",
+      "integrity": "sha512-8IJ3CvwtSw/EFXqWFL8aCMu+YyYXG2WUSrQbViOZkWTKTVicVwZ/YiEZDSqD00kX+v/+W+OnxhNWoeVKorHygA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "3.1.4",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0 || ^6.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.1.4.tgz",
+      "integrity": "sha512-cqv9H9GvAEoTaoq+cYqUTCGscUjKqlJZC7PRwY5FMySVj5J+xOm1KQcCiYHJOEzOKRUhLH4R2pTwvFlWCEScsg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.1.4.tgz",
+      "integrity": "sha512-djTeF1/vt985I/wpKVFBMWUlk/I7mb5hmD5oP8K9ACRmVXgKTae3TUOtXAEBfslNKPzUQvnKhNd34nnRSYgLNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "3.1.4",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.1.4.tgz",
+      "integrity": "sha512-JPHf68DvuO7vilmvwdPr9TS0SuuIzHvxeaCkxYcCD4jTk67XwL45ZhEHFKIuCm8CYstgI6LZ4XbwD6ANrwMpFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.1.4",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.1.4.tgz",
+      "integrity": "sha512-Xg1bXhu+vtPXIodYN369M86K8shGLouNjoVI78g8iAq2rFoHFdajNvJJ5A/9bPMFcfQqdaCpOgWKEoMQg/s0Yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^3.0.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.1.4.tgz",
+      "integrity": "sha512-yriMuO1cfFhmiGc8ataN51+9ooHRuURdfAZfwFd3usWynjzpLslZdYnRegTv32qdgtJTsj15FoeZe2g15fY1gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.1.4",
+        "loupe": "^3.1.3",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -2930,7 +3425,6 @@
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
       "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "type-fest": "^0.21.3"
       },
@@ -2946,7 +3440,6 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
       "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -3022,6 +3515,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -3127,6 +3630,21 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/babel-preset-current-node-syntax": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
@@ -3257,11 +3775,20 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -3305,6 +3832,23 @@
       ],
       "peer": true
     },
+    "node_modules/chai": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.2.0.tgz",
+      "integrity": "sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/chalk": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
@@ -3328,6 +3872,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/check-error": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/ci-info": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
@@ -3350,12 +3904,21 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/cli-width": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
+      "integrity": "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
       "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.1",
@@ -3426,6 +3989,31 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/create-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
@@ -3553,12 +4141,13 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -3590,6 +4179,16 @@
         }
       }
     },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3719,8 +4318,7 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/entities": {
       "version": "4.5.0",
@@ -3738,12 +4336,17 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
@@ -3787,7 +4390,6 @@
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
       "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -3796,7 +4398,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -4030,6 +4631,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -4086,7 +4697,17 @@
         "jest-util": "^29.7.0"
       },
       "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/expect-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.2.1.tgz",
+      "integrity": "sha512-/kP8CAwxzLVEeFrMm4kMmy4CCDlpipyA7MYLVrdJIkV0fYF0UaigQHRsxHiuY/GEea+bh4KSv3TIlgr+2UL6bw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
     "node_modules/fast-deep-equal": {
@@ -4178,6 +4799,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -4252,8 +4879,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4273,7 +4898,6 @@
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
       }
@@ -4402,10 +5026,15 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
-    "node_modules/hamt_plus": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
-      "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA=="
+    "node_modules/graphql": {
+      "version": "16.11.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.11.0.tgz",
+      "integrity": "sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
+      }
     },
     "node_modules/harmony-reflect": {
       "version": "1.6.2",
@@ -4427,8 +5056,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -4436,6 +5063,28 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/headers-polyfill": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-4.0.3.tgz",
+      "integrity": "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -4530,7 +5179,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -4599,16 +5247,12 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-core-module": {
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -4630,7 +5274,6 @@
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -4657,6 +5300,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-node-process": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-node-process/-/is-node-process-1.2.0.tgz",
+      "integrity": "sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -5999,9 +6649,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -6072,9 +6720,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -6120,6 +6766,13 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/loupe": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz",
+      "integrity": "sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -6139,6 +6792,16 @@
         "lz-string": "bin/bin.js"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
     "node_modules/make-dir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
@@ -6256,10 +6919,79 @@
       }
     },
     "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/msw": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/msw/-/msw-2.8.5.tgz",
+      "integrity": "sha512-uSp82wwBjOBV+VIt4rtUgwrbNFCobZICSd2iexS4IMIwFxDexSojiwnrZF3TK6yxxUt1PBHZdsfOwuI9JzWphA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bundled-es-modules/cookie": "^2.0.1",
+        "@bundled-es-modules/statuses": "^1.0.1",
+        "@bundled-es-modules/tough-cookie": "^0.1.6",
+        "@inquirer/confirm": "^5.0.0",
+        "@mswjs/interceptors": "^0.38.7",
+        "@open-draft/deferred-promise": "^2.2.0",
+        "@open-draft/until": "^2.1.0",
+        "@types/cookie": "^0.6.0",
+        "@types/statuses": "^2.0.4",
+        "graphql": "^16.8.1",
+        "headers-polyfill": "^4.0.2",
+        "is-node-process": "^1.2.0",
+        "outvariant": "^1.4.3",
+        "path-to-regexp": "^6.3.0",
+        "picocolors": "^1.1.1",
+        "strict-event-emitter": "^0.5.1",
+        "type-fest": "^4.26.1",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "msw": "cli/index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mswjs"
+      },
+      "peerDependencies": {
+        "typescript": ">= 4.8.x"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/msw/node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mute-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-2.0.0.tgz",
+      "integrity": "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
     },
     "node_modules/nanoid": {
       "version": "3.3.7",
@@ -6369,6 +7101,13 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/outvariant": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.3.tgz",
+      "integrity": "sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -6413,7 +7152,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -6425,8 +7163,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -6482,23 +7218,45 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-to-regexp": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
       "dev": true,
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathval": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
+      "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -6754,9 +7512,10 @@
       }
     },
     "node_modules/react-error-boundary": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
-      "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.2.tgz",
+      "integrity": "sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5"
       },
@@ -6770,22 +7529,25 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
-    "node_modules/recoil": {
-      "version": "0.7.7",
-      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz",
-      "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==",
+    "node_modules/react-router": {
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz",
+      "integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==",
+      "license": "MIT",
       "dependencies": {
-        "hamt_plus": "1.0.2"
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.13.1"
+        "react": ">=18",
+        "react-dom": ">=18"
       },
       "peerDependenciesMeta": {
         "react-dom": {
           "optional": true
-        },
-        "react-native": {
-          "optional": true
         }
       }
     },
@@ -6812,7 +7574,6 @@
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6827,8 +7588,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -6868,7 +7627,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -7004,6 +7762,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -7030,6 +7794,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -7109,6 +7880,37 @@
         "node": ">=8"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/std-env": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.9.0.tgz",
+      "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/strict-event-emitter": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz",
+      "integrity": "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -7128,7 +7930,6 @@
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -7242,8 +8043,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "peer": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -7302,6 +8101,95 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.5",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.5.tgz",
+      "integrity": "sha512-4BG7puHpVsIYxZUbiUE3RqGloLaSSwzYie5jvasC4LWuBWzZawynvYouhjbQKw2JuIGYdm0DzIxl8iVidKlUEw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/tinypool": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz",
+      "integrity": "sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
+      "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -7313,8 +8201,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -7648,6 +8534,100 @@
         }
       }
     },
+    "node_modules/vite-node": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.1.4.tgz",
+      "integrity": "sha512-6enNwYnpyDo4hEgytbmc6mYWHXDHYEn0D1/rw4Q+tnHUGtKTJsn8T1YkX6Q18wI5LCrS8CTYlBaiCqxOy2kvUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.4.0",
+        "es-module-lexer": "^1.7.0",
+        "pathe": "^2.0.3",
+        "vite": "^5.0.0 || ^6.0.0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.1.4.tgz",
+      "integrity": "sha512-Ta56rT7uWxCSJXlBtKgIlApJnT6e6IGmTYxYcmxjJ4ujuZDI59GUQgVDObXXJujOmPDBYXHK1qmaGtneu6TNIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "3.1.4",
+        "@vitest/mocker": "3.1.4",
+        "@vitest/pretty-format": "^3.1.4",
+        "@vitest/runner": "3.1.4",
+        "@vitest/snapshot": "3.1.4",
+        "@vitest/spy": "3.1.4",
+        "@vitest/utils": "3.1.4",
+        "chai": "^5.2.0",
+        "debug": "^4.4.0",
+        "expect-type": "^1.2.1",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3",
+        "std-env": "^3.9.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.2",
+        "tinyglobby": "^0.2.13",
+        "tinypool": "^1.0.2",
+        "tinyrainbow": "^2.0.0",
+        "vite": "^5.0.0 || ^6.0.0",
+        "vite-node": "3.1.4",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/debug": "^4.1.12",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@vitest/browser": "3.1.4",
+        "@vitest/ui": "3.1.4",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/debug": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -7728,6 +8708,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -7742,7 +8739,6 @@
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -7816,7 +8812,6 @@
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
       "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -7828,12 +8823,20 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
       "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "cliui": "^8.0.1",
         "escalade": "^3.1.1",
@@ -7876,6 +8879,19 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yoctocolors-cjs": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz",
+      "integrity": "sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index e54c2a05ae..49873fe200 100644
--- a/package.json
+++ b/package.json
@@ -4,22 +4,26 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "test": "jest"
+    "test": "vitest",
+    "deploy": "vite build --base=/react-shopping-cart/ --minify=false && npx gh-pages -d dist"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.13",
-    "recoil": "^0.7.7",
+    "react-router": "^7.6.1",
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.11",
     "@types/react": "^18.2.66",
@@ -32,9 +36,16 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "identity-obj-proxy": "^3.0.0",
     "jest-environment-jsdom": "^29.7.0",
+    "msw": "^2.8.5",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vitest": "^3.1.4"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
 }
diff --git a/public/default-product.jpg b/public/default-product.jpg
new file mode 100644
index 0000000000..7ef27e6e9b
Binary files /dev/null and b/public/default-product.jpg differ
diff --git a/public/infoLabelIcon.svg b/public/infoLabelIcon.svg
new file mode 100644
index 0000000000..84b77fba57
--- /dev/null
+++ b/public/infoLabelIcon.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.33333 3.66665H7.66666V4.99998H6.33333V3.66665ZM6.33333 6.33331H7.66666V10.3333H6.33333V6.33331ZM6.99999 0.333313C3.31999 0.333313 0.333328 3.31998 0.333328 6.99998C0.333328 10.68 3.31999 13.6666 6.99999 13.6666C10.68 13.6666 13.6667 10.68 13.6667 6.99998C13.6667 3.31998 10.68 0.333313 6.99999 0.333313ZM6.99999 12.3333C4.05999 12.3333 1.66666 9.93998 1.66666 6.99998C1.66666 4.05998 4.05999 1.66665 6.99999 1.66665C9.93999 1.66665 12.3333 4.05998 12.3333 6.99998C12.3333 9.93998 9.93999 12.3333 6.99999 12.3333Z" fill="black"/>
+</svg>
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
new file mode 100644
index 0000000000..83d1e1709b
--- /dev/null
+++ b/public/mockServiceWorker.js
@@ -0,0 +1,307 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const PACKAGE_VERSION = '2.8.5'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+self.addEventListener('fetch', function (event) {
+  const { request } = event
+
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  // Generate unique request ID.
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId))
+})
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const responseClone = response.clone()
+
+      sendToClient(
+        client,
+        {
+          type: 'RESPONSE',
+          payload: {
+            requestId,
+            isMockedResponse: IS_MOCKED_RESPONSE in response,
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            body: responseClone.body,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+          },
+        },
+        [responseClone.body],
+      )
+    })()
+  }
+
+  return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = request.clone()
+
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const requestBuffer = await request.arrayBuffer()
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        url: request.url,
+        mode: request.mode,
+        method: request.method,
+        headers: Object.fromEntries(request.headers.entries()),
+        cache: request.cache,
+        credentials: request.credentials,
+        destination: request.destination,
+        integrity: request.integrity,
+        redirect: request.redirect,
+        referrer: request.referrer,
+        referrerPolicy: request.referrerPolicy,
+        body: requestBuffer,
+        keepalive: request.keepalive,
+      },
+    },
+    [requestBuffer],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(
+      message,
+      [channel.port2].concat(transferrables.filter(Boolean)),
+    )
+  })
+}
+
+async function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index b9d355df2a..0000000000
--- a/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index 9251c2fd5f..0000000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import "./App.css";
-
-function App() {
-  return (
-    <>
-      <h1>react-shopping-cart</h1>
-    </>
-  );
-}
-
-export default App;
diff --git a/src/app/layout/Layout.styles.ts b/src/app/layout/Layout.styles.ts
new file mode 100644
index 0000000000..81658a2612
--- /dev/null
+++ b/src/app/layout/Layout.styles.ts
@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+export const LayoutContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+`;
diff --git a/src/app/layout/Layout.tsx b/src/app/layout/Layout.tsx
new file mode 100644
index 0000000000..f364c3035e
--- /dev/null
+++ b/src/app/layout/Layout.tsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'react-router';
+import * as S from './Layout.styles';
+
+export default function Layout() {
+  return (
+    <S.LayoutContainer>
+      <Outlet />
+    </S.LayoutContainer>
+  );
+}
diff --git a/src/app/routes/routes.tsx b/src/app/routes/routes.tsx
new file mode 100644
index 0000000000..788ba7462a
--- /dev/null
+++ b/src/app/routes/routes.tsx
@@ -0,0 +1,16 @@
+import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router';
+import { ROUTES } from '../../shared/constants/routeConstants';
+import NotFoundPage from '../../pages/NotFoundPage/NotFoundPage';
+import Layout from '../layout/Layout';
+import ConfirmationPage from '../../pages/ConfirmationPage/ConfirmationPage';
+import CartPage from '../../pages/CartPage/CartPage';
+
+export const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route path={ROUTES.ROOT} element={<Layout />}>
+      <Route path={ROUTES.CART} element={<CartPage />} />
+      <Route path={ROUTES.CONFIRMATION} element={<ConfirmationPage />} />
+      <Route path='*' element={<NotFoundPage />} />
+    </Route>
+  )
+);
diff --git a/src/features/cart/api/deleteCartItem.ts b/src/features/cart/api/deleteCartItem.ts
new file mode 100644
index 0000000000..c9c9bf712f
--- /dev/null
+++ b/src/features/cart/api/deleteCartItem.ts
@@ -0,0 +1,5 @@
+import { httpClient } from '../../../shared/api/httpClient';
+
+export const deleteCartItem = (cartItemId: number) => {
+  return httpClient.delete(`/cart-items/${cartItemId}`);
+};
diff --git a/src/features/cart/api/getCartItems.ts b/src/features/cart/api/getCartItems.ts
new file mode 100644
index 0000000000..c31b918822
--- /dev/null
+++ b/src/features/cart/api/getCartItems.ts
@@ -0,0 +1,10 @@
+import { httpClient } from '../../../shared/api/httpClient';
+import { CartItem } from './types/cart';
+
+interface CartItemsResponse {
+  content: CartItem[];
+}
+
+export const getCartItems = () => {
+  return httpClient.get<CartItemsResponse>('/cart-items');
+};
diff --git a/src/features/cart/api/types/cart.ts b/src/features/cart/api/types/cart.ts
new file mode 100644
index 0000000000..4d58c5899a
--- /dev/null
+++ b/src/features/cart/api/types/cart.ts
@@ -0,0 +1,13 @@
+export interface CartItem {
+  id: number;
+  quantity: number;
+  product: Product;
+}
+
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  imageUrl: string;
+  category: string;
+}
diff --git a/src/features/cart/api/updateCartItem.ts b/src/features/cart/api/updateCartItem.ts
new file mode 100644
index 0000000000..b984cb4555
--- /dev/null
+++ b/src/features/cart/api/updateCartItem.ts
@@ -0,0 +1,7 @@
+import { httpClient } from '../../../shared/api/httpClient';
+
+export const updateCartItem = (cartItemId: number, quantity: number) => {
+  return httpClient.patch(`/cart-items/${cartItemId}`, {
+    quantity: quantity,
+  });
+};
diff --git a/src/features/cart/constants/orderPriceSummary.ts b/src/features/cart/constants/orderPriceSummary.ts
new file mode 100644
index 0000000000..457c5baf4b
--- /dev/null
+++ b/src/features/cart/constants/orderPriceSummary.ts
@@ -0,0 +1,2 @@
+export const DELIVERY_FEE_THRESHOLD = 100000;
+export const DELIVERY_FEE = 3000;
diff --git a/src/features/cart/ui/CartHeader.styles.ts b/src/features/cart/ui/CartHeader.styles.ts
new file mode 100644
index 0000000000..5cded9ad2e
--- /dev/null
+++ b/src/features/cart/ui/CartHeader.styles.ts
@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+export const CartHeaderContainer = styled.section`
+  height: 62px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+export const CartHeaderTitle = styled.h1`
+  font-size: 24px;
+  font-weight: 700;
+`;
+
+export const CartHeaderContent = styled.span`
+  font-size: 12px;
+  font-weight: 500;
+`;
diff --git a/src/features/cart/ui/CartHeader.tsx b/src/features/cart/ui/CartHeader.tsx
new file mode 100644
index 0000000000..dcf61a90ac
--- /dev/null
+++ b/src/features/cart/ui/CartHeader.tsx
@@ -0,0 +1,16 @@
+import * as S from './CartHeader.styles';
+
+interface CartHeaderProps {
+  cartTypeQuantity: number;
+}
+
+export default function CartHeader({ cartTypeQuantity }: CartHeaderProps) {
+  return (
+    <S.CartHeaderContainer>
+      <S.CartHeaderTitle>장바구니</S.CartHeaderTitle>
+      {cartTypeQuantity > 0 && (
+        <S.CartHeaderContent>{`현재 ${cartTypeQuantity}종류의 상품이 담겨있습니다.`}</S.CartHeaderContent>
+      )}
+    </S.CartHeaderContainer>
+  );
+}
diff --git a/src/features/cart/ui/CartItemCard.styles.ts b/src/features/cart/ui/CartItemCard.styles.ts
new file mode 100644
index 0000000000..3390ea7486
--- /dev/null
+++ b/src/features/cart/ui/CartItemCard.styles.ts
@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+
+export const CartItemContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 12px 0;
+
+  transition: background-color 0.2s ease;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+`;
+
+export const CartItemHeader = styled.div`
+  width: 100%;
+  height: 24px;
+  display: flex;
+  justify-content: space-between;
+  margin: 12px 0;
+`;
+
+export const CartItemContent = styled.div`
+  width: 100%;
+  flex: 1;
+  display: flex;
+  gap: 25px;
+`;
+
+export const CartItemImage = styled.img`
+  width: 112px;
+  height: 112px;
+  object-fit: cover;
+  border-radius: 8px;
+`;
+
+export const CartItemInfo = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+export const CartItemInfoDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const CartItemInfoName = styled.span`
+  font-size: 12px;
+  font-weight: 500;
+`;
+
+export const CartItemInfoPrice = styled.span`
+  font-size: 24px;
+  font-weight: 700;
+`;
diff --git a/src/features/cart/ui/CartItemCard.tsx b/src/features/cart/ui/CartItemCard.tsx
new file mode 100644
index 0000000000..fa1009d6d1
--- /dev/null
+++ b/src/features/cart/ui/CartItemCard.tsx
@@ -0,0 +1,85 @@
+/** @jsxImportSource @emotion/react */
+
+import { css } from '@emotion/react';
+import Button from '../../../shared/ui/Button';
+import SelectInput from '../../../shared/ui/SelectInput';
+import * as S from './CartItemCard.styles';
+import CartItemQuantitySelector from './CartItemQuantitySelector';
+import { CartItem } from '../api/types/cart';
+import { useCartContext } from '../../../shared/context/useCartContext';
+import { deleteCartItem } from '../api/deleteCartItem';
+
+const deleteButtonCSS = css`
+  width: 40px;
+  height: 28px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+  &:hover {
+    background-color: #f8f8f8;
+    border-color: rgba(0, 0, 0, 0.2);
+  }
+`;
+
+interface CartItemCardProps {
+  cartItem: CartItem;
+}
+
+export default function CartItemCard({ cartItem }: CartItemCardProps) {
+  const { selectedCartItems, updateSelectedCartItem, removeSelectedCartItem } = useCartContext();
+  const handleSelectedCartItemUpdate = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = e.target.checked;
+    if (!isChecked) {
+      removeSelectedCartItem(cartItem);
+      return;
+    }
+    updateSelectedCartItem(cartItem, cartItem.quantity);
+  };
+
+  const isSelected = selectedCartItems.some((item) => item.id === cartItem.id);
+
+  const handleCartItemDelete = async () => {
+    try {
+      await deleteCartItem(cartItem.id);
+      removeSelectedCartItem(cartItem);
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error('장바구니 아이템 삭제 실패:', error.message);
+        alert('장바구니 아이템 삭제에 실패했습니다. 다시 시도해주세요.');
+      }
+    }
+  };
+
+  return (
+    <S.CartItemContainer data-testid='cart-item-card'>
+      <S.CartItemHeader>
+        <SelectInput type='checkbox' onChange={handleSelectedCartItemUpdate} checked={isSelected} />
+        <Button title='삭제' css={deleteButtonCSS} onClick={handleCartItemDelete} />
+      </S.CartItemHeader>
+      <S.CartItemContent>
+        <S.CartItemImage
+          src={cartItem.product.imageUrl}
+          alt={cartItem.product.name}
+          onError={(e) => {
+            const target = e.currentTarget;
+            target.onerror = null;
+            target.src = './default-product.jpg';
+          }}
+        />
+        <S.CartItemInfo>
+          <S.CartItemInfoDetails>
+            <S.CartItemInfoName data-testid='cart-item-name'>{cartItem.product.name}</S.CartItemInfoName>
+            <S.CartItemInfoPrice data-testid='card-item-price'>
+              {cartItem.product.price.toLocaleString()}원
+            </S.CartItemInfoPrice>
+          </S.CartItemInfoDetails>
+
+          <CartItemQuantitySelector cartItem={cartItem} isSelected={isSelected} />
+        </S.CartItemInfo>
+      </S.CartItemContent>
+    </S.CartItemContainer>
+  );
+}
diff --git a/src/features/cart/ui/CartItemQuantitySelector.styles.ts b/src/features/cart/ui/CartItemQuantitySelector.styles.ts
new file mode 100644
index 0000000000..1a6a6dba5c
--- /dev/null
+++ b/src/features/cart/ui/CartItemQuantitySelector.styles.ts
@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+
+export const CartItemQuantityContainer = styled.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  border-radius: 8px;
+  color: #000;
+  gap: 12px;
+`;
+
+export const CartItemQuantitySelectorButton = styled.button`
+  width: 24px;
+  height: 24px;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  :hover {
+    background-color: #f0f0f0;
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+`;
+
+export const CartItemQuantityNumber = styled.div`
+  font-size: 12px;
+  font-weight: 500;
+`;
diff --git a/src/features/cart/ui/CartItemQuantitySelector.tsx b/src/features/cart/ui/CartItemQuantitySelector.tsx
new file mode 100644
index 0000000000..cc28b55709
--- /dev/null
+++ b/src/features/cart/ui/CartItemQuantitySelector.tsx
@@ -0,0 +1,46 @@
+import * as S from './CartItemQuantitySelector.styles';
+import { CartItem } from '../api/types/cart';
+import { updateCartItem } from '../api/updateCartItem';
+import { useCartContext } from '../../../shared/context/useCartContext';
+
+interface CartItemQuantitySelectorProps {
+  cartItem: CartItem;
+  isSelected: boolean;
+}
+
+export default function CartItemQuantitySelector({ cartItem }: CartItemQuantitySelectorProps) {
+  const { updateCartItemQuantity } = useCartContext();
+
+  const handleCartItemQuantityUpdate = async (id: number, quantity: number) => {
+    try {
+      await updateCartItem(id, quantity);
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error('장바구니 아이템 수량 업데이트 실패:', error.message);
+        alert('장바구니 아이템 수량 업데이트에 실패했습니다. 다시 시도해주세요.');
+      }
+    }
+  };
+
+  const handleQuantityMinus = () => {
+    if (cartItem.quantity > 1) {
+      const newQuantity = cartItem.quantity - 1;
+      updateCartItemQuantity(cartItem, newQuantity);
+      handleCartItemQuantityUpdate(cartItem.id, newQuantity);
+    }
+  };
+
+  const handleQuantityPlus = () => {
+    const newQuantity = cartItem.quantity + 1;
+    updateCartItemQuantity(cartItem, newQuantity);
+    handleCartItemQuantityUpdate(cartItem.id, newQuantity);
+  };
+
+  return (
+    <S.CartItemQuantityContainer>
+      <S.CartItemQuantitySelectorButton onClick={handleQuantityMinus}>-</S.CartItemQuantitySelectorButton>
+      <S.CartItemQuantityNumber data-testid='card-item-quantity'>{cartItem.quantity}</S.CartItemQuantityNumber>
+      <S.CartItemQuantitySelectorButton onClick={handleQuantityPlus}>+</S.CartItemQuantitySelectorButton>
+    </S.CartItemQuantityContainer>
+  );
+}
diff --git a/src/features/cart/ui/CartList.styles.ts b/src/features/cart/ui/CartList.styles.ts
new file mode 100644
index 0000000000..fcc7010397
--- /dev/null
+++ b/src/features/cart/ui/CartList.styles.ts
@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+
+export const CartListContainer = styled.section`
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-top: 20px;
+`;
+
+export const AllSelectContainer = styled.div`
+  width: 100%;
+  height: 24px;
+  display: flex;
+  align-items: center;
+`;
+
+export const AllSelectInputBox = styled.input`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  accent-color: black;
+`;
+
+export const CartItemCardContainer = styled.div`
+  width: 100%;
+  height: 350px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
diff --git a/src/features/cart/ui/CartList.tsx b/src/features/cart/ui/CartList.tsx
new file mode 100644
index 0000000000..953ff05e33
--- /dev/null
+++ b/src/features/cart/ui/CartList.tsx
@@ -0,0 +1,37 @@
+import SelectInput from '../../../shared/ui/SelectInput';
+import CartItemCard from './CartItemCard';
+import * as S from './CartList.styles';
+import { useCartContext } from '../../../shared/context/useCartContext';
+import { useEffect } from 'react';
+
+export default function CartList() {
+  const { cartItems, selectedCartItems, addAllCartItemsInSelected } = useCartContext();
+
+  useEffect(() => {
+    if (cartItems.length === 0) return;
+
+    addAllCartItemsInSelected(cartItems);
+  }, []);
+
+  const selectedIds = new Set(selectedCartItems.map((item) => item.id));
+  const isAllSelected = cartItems.length > 0 && cartItems.every((cartItem) => selectedIds.has(cartItem.id));
+
+  const handleAllCartItemsInSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = e.target.checked;
+    addAllCartItemsInSelected(isChecked ? cartItems : []);
+  };
+
+  return (
+    <S.CartListContainer>
+      <S.AllSelectContainer>
+        <SelectInput id='select-all' type='checkbox' onChange={handleAllCartItemsInSelected} checked={isAllSelected} />
+        <label htmlFor='select-all'>전체 선택</label>
+      </S.AllSelectContainer>
+      <S.CartItemCardContainer>
+        {cartItems.map((cartItem) => (
+          <CartItemCard key={cartItem.id} cartItem={cartItem} />
+        ))}
+      </S.CartItemCardContainer>
+    </S.CartListContainer>
+  );
+}
diff --git a/src/features/cart/ui/CartListSkeleton.tsx b/src/features/cart/ui/CartListSkeleton.tsx
new file mode 100644
index 0000000000..ff05461be4
--- /dev/null
+++ b/src/features/cart/ui/CartListSkeleton.tsx
@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+
+export default function CartListSkeleton() {
+  return (
+    <SkeletonContainer>
+      {Array.from({ length: 3 }).map((_, index) => (
+        <SkeletonCard key={index} />
+      ))}
+    </SkeletonContainer>
+  );
+}
+
+const SkeletonContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+const SkeletonCard = styled.div`
+  height: 150px;
+  background-color: #e0e0e0;
+  border-radius: 8px;
+  animation: pulse 1.5s infinite ease-in-out;
+
+  @keyframes pulse {
+    0% {
+      background-color: #e0e0e0;
+    }
+    50% {
+      background-color: #f5f5f5;
+    }
+    100% {
+      background-color: #e0e0e0;
+    }
+  }
+`;
diff --git a/src/features/cart/ui/CartPageFooter.tsx b/src/features/cart/ui/CartPageFooter.tsx
new file mode 100644
index 0000000000..853793009e
--- /dev/null
+++ b/src/features/cart/ui/CartPageFooter.tsx
@@ -0,0 +1,55 @@
+/** @jsxImportSource @emotion/react */
+
+import { css } from '@emotion/react';
+import Button from '../../../shared/ui/Button';
+import { useNavigate } from 'react-router';
+import { ROUTES } from '../../../shared/constants/routeConstants';
+import { useCartContext } from '../../../shared/context/useCartContext';
+import styled from '@emotion/styled';
+
+const ButtonCSS = css`
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 700;
+  transition: background-color 0.2s ease;
+  &:hover {
+    background-color: #333;
+  }
+
+  &:disabled {
+    background-color: #bebebe;
+    cursor: not-allowed;
+  }
+`;
+
+export default function Footer({ cartItemQuantity }: { cartItemQuantity: number }) {
+  const { selectedCartItems } = useCartContext();
+
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(ROUTES.CONFIRMATION);
+  };
+
+  return (
+    <FooterContainer>
+      <Button
+        onClick={handleClick}
+        title='주문 확인'
+        css={ButtonCSS}
+        disabled={cartItemQuantity === 0 || selectedCartItems.length === 0}
+      />
+    </FooterContainer>
+  );
+}
+
+const FooterContainer = styled.footer`
+  width: 100%;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/src/features/cart/ui/EmptyCartItemUI.tsx b/src/features/cart/ui/EmptyCartItemUI.tsx
new file mode 100644
index 0000000000..10e8cdc7d1
--- /dev/null
+++ b/src/features/cart/ui/EmptyCartItemUI.tsx
@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+export default function EmptyCartItemUI() {
+  return <EmptyCartItemUIContainer>장바구니에 담은 상품이 없습니다.</EmptyCartItemUIContainer>;
+}
+
+const EmptyCartItemUIContainer = styled.section`
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/features/cart/ui/OrderPriceSummary.styles.ts b/src/features/cart/ui/OrderPriceSummary.styles.ts
new file mode 100644
index 0000000000..a0bf2e283d
--- /dev/null
+++ b/src/features/cart/ui/OrderPriceSummary.styles.ts
@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+
+export const OrderPriceSummaryContainer = styled.section`
+  width: 100%;
+  height: 125px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+export const DeliveryFeeLabel = styled.div`
+  width: 100%;
+  padding: 10px 0;
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+`;
+
+export const DeliveryFeeIcon = styled.img`
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  vertical-align: middle;
+`;
+
+const baseStyle = `
+  width: 100%;
+  font-size:16px;
+  font-weight:700;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const TotalOrderPrice = styled.div`
+  ${baseStyle}
+  border-top: 2px solid rgba(0, 0, 0, 0.1);
+  padding-top: 10px;
+`;
+
+export const DeliveryFee = styled.div`
+  ${baseStyle}
+  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+  padding-bottom: 10px;
+`;
+
+export const TotalPurchasePrice = styled.div`
+  ${baseStyle}
+  padding-top: 10px;
+`;
+
+export const PriceBox = styled.span`
+  font-size: 24px;
+`;
diff --git a/src/features/cart/ui/OrderPriceSummary.tsx b/src/features/cart/ui/OrderPriceSummary.tsx
new file mode 100644
index 0000000000..62534f403f
--- /dev/null
+++ b/src/features/cart/ui/OrderPriceSummary.tsx
@@ -0,0 +1,31 @@
+import { useCartContext } from '../../../shared/context/useCartContext';
+import { DELIVERY_FEE, DELIVERY_FEE_THRESHOLD } from '../constants/orderPriceSummary';
+import * as S from './OrderPriceSummary.styles';
+export default function OrderPriceSummary() {
+  const { selectedCartItems } = useCartContext();
+
+  const totalPrice = selectedCartItems.reduce((acc, item) => acc + item.product.price * item.quantity, 0);
+  const deliveryFee = totalPrice >= DELIVERY_FEE_THRESHOLD ? 0 : DELIVERY_FEE;
+  const totalPurchasePrice = totalPrice + deliveryFee;
+
+  return (
+    <S.OrderPriceSummaryContainer>
+      <S.DeliveryFeeLabel>
+        <S.DeliveryFeeIcon src='./infoLabelIcon.svg' alt='Delivery Fee Label Icon' />총 주문 금액이 100,000원 이상일
+        경우 무료 배송됩니다.
+      </S.DeliveryFeeLabel>
+      <S.TotalOrderPrice>
+        주문 금액
+        <S.PriceBox>{totalPrice.toLocaleString()}원</S.PriceBox>
+      </S.TotalOrderPrice>
+      <S.DeliveryFee data-testid='delivery-fee'>
+        배송비
+        <S.PriceBox>{deliveryFee.toLocaleString()}원</S.PriceBox>
+      </S.DeliveryFee>
+      <S.TotalPurchasePrice data-testid='total-purchase-price'>
+        총 결제 금액
+        <S.PriceBox>{totalPurchasePrice.toLocaleString()}원</S.PriceBox>
+      </S.TotalPurchasePrice>
+    </S.OrderPriceSummaryContainer>
+  );
+}
diff --git a/src/features/cart/ui/index.ts b/src/features/cart/ui/index.ts
new file mode 100644
index 0000000000..e8223df6f6
--- /dev/null
+++ b/src/features/cart/ui/index.ts
@@ -0,0 +1,3 @@
+export { default as CartHeader } from './CartHeader';
+export { default as CartList } from './CartList';
+export { default as OrderPriceSummary } from './OrderPriceSummary';
diff --git a/src/index.css b/src/index.css
index 6119ad9a8f..bd8057966c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,68 +1,144 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
 }
-a:hover {
-  color: #535bf2;
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+section {
+  display: block;
 }
-
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  line-height: 1;
 }
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+ol,
+ul,
+li {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  padding: 0;
 }
-button:hover {
-  border-color: #646cff;
+
+input {
+  border: none;
+  outline: none;
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+input:focus {
+  border: none;
+  outline: none;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+* {
+  box-sizing: border-box;
 }
diff --git a/src/main.tsx b/src/main.tsx
index 966f17a4b2..32ff048a01 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,31 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
-import "./index.css";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { RouterProvider } from 'react-router';
+import { router } from './app/routes/routes.tsx';
+import { CartProvider } from './shared/context/CartProvider.tsx';
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+async function enableMocking() {
+  // if (process.env.NODE_ENV === 'development') {
+  //   return;
+  // }
+
+  const isLocalhost = location.hostname === 'localhost';
+
+  const { worker } = await import('./mocks/browser');
+  return worker.start({
+    serviceWorker: {
+      url: isLocalhost ? '/mockServiceWorker.js' : '/react-shopping-cart/mockServiceWorker.js',
+    },
+    onUnhandledRequest: 'bypass',
+  });
+}
+enableMocking().then(() => {
+  ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+      <CartProvider>
+        <RouterProvider router={router} />
+      </CartProvider>
+    </React.StrictMode>
+  );
+});
diff --git a/src/mocks/browser.ts b/src/mocks/browser.ts
new file mode 100644
index 0000000000..496b28df5f
--- /dev/null
+++ b/src/mocks/browser.ts
@@ -0,0 +1,4 @@
+import { setupWorker } from 'msw/browser';
+import { handlers } from './handler';
+
+export const worker = setupWorker(...handlers);
diff --git a/src/mocks/cartItems.json b/src/mocks/cartItems.json
new file mode 100644
index 0000000000..bc07d7b2a6
--- /dev/null
+++ b/src/mocks/cartItems.json
@@ -0,0 +1,24 @@
+[
+  {
+    "id": 9895,
+    "quantity": 1,
+    "product": {
+      "id": 4,
+      "name": "달 무드등2",
+      "price": 28000,
+      "imageUrl": "https://thumbnail6.coupangcdn.com/thumbnails/remote/492x492ex/image/vendor_inventory/794f/cecbea5bdc654a11ae02d28b4d1f4bd2a03a7389eb2b8cc4a45c1c9f7d9b.jpg",
+      "category": "패션잡화"
+    }
+  },
+  {
+    "id": 9896,
+    "quantity": 2,
+    "product": {
+      "id": 5,
+      "name": "동물 양말2",
+      "price": 100000,
+      "imageUrl": "https://m.cocossocks.com/web/product/medium/202503/940897aced51144109baa4d145def01f.jpg",
+      "category": "패션잡화"
+    }
+  }
+]
diff --git a/src/mocks/handler.ts b/src/mocks/handler.ts
new file mode 100644
index 0000000000..dc4d29cabb
--- /dev/null
+++ b/src/mocks/handler.ts
@@ -0,0 +1,30 @@
+import { http, HttpResponse } from 'msw';
+import rawCartItems from './cartItems.json';
+
+const BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+let cartItems = [...rawCartItems];
+
+export const handlers = [
+  http.get(`${BASE_URL}/cart-items*`, () => {
+    return HttpResponse.json({ content: cartItems });
+  }),
+
+  http.patch(`${BASE_URL}/cart-items/:id`, async ({ params, request }) => {
+    const id = Number(params.id);
+    const body = await request.json();
+    const { quantity } = body as { quantity: number };
+
+    const itemIndex = cartItems.findIndex((item) => item.id === id);
+    if (itemIndex !== -1) {
+      cartItems[itemIndex].quantity = quantity;
+    }
+    return HttpResponse.json({ message: '장바구니 아이템이 변경되었습니다.' });
+  }),
+
+  http.delete(`${BASE_URL}/cart-items/:id`, ({ params }) => {
+    const id = Number(params.id);
+    cartItems = cartItems.filter((item) => item.id !== id);
+    return new HttpResponse({});
+  }),
+];
diff --git a/src/mocks/server.ts b/src/mocks/server.ts
new file mode 100644
index 0000000000..ead246dad5
--- /dev/null
+++ b/src/mocks/server.ts
@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handler';
+
+export const server = setupServer(...handlers);
diff --git a/src/pages/CartPage/CartPage.styles.ts b/src/pages/CartPage/CartPage.styles.ts
new file mode 100644
index 0000000000..39f339e4e4
--- /dev/null
+++ b/src/pages/CartPage/CartPage.styles.ts
@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+export const CartPageContainer = styled.div`
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const CartPageContent = styled.main`
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px 24px;
+`;
diff --git a/src/pages/CartPage/CartPage.tsx b/src/pages/CartPage/CartPage.tsx
new file mode 100644
index 0000000000..f06a659114
--- /dev/null
+++ b/src/pages/CartPage/CartPage.tsx
@@ -0,0 +1,74 @@
+import React, { useEffect, useState, Suspense } from 'react';
+import * as S from './CartPage.styles';
+import { CartHeader } from '../../features/cart/ui';
+import Navbar from '../../shared/ui/Navbar';
+import CartPageFooter from '../../features/cart/ui/CartPageFooter';
+import { getCartItems } from '../../features/cart/api/getCartItems';
+import EmptyCartItemUI from '../../features/cart/ui/EmptyCartItemUI';
+import { ROUTES } from '../../shared/constants/routeConstants';
+
+const CartList = React.lazy(() => import('../../features/cart/ui/CartList'));
+const OrderPriceSummary = React.lazy(() => import('../../features/cart/ui/OrderPriceSummary'));
+import CartListSkeleton from '../../features/cart/ui/CartListSkeleton';
+import { useCartContext } from '../../shared/context/useCartContext';
+
+function CartPage() {
+  const { cartItems, updateCartItems, selectedCartItems, updateSelectedCartItem, removeSelectedCartItem } =
+    useCartContext();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchCartItems = async () => {
+      try {
+        const response = await getCartItems();
+        if (!response) return;
+        updateCartItems(response.content);
+      } catch (error) {
+        if (error instanceof Error) {
+          console.error('Failed to fetch cart items:', error.message);
+          alert('장바구니 아이템을 불러오는 데 실패했습니다. 다시 시도해주세요.');
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchCartItems();
+  }, [selectedCartItems]);
+
+  useEffect(() => {
+    selectedCartItems.forEach((item) => {
+      const currentItem = cartItems.find((cartItem) => cartItem.id === item.id);
+      if (!currentItem) {
+        removeSelectedCartItem(item);
+        return;
+      }
+
+      const currentItemQuantity = currentItem.quantity;
+      if (currentItemQuantity !== item.quantity) {
+        updateSelectedCartItem(item, currentItemQuantity);
+      }
+    });
+  }, [cartItems]);
+
+  return (
+    <S.CartPageContainer>
+      <Navbar title={'SHOP'} url={ROUTES.ROOT} />
+      <S.CartPageContent>
+        <CartHeader cartTypeQuantity={cartItems.length} />
+        {loading ? (
+          <CartListSkeleton />
+        ) : cartItems.length > 0 ? (
+          <Suspense fallback={<CartListSkeleton />}>
+            <CartList />
+            <OrderPriceSummary />
+          </Suspense>
+        ) : (
+          <EmptyCartItemUI />
+        )}
+      </S.CartPageContent>
+      <CartPageFooter cartItemQuantity={cartItems.length} />
+    </S.CartPageContainer>
+  );
+}
+
+export default CartPage;
diff --git a/src/pages/ConfirmationPage/ConfirmationPage.styles.ts b/src/pages/ConfirmationPage/ConfirmationPage.styles.ts
new file mode 100644
index 0000000000..9bfbdc754e
--- /dev/null
+++ b/src/pages/ConfirmationPage/ConfirmationPage.styles.ts
@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+
+export const ConfirmationContainer = styled.div`
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ConfirmationSection = styled.main`
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+`;
+
+export const ConfirmationTitle = styled.h1`
+  font-size: 24px;
+  font-weight: 700;
+`;
+
+export const ConfirmationQuantity = styled.div`
+  font-size: 12px;
+  font-weight: 500;
+`;
+
+export const ConfirmationTotalPurchasePriceLabel = styled.span`
+  font-size: 16px;
+  font-weight: 700;
+`;
+
+export const ConfirmationTotalPurchasePrice = styled.div`
+  font-size: 24px;
+  font-weight: 700;
+`;
+
+export const ConfirmationFooterContainer = styled.footer`
+  width: 100%;
+  height: 64px;
+`;
diff --git a/src/pages/ConfirmationPage/ConfirmationPage.tsx b/src/pages/ConfirmationPage/ConfirmationPage.tsx
new file mode 100644
index 0000000000..15cecb73f4
--- /dev/null
+++ b/src/pages/ConfirmationPage/ConfirmationPage.tsx
@@ -0,0 +1,58 @@
+/** @jsxImportSource @emotion/react */
+
+import { css } from '@emotion/react';
+import Button from '../../shared/ui/Button';
+import Navbar from '../../shared/ui/Navbar';
+import * as S from './ConfirmationPage.styles';
+import { ROUTES } from '../../shared/constants/routeConstants';
+import { useNavigate } from 'react-router';
+import { useCartContext } from '../../shared/context/useCartContext';
+
+const ButtonCSS = css`
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 700;
+  transition: background-color 0.2s ease;
+  &:hover {
+    background-color: #333;
+  }
+
+  &:disabled {
+    background-color: #bebebe;
+    cursor: not-allowed;
+  }
+`;
+
+export default function ConfirmationPage() {
+  const { selectedCartItems } = useCartContext();
+
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate(ROUTES.ROOT);
+  };
+
+  const cartTypeQuantity = selectedCartItems.length;
+  const totalQuantity = selectedCartItems.reduce((acc, item) => acc + item.quantity, 0);
+  const totalPrice = selectedCartItems.reduce((acc, item) => acc + item.product.price * item.quantity, 0);
+
+  return (
+    <S.ConfirmationContainer>
+      <Navbar title='◀' url={ROUTES.CART} />
+      <S.ConfirmationSection>
+        <S.ConfirmationTitle>주문 확인</S.ConfirmationTitle>
+        <S.ConfirmationQuantity>
+          총 {cartTypeQuantity}종류의 상품 {totalQuantity}개를 주문합니다.
+        </S.ConfirmationQuantity>
+        <S.ConfirmationQuantity>최종 결제 금액을 확인해 주세요.</S.ConfirmationQuantity>
+        <S.ConfirmationTotalPurchasePriceLabel>총 결제 금액</S.ConfirmationTotalPurchasePriceLabel>
+        <S.ConfirmationTotalPurchasePrice>{totalPrice.toLocaleString()}원</S.ConfirmationTotalPurchasePrice>
+      </S.ConfirmationSection>
+      <S.ConfirmationFooterContainer>
+        <Button onClick={handleClick} title='결제하기' css={ButtonCSS} disabled={selectedCartItems.length === 0} />
+      </S.ConfirmationFooterContainer>
+    </S.ConfirmationContainer>
+  );
+}
diff --git a/src/pages/NotFoundPage/NotFoundPage.styles.ts b/src/pages/NotFoundPage/NotFoundPage.styles.ts
new file mode 100644
index 0000000000..8edb50ba5c
--- /dev/null
+++ b/src/pages/NotFoundPage/NotFoundPage.styles.ts
@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { Link } from 'react-router';
+
+export const ErrorContainer = styled.div`
+  text-align: center;
+`;
+
+export const Title = styled.h1`
+  font-size: 6rem;
+  margin-bottom: 1rem;
+`;
+
+export const Description = styled.p`
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+`;
+
+export const HomeLink = styled(Link)`
+  font-size: 1.2rem;
+  color: blue;
+  text-decoration: underline;
+`;
diff --git a/src/pages/NotFoundPage/NotFoundPage.tsx b/src/pages/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 0000000000..c4f0aef45b
--- /dev/null
+++ b/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,11 @@
+import * as S from './NotFoundPage.styles';
+
+export default function NotFoundPage() {
+  return (
+    <S.ErrorContainer>
+      <S.Title>404</S.Title>
+      <S.Description>페이지를 찾을 수 없습니다.</S.Description>
+      <S.HomeLink to='/'>홈으로 돌아가기</S.HomeLink>
+    </S.ErrorContainer>
+  );
+}
diff --git a/src/setupTests.ts b/src/setupTests.ts
new file mode 100644
index 0000000000..56744743ee
--- /dev/null
+++ b/src/setupTests.ts
@@ -0,0 +1,9 @@
+import { server } from './mocks/server';
+import '@testing-library/jest-dom';
+import { beforeAll, afterEach, afterAll } from 'vitest';
+
+beforeAll(() => server.listen());
+afterEach(() => {
+  server.resetHandlers();
+});
+afterAll(() => server.close());
diff --git a/src/shared/api/httpClient.ts b/src/shared/api/httpClient.ts
new file mode 100644
index 0000000000..0eca976fd7
--- /dev/null
+++ b/src/shared/api/httpClient.ts
@@ -0,0 +1,68 @@
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+const API_KEY = import.meta.env.VITE_API_KEY;
+
+const defaultHeaders = {
+  Authorization: `Basic ${API_KEY}`,
+  'Content-Type': 'application/json',
+};
+
+export const httpClient = {
+  get: async <T>(url: string): Promise<T> => {
+    const response = await fetch(`${API_BASE_URL}${url}`, {
+      method: 'GET',
+      headers: defaultHeaders,
+    });
+    if (!response.ok) throw new Error(response.statusText);
+    return response.json();
+  },
+
+  post: async <T>(url: string, body?: unknown): Promise<T | void> => {
+    const response = await fetch(`${API_BASE_URL}${url}`, {
+      method: 'POST',
+      headers: defaultHeaders,
+      body: JSON.stringify(body),
+    });
+    if (!response.ok) throw new Error(response.statusText);
+
+    // 현재 server에서 Response body가 비어있어서 아래 로직을 추가
+    const contentType = response.headers.get('content-type');
+    if (contentType?.includes('application/json')) {
+      return response.json();
+    }
+
+    return;
+  },
+
+  delete: async (url: string): Promise<void> => {
+    const response = await fetch(`${API_BASE_URL}${url}`, {
+      method: 'DELETE',
+      headers: defaultHeaders,
+    });
+    if (!response.ok) throw new Error(response.statusText);
+  },
+
+  put: async <T>(url: string, body: unknown): Promise<T> => {
+    const response = await fetch(`${API_BASE_URL}${url}`, {
+      method: 'PUT',
+      headers: defaultHeaders,
+      body: JSON.stringify(body),
+    });
+    if (!response.ok) throw new Error(response.statusText);
+    return response.json();
+  },
+  patch: async <T>(url: string, body: unknown): Promise<T | void> => {
+    const response = await fetch(`${API_BASE_URL}${url}`, {
+      method: 'PATCH',
+      headers: defaultHeaders,
+      body: JSON.stringify(body),
+    });
+    if (!response.ok) throw new Error(response.statusText);
+    // 현재 server에서 Response body가 비어있어서 아래 로직을 추가
+    const contentType = response.headers.get('content-type');
+    if (contentType?.includes('application/json')) {
+      return response.json();
+    }
+
+    return;
+  },
+};
diff --git a/src/shared/constants/routeConstants.ts b/src/shared/constants/routeConstants.ts
new file mode 100644
index 0000000000..f978cc3a64
--- /dev/null
+++ b/src/shared/constants/routeConstants.ts
@@ -0,0 +1,5 @@
+export const ROUTES = {
+  ROOT: '/',
+  CONFIRMATION: '/confirmation',
+  CART: '/',
+} as const;
diff --git a/src/shared/context/CartProvider.tsx b/src/shared/context/CartProvider.tsx
new file mode 100644
index 0000000000..851cdaa0f6
--- /dev/null
+++ b/src/shared/context/CartProvider.tsx
@@ -0,0 +1,70 @@
+import { createContext, useMemo, useState } from 'react';
+import { CartItem } from '../../features/cart/api/types/cart';
+
+interface CartContextType {
+  cartItems: CartItem[];
+  updateCartItems: (item: CartItem[]) => void;
+  updateCartItemQuantity: (item: CartItem, quantity: number) => void;
+  selectedCartItems: CartItem[];
+  updateSelectedCartItem: (item: CartItem, updatedQuantity: number) => void;
+  addAllCartItemsInSelected: (items: CartItem[]) => void;
+  removeSelectedCartItem: (item: CartItem) => void;
+}
+
+export const CartContext = createContext<CartContextType | undefined>(undefined);
+
+interface CartProviderProps {
+  children: React.ReactNode;
+}
+
+export const CartProvider = ({ children }: CartProviderProps) => {
+  const [cartItems, setCartItems] = useState<CartItem[]>([]);
+  const [selectedCartItems, setSelectedCartItems] = useState<CartItem[]>([]);
+
+  const updateCartItems = (cartItems: CartItem[]) => {
+    setCartItems(cartItems);
+  };
+
+  const updateCartItemQuantity = (cartItem: CartItem, quantity: number) => {
+    setCartItems((prevItems) => {
+      return prevItems.map((item) => (item.id === cartItem.id ? { ...item, quantity } : item));
+    });
+  };
+
+  const updateSelectedCartItem = (cartItem: CartItem, quantity: number) => {
+    setSelectedCartItems((prevItems) => {
+      const existing = prevItems.some((item) => item.id === cartItem.id);
+
+      if (existing) {
+        return prevItems.map((item) => (item.id === cartItem.id ? { ...item, quantity } : item));
+      }
+
+      return [...prevItems, cartItem];
+    });
+  };
+
+  const removeSelectedCartItem = (cartItem: CartItem) => {
+    setSelectedCartItems((prevItems) => {
+      return prevItems.filter((item) => item.id !== cartItem.id);
+    });
+  };
+
+  const addAllCartItemsInSelected = (cartItems: CartItem[]) => {
+    setSelectedCartItems(cartItems);
+  };
+
+  const value = useMemo(
+    () => ({
+      cartItems,
+      updateCartItems,
+      updateCartItemQuantity,
+      selectedCartItems,
+      updateSelectedCartItem,
+      addAllCartItemsInSelected,
+      removeSelectedCartItem,
+    }),
+    [cartItems, selectedCartItems]
+  );
+
+  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
+};
diff --git a/src/shared/context/useCartContext.tsx b/src/shared/context/useCartContext.tsx
new file mode 100644
index 0000000000..8b2375aa1b
--- /dev/null
+++ b/src/shared/context/useCartContext.tsx
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { CartContext } from './CartProvider';
+
+export const useCartContext = () => {
+  const context = useContext(CartContext);
+
+  if (!context) {
+    throw new Error('useCartContext must be used within a CartProvider');
+  }
+  return context;
+};
diff --git a/src/shared/ui/Button.tsx b/src/shared/ui/Button.tsx
new file mode 100644
index 0000000000..8de4c7083d
--- /dev/null
+++ b/src/shared/ui/Button.tsx
@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  title: string;
+}
+
+export default function Button({ title, ...rest }: ButtonProps) {
+  return <ButtonStyles {...rest}>{title}</ButtonStyles>;
+}
+
+const ButtonStyles = styled.button`
+  border: none;
+  cursor: pointer;
+`;
diff --git a/src/shared/ui/Navbar.tsx b/src/shared/ui/Navbar.tsx
new file mode 100644
index 0000000000..138a760068
--- /dev/null
+++ b/src/shared/ui/Navbar.tsx
@@ -0,0 +1,56 @@
+/** @jsxImportSource @emotion/react */
+
+import { useNavigate } from 'react-router';
+import styled from '@emotion/styled';
+import Button from './Button';
+import { css } from '@emotion/react';
+
+interface NavbarProps {
+  title: string;
+  url?: string;
+}
+
+const ButtonCSS = css`
+  background-color: #000;
+  border-radius: 8px;
+  padding: 8px;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+  transition: scale 0.2s ease, background-color 0.2s ease;
+  &:hover {
+    scale: 1.1;
+  }
+
+  &:disabled {
+    background-color: #bebebe;
+    cursor: not-allowed;
+  }
+`;
+
+export default function Navbar({ title, url }: NavbarProps) {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    if (!url) return;
+    navigate(url);
+  };
+
+  return (
+    <NavbarContainer onClick={handleClick}>
+      <Button css={ButtonCSS} title={title} onClick={handleClick} />
+    </NavbarContainer>
+  );
+}
+
+const NavbarContainer = styled.nav`
+  width: 100%;
+  height: 64px;
+  background-color: #000;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+  font-size: 20px;
+  font-weight: 800;
+`;
diff --git a/src/shared/ui/SelectInput.tsx b/src/shared/ui/SelectInput.tsx
new file mode 100644
index 0000000000..5ce0de4eab
--- /dev/null
+++ b/src/shared/ui/SelectInput.tsx
@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+import React from 'react';
+
+type SelectInputProps = React.ComponentPropsWithoutRef<'input'>;
+
+export default function SelectInput({ ...rest }: SelectInputProps) {
+  return <SelectInputBox {...rest} />;
+}
+
+const SelectInputBox = styled.input`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  accent-color: black;
+`;
diff --git a/test/j.test.ts b/test/j.test.ts
deleted file mode 100644
index a29703db67..0000000000
--- a/test/j.test.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-describe("jest test", () => {
-  it("should be true", () => {
-    expect(true).toBe(true);
-  });
-});
diff --git a/test/r.test.tsx b/test/r.test.tsx
deleted file mode 100644
index 0f0328a83b..0000000000
--- a/test/r.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import App from "../src/App";
-
-describe("RTL Test", () => {
-  it("should render", () => {
-    render(<App />);
-    expect(screen.getByText("react-shopping-cart")).toBeInTheDocument();
-  });
-});
diff --git a/tsconfig.json b/tsconfig.json
index 3c36b1adf3..44b7a15781 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,11 +20,12 @@
     "noFallthroughCasesInSwitch": true,
 
     /* Testing */
-    "types": ["jest", "@testing-library/jest-dom"],
+    "types": ["jest", "@testing-library/jest-dom", "vite/client", "vitest/globals"],
     "esModuleInterop": true,
 
     "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react"
   },
-  "include": ["src", "test"],
+  "include": ["src", "__test__"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 861b04b356..f989781978 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,11 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
-
-// https://vitejs.dev/config/
-export default defineConfig({
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react-swc';
+export default defineConfig(() => ({
   plugins: [react()],
-})
+  base: process.env.NODE_ENV === 'production' ? '/react-shopping-cart/' : '/',
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts', './src/setupTests.ts'],
+  },
+}));
diff --git a/vitest.setup.ts b/vitest.setup.ts
new file mode 100644
index 0000000000..43eb80c12d
--- /dev/null
+++ b/vitest.setup.ts
@@ -0,0 +1,4 @@
+import { expect } from 'vitest';
+import * as matchers from '@testing-library/jest-dom/matchers';
+
+expect.extend(matchers);