From f0f4a8627ddbc88fe27be31c48ba2749cfc5432c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?= Date: Mon, 23 Feb 2026 00:55:26 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20[plans]=20General=20Rule=20=EC=8A=A4?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=EB=B3=B4=EB=93=9C=20D1.0=20=EB=A7=88?= =?UTF-8?q?=ED=81=AC=EB=8B=A4=EC=9A=B4=20=EB=B3=80=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - SAM_General_Rule_Storyboard_D1.0_260116.pdf (43p) → 마크다운 변환 - UIUX 공통 규칙: 인터랙션, 반응형 브레이크포인트, 화면 템플릿, 메시지, GNB/LNB/푸터 - 목록/상세 화면 4단계 반응형 (PC/태블릿/모바일) 정의 - 셀렉트박스, 나의메뉴, 검색필터정렬, 페이지/섹션 설정, 태스크 알림 아이콘 - INDEX.md에 새 문서 등록 - .gitignore에 sam/docs/plans/*.md 허용 추가 --- .gitignore | 3 + sam/docs/INDEX.md | 15 +- .../plans/SAM_General_Rule_Storyboard_D1.0.md | 737 ++++++++++++++++++ 3 files changed, 754 insertions(+), 1 deletion(-) create mode 100644 sam/docs/plans/SAM_General_Rule_Storyboard_D1.0.md diff --git a/.gitignore b/.gitignore index 2a8c5ad..13b4c0a 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,9 @@ sam/* !sam/docs/ sam/docs/* +!sam/docs/plans/ +sam/docs/plans/* +!sam/docs/plans/*.md !sam/docs/guides/ sam/docs/guides/* !sam/docs/guides/server-how-it-works.md diff --git a/sam/docs/INDEX.md b/sam/docs/INDEX.md index 9157eb0..29c3254 100644 --- a/sam/docs/INDEX.md +++ b/sam/docs/INDEX.md @@ -69,6 +69,7 @@ docs/ |------|------|--------------| | [system-overview.md](architecture/system-overview.md) | 전체 시스템 아키텍처 | 새 기능 설계 전 | | [security-policy.md](architecture/security-policy.md) | 인증/인가, 보안 규칙 | 보안 관련 작업 전 | +| [scaling-roadmap-10k-tenants.md](architecture/scaling-roadmap-10k-tenants.md) | 10,000 테넌트 스케일링 로드맵 | 확장 전략 검토 시 | ### rules/ - 비즈니스 규칙 > 도메인 로직, 검증 규칙, 상태 전이 @@ -103,7 +104,10 @@ docs/ | [item-management-migration.md](guides/item-management-migration.md) | Item 시스템 전환 가이드 | 마이그레이션 작업 전 | | [project-launch-roadmap.md](guides/project-launch-roadmap.md) | 런칭 준비 현황 | 런칭 관련 작업 시 | | [production-env-sync.md](guides/production-env-sync.md) | 운영 전환 시 .env 동기화 절차 | 테스트→운영 전환 시 | -| [server-how-it-works.md](guides/server-how-it-works.md) | 서버 동작 원리 초보자 가이드 | 신규 합류 시 | +| [server-how-it-works.md](guides/server-how-it-works.md) | 서버 인프라 시리즈 ① 서버 동작 원리 | 신규 합류 시 | +| [nginx-fastcgi-guide.md](guides/nginx-fastcgi-guide.md) | 서버 인프라 시리즈 ② Nginx & FastCGI | Nginx/FastCGI 개념 이해 시 | +| [php-fpm-guide.md](guides/php-fpm-guide.md) | 서버 인프라 시리즈 ③ PHP-FPM | PHP-FPM 개념 이해 시 | +| [jenkins-setup-guide.md](guides/jenkins-setup-guide.md) | Jenkins CI/CD 셋업 가이드 | Jenkins 설치/설정 시 | ### quickstart/ - 빠른 시작 > 핵심 규칙 요약, 자주 쓰는 명령어 @@ -141,6 +145,15 @@ docs/ | [scripts/extract_to_markdown.py](contracts/scripts/extract_to_markdown.py) | DOCX → Markdown 추출 | | [scripts/sync_check.py](contracts/scripts/sync_check.py) | DOCX ↔ Markdown 동기화 검증 | +### plans/ - 개발 계획 +> 임시 개발 계획 문서 (작업 완료 후 정리 → 삭제) + +| 문서 | 설명 | +|------|------| +| [SAM_ERP_회계관리_Storyboard_D1.6.md](plans/SAM_ERP_회계관리_Storyboard_D1.6.md) | ERP 회계관리 스토리보드 D1.6 (65p PDF → 마크다운 변환) | +| [SAM_General_Rule_Storyboard_D1.0.md](plans/SAM_General_Rule_Storyboard_D1.0.md) | General Rule 스토리보드 D1.0 (43p PDF → 마크다운 변환, UIUX 공통 규칙) | +| [production-deployment-plan.md](plans/production-deployment-plan.md) | 운영 환경 배포 계획 (CI/CD, 서버 아키텍처) | + ### features/ - 기능별 문서 | 문서 | 설명 | diff --git a/sam/docs/plans/SAM_General_Rule_Storyboard_D1.0.md b/sam/docs/plans/SAM_General_Rule_Storyboard_D1.0.md new file mode 100644 index 0000000..ae23c7b --- /dev/null +++ b/sam/docs/plans/SAM_General_Rule_Storyboard_D1.0.md @@ -0,0 +1,737 @@ +# SAM General Rule Storyboard D1.0 + +> **작성일**: 2026-01-16 +> **버전**: D1.0 +> **원본**: `SAM_General_Rule_Storyboard_D1.0_260116.pdf` (43페이지) +> **상태**: PC 섹션 정리 완료 + +--- + +## 1. 문서 이력 + +| 날짜 | 버전 | 주요 내용 | 세부 내용 | +|------|------|----------|----------| +| 2026-01-15 | D0.9 | 초안 | General Rule - PC, 태블릿, 모바일 UIUX 공통 작성 | +| 2026-01-16 | D1.0 | 작성 | PC 섹션 정리 33p | + +--- + +## 2. 인터랙션 (Interaction) + +> **페이지**: 4 + +사용자 입력 제스처 및 적용 여부를 정의한다. + +| Type | 제스처/마크 | 설명 | 적용 | +|------|-----------|------|------| +| Tap | 탭 | 일정영역을 사용자가 터치한다. | Yes | +| Touch & Hold | 터치 앤 홀드 | 화면을 터치한 후 계속 누르고 있는 상태. 해당영역 혹은 개체가 홀드된다. | No | +| Double Tap | 더블 탭 | 일정영역을 두 번 터치한다. 두 번 터치 시 액션이 실행된다. | No | +| Drag & Drop | 드래그 앤 드롭 | 터치 혹은 홀드 상태에서 오브젝트를 이동하여 원하는 위치에 배치시킨다. | Yes | +| Scroll Up | 스크롤 업 | 아래에서 위로 누르는 동작을 유지하면서 이동하였다가 뗀다. | Yes | +| Scroll Down | 스크롤 다운 | 위에서 아래로 누르는 동작을 유지하면서 이동하였다가 뗀다. | Yes | +| Swipe Left | 스와이프 레프트 | 오른쪽에서 왼쪽으로 누르는 동작을 유지하면서 이동하였다가 뗀다. | Yes | +| Swipe Right | 스와이프 라이트 | 왼쪽에서 오른쪽으로 누르는 동작을 유지하면서 이동하였다가 뗀다. | Yes | +| Pinch Zoom out | 핀치 줌 아웃 | 오브젝트 또는 화면을 축소한다. | Yes | +| Pinch Zoom in | 핀치 줌 인 | 오브젝트 혹은 화면을 확대한다. | Yes | + +--- + +## 3. 반응형 웹 (Responsive Web) + +> **페이지**: 5 + +### 3.1 브레이크 포인트 + +| 디바이스 | 브레이크 포인트 | Tailwind 접두사 | +|---------|---------------|----------------| +| 모바일 | < 640px | 기본 | +| 태블릿 | 768px ~ 1280px | `md` | +| 데스크탑 | 1280px+ | `lg` | +| 대형 모니터 | 1920px+ | `xl` | + +### 3.2 레이아웃 구성 + +**PC Web 레이아웃**: +1. Contents 영역 +2. Footer 영역 + +**Mobile Web 레이아웃**: +1. Contents 영역 +2. Footer 영역 + +--- + +## 4. 화면 템플릿 (Screen Template) + +> **페이지**: 6 + +모바일 웹 화면 구조를 정의한다. + +| 영역 | 코드 | 설명 | +|------|------|------| +| Status bar | A | 안테나, 통화, 배터리 등 시스템 OS 관리 영역. 모든 페이지 상단에 존재 | +| Browser 영역 | B | 브라우저 기능 영역 | +| Title 영역 | C | 텍스트 또는 기능 버튼으로 구현됨. 텍스트는 기본 가운데 정렬 | +| Content 영역 | D | 컨텐츠 내용 표시. 컨텐츠 길이가 길어질 경우 스크롤 제공 | +| Browser bar 영역 | E | 브라우저 유틸 바 영역 | +| Keypad 영역 | F | 키보드 입력할 때 활성화. 모든 페이지 위에 덮어쓰기 구현 | + +--- + +## 5. 메시지 (Notifications) + +> **페이지**: 7 + +| 유형 | 설명 | +|------|------| +| 알림 Alert | 사용자에게 상황을 알려주기 위한 팝업. `[확인]` 버튼 제공 | +| 확인 Alert | 사용자에게 확인이 필요할 경우 제공되는 팝업. `[취소]` `[확인]` 버튼 제공 | +| 토스트 메시지 | 단순 Notify. 2~3초 후 페이지 내에서 Fade out | + +--- + +## 6. GNB, LNB, 푸터 + +> **페이지**: 8 + +PC 화면의 전체 레이아웃 구조를 정의한다. + +### 6.1 구성 요소 + +| 번호 | 영역 | 설명 | +|------|------|------| +| 01 | 메뉴 버튼 | 클릭: 메뉴 영역(06) 축소/확장 토글. 디폴트: 메뉴 영역 확장 상태 | +| 02 | SAM 로고 버튼 | 클릭: 대시보드 화면으로 이동 | +| 03 | 알림 버튼 | 클릭: 알림 팝업 표시 | +| 04 | 개인 정보 버튼 | 항목: 디폴트 이미지, 이름, 직급. 클릭: 마이페이지 팝업 표시 | +| 05 | 회사 로고 | 회사정보 화면에서 등록한 로고 표시. 회사 변경 선택 시 해당 로고 변경 | +| 06 | 메뉴 영역 | 메뉴 클릭: 하위 메뉴 있을 경우 하단에 표시, 없을 경우 해당 메뉴 화면으로 이동. 목록 길 경우 해당 영역 내 스크롤 처리 | +| 07 | MES 메뉴 영역 | 영업관리, 판매관리, 구매관리 등 해당하는 MES 메뉴 영역 표시 | +| 08 | 푸터 영역 | 모든 화면 하단 공통 표시 | +| 09 | SAM AI 채팅 버튼 | 클릭: SAM AI 채팅 팝업 표시 | + +### 6.2 메뉴 목록 + +- 대시보드 +- MES 메뉴 +- 인사관리 +- 전자결재 +- 게시판 +- 회계관리 +- 기준정보 +- 보고서 및 분석 +- 계정정보 +- 회사정보 +- 구독관리 +- 결제내역 +- 고객센터 + +### 6.3 푸터 내용 + +``` +(C) 2025 SAM. All right reserved. +Codebridge X +상호: 코드 브릿지 엑스 대표: 이경호 사업자등록번호: 123-45-12345 +주소: 서울특별시 강서구 양천로 583 우림블루나인 B동 1602호 (우: 07547) +팩스: 02-123-1234 통신판매업신고번호: 제 2019-서울강서-0001호 +서비스이용문의: 02-1234-1234 이메일: cs@a.com +서비스 이용약관 | 개인정보 취급방침 +``` + +--- + +## 7. 메뉴, 페이지, 섹션, 항목 영역 + +> **페이지**: 9 + +### 7.1 영역 구분 + +| 번호 | 영역 | 설명 | +|------|------|------| +| 01 | 메뉴 영역 | 축소 상태 | +| 02 | 페이지 영역 | - | +| 03 | 섹션 영역 | - | +| 04 | 항목 영역 | - | + +### 7.2 텍스트 오버플로우 처리 + +텍스트가 영역보다 길 경우 "텍스트+..." 형태로 표시한다. + +--- + +## 8. 메뉴 목록 (3Depth) + +> **페이지**: 10 + +### 8.1 메뉴 계층 구조 + +| 번호 | 레벨 | 설명 | +|------|------|------| +| 01 | 대메뉴 | 1Depth 메뉴 | +| 02 | 중메뉴 | 2Depth 메뉴 (대메뉴 클릭 시 하단에 표시) | +| 03 | 소메뉴 | 3Depth 메뉴 (중메뉴 클릭 시 하단에 표시) | + +**메뉴 확장 예시**: +``` +대시보드 +MES 메뉴 +인사관리 +전자결재 + - 중메뉴명 + - 중메뉴명 + · 소메뉴명 + · 소메뉴명 + - 중메뉴명 + - 중메뉴명 + - 중메뉴명 +게시판 +... +``` + +--- + +## 9. 알림 팝업 + +> **페이지**: 11 +> **경로**: 메인 > 알림 팝업 + +### 9.1 구성 요소 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 01 | 알림 목록 | 각 디폴트 썸네일, 종류(공지사항, 안내), 제목/내용, 전송일시 표시. 클릭: 해당 상세 화면으로 이동. 최신순 10개까지 표시 | +| 02 | New 아이콘 | 새 알림일 경우 New 아이콘 표시. 해당 알림 클릭 시 사라짐 | +| 02-1 | 붉은 점 아이콘 | 새 알림이 있을 경우 표시. 해당 알림 모두 클릭 시 사라짐 | + +--- + +## 10. 마이페이지 팝업 + +> **페이지**: 12 +> **경로**: 메인 > 마이페이지 팝업 + +### 10.1 구성 요소 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 01 | 계정 아이디 (이메일) | 이메일 주소 표시 (예: `name@company.com`) | +| 02 | 회사 셀렉트 박스 | 종류: 회사명 목록 (해당 계정이 생성한 회사(테넌트) 목록 표시). 정렬: 등록순. 한 회사만 소유중일 경우에는 해당 영역 숨김 | +| 03 | 로그아웃 버튼 | 클릭: "정말 로그아웃하시겠습니까?" 로그아웃 확인 Alert 표시. 확인 버튼 클릭시 로그아웃 처리 | + +--- + +## 11. 셀렉트 박스 + +> **페이지**: 13 + +### 11.1 기본 셀렉트 박스 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 01 | 셀렉트 박스 | 클릭: 하단에 종류 목록 표시 | +| 02 | 종류 목록 | 목록 중 하나만 선택 가능 | + +### 11.2 다중 선택 셀렉트 박스 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 03 | 다중 선택 셀렉트 박스 | 선택된 첫번째 항목명 + 추가 수 표시. 텍스트 영역 부족할 경우 `항목..+3` 형태로 표시 | +| 04 | 다중 선택 종류 목록 | 목록 중 복수 선택 가능. 전체 선택 시 전체 선택/해제 토글 | + +### 11.3 검색 셀렉트 박스 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 05 | 검색 영역 | 검색어 입력 후 엔터 또는 검색 아이콘 클릭 시 검색 상태로 전환되며 검색 결과 표시 | +| 05-3 | 삭제 버튼 | 클릭: 검색어 삭제 처리, 전체 종류 목록 표시 | + +### 11.4 셀렉트 박스 유형 정리 + +| 유형 | 단일 선택 | 다중 선택 | 검색 | 검색+다중 선택 | +|------|----------|----------|------|--------------| +| 선택 방식 | 하나만 | 복수 | 하나만 | 복수 | +| 검색 기능 | X | X | O | O | +| 전체 선택 | X | O | X | O | + +--- + +## 12. 가이드 메시지 + +> **페이지**: 14 + +상황에 따라 입력 필드 하단 또는 Alert에 가이드 메시지를 표시한다. + +### 12.1 표시 규칙 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 01 | 가이드 메시지 표시 위치 | 입력 필드 하단에 표시 | +| - | 긍정 메시지 | 녹색으로 표시 | +| 01-1 | 부정 메시지 | 붉은색으로 표시 | + +--- + +## 13. 태블릿/모바일 헤더 + +> **페이지**: 15 + +### 13.1 동작 규칙 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 01 | 태블릿/모바일 헤더 | 하단으로 스크롤 시 숨김. 역스크롤 시 표시 | + +### 13.2 적용 화면 + +- TABLET 가로 목록 +- TABLET 세로 목록 +- MOBILE 가로 목록 +- MOBILE 세로 목록 + +--- + +## 14. 태블릿/모바일 바텀 버튼 영역 + +> **페이지**: 16 + +### 14.1 동작 규칙 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 01 | 태블릿/모바일 바텀 버튼 영역 | 최하단 바텀에 플로팅 표시. 하단으로 스크롤 시 숨김. 역스크롤 시 표시 | + +### 14.2 버튼 예시 + +- `[수정]` `[삭제]` + +--- + +## 15. 공지 팝업 + +> **페이지**: 17 + +### 15.1 구성 + +| 항목 | 설명 | +|------|------| +| 대상 | 전체, 설정 부서 | +| 내용 | 설정 기간동안 대상에게 팝업 표시 | + +### 15.2 구성 요소 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 01 | 팝업 내용 영역 | 이미지, 텍스트 | +| 02 | 1일간 이 창을 열지 않음 체크박스 | 클릭: 체크 설정/해제 토글. 디폴트: 체크 해제 상태. 체크 설정 시 1일 동안 팝업 미표시 (자정 기준) | + +--- + +## 16. 목록 화면 - 4단계 반응형 + +> **페이지**: 18~25 + +PC, TABLET, MOBILE 환경에서 목록 화면의 4단계 반응형 표시를 정의한다. + +### 16.1 반응형 단계 개요 + +| 단계 | 디바이스 | 화면명 | +|------|---------|--------| +| 1단계 | PC | PC_목록 | +| 2단계 | TABLET 가로 | TABLET_가로_목록 | +| 3단계 | TABLET 세로 / MOBILE 가로 | TABLET_세로_목록, MOBILE_가로_목록 | +| 4단계 | MOBILE 세로 | MOBILE_세로_목록 | + +### 16.2 PC_목록 (1단계) + +> **페이지**: 19 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 01 | 헤더 영역 | 항목 클릭: 값이 국문/영문/숫자일 경우 오름/내림차순으로 토글 | +| 02 | 정렬 아이콘 | 현재 칼럼으로 정렬 상태일 경우에만 표시 | + +**목록 테이블 예시 칼럼**: + +| 칼럼 | 설명 | +|------|------| +| 시공번호 | 고유 식별 번호 | +| 거래처 | 회사명 | +| 현장명 | 현장 이름 | +| 공사PM | 담당 PM | +| 작업반장 | 작업반장 이름 | +| 작업자 | 작업자 수 | +| 시공투입일 | 시공 투입 날짜 | +| 시공완료일 | 시공 완료 날짜 | +| 상태 | 시공대기, 시공진행, 시공완료 | + +### 16.3 TABLET_가로_목록 (2단계) + +> **페이지**: 20 + +- PC와 동일한 테이블 구조 +- 사이드 메뉴가 아이콘 축소 상태로 변경 + +### 16.4 TABLET_세로_목록 (3단계) + +> **페이지**: 21~22 + +- 테이블 대신 카드형 목록으로 전환 +- 각 카드에 시공번호와 상태 표시 +- 카드 클릭 시 확장되어 상세 정보 표시 + +**확장 시 표시 항목**: + +| 필드 | 예시 값 | +|------|---------| +| 거래처 | 회사명 | +| 현장명 | 현장명 | +| 공사PM | 홍길동 | +| 작업반장 | 홍길동 | +| 작업자 | 3 | +| 시공투입일 | 2026-01-01 | +| 시공완료일 | 2026-01-01 | + +### 16.5 MOBILE_가로_목록 (3단계) + +> **페이지**: 23~24 + +- 카드형 목록 +- 시공번호와 상태 표시 +- 클릭 시 확장하여 상세 항목 표시 + +### 16.6 MOBILE_세로_목록 (4단계) + +> **페이지**: 25 + +- 카드형 목록 (세로 스크롤) +- 클릭 시 확장하여 상세 항목 표시 +- 확장 시 거래처, 현장명, 공사PM, 작업반장, 작업자, 시공투입일, 시공완료일 표시 + +--- + +## 17. 상세 화면 - 4단계 반응형 + +> **페이지**: 26~31 + +PC, TABLET, MOBILE 환경에서 상세 화면의 4단계 반응형 표시를 정의한다. + +### 17.1 반응형 단계 개요 + +| 단계 | 디바이스 | 화면명 | +|------|---------|--------| +| 1단계 | PC | PC_상세 | +| 2단계 | TABLET 가로 | TABLET_가로_상세 | +| 3단계 | TABLET 세로 / MOBILE 가로 | TABLET_세로_상세, MOBILE_가로_상세 | +| 4단계 | MOBILE 세로 | MOBILE_세로_상세 | + +### 17.2 PC_상세 (1단계) + +> **페이지**: 27 + +- 페이지 제목: "메뉴 상세" + 설명: "메뉴 상세를 관리합니다" +- 섹션명: "시공 정보" +- 버튼: `[수정]` `[삭제]` + +**표시 항목 예시**: + +| 필드 | 예시 값 | +|------|---------| +| 시공번호 | 123123 | +| 상태 | 시공진행 | +| 현장 | 현장명 | +| 작업반장 | 홍길동 (셀렉트 박스) | +| 시공투입일 | 2025-12-15 | +| 시공완료일 | 2025-12-15 | +| 항목명 | 항목 (다수) | + +### 17.3 TABLET_가로_상세 (2단계) + +> **페이지**: 28 + +- PC와 동일한 상세 정보 표시 +- 사이드 메뉴 아이콘 축소 상태 + +### 17.4 TABLET_세로_상세 (3단계) + +> **페이지**: 29 + +- 항목 수가 줄어들며 스크롤로 나머지 확인 + +### 17.5 MOBILE_가로_상세 (3단계) + +> **페이지**: 30 + +- 상세 항목을 세로 배치 +- 바텀에 `[수정]` `[삭제]` 버튼 플로팅 + +### 17.6 MOBILE_세로_상세 (4단계) + +> **페이지**: 31 + +- 모든 항목 세로 배치 +- 바텀에 `[수정]` `[삭제]` 버튼 플로팅 + +--- + +## 18. PC 섹션 정리 + +> **페이지**: 32~33 + +PC 화면의 섹션 레이아웃 및 필터/정렬 구성을 정의한다. + +### 18.1 필터 규칙 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 01 | 라디오 버튼형 필터 | 선택 값이 2개일 경우 사용 (예: 수취/발행) | +| 02 | 필터 셀렉트 박스 | 최소로만 활용 | +| 03 | 표 헤더 정렬 | 표 헤더 정렬로 정렬 셀렉트 박스는 삭제 | + +### 18.2 PC 섹션 구성 요소 + +**상단 영역**: +- 페이지 제목 + 설명 +- 집계 카드 (예: `수취어음 55건`, `발행어음 1건`, `만기임박 5건`, `결제완료 15건`) +- 기간 선택 (날짜 범위 + 단축 버튼: 전전월, 어제, 오늘, 전월, 당월, 당해년도) +- 버튼: `[버튼명]` `[버튼명]` `[버튼명]` +- 탭: 탭1, 탭2, 탭3 + +**필터 영역**: +- 셀렉트 박스 필터 (전체) +- 라디오 버튼형 필터 (수취/발행) +- 상태 셀렉트 박스 (보관중) +- `[저장]` 버튼 + +**목록 테이블 예시**: + +| No. | 어음번호 | 구분 | 거래처 | 금액 | 발행일 | 만기일 | 차수 | 상태 | +|-----|---------|------|--------|------|--------|--------|------|------| +| 7 | 123123 | 수취 | 회사명 | 1,000,000 | 2025-12-12 | 2025-12-12 | 1 | 보관중 | +| 6 | 123123 | 수취 | 회사명 | 1,000,000 | 2025-12-12 | 2025-12-12 | 2 | 만기임박 | + +**하단 정보**: `총 7건` / `1건 선택` + +--- + +## 19. TBD (미정) + +> **페이지**: 34 + +추후 결정 예정 영역이다. + +--- + +## 20. 나의 메뉴 + +> **페이지**: 35~38 + +### 20.1 나의 메뉴 - 없음 + +> **페이지**: 35 + +- 나의 메뉴가 설정되지 않은 상태 +- 콘텐츠 상단에 `[...]` 아이콘만 표시 + +### 20.2 나의 메뉴 - 있음 + +> **페이지**: 36 + +- 나의 메뉴가 1개 설정된 상태 +- 콘텐츠 상단에 나의 메뉴명 탭 표시 (예: `메뉴관리`) + +### 20.3 나의 메뉴 - 여러 줄 + +> **페이지**: 37 + +- 나의 메뉴가 여러 개 설정된 상태 +- 콘텐츠 상단에 여러 메뉴명이 나열됨 +- 줄바꿈되어 여러 줄로 표시 가능 (예: `메뉴관리 메뉴명 메뉴명 메뉴명 ...`) + +### 20.4 나의 메뉴 - 메뉴 영역에 통합 + +> **페이지**: 38 + +- 좌측 메뉴 영역에 "메뉴" / "나의 메뉴" 탭으로 통합 +- 메뉴 탭: 일반 메뉴 목록 표시 +- 나의 메뉴 탭: 사용자 즐겨찾기 메뉴 표시 + +--- + +## 21. 검색, 필터, 정렬 모음 + +> **페이지**: 39 + +### 21.1 구성 요소 + +| 영역 | 구성 | +|------|------| +| 기간 선택 | 날짜 범위 (`2025-09-01 ~ 2025-09-03`) + 단축 버튼 (전전월, 어제, 오늘, 전월, 당월, 당해년도) | +| 검색바 | 검색 입력 필드 | +| 필터 셀렉트 박스 | 복수의 전체 셀렉트 박스 | +| 정렬 | 최신순 셀렉트 박스 | +| 항목 필터 | 항목명 태그 형태로 나열 | + +--- + +## 22. 페이지 설정 버튼 + +> **페이지**: 40 + +### 22.1 기능 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 01 | 섹션 표시 및 순서 변경 | 페이지 내 섹션 ON/OFF 토글 및 순서 변경 | +| 02 | 일반 설정 | 일반 설정 > 페이지/섹션 설정 > 공통 요소 모두 제어 | + +### 22.2 설정 패널 구성 + +- 버전기록 +- 가져오기 +- 내보내기 +- 섹션 목록: 각 섹션별 ON/OFF 토글 + +**예시**: +``` +섹션명 [ON] +섹션명 [ON] +섹션명 [ON] +섹션명 [ON] +섹션명 [ON] +``` + +--- + +## 23. 섹션 설정 버튼 + +> **페이지**: 41 + +### 23.1 기능 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 01 | 항목 표시 및 순서 변경 | 섹션 내 항목 ON/OFF 토글 및 순서 변경 | +| 02 | 일반 설정 | 일반 설정 > 페이지/섹션 설정 > 공통 요소 모두 제어 | + +### 23.2 설정 패널 구성 + +- 가져오기 +- 내보내기 +- 항목 목록: 각 항목별 ON/OFF 토글 + +**예시**: +``` +기간 [ON] +기간단축버튼 [ON] +검색바 [ON] +필터명 [ON] +필터명 [ON] +필터명 [ON] +필터명 [ON] +정렬 [ON] +``` + +--- + +## 24. 태스크 알림 아이콘 + +> **페이지**: 42~43 + +### 24.1 동작 규칙 + +| 번호 | 항목 | 설명 | +|------|------|------| +| 01 | 태스크 알림 아이콘 | 태스크가 추가될 경우 카운트하여 표시 | +| - | 메뉴 확장 시 표시 | 대/중/소메뉴로 확장될 경우 해당 메뉴에 아이콘 표시 | +| - | 카운트 범위 | 최소 1 ~ 최대 99 | + +### 24.2 표시 예시 + +**축소 상태**: 대메뉴 옆에 카운트 배지 표시 (예: `전자결재 [3]`) + +**확장 상태 (2Depth)**: +``` +전자결재 [3] + - 중메뉴명 [2] + - 중메뉴명 [1] + - 중메뉴명 + - 중메뉴명 + - 중메뉴명 +``` + +**확장 상태 (3Depth)**: +``` +전자결재 [3] + - 중메뉴명 + - 중메뉴명 [1] + · 소메뉴명 [1] + · 소메뉴명 + - 중메뉴명 + - 중메뉴명 + - 중메뉴명 +``` + +### 24.3 페이지 내 표시 + +- 메뉴 축소 상태에서도 대메뉴 아이콘 옆에 카운트 배지 표시 + +--- + +## 부록: 페이지 맵 + +| 페이지 | 섹션 | 화면명 | +|--------|------|--------| +| 1 | 표지 | SAM_General Rule | +| 2 | 문서 이력 | Document History | +| 3 | 공통 | - | +| 4 | 인터랙션 | Interaction | +| 5 | 반응형 웹 | Responsive Web | +| 6 | 화면 템플릿 | Screen Template | +| 7 | 메시지 | Notifications | +| 8 | GNB, LNB, 푸터 | GNB, LNB, 푸터 | +| 9 | 영역 구분 | 메뉴, 페이지, 섹션, 항목 영역 | +| 10 | 메뉴 목록 | 메뉴 목록 3Depth | +| 11 | 알림 팝업 | 알림 팝업 | +| 12 | 마이페이지 | 마이페이지 팝업 | +| 13 | 셀렉트 박스 | 셀렉트 박스 (기본/다중/검색) | +| 14 | 가이드 메시지 | 가이드 메시지 | +| 15 | 태블릿/모바일 헤더 | 태블릿/모바일 헤더 | +| 16 | 태블릿/모바일 바텀 버튼 | 태블릿/모바일 바텀 버튼 영역 | +| 17 | 공지 팝업 | 공지 팝업 | +| 18 | (구분) | PC, TABLET, MOBILE - 목록 4단계 | +| 19 | 목록 1단계 | PC_목록 | +| 20 | 목록 2단계 | TABLET_가로_목록 | +| 21 | 목록 3단계 | TABLET_세로_목록 | +| 22 | 목록 3단계 확장 | TABLET_세로_목록_확장 | +| 23 | 목록 3단계 | MOBILE_가로_목록 | +| 24 | 목록 3단계 확장 | MOBILE_가로_목록_확장 | +| 25 | 목록 4단계 | MOBILE_세로_목록, MOBILE_세로_목록_확장 | +| 26 | (구분) | PC, TABLET, MOBILE - 상세 4단계 | +| 27 | 상세 1단계 | PC_상세 | +| 28 | 상세 2단계 | TABLET_가로_상세 | +| 29 | 상세 3단계 | TABLET_세로_상세 | +| 30 | 상세 3단계 | MOBILE_가로_상세 | +| 31 | 상세 4단계 | MOBILE_세로_상세 | +| 32 | (구분) | 섹션 정리 | +| 33 | 섹션 정리 | PC 섹션 정리 | +| 34 | TBD | 미정 | +| 35 | 나의 메뉴 | 나의 메뉴_없음 | +| 36 | 나의 메뉴 | 나의 메뉴_있음 | +| 37 | 나의 메뉴 | 나의 메뉴_여러 줄 | +| 38 | 나의 메뉴 | 나의 메뉴_메뉴 영역에 통합 | +| 39 | 검색/필터/정렬 | 검색, 필터, 정렬 모음 | +| 40 | 페이지 설정 | 페이지 설정 버튼 | +| 41 | 섹션 설정 | 섹션 설정 버튼 | +| 42~43 | 태스크 알림 | 태스크 알림 아이콘 | + +--- + +## 관련 문서 + +- [SAM ERP 회계관리 스토리보드 D1.6](SAM_ERP_회계관리_Storyboard_D1.6.md) +- 원본 PDF: `SAM_General_Rule_Storyboard_D1.0_260116.pdf` + +--- + +**최종 업데이트**: 2026-02-23