Merge pull request #1 from yein1ee/devel

feat: 옵저버 패턴 기반 상태 관리 store 구현 및 필터 기능 추가

Author: yein1ee

eslint.config.js

@@ -2,11 +2,17 @@ import globals from "globals";
 import pluginJs from "@eslint/js";
 import eslintConfigPrettier from "eslint-config-prettier";
 import eslintPluginPrettier from "eslint-plugin-prettier/recommended";
+import tseslint from "typescript-eslint";
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
+  { ignores: ["dist", "build", "node_modules", "src/template.ts"] },
   { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
   pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ["**/*.{ts,tsx}"],
+  },
   eslintPluginPrettier,
   eslintConfigPrettier,
 ];

package.json

@@ -31,6 +31,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.10.1",
     "@vitest/coverage-v8": "latest",
     "@vitest/ui": "^2.1.8",
     "eslint": "^9.16.0",
@@ -42,7 +43,10 @@
     "lint-staged": "^15.2.11",
     "msw": "^2.10.2",
     "prettier": "^3.4.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.4",
     "vite": "npm:rolldown-vite@latest",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "latest"
   },
   "msw": {

pnpm-lock.yaml

@@ -100,10 +100,7 @@ addEventListener("fetch", function (event) {
 
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
-  if (
-    event.request.cache === "only-if-cached" &&
-    event.request.mode !== "same-origin"
-  ) {
+  if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {
     return;
   }
 
@@ -219,9 +216,7 @@ async function getResponse(event, client, requestId) {
     const acceptHeader = headers.get("accept");
     if (acceptHeader) {
       const values = acceptHeader.split(",").map((value) => value.trim());
-      const filteredValues = values.filter(
-        (value) => value !== "msw/passthrough",
-      );
+      const filteredValues = values.filter((value) => value !== "msw/passthrough");
 
       if (filteredValues.length > 0) {
         headers.set("accept", filteredValues.join(", "));
@@ -291,10 +286,7 @@ function sendToClient(client, message, transferrables = []) {
       resolve(event.data);
     };
 
-    client.postMessage(message, [
-      channel.port2,
-      ...transferrables.filter(Boolean),
-    ]);
+    client.postMessage(message, [channel.port2, ...transferrables.filter(Boolean)]);
   });
 }
 

public/mockServiceWorker.js

@@ -0,0 +1,38 @@
+import { AppContents, ProductListPage } from "./pages";
+import createRouter from "./router";
+import { fetchProducts } from "./store/products-list/fetchProducts";
+import { ProductState, productStore } from "./store/products-list/productStore";
+import { setupFilterEventHandlers } from "./components/SearchForm/filterEventHandlers";
+
+export default function App() {
+  const $root = document.querySelector("#root");
+
+  const renderHome = (state: ProductState) => {
+    $root.innerHTML = AppContents({
+      children: ProductListPage(state),
+    });
+    // DOM 렌더링 후 이벤트 리스너 등록
+    setupFilterEventHandlers();
+  };
+
+  const pages = {
+    home: () => {
+      const currentState = productStore.getState();
+      renderHome(currentState);
+    },
+    products: () => ($root.innerHTML = AppContents({ children: `products 입니다` })),
+  };
+  const router = createRouter();
+
+  router.addRoute("#/", pages.home).addRoute("#/products", pages.products).start();
+
+  productStore.subscribe((state) => {
+    const hash = window.location.hash || "#/";
+
+    if (hash === "#/" || hash === "" || hash === "#") {
+      renderHome(state);
+    }
+  });
+
+  fetchProducts(productStore.getState().params);
+}

src/App.ts

@@ -1,9 +1,11 @@
+import { GetProductsParams, GetProductsResponse } from "../types";
+
 // 상품 목록 조회
-export async function getProducts(params = {}) {
+export async function getProducts(params: GetProductsParams): Promise<GetProductsResponse> {
   const { limit = 20, search = "", category1 = "", category2 = "", sort = "price_asc" } = params;
   const page = params.current ?? params.page ?? 1;
 
-  const searchParams = new URLSearchParams({
+  const searchParams: URLSearchParams = new URLSearchParams({
     page: page.toString(),
     limit: limit.toString(),
     ...(search && { search }),

src/api/productApi.js src/api/productApi.tssrc/api/productApi.js renamed to src/api/productApi.ts

@@ -0,0 +1,11 @@
+export const Skeleton = /* html */ `
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
+    <div class="aspect-square bg-gray-200"></div>
+    <div class="p-3">
+        <div class="h-4 bg-gray-200 rounded mb-2"></div>
+        <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
+        <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
+        <div class="h-8 bg-gray-200 rounded"></div>
+    </div>
+    </div>
+`;

src/components/Loading/Skeleton.ts

@@ -0,0 +1,12 @@
+const Spinner = /* html */ `
+    <div class="inline-flex items-center">
+        <svg class="animate-spin h-5 w-5 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" 
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <span class="text-sm text-gray-600">상품을 불러오는 중...</span>
+    </div>
+`;
+
+export { Spinner };

src/components/Loading/Spinner.ts

@@ -0,0 +1,13 @@
+import { Skeleton } from "./Skeleton";
+import { Spinner } from "./Spinner";
+
+export const Loading = /* html */ `
+    <div>
+        <div class="grid grid-cols-2 gap-4 mb-6" id="products-grid">
+            ${Skeleton.repeat(8)}
+        </div>
+        <div class="text-center py-4">
+            ${Spinner}
+        </div>
+    </div>
+`;

src/components/Loading/index.ts

@@ -0,0 +1,33 @@
+import { ProductItem } from "@/types";
+
+export const ProductCard = (product: ProductItem) => {
+  return /* html */ `
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden product-card"
+        data-product-id="${product.productId}">
+        <!-- 상품 이미지 -->
+        <div class="aspect-square bg-gray-100 overflow-hidden cursor-pointer product-image">
+            <img src="${product.image}"
+                alt="${product.title}"
+                class="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
+                loading="lazy">
+        </div>
+        <!-- 상품 정보 -->
+        <div class="p-3">
+            <div class="cursor-pointer product-info mb-3">
+            <h3 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
+                ${product.title}
+            </h3>
+            <p class="text-xs text-gray-500 mb-2">${product.brand}</p>
+            <p class="text-lg font-bold text-gray-900">
+                ${parseInt(product.lprice).toLocaleString()}원
+            </p>
+            </div>
+            <!-- 장바구니 버튼 -->
+            <button class="w-full bg-blue-600 text-white text-sm py-2 px-3 rounded-md
+                hover:bg-blue-700 transition-colors add-to-cart-btn" data-product-id="85067212996">
+                장바구니 담기
+            </button>
+        </div>
+    </div>
+    `;
+};