pharmacy-pos-qr-system/docs/세로모니터_레이아웃_개선_계획.md

# PMR 세로 모니터 레이아웃 개선 계획

## 현재 상황

### 환경
- 모니터: 2.5K (2560x1440) 세로 모드 → 1440x2560
- 문제: 환자목록과 처방전 내용이 **거의 절반씩** 차지
- 환자목록은 그렇게 넓을 필요 없음

### 현재 CSS 구조
```css
.main-content {
    display: flex;
    gap: 20px;
}
.patient-list {
    width: 380px;  /* 고정 너비 */
}
.prescription-panel {
    flex: 1;       /* 나머지 공간 */
}
```

### 세로 모니터에서의 문제
- 화면 너비: 1440px
- 환자목록: 380px (26%)
- 처방전: ~1040px (72%)
- **실제로는 환자목록이 26%인데 "절반처럼" 느껴짐** → 세로가 길어서 상대적으로 넓어 보임

---

## 해결 방안 비교

### 방안 1: 미디어쿼리 (aspect-ratio)
```css
/* 세로 모니터 감지 (높이 > 너비) */
@media (orientation: portrait) {
    .patient-list {
        width: 280px;  /* 더 좁게 */
    }
}
```

**장점:**
- 간단, 직관적
- 기존 코드 영향 최소화

**단점:**
- 세로 모니터 전용 스타일 분기 필요

---

### 방안 2: CSS Container Queries
```css
.main-content {
    container-type: inline-size;
}
@container (max-width: 1500px) {
    .patient-list {
        width: 280px;
    }
}
```

**장점:**
- 모던한 접근
- 컨테이너 기준으로 반응

**단점:**
- 브라우저 지원 확인 필요 (Chrome 105+)

---

### 방안 3: 환자목록 비율 기반 (추천 ⭐)
```css
.patient-list {
    width: 280px;
    min-width: 250px;
    max-width: 380px;
}
```

또는:
```css
.patient-list {
    width: clamp(250px, 20vw, 380px);
}
```

**장점:**
- 미디어쿼리 없이 자동 조절
- 모든 화면에서 적절한 비율 유지
- **가장 단순함**

**단점:**
- 특정 breakpoint 세밀 조정 어려움

---

### 방안 4: 세로 모니터 전용 레이아웃
```css
@media (orientation: portrait) and (min-height: 1800px) {
    .main-content {
        flex-direction: column;
    }
    .patient-list {
        width: 100%;
        height: 200px;  /* 상단 고정 */
    }
}
```

**장점:**
- 세로 모니터 최적화

**단점:**
- 레이아웃 완전 변경 → 복잡
- UX 변화 큼

---

## 추천 방안: **방안 3 + 방안 1 조합**

### 구현
```css
/* 기본: 비율 기반 너비 */
.patient-list {
    width: clamp(250px, 22vw, 380px);
}

/* 세로 모니터에서 더 좁게 */
@media (orientation: portrait) {
    .patient-list {
        width: clamp(220px, 18vw, 300px);
    }
}
```

### 이유
1. **clamp()**: 최소/최대 범위 내에서 자동 조절
2. **portrait 미디어쿼리**: 세로 모니터 추가 최적화
3. **코드 2줄 추가**로 해결 가능

---

## 작업 범위

### 변경 파일
- `pmr.html` - CSS 수정 (약 5줄)

### 테스트
- 가로 모니터 (기존 동작 유지)
- 세로 모니터 (환자목록 좁아짐)
- 반응형 resize

---

## 예상 결과

| 모드 | 환자목록 너비 | 비율 |
|------|--------------|------|
| 가로 (1920px) | ~380px | 20% |
| 가로 (1440px) | ~320px | 22% |
| **세로 (1440px)** | **~260px** | **18%** |

---

## 승인 시 진행

약사님 확인 후 바로 구현 가능합니다.