jongryangje/docs/개발 규칙/08-디자인규칙.md

디자인 규칙 (Design Rules)

디자인 기준(Reference): app/Views/bag/daily_inventory.php (일일 봉투 수불 현황)
새 화면·뷰는 이 파일과 일관성 있게 디자인한다.

---

1. 기준 뷰

항목	값
기준 파일	app/Views/bag/daily_inventory.php
화면명	일일 봉투 수불 현황
기술 스택	Tailwind CSS v3 (CDN), Noto Sans KR

---

2. 레이아웃 구조

업무 화면은 아래 순서로 구성한다. (일일 봉투 수불과 동일한 구조 권장)

구역	클래스/역할	비고
상단 네비	header	배경 흰색, 하단 보더, h-12, 로고·메뉴·로그아웃(종료)
타이틀 바	bg-title-bar	배경 #2c3e50, 흰색 글자, 화면 제목 표시
조건/버튼 패널	bg-control-panel	배경 #f8f9fa, 조회 조건·버튼 영역
본문	main (.main-content-area)	테이블 등 콘텐츠, height: calc(100vh - 170px), overflow auto
푸터	footer	배경 gray-200, 상태/버전/일시 등

• body: flex flex-col h-screen, 전체 높이 고정·스크롤은 본문만.

---

3. 색상 (Tailwind config)

tailwind.config.theme.extend.colors 에 아래를 정의하고 사용한다.

이름	값	용도
system-header	#ffffff	상단 헤더 배경
title-bar	#2c3e50	타이틀 바 배경
control-panel	#f8f9fa	조건/버튼 패널 배경
btn-search	#1c4e80	조회 버튼 배경
btn-excel-border	#28a745	엑셀 버튼 테두리
btn-excel-text	#28a745	엑셀 버튼 글자
btn-print-border	#ced4da	인쇄 버튼 테두리
btn-print-text	#000000	인쇄 버튼 글자
btn-exit	#d9534f	종료 버튼 배경

• 링크/강조: text-gray-600 + hover:text-blue-600, 선택 메뉴: text-blue-700 font-bold border-b-2 border-blue-700.

---

4. 폰트

• fontFamily.sans: '"Malgun Gothic"', '"Noto Sans KR"', 'sans-serif'
• Google Fonts: <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet"/>
• 필요 시 fontSize.xxs (0.65rem) 등 확장 정의.

---

5. 버튼 스타일

종류	클래스 예시	용도
조회	bg-btn-search text-white px-4 py-1.5 rounded-sm ... shadow hover:opacity-90	주 액션(조회·검색)
엑셀	bg-white text-btn-excel-text border border-btn-excel-border ... hover:bg-green-50	보조(엑셀 저장 등)
인쇄	bg-white text-black border border-btn-print-border ... hover:bg-gray-50	보조(인쇄)
종료	bg-btn-exit text-white ... hover:bg-red-700	로그아웃·닫기

• 아이콘은 SVG, w-4 h-4 등으로 크기 통일.

---

6. 테이블

• 클래스: data-table (커스텀 스타일 블록에서 정의)
• 스타일 요약:
  • th/td: border #ccc, padding 4px 8px, font-size 13px
  • th: 배경 #e9ecef, 굵게, 가운데 정렬
  • 짝수 행: 배경 #f9f9f9 (zebra)
  • 행 hover: 배경 #e6f7ff
• 정렬: .text-left, .text-right, .text-center 활용.

---

7. 상단 네비·로고

• 로고: 파란 사각형(#2563eb) 위 흰 사각형 두 개 겹친 SVG (기준 뷰와 동일 형태 권장).
• 시스템명: "쓰레기봉투 물류시스템", base_url() 링크.
• 메뉴: text-sm font-medium text-gray-600, hover 시 text-blue-600, 현재 메뉴는 text-blue-700 font-bold border-b-2 border-blue-700.
• 종료(로그아웃): X 아이콘, hover:text-red-600, base_url('logout') 링크.

---

8. 플래시 메시지

• 성공: bg-green-50 text-green-700 text-sm, rounded-lg, p-3.
• 에러: 동일 구조로 bg-red-50 text-red-700 등으로 통일.

---

9. 일관성 원칙

• 새로 만드는 업무 화면(목록·조회·입력 폼 등)은 위 레이아웃·색상·버튼·테이블 규칙을 따르고, daily_inventory.php와 시각적으로 어울리도록 구성한다.
• Auth(로그인/회원가입) 등 단순 폼은 기존대로 카드형·Inter 폰트 등 유지해도 되며, 필요 시 본 규칙의 색·버튼만 참고해 통일감을 맞출 수 있다.