sam-react-prod/claudedocs/guides/[PLAN-2025-12-19] page-layout-standardization.md

페이지 레이아웃 표준화 계획

📋 개요

목표: 품목관리(/items) 페이지를 기준으로 모든 페이지의 헤더/레프트 사이드바 간격을 통일

기준 페이지: /items/page.tsx

<div className="p-6">
  <ItemListClient />
</div>

🔍 현재 상황 분석

레이아웃 구조

AuthenticatedLayout
├── Header (top, mx-3 mt-3)
└── Content Area (flex, gap-3, px-3 pb-3)
    ├── Sidebar (sticky, w-64)
    └── Main (flex-1, overflow-auto)
        └── 각 페이지 컴포넌트

패딩 레이어

1. AuthenticatedLayout: <main className="flex-1 overflow-auto"> - 패딩 없음
2. page.tsx wrapper: <div className="p-6"> - 품목관리 패턴
3. PageLayout: p-3 md:p-6 pb-0 - 내부 패딩

문제점

구분	품목관리 (기준)	다른 페이지들
page.tsx	<div className="p-6">	<Component /> 또는 <div>
결과	헤더/레프트와 적절한 간격	헤더/레프트에 붙어있음

✅ 수정 대상 페이지 체크리스트

1️⃣ 리스트 페이지 (IntegratedListTemplateV2 사용)

• /board/page.tsx - 게시판 목록
• /hr/employee-management/page.tsx - 사원관리 목록
• /hr/attendance-management/page.tsx - 근태관리 목록
• /hr/vacation-management/page.tsx - 휴가관리 목록
• /accounting/purchase/page.tsx - 매입관리 목록
• /accounting/sales/page.tsx - 매출관리 목록
• /accounting/vendors/page.tsx - 거래처관리 목록
• /accounting/deposits/page.tsx - 입금관리 목록
• /accounting/withdrawals/page.tsx - 출금관리 목록
• /accounting/bills/page.tsx - 어음관리 목록
• /accounting/bank-transactions/page.tsx - 통장거래내역
• /accounting/vendor-ledger/page.tsx - 거래처원장
• /accounting/daily-report/page.tsx - 일일마감
• /accounting/expected-expenses/page.tsx - 예상지출
• /accounting/bad-debt-collection/page.tsx - 악성채권추심
• /accounting/receivables-status/page.tsx - 매출채권현황
• /approval/draft/page.tsx - 기안함
• /approval/inbox/page.tsx - 결재함
• /approval/reference/page.tsx - 참조함

2️⃣ 상세/수정/등록 페이지 (PageLayout 직접 사용)

• /board/create/page.tsx - 게시글 등록
• /board/[id]/page.tsx - 게시글 상세
• /board/[id]/edit/page.tsx - 게시글 수정
• /hr/employee-management/new/page.tsx - 사원 등록
• /hr/employee-management/[id]/page.tsx - 사원 상세
• /hr/employee-management/[id]/edit/page.tsx - 사원 수정
• /accounting/sales/new/page.tsx - 매출 등록
• /accounting/sales/[id]/page.tsx - 매출 상세
• /accounting/vendors/new/page.tsx - 거래처 등록
• /accounting/vendors/[id]/page.tsx - 거래처 상세
• /accounting/purchase/[id]/page.tsx - 매입 상세
• /accounting/deposits/[id]/page.tsx - 입금 상세
• /accounting/withdrawals/[id]/page.tsx - 출금 상세
• /accounting/bills/[id]/page.tsx - 어음 상세
• /accounting/bills/new/page.tsx - 어음 등록
• /accounting/vendor-ledger/[id]/page.tsx - 거래처원장 상세
• /accounting/bad-debt-collection/new/page.tsx - 악성채권 등록
• /accounting/bad-debt-collection/[id]/page.tsx - 악성채권 상세
• /accounting/bad-debt-collection/[id]/edit/page.tsx - 악성채권 수정
• /approval/draft/new/page.tsx - 기안 작성

3️⃣ 기타 페이지

• /hr/attendance/page.tsx - 모바일 근태
• /hr/salary-management/page.tsx - 급여관리
• /settings/ranks/page.tsx - 직급관리
• /settings/titles/page.tsx - 직책관리
• /settings/permissions/page.tsx - 권한관리
• /settings/work-schedule/page.tsx - 근무일정
• /settings/leave-policy/page.tsx - 휴가정책
• /dashboard/page.tsx - 대시보드

🔧 수정 방법

표준 패턴 (품목관리 기준)

page.tsx에서 wrapper 추가:

// Before
export default function SomePage() {
  return <SomeComponent />;
}

// After
export default function SomePage() {
  return (
    <div className="p-6">
      <SomeComponent />
    </div>
  );
}

📌 공통 레이아웃 래퍼 제안

향후 관리 편의를 위해 공통 래퍼 컴포넌트 생성:

// src/components/organisms/ContentWrapper.tsx
export function ContentWrapper({ children }: { children: React.ReactNode }) {
  return <div className="p-6">{children}</div>;
}

🎯 실행 계획

Phase 1: 게시판 페이지 (대표 수정)

1. /board/page.tsx 수정
2. 브라우저에서 확인
3. 품목관리와 비교 검증

Phase 2: 나머지 페이지 일괄 수정

• 체크리스트 기반으로 순차 수정
• 각 수정 후 체크 표시

Phase 3: RULES.md 업데이트

• 페이지 레이아웃 표준 규칙 추가

📝 RULES.md 추가 내용 (예정)

## Page Layout Standards
**Priority**: 🟡 **Triggers**: 새 페이지 생성, 기존 페이지 레이아웃 수정

### 표준 패턴
- **page.tsx wrapper**: 모든 페이지는 `<div className="p-6">` wrapper 필수
- **기준**: 품목관리(`/items/page.tsx`) 페이지

### 예시
\`\`\`tsx
// ✅ 올바른 패턴
export default function SomePage() {
  return (
    <div className="p-6">
      <SomeComponent />
    </div>
  );
}

// ❌ 잘못된 패턴
export default function SomePage() {
  return <SomeComponent />;
}
\`\`\`

### 패딩 구조
- AuthenticatedLayout: 메인 영역 패딩 없음
- page.tsx: `p-6` wrapper (24px)
- 컴포넌트 내부: 추가 패딩 선택적