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

## 📋 개요

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

**기준 페이지**: `/items/page.tsx`
```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 추가:**
```tsx
// Before
export default function SomePage() {
  return <SomeComponent />;
}

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

## 📌 공통 레이아웃 래퍼 제안

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

```tsx
// 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 추가 내용 (예정)

```markdown
## 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)
- 컴포넌트 내부: 추가 패딩 선택적
```