@@ -2201,6 +2318,7 @@
}
currentPaaiLogId = cached.result.log_id;
+ currentPaaiResponse = JSON.stringify(cached.result.analysis || {});
displayPaaiResult(cached.result);
modal.classList.add('show');
}
@@ -2325,28 +2443,93 @@
document.getElementById('paaiModal').classList.remove('show');
}
+ // 피드백 관련 변수
+ let currentPaaiResponse = '';
+ let currentFeedbackCategory = 'other';
+
async function sendPaaiFeedback(useful) {
if (!currentPaaiLogId) return;
// 버튼 즉시 반영
document.getElementById('paaiUseful').classList.toggle('selected', useful);
- document.getElementById('paaiNotUseful').classList.toggle('selected', !useful);
+ document.getElementById('paaiNotUseful').classList.toggle('selected-bad', !useful);
+ document.getElementById('paaiNotUseful').classList.remove('selected');
+
+ if (useful) {
+ // 👍 좋아요: 바로 저장하고 닫기
+ try {
+ await fetch('/api/paai/feedback', {
+ method: 'POST',
+ headers: {'Content-Type': 'application/json'},
+ body: JSON.stringify({
+ prescription_id: currentPrescriptionId,
+ patient_name: document.querySelector('.patient-name')?.textContent || '',
+ paai_response: currentPaaiResponse,
+ rating: 'good'
+ })
+ });
+ } catch (err) {
+ console.error('Feedback error:', err);
+ }
+ setTimeout(() => closePaaiModal(), 500);
+ } else {
+ // 👎 아니요: 코멘트 모달 열기
+ openFeedbackModal();
+ }
+ }
+
+ function openFeedbackModal() {
+ document.getElementById('feedbackModal').classList.add('show');
+ document.getElementById('feedbackComment').value = '';
+ document.getElementById('feedbackComment').focus();
+
+ // 카테고리 버튼 이벤트
+ document.querySelectorAll('.feedback-category').forEach(btn => {
+ btn.classList.remove('selected');
+ btn.onclick = () => {
+ document.querySelectorAll('.feedback-category').forEach(b => b.classList.remove('selected'));
+ btn.classList.add('selected');
+ currentFeedbackCategory = btn.dataset.cat;
+ };
+ });
+ }
+
+ function closeFeedbackModal() {
+ document.getElementById('feedbackModal').classList.remove('show');
+ }
+
+ async function submitFeedbackComment() {
+ const comment = document.getElementById('feedbackComment').value.trim();
+
+ if (!comment) {
+ alert('코멘트를 입력해주세요.');
+ return;
+ }
try {
- await fetch('/pmr/api/paai/feedback', {
+ const res = await fetch('/api/paai/feedback', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
- log_id: currentPaaiLogId,
- useful: useful
+ prescription_id: currentPrescriptionId,
+ patient_name: document.querySelector('.patient-name')?.textContent || '',
+ paai_response: currentPaaiResponse,
+ rating: 'bad',
+ category: currentFeedbackCategory,
+ pharmacist_comment: comment
})
});
+
+ const data = await res.json();
+ if (data.success) {
+ closeFeedbackModal();
+ closePaaiModal();
+ showPaaiToast('피드백이 저장되었습니다. 감사합니다! 🙏', 'success');
+ }
} catch (err) {
console.error('Feedback error:', err);
+ alert('피드백 저장 실패');
}
-
- // 0.5초 후 모달 닫기
- setTimeout(() => closePaaiModal(), 500);
}
// ─────────────────────────────────────────────────────────────
diff --git a/docs/세로모니터_레이아웃_개선_계획.md b/docs/세로모니터_레이아웃_개선_계획.md
new file mode 100644
index 0000000..b6d4afe
--- /dev/null
+++ b/docs/세로모니터_레이아웃_개선_계획.md
@@ -0,0 +1,170 @@
+# 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%** |
+
+---
+
+## 승인 시 진행
+
+약사님 확인 후 바로 구현 가능합니다.