ERP-node/docs/screen-implementation-guide/03_production/production-plan-test-scenario.md

생산계획 화면 (TOPSEAL_PP_MAIN) 테스트 시나리오

화면 URL: http://localhost:9771/screens/3985 로그인 정보: topseal_admin / qlalfqjsgh11 작성일: 2026-03-16

---

사전 조건

• 백엔드 서버 (포트 8080) 실행 중
• 프론트엔드 서버 (포트 9771) 실행 중
• topseal_admin 계정으로 로그인 완료
• 사이드바 > 생산관리 > 생산계획 메뉴 클릭하여 화면 진입

현재 테스트 데이터 현황

구분	건수	상세
완제품 생산계획	7건	planned(3), in_progress(3), completed(1)
반제품 생산계획	6건	planned(2), in_progress(2), completed(1)
설비(리소스)	10개	CNC밀링#1~#2, 머시닝센터#1, 레이저절단기, 프레스기#1, 용접기#1, 도장설비#1, 조립라인#1, 검사대#1~#2
수주 데이터	10건	sales_order_mng

---

TC-01. 화면 레이아웃 확인

목적

화면이 설계대로 좌/우 분할 패널로 렌더링되는지 확인

테스트 단계

1. 생산계획 화면 진입
2. 좌측 패널에 "수주 데이터" 탭이 보이는지 확인
3. 우측 패널에 "완제품" / "반제품" 탭이 보이는지 확인
4. 분할 패널 비율이 약 45:55인지 확인

예상 결과

• 좌측: "수주데이터" 탭 + "안전재고 부족분" 탭
• 우측: "완제품" 탭 + "반제품" 탭
• 하단에 버튼들 (새로고침, 자동 스케줄, 병합, 반제품계획, 저장) 표시
• 좌측 하단에 "선택 품목 불러오기" 버튼 표시

---

TC-02. 좌측 패널 - 수주데이터 그룹 테이블

목적

v2-table-grouped 컴포넌트의 그룹화 및 접기/펼치기 기능 확인

테스트 단계

1. "수주데이터" 탭 선택
2. 데이터가 품목코드(part_code) 기준으로 그룹화되었는지 확인
3. 그룹 헤더 행에 품명, 품목코드가 표시되는지 확인
4. 그룹 헤더 클릭하여 접기/펼치기 토글
5. "전체 펼치기" / "전체 접기" 버튼 동작 확인
6. 그룹별 합계(수주량, 출고량, 잔량) 표시 확인

예상 결과

• 데이터가 part_code 기준으로 그룹화되어 표시
• 그룹 헤더에 {품명} ({품목코드}) 형식으로 표시
• 그룹 헤더 클릭 시 하위 행 접기/펼치기 동작
• 전체 펼치기/접기 버튼 정상 동작
• 그룹별 수주량/출고량/잔량 합계 표시

---

TC-03. 좌측 패널 - 체크박스 선택

목적

그룹 테이블에서 체크박스 선택이 정상 동작하는지 확인

테스트 단계

1. 개별 행 체크박스 선택/해제
2. 그룹 헤더 체크박스로 그룹 전체 선택/해제
3. 다른 그룹의 행도 동시 선택 가능한지 확인
4. 선택된 행이 하이라이트되는지 확인

예상 결과

• 개별 행 체크박스 선택/해제 정상
• 그룹 체크박스로 하위 전체 선택/해제
• 여러 그룹에서 동시 선택 가능
• 선택된 행 시각적 구분 (하이라이트)

---

TC-04. 우측 패널 - 완제품 타임라인 기본 표시

목적

v2-timeline-scheduler의 기본 렌더링 및 데이터 표시 확인

테스트 단계

1. "완제품" 탭 선택 (기본 선택)
2. 타임라인 헤더에 날짜가 표시되는지 확인
3. 리소스(설비) 목록이 좌측에 표시되는지 확인
4. 스케줄 바가 해당 설비/날짜에 표시되는지 확인
5. 스케줄 바에 품명이 표시되는지 확인
6. 오늘 날짜 라인(빨간 세로선)이 표시되는지 확인

예상 결과

• 타임라인 헤더에 날짜 표시 (월 그룹 + 일별)
• 좌측 리소스 열에 설비명 표시 (프레스기#1, CNC밀링머신#1 등)
• 7건의 완제품 스케줄 바가 올바른 위치에 표시
• 스케줄 바에 item_name 표시
• 오늘 날짜 (2026-03-16) 위치에 빨간 세로선 표시
• "반제품" 데이터는 보이지 않음 (staticFilters 적용 확인)

---

TC-05. 타임라인 - 상태별 색상 표시

목적

스케줄 상태에 따른 색상 구분 확인

테스트 단계

1. 완제품 탭에서 스케줄 바 색상 확인
2. 각 상태별 색상이 다른지 확인

예상 결과

• planned (계획): 파란색 (#3b82f6)
• in_progress (진행): 초록색 (#10b981)
• completed (완료): 회색 (#6b7280)
• delayed (지연): 빨간색 (#ef4444) - 해당 데이터 있으면
• 상태별 색상이 명확히 구분됨

---

TC-06. 타임라인 - 진행률 표시

목적

스케줄 바 내부에 진행률이 시각적으로 표시되는지 확인

테스트 단계

1. 진행률이 있는 스케줄 바 확인
2. 바 내부에 진행률 비율만큼 채워진 영역 확인
3. 진행률 퍼센트 텍스트 표시 확인

예상 결과

• 탑씰 Type A (id:103): 40% 진행률 표시
• 탑씰 Type B (id:2): 25% 진행률 표시
• 탑씰 Type C (id:105): 25% 진행률 표시
• 탑씰 Type A (id:4): 100% 진행률 표시 (완료)
• 바 내부에 진행 영역이 색이 다르게 채워짐

---

TC-07. 타임라인 - 줌 레벨 전환

목적

일/주/월 줌 레벨 전환이 정상 동작하는지 확인

테스트 단계

1. 툴바에서 "주" (기본) 줌 레벨 확인
2. "일" 줌 레벨로 전환 -> 날짜 간격 변화 확인
3. "월" 줌 레벨로 전환 -> 날짜 간격 변화 확인
4. 다시 "주" 줌 레벨로 복귀

예상 결과

• "일" 모드: 날짜 셀이 넓어지고, 하루 단위로 상세 표시
• "주" 모드: 기본 크기, 주 단위 표시
• "월" 모드: 날짜 셀이 좁아지고, 월 단위로 축소 표시
• 줌 레벨 전환 시 스케줄 바 위치/크기가 자동 조정

---

TC-08. 타임라인 - 날짜 네비게이션

목적

이전/다음/오늘 버튼으로 타임라인 이동이 정상 동작하는지 확인

테스트 단계

1. 툴바에서 현재 표시 날짜 확인
2. "다음" 버튼 클릭 -> 다음 주(또는 기간)로 이동
3. "이전" 버튼 클릭 -> 이전 주로 이동
4. "오늘" 버튼 클릭 -> 현재 날짜 영역으로 이동
5. 2월 초 데이터가 있으므로 충분히 이전으로 이동하여 과거 데이터 확인

예상 결과

• "다음" 클릭 시 타임라인이 오른쪽(미래)으로 이동
• "이전" 클릭 시 타임라인이 왼쪽(과거)으로 이동
• "오늘" 클릭 시 2026-03-16 부근으로 이동
• 날짜 헤더의 표시 날짜가 변경됨
• 이동 후에도 스케줄 바가 올바른 위치에 표시

---

TC-09. 타임라인 - 드래그 이동

목적

스케줄 바를 드래그하여 날짜를 변경하는 기능 확인

테스트 단계

1. 완제품 탭에서 planned 상태의 스케줄 바 선택 (예: 탑씰 Type A, id:106)
2. 스케줄 바를 마우스로 클릭하고 좌/우로 드래그
3. 드래그 중 바가 마우스를 따라 이동하는지 확인 (시각적 피드백)
4. 마우스 놓기 후 결과 확인
5. 성공 시 토스트 알림 확인
6. DB에 start_date/end_date가 변경되었는지 확인

예상 결과

• 스케줄 바 드래그 시 시각적으로 이동 (opacity 변화)
• 드래그 완료 후 "스케줄이 이동되었습니다" 토스트 표시
• 날짜가 드래그 거리만큼 변경 (시작일/종료일 동일 간격 유지)
• 실패 시 "스케줄 이동 실패" 에러 토스트 표시 후 원래 위치로 복귀

---

TC-10. 타임라인 - 리사이즈 (기간 조정)

목적

스케줄 바의 시작/종료 핸들을 드래그하여 기간을 변경하는 기능 확인

테스트 단계

1. 완제품 탭에서 스케줄 바에 마우스 호버
2. 바 좌측/우측에 리사이즈 핸들이 나타나는지 확인
3. 우측 핸들을 오른쪽으로 드래그 -> 종료일 연장
4. 좌측 핸들을 오른쪽으로 드래그 -> 시작일 변경
5. 성공 시 토스트 알림 확인

예상 결과

• 바 호버 시 좌/우측에 리사이즈 핸들(세로 바) 표시
• 우측 핸들 드래그 시 종료일만 변경 (시작일 유지)
• 좌측 핸들 드래그 시 시작일만 변경 (종료일 유지)
• 리사이즈 완료 후 "스케줄 기간이 변경되었습니다" 토스트 표시
• 바 크기가 변경된 기간에 맞게 조정

---

TC-11. 타임라인 - 충돌 감지

목적

같은 설비에 시간이 겹치는 스케줄이 있을 때 충돌 표시가 되는지 확인

테스트 단계

1. 충돌 데이터 확인:
   • 프레스기#1 (equipment_id=11): id:103 (03/10~03/17), id:4 (01/28~01/30) → 겹치지 않아서 충돌 없음
   • 조립라인#1 (equipment_id=14): id:5 (02/01~02/02), id:6 (02/01~02/02) → 기간 겹침! (반제품)
2. 반제품 탭으로 이동하여 조립라인#1의 충돌 확인
3. 또는 드래그로 충돌 상황을 만들어서 확인

예상 결과

• 충돌 스케줄 바에 빨간 외곽선 (ring-destructive) 표시
• 충돌 스케줄 바에 경고 아이콘 (AlertTriangle) 표시
• 툴바에 "충돌 N건" 배지 표시 (빨간색)
• 충돌이 없는 경우 배지 미표시

---

TC-12. 타임라인 - 범례 (Legend)

목적

하단 범례가 정상 표시되는지 확인

테스트 단계

1. 타임라인 하단에 범례 영역이 표시되는지 확인
2. 상태별 색상 스와치가 표시되는지 확인
3. 마일스톤 아이콘이 표시되는지 확인
4. 충돌 표시 범례가 표시되는지 확인

예상 결과

• "계획" (파란색), "진행" (초록색), "완료" (회색), "지연" (빨간색), "취소" (연회색) 표시
• "마일스톤" 다이아몬드 아이콘 표시
• "충돌" 빨간 테두리 아이콘 표시 (showConflicts 설정 시)
• 범례가 타임라인 하단에 깔끔하게 배치

---

TC-13. 반제품 탭 전환

목적

반제품 탭으로 전환 시 반제품 데이터만 필터링되어 표시되는지 확인 (staticFilters)

테스트 단계

1. 우측 패널에서 "반제품" 탭 클릭
2. 표시되는 스케줄이 반제품만인지 확인
3. 완제품 데이터가 보이지 않는지 확인
4. 다시 "완제품" 탭 클릭하여 전환 확인

예상 결과

• "반제품" 탭 클릭 시 반제품 스케줄만 표시 (4건)
• 반제품 리소스: 조립라인#1, 용접기#1, 레이저절단기
• 완제품 데이터는 표시되지 않음
• "완제품" 탭 복귀 시 완제품 데이터만 표시

---

TC-14. 버튼 - 새로고침

목적

"새로고침" 버튼 클릭 시 데이터가 다시 로드되는지 확인

테스트 단계

1. 우측 패널 하단의 "새로고침" 버튼 클릭
2. 타임라인 데이터가 다시 로드되는지 확인
3. 토스트 알림 확인

예상 결과

• 클릭 시 API 호출 (GET /api/production/order-summary)
• 성공 시 "데이터를 새로고침했습니다." 토스트 표시
• 타임라인 데이터 갱신

---

TC-15. 버튼 - 자동 스케줄

목적

좌측 테이블에서 수주 데이터를 선택한 후 자동 스케줄 생성이 되는지 확인

테스트 단계

1. 좌측 패널에서 수주 데이터 행 1개 이상 체크박스 선택
2. "자동 스케줄" 버튼 클릭
3. 확인 다이얼로그 표시 확인 ("선택한 품목의 자동 스케줄을 생성하시겠습니까?")
4. "확인" 클릭
5. 결과 확인

예상 결과

• 확인 다이얼로그 표시
• 성공 시 "자동 스케줄이 생성되었습니다." 토스트 표시
• 우측 타임라인에 새로운 스케줄 바 추가
• 실패 시 에러 메시지 표시
• 선택 없이 클릭 시 적절한 안내 메시지

---

TC-16. 버튼 - 선택 품목 불러오기

목적

좌측 수주 데이터에서 선택한 품목을 생산계획으로 불러오는 기능 확인

테스트 단계

1. 좌측 수주데이터 탭에서 품목 선택 (체크박스)
2. "선택 품목 불러오기" 버튼 클릭
3. 확인 다이얼로그 ("선택한 품목의 생산계획을 생성하시겠습니까?")
4. 결과 확인

예상 결과

• 확인 다이얼로그 표시
• 성공 시 "선택 품목이 불러와졌습니다." 토스트 표시
• 타임라인 자동 새로고침

---

TC-17. 버튼 - 저장

목적

변경된 생산계획 데이터가 저장되는지 확인

테스트 단계

1. 타임라인에서 스케줄 바 드래그 또는 리사이즈로 데이터 변경
2. "저장" 버튼 클릭
3. 저장 결과 확인

예상 결과

• 성공 시 "생산계획이 저장되었습니다." 토스트 표시
• 변경 사항이 DB에 반영

---

TC-18. 반응형 CSS 확인

목적

공통 반응형 CSS가 올바르게 적용되었는지 확인

테스트 단계

1. 브라우저 창 너비를 640px 이하로 줄이기 (모바일)
2. 텍스트 크기, 버튼 크기, 패딩 변화 확인
3. 브라우저 창 너비를 1280px 이상으로 늘리기 (데스크톱)
4. 원래 크기로 복귀 확인

예상 결과

• 모바일(~640px): 텍스트 text-[10px], 작은 버튼, 좁은 패딩
• 데스크톱(640px~): 텍스트 text-sm, 기본 버튼, 넓은 패딩
• 줌 버튼, 네비게이션 버튼, 리소스명, 날짜 헤더 모두 반응형 적용
• 스케줄 바 내부 텍스트도 반응형 (text-[10px] sm:text-xs)
• 범례 텍스트도 반응형

---

TC-19. 마일스톤 표시

목적

시작일과 종료일이 같은 스케줄이 마일스톤(다이아몬드)으로 표시되는지 확인

테스트 단계

1. DB에 마일스톤 테스트 데이터 추가:

   INSERT INTO production_plan_mng (id, item_name, product_type, status, start_date, end_date, equipment_id, progress_rate, company_code)
   VALUES (200, '마일스톤 테스트', '완제품', 'planned', '2026-03-20', '2026-03-20', 9, '0', 'COMPANY_7');
   

2. 새로고침 후 해당 날짜에 다이아몬드 마커가 표시되는지 확인
3. 호버 시 정보 표시 확인

예상 결과

• 시작일 = 종료일인 스케줄은 바 대신 다이아몬드 마커로 표시
• 다이아몬드가 45도 회전된 정사각형으로 표시
• 호버 시 효과 적용

---

TC-20. 안전재고 부족분 탭

목적

좌측 패널의 "안전재고 부족분" 탭이 정상 동작하는지 확인

테스트 단계

1. 좌측 패널에서 "안전재고 부족분" 탭 클릭
2. inventory_stock 테이블 데이터가 표시되는지 확인
3. 빈 데이터인 경우 빈 상태 메시지 확인

예상 결과

• 탭 전환 정상 동작
• 데이터 있으면: 품목코드, 현재고, 안전재고, 창고, 최근입고일 표시
• 데이터 없으면: "안전재고 부족분 데이터가 없습니다" 메시지

---

알려진 이슈 / 참고 사항

번호	내용	심각도
1	"1 Issue" 배지가 화면 좌측 하단에 표시됨 (원인 미확인)	낮음
2	생산계획 화면 URL 직접 접근 시 회사정보 화면(138)이 먼저 보일 수 있음 → 사이드바 메뉴를 통해 접근 권장	중간
3	설비(equipment_info)의 equipment_group이 null → 리소스 그룹핑 미표시	낮음
4	가상 스크롤은 리소스(설비) 30개 이상일 때 자동 활성화 (현재 10개라 비활성)	참고

---

테스트 결과 요약

TC	항목	결과	비고
01	화면 레이아웃
02	수주데이터 그룹 테이블
03	체크박스 선택
04	완제품 타임라인 기본 표시
05	상태별 색상
06	진행률 표시
07	줌 레벨 전환
08	날짜 네비게이션
09	드래그 이동
10	리사이즈
11	충돌 감지
12	범례
13	반제품 탭 전환
14	새로고침 버튼
15	자동 스케줄 버튼
16	선택 품목 불러오기
17	저장 버튼
18	반응형 CSS
19	마일스톤 표시
20	안전재고 부족분 탭