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

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

현재 상황

환경

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

현재 CSS 구조

.main-content {
    display: flex;
    gap: 20px;
}
.patient-list {
    width: 380px;  /* 고정 너비 */
}
.prescription-panel {
    flex: 1;       /* 나머지 공간 */
}

세로 모니터에서의 문제

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

---

해결 방안 비교

방안 1: 미디어쿼리 (aspect-ratio)

/* 세로 모니터 감지 (높이 > 너비) */
@media (orientation: portrait) {
    .patient-list {
        width: 280px;  /* 더 좁게 */
    }
}

장점:

• 간단, 직관적
• 기존 코드 영향 최소화

단점:

• 세로 모니터 전용 스타일 분기 필요

---

방안 2: CSS Container Queries

.main-content {
    container-type: inline-size;
}
@container (max-width: 1500px) {
    .patient-list {
        width: 280px;
    }
}

장점:

• 모던한 접근
• 컨테이너 기준으로 반응

단점:

• 브라우저 지원 확인 필요 (Chrome 105+)

---

방안 3: 환자목록 비율 기반 (추천 ⭐)

.patient-list {
    width: 280px;
    min-width: 250px;
    max-width: 380px;
}

또는:

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

장점:

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

단점:

• 특정 breakpoint 세밀 조정 어려움

---

방안 4: 세로 모니터 전용 레이아웃

@media (orientation: portrait) and (min-height: 1800px) {
    .main-content {
        flex-direction: column;
    }
    .patient-list {
        width: 100%;
        height: 200px;  /* 상단 고정 */
    }
}

장점:

• 세로 모니터 최적화

단점:

• 레이아웃 완전 변경 → 복잡
• UX 변화 큼

---

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

구현

/* 기본: 비율 기반 너비 */
.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%

---

승인 시 진행

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