삼품관리 - 자동차 제조 ERP

// 폴더 구조
src/
  app/         // 진입점, 전역 설정, 프로바이더
  pages/       // 라우팅 페이지 컴포넌트
  widgets/     // 독립적인 UI 블록 (예: 사이드바, 헤더)
  features/    // 비즈니스 액션 (예: 지점선택, 입고처리)
  entities/    // 비즈니스 엔티티 (예: 사용자, 품목)
  shared/      // 재사용 가능한 공통 코드 (예: API, UI)

// src/features/branch-select/index.ts (Public API)
export { BranchSelect } from "./ui";
export { useBranchSelectionStore } from "./model";
// 내부 구현 파일(store.ts 등)은 외부로 노출되지 않음!
// steiger.config.js (FSD 아키텍처 린터 설정)
import fsd from '@feature-sliced/steiger-plugin'
import { defineConfig } from 'steiger'
export default defineConfig([
  ...fsd.configs.recommended,
  {
    // 아키텍처 경계 위반 시 에러 발생
    rules: {
      'fsd/public-api': 'error',
    },
  },
])

// 1. 클라이언트 상태 (Zustand) - 지점 선택 스토어
// src/features/branch-select/model/branch-selection.store.ts
export const useBranchSelectionStore = create<BranchSelectionState>((set) => ({
  selections: { agency: "", wms: "", factory: "" },
  setSelection: (moduleType, branchId) =>
    set((state) => ({
      selections: { ...state.selections, [moduleType]: branchId },
    })),
}));
// 2. 서버 상태 (React Query) - 입고 관리 API
// src/features/receiving-process/api/receiving-process.api.ts
import { queryClient } from "@/shared/api/base";
export const useReceivingProcessQuery = (warehouseId: number, processId: number) =>
  // 경로 자동 추론이 적용된 타입 안전한 쿼리
  queryClient.useQuery(
    "get",
    "/api/warehouse/receiving/{warehouseId}/process/{processId}",
    { params: { path: { warehouseId, processId } } }
  );

// package.json 스크립트
"generate-api-types": "openapi-typescript dist/combined-api.yaml --output src/shared/model/v1.d.ts"
// src/shared/api/base.ts (타입 안전한 클라이언트 설정)
import createClient from "openapi-react-query";
import type { paths } from "@/shared/model/v1";
export const queryClient = createClient<paths>(fetchClient);
// 실제 사용 예시
// OpenAPI 스키마에 기반하여 타입, 파라미터, 응답값이 모두 자동 추론됨
queryClient.useQuery("get", "/api/warehouse/receiving/{warehouseId}/process/{processId}", ...);

// src/app/providers/router.tsx
// 페이지 컴포넌트를 직접 import 하지 않고 lazy를 사용해 동적으로 가져옵니다.
const ItemMaster = lazy(async () => ({
default: (await import("@/pages/master/items")).ItemMaster,
}));
const ShippingProcess = lazy(async () => ({
  default: (await import("@/pages/wms/shipping/process/ui")).ShippingProcess,
}));

// src/shared/ui/Button/Button.test.tsx
// 실제 프로젝트의 TDD 테스트 코드 예시
test("요구사항: onClick 핸들러가 클릭 시 호출되어야 한다", async () => {
// 1. 준비 (Arrange)
const user = userEvent.setup();
const handleClick = vi.fn();
render(<Button onClick={handleClick}>Click me</Button>);
  // 2. 실행 (Act)
  const button = screen.getByRole("button");
  await user.click(button);
  // 3. 단언 (Assert): 핸들러가 정확히 한번 호출되었는지 검증
  expect(handleClick).toHaveBeenCalledTimes(1);
});