react-nextjs-pages

React & Next.js Pages Router 컨벤션

이 프로젝트는 Next.js 14 Pages Router를 사용한다. App Router 패턴을 적용하지 않는다.

---

라우팅 구조

apps/{app}/
├── pages/          # 라우팅 진입점 (얇게 유지)
└── src/            # 도메인별 로직

• pages/ 파일은 얇게 유지
• 로직은 src/{도메인}/ 아래에 분리
• 컨테이너/뷰 패턴 사용

---

pageInfo static 속성

페이지 컴포넌트에 pageInfo static 속성으로 레이아웃을 지정한다:

const OrderPage: NextPageWithLayout = () => {
  return <OrderContainer />;
};

OrderPage.pageInfo = {
  routeKey: RouteKey.ORDER,
  layout: Layout.ORDER,
};

export default OrderPage;

---

페이지 컴포넌트 구조

// ✅ 좋은 예: 페이지는 얇게, 로직은 src로 분리
// pages/order/[orderId].tsx
import { OrderContainer } from '@/order/containers/OrderContainer';

const OrderPage: NextPageWithLayout = () => {
  return <OrderContainer />;
};

OrderPage.pageInfo = {
  routeKey: RouteKey.ORDER,
  layout: Layout.ORDER,
};

export default OrderPage;

// ❌ 나쁜 예: 페이지에 로직이 모두 포함됨
// pages/order/[orderId].tsx
const OrderPage = () => {
  const { orderId } = useRouter().query;
  const { data } = useQuery(...);
  // 수백 줄...
};

---

Import 순서 (ESLint 강제)

아래 순서를 반드시 지킨다:

// 1. 외부 라이브러리
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';

// 2. @repo/shared (모노레포 공유 패키지)
import { Button } from '@repo/shared/components';
import { useOrderQuery } from '@repo/shared/queries/order';

// 3. 상대 경로 (현재 앱 내부)
import { OrderHeader } from './components/OrderHeader';
import { formatPrice } from '../utils/format';

// ❌ 나쁜 예: 순서가 뒤섞임
import { OrderHeader } from './OrderHeader';
import { useState } from 'react';
import { Button } from '@repo/shared/components';

---

컴포넌트 작성 규칙

함수 선언 방식

• 페이지 컴포넌트: const PageName: NextPageWithLayout = () => {}
• 일반 컴포넌트: const ComponentName = () => {} 또는 function ComponentName() {}

Props 타입 정의

• 컴포넌트와 동일 파일에 정의한다
• 별도 types 파일 분리는 복잡한 경우에만 한다

interface OrderCardProps {
  order: Order;
  onSelect: (id: string) => void;
}

const OrderCard = ({ order, onSelect }: OrderCardProps) => { ... };