웹 프론트엔드 아키텍처 비교

src/
├── app/          # 앱 초기화, 전역 설정, 라우팅
├── pages/        # 라우트 단위 페이지 조합
├── widgets/      # 독립적인 복합 UI 블록
├── features/     # 사용자 시나리오/액션 단위
├── entities/     # 비즈니스 도메인 단위
└── shared/       # 공통 유틸, UI 킷, 타입 등

app → pages → widgets → features → entities → shared

// features/auth/ui/LoginForm.tsx
import { Button } from '@/shared/ui';          // ✅ shared 참조 가능
import { UserAvatar } from '@/entities/user';  // ✅ entities 참조 가능
// import { Header } from '@/widgets/header';  // ❌ 상위 레이어 참조 불가

export const LoginForm = () => {
  return (
    <form>
      <input type="email" />
      <input type="password" />
      <Button>로그인</Button>
    </form>
  );
};

src/
├── components/   # UI 컴포넌트
├── pages/        # 라우트 페이지
├── hooks/        # 커스텀 훅
├── services/     # API 호출 및 외부 통신
├── store/        # 전역 상태 관리
├── utils/        # 유틸리티 함수
└── types/        # TypeScript 타입 정의

// services/userService.ts
export const userService = {
  getUser: async (id: string) => {
    const res = await fetch(`/api/users/${id}`);
    return res.json();
  },
};

// hooks/useUser.ts
import { useQuery } from '@tanstack/react-query';
import { userService } from '@/services/userService';

export const useUser = (id: string) => {
  return useQuery(['user', id], () => userService.getUser(id));
};

// pages/ProfilePage.tsx
import { useUser } from '@/hooks/useUser';

const ProfilePage = () => {
  const { data: user } = useUser('123');
  return <div>{user?.name}</div>;
};

src/
└── components/
    ├── atoms/
    │   ├── Button/
    │   ├── Input/
    │   └── Icon/
    ├── molecules/
    │   ├── SearchBar/
    │   └── FormField/
    ├── organisms/
    │   ├── Header/
    │   └── ProductCard/
    ├── templates/
    │   └── MainLayout/
    └── pages/
        └── HomePage/

src/
├── domain/
│   ├── user/
│   │   ├── User.ts          # Entity
│   │   ├── UserRepository.ts # Repository 인터페이스
│   │   └── UserService.ts    # Domain Service
│   ├── order/
│   │   ├── Order.ts
│   │   ├── OrderItem.ts
│   │   └── Money.ts         # Value Object
│   └── payment/
├── infrastructure/          # API, LocalStorage 등 외부 시스템 연결
│   └── api/
│       └── UserApiRepository.ts
└── presentation/            # UI 레이어
    └── pages/

// domain/order/Money.ts — Value Object
export class Money {
  constructor(
    private readonly amount: number,
    private readonly currency: string
  ) {}

  add(other: Money): Money {
    if (this.currency !== other.currency) throw new Error('Currency mismatch');
    return new Money(this.amount + other.amount, this.currency);
  }

  equals(other: Money): boolean {
    return this.amount === other.amount && this.currency === other.currency;
  }

  toString(): string {
    return `${this.amount.toLocaleString()} ${this.currency}`;
  }
}

// domain/order/Order.ts — Entity
export class Order {
  constructor(
    public readonly id: string,
    private items: OrderItem[],
    private status: OrderStatus
  ) {}

  getTotalPrice(): Money {
    return this.items.reduce(
      (total, item) => total.add(item.getPrice()),
      new Money(0, 'KRW')
    );
  }

  canCancel(): boolean {
    return this.status === OrderStatus.PENDING;
  }
}

Model   — 데이터와 비즈니스 로직 (상태, API 응답)
View    — 사용자에게 보이는 UI
Controller — 사용자 입력을 받아 Model을 업데이트하고 View를 갱신

Model     — 원시 데이터, API 응답 타입
View      — JSX/Template (순수 렌더링)
ViewModel — 상태 관리 + 비즈니스 로직 (useXxx 훅, Pinia store, Vuex 등)

// ViewModel — useProductViewModel.ts
export const useProductViewModel = (productId: string) => {
  const [product, setProduct] = useState<Product | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const fetchProduct = async () => {
    setIsLoading(true);
    const data = await productService.getById(productId);
    setProduct(data);
    setIsLoading(false);
  };

  const formattedPrice = product
    ? `${product.price.toLocaleString()}원`
    : '-';

  return { product, isLoading, formattedPrice, fetchProduct };
};

// View — ProductCard.tsx
const ProductCard = ({ productId }: { productId: string }) => {
  const { product, isLoading, formattedPrice } = useProductViewModel(productId);

  if (isLoading) return <Spinner />;
  return (
    <div>
      <h2>{product?.name}</h2>
      <p>{formattedPrice}</p>
    </div>
  );
};