# 하림 식탁 · 인터랙티브 디자인 제안

제공된 `a.pdf`의 4~5페이지를 기반으로 제작한 임직원 앱 12화면, 영양사 관리자 웹 11화면과 발표용 HTML입니다. 기획안 14개 화면에 추가 기능 요구사항(가입 QR, 식단 사진, 카테고리 관리, 팝업·푸시, 지점별 공지, 하림몰 홍보, 고객의 소리, 만족도 조사) 9개 화면을 더했습니다. ‘하림 식탁’은 서비스명 제안입니다.

## 바로 보기

`index.html`을 브라우저로 열면 서비스 개요, 화면 구성, 시연 순서, 디자인 방향을 볼 수 있습니다.

- `app.html`: 임직원 앱. 데스크톱에서는 휴대전화 시안 오른쪽에 화면 설명을 표시합니다.
- `admin.html`: 영양사 관리자 웹. 각 화면 하단의 ‘설계 의도 보기’를 열 수 있습니다.
- `shared.js`: 앱과 관리자가 함께 쓰는 시연 상수(기준 시각, 지점 목록, 카테고리, 기본 홍보·설문 데이터 등)입니다.
- `assets/vendor/qrcode.min.js`: 가입 QR 생성용 qrcode-generator(MIT 라이선스)이며 로컬 파일로 포함되어 있습니다.
- `DESIGN.md`: 색상·서체·컴포넌트 기준과 시연 가정.
- `docs/screenshots/`: 데스크톱·모바일 화면 캡처.

압축 파일을 전달할 때는 전체 폴더를 풀어 사용하세요. HTML과 함께 CSS·JS·assets 폴더가 있어야 합니다. 외부 폰트/CDN이나 설치할 프런트엔드 패키지는 없습니다(QR 라이브러리는 로컬 벤더 파일).

## 앱과 관리자 연동 시연

파일을 직접 열어도 화면을 볼 수 있습니다. 다만 `file://`의 브라우저 저장소 공유 방식은 브라우저마다 달라, 두 화면을 연결해 시연할 때는 로컬 서버를 권장합니다.

Python 3가 있는 환경에서 이 폴더로 이동한 뒤:

```sh
python3 -m http.server 4187 --bind 127.0.0.1
```

브라우저에서 `http://127.0.0.1:4187`을 엽니다. 포트가 사용 중이면 다른 번호를 사용하세요. 서버 종료는 터미널에서 Ctrl+C입니다. 현재 제작 환경의 미리보기 주소도 `http://127.0.0.1:4187`입니다.

## 담당자 설명 · 약 5분

1. **시작 페이지**: 흩어진 식단 안내와 신청 업무를 앱·관리자 웹으로 연결한다는 목적을 설명합니다.
2. **관리자 → 주간 식단 등록**: 9월 7~11일 캘린더에서 ‘전주 식단 복사’ 미리보기 후 적용합니다. 수요일 중식 편집 버튼으로 메뉴를 변경하고 저장합니다. ‘식단 게시하기’와 확인 버튼을 누릅니다.
3. **앱 → 오늘의 식단**: 같은 브라우저에서 게시한 수요일 중식이 반영되는 것을 보여줍니다. 저장만 한 초안은 앱에 노출되지 않습니다. 상세에서 칼로리·알레르기·원산지 정보 위치를 설명합니다.
4. **앱 → 사전신청**: 9월 10일 샐러드 수량을 2개로 선택해 신청합니다. 내 신청내역에 신청 완료가 표시됩니다.
5. **관리자 → 신청 집계**: 수령일을 **2026-09-10**으로 바꾸면 김하림의 샐러드 2개가 집계됩니다. 9월 9일의 128식은 별도의 기본 예시입니다. CSV 다운로드 버튼으로 집계 파일을 저장할 수 있습니다.
6. **앱 → 내 신청내역**: 취소 버튼과 확인을 누른 뒤 관리자에서 같은 수령일 수량이 줄어드는 것을 확인합니다.
7. **관리자 → 공지 등록**: 제목·내용을 입력하고 미리보기를 확인한 뒤 게시합니다. 앱 공지사항에 반영됩니다. 지점을 고르고 푸시를 함께 보내도 실제 푸시는 발송하지 않습니다.
8. **관리자 → 임직원 명단의 가입 QR → 앱 가입 신청**: 앱 가입 신청에서 `H2026002` / `박민수`로 등록하면 관리자 명단에 가입 완료로 표시됩니다.
9. **관리자 → 팝업·푸시**: 익산 본사 대상 팝업과 푸시를 등록하면 앱 홈에서 가상 푸시 배너와 팝업을 확인할 수 있습니다.
10. **앱 → 고객의 소리 → 관리자 답변**: 앱에서 고객의 소리를 작성하고 관리자가 답변하면 앱에서 답변을 확인합니다.
11. **앱 → 만족도 조사 → 관리자**: 앱에서 만족도 조사에 응답하면 관리자 결과에 반영됩니다.
12. **관리자 → 카테고리 관리**: 하림몰을 숨기면 앱에서 사라집니다.
13. **관리자 → 하림몰 홍보**: 등록한 홍보는 앱 홈 배너와 하림몰 추천에 나타나며, 누르면 하림몰 링크로 이동합니다.

처음 상태로 다시 시연하려면 시작 페이지 하단의 ‘시연 데이터 초기화’를 누르고 열린 앱·관리자 화면을 새로고침합니다.

## 화면 목록

| 앱 12화면 | 주소 |
| --- | --- |
| 로그인 / 본인확인 | app.html#login |
| 가입 신청 | app.html#register |
| 홈 · 오늘의 식단 | app.html#home |
| 주간 식단표 | app.html#week |
| 식단 상세 | app.html#detail |
| 사전신청 | app.html#apply |
| 내 신청내역 | app.html#history |
| 공지사항 | app.html#notices |
| 하림몰 추천 | app.html#mall |
| 고객의 소리 | app.html#voice |
| 만족도 조사 | app.html#survey |
| 설정 · 마이 | app.html#settings |

| 관리자 11화면 | 주소 |
| --- | --- |
| 로그인 | admin.html#login |
| 주간 식단 등록 | admin.html#planner |
| 메뉴 마스터 | admin.html#menus |
| 신청 집계 | admin.html#orders |
| 임직원 명단 · 가입 | admin.html#employees |
| 카테고리 관리 | admin.html#categories |
| 공지 · 푸시 | admin.html#notices |
| 팝업 · 푸시 | admin.html#popups |
| 하림몰 홍보 | admin.html#promos |
| 고객의 소리 | admin.html#feedback |
| 만족도 조사 | admin.html#survey |

앱 본인확인 예시: 사번 `H2026001`, 이름 `김하림`. 가입 신청 예시: `H2026002`, `박민수`(QR 진입 주소는 `app.html?from=qr#register`). 관리자 로그인은 입력된 데모 계정으로 화면 이동을 시연합니다. 실제 인증은 하지 않습니다.

## 시안과 본 개발의 구분

- 현재 결과물은 디자인 프로토타입입니다. 실제 사용자 인증, 권한 통제, 백엔드, 네이티브 앱, 실제 푸시는 연결되지 않습니다.
- 모든 식단·영양정보·원산지·임직원·신청 수치는 예시이며 사진은 AI 생성 연출 이미지입니다.
- 기준 시각은 **2026-09-09 10:00**, 샐러드 수령일은 **2026-09-10**, 신청/취소 마감은 **2026-09-10 09:00**으로 고정하여 언제든 같은 흐름을 시연할 수 있습니다.
- 데이터는 같은 출처의 브라우저 `localStorage`에만 저장됩니다. 다른 기기와 동기화되지 않습니다.
- 실제 푸시 발송과 지점별 발송 대상 산정, 앱스토어 배포 링크, `.xlsx` 명단 대조는 본 개발 범위입니다. 시안은 관리자 화면에서 푸시 요청을 기록하고 앱에서 가상 푸시 배너로 보여줍니다. 가입 QR도 시연용 주소를 담습니다.
- 관리자가 올린 식단 사진은 브라우저 저장소에 축소(긴 변 최대 800px)하여 저장합니다. 용량 제한이 있어 실제 서비스에서는 서버·파일 저장소를 사용합니다.
- 하림몰은 링크 연결만 제공하며 앱 내 결제와 레퍼럴 기능은 없습니다. 링크는 새 창으로 열립니다.
- 지점 목록과 인원은 예시입니다.
- 메뉴 마스터 정보 등록·수정, 식단 초안 편집·복사·게시, 예약·취소, 공지 게시, 알림 토글을 체험할 수 있습니다.
- 명단 업로드 및 다운로드는 Excel에서 열 수 있는 **CSV**로 체험합니다. 기획안의 실제 `.xlsx` 업로드·다운로드는 본 개발 범위로 명시했습니다. ‘업로드 양식’을 내려받아 사번·성명·부서를 입력하고 업로드 → 미리보기 → 명단 적용으로 진행합니다.
- 본사 역할(사업장·계정 관리, 전 사업장 현황)은 기획안 4페이지에 있으나 5페이지의 14개 상세 화면에는 포함되어 있지 않습니다. 시작 페이지에 이를 설명하고, 별도 상세 설계 대상으로 구분했습니다.

## 생성 이미지

내장 imagegen 도구로 식판 일러스트와 식단 사진을 생성했습니다. 도구가 모델 버전 선택/확인 기능을 제공하지 않아 ‘2’ 또는 ‘2.5’ 사용을 단정하지 않습니다. 이미지 생성 프롬프트는 `docs/image-prompts.md`에 있습니다.