MOR.NEVEN

MOR.NEVEN은 도자기 공방을 위한 웹사이트입니다. 드래그 가능한 이미지 보드, macOS 스타일 이미지 창, 하단 Dock 링크, 메모 앱 스타일 방명록, 비밀번호로 보호되는 이미지 관리 기능을 포함합니다.

버전: v2.0.55

운영 사이트: https://morneven-fc90f.web.app

버전 기록

최신 버전: v2.0.55

상세 버전 기록은 CHANGELOG.md에서 관리합니다.

주요 기능

• PC에서 도자기 아카이브 이미지를 드래그할 수 있습니다.
• 이미지를 클릭하면 macOS 스타일 창으로 크게 볼 수 있습니다.
• PC에서는 이미지 창을 최대 3개까지 동시에 열 수 있습니다.
• 모바일에서는 하나의 이미지 모달을 사용하며, 바깥 배경을 누르면 닫힙니다.
• 하단 Dock에서 HOME, 방명록, 인스타그램, 카카오톡, 네이버 예약, 네이버 지도로 이동합니다.
• 방명록 페이지에서 방문자가 이름과 메모를 남길 수 있습니다.
• 방명록은 macOS 메모 앱처럼 폴더, 날짜별 목록, 편집기, 검색, 툴바를 갖춘 Notes 스타일 화면으로 동작합니다.
• 관리자 이미지 매니저는 서버에서 비밀번호를 확인한 뒤 접근할 수 있습니다.
• 이미지 추가/삭제는 총 20장 제한 안에서 동작합니다.
• 운영 환경은 Firebase를 사용하고, 로컬 미리보기는 IndexedDB fallback을 사용합니다.

프로젝트 구조

.
├── index.html              # 정적 페이지 마크업
├── guestbook.html          # 메모 앱 스타일 방명록 페이지
├── guestbook.js            # 방명록 API 클라이언트와 렌더링
├── styles.css              # 사이트, 모달, Dock, 매니저 스타일
├── script.js               # 이미지 보드, 모달, 관리자 UI, API 클라이언트
├── server.js               # 로컬 미리보기 서버와 로컬 API 미러
├── assets/                 # 로고, favicon, Dock 아이콘, 기본 도자기 이미지
├── functions/index.js      # Firebase Cloud Function API
├── functions/shared.js     # 로컬 서버와 Function이 공유하는 순수 로직
├── CHANGELOG.md            # 버전 기록
├── firestore.rules         # 클라이언트의 Firestore 직접 접근 차단
├── storage.rules           # 클라이언트의 Storage 직접 접근 차단
├── firebase.json           # Hosting, rewrites, functions, rules 설정
└── FIREBASE_DEPLOY.md      # Firebase 배포 상세 메모

로컬에서만 생성되는 런타임 폴더는 git에서 제외됩니다:

.local-data/
uploads/

로컬 개발

로컬 서버는 관리자 비밀번호를 환경 변수로 받습니다. 실제 운영 비밀번호는 소스 파일에 포함하지 않고 환경 변수 또는 Firebase Secret Manager에서 관리합니다.

MORNEVEN_ADMIN_PASSWORD='your-admin-password' \
MORNEVEN_SESSION_SECRET='local-dev-session-secret' \
node server.js

브라우저에서 열기:

http://127.0.0.1:4173/
http://127.0.0.1:4173/guestbook.html

로컬 업로드 파일은 uploads/에 저장되고, 로컬 이미지 메타데이터는 .local-data/images.json에 저장됩니다. 로컬 방명록도 같은 JSON 파일의 guestbook 배열에 저장됩니다.

방명록

하단 Dock의 방명록 아이콘으로 이동합니다.

지원 기능:

• 이름 입력 없이 남길 수 있는 익명 메모
• 제목과 본문이 있는 Notes 스타일 메모 작성
• 본문 안에 이미지 첨부 및 미리보기 삽입, 파일 선택과 드래그 앤 드롭 지원
• 저장 버튼을 누른 뒤 관리자 비밀번호를 통과해야만 방명록 등록
• 기존 방명록 글도 수정 저장이나 삭제 버튼을 누를 때 관리자 비밀번호를 확인
• 방명록 화면에서도 하단 Dock을 유지하면서 Notes 앱처럼 화면 전체를 사용
• 시간 기반 라이트/다크 모드 자동 전환
• 검색, 날짜 그룹 목록, 포맷 팝오버, 체크리스트, 표, 첨부 미리보기 UI
• 최근 50개 방명록 메모 표시
• 로컬 서버와 Firebase Function에서 동일한 /api/guestbook API 사용
• 클라이언트에 공개해도 되는 필드만 반환하는 public guestbook 응답 형태

관리자 이미지 매니저

PC에서는 오른쪽 위의 은은한 + 버튼으로 관리자 매니저를 열 수 있습니다.

지원 기능:

• 이미지 파일 추가
• 저장 전 이미지 이름, 타입, 설명 입력
• 기존 기본 이미지 또는 업로드 이미지 삭제
• 전체 이미지 최대 20장 관리

운영 환경의 관리자 인증은 Firebase Function에서 처리합니다. 비밀번호는 클라이언트 코드가 아니라 Firebase Secret Manager의 MORNEVEN_ADMIN_PASSWORD에 저장합니다.

Firebase

운영 환경에서 사용하는 것:

• Firebase Hosting: 정적 파일 호스팅
• Cloud Functions v2: /api/**
• Firestore: 이미지 메타데이터, 방명록, 숨김 처리된 기본 이미지 상태 저장
• Cloud Storage: 업로드 이미지 파일 저장
• Secret Manager: 관리자 비밀번호와 세션 서명 secret 저장

secret 설정:

firebase functions:secrets:set MORNEVEN_ADMIN_PASSWORD --project morneven-fc90f
firebase functions:secrets:set MORNEVEN_SESSION_SECRET --project morneven-fc90f

Function 의존성 설치:

cd functions
npm install
cd ..

전체 배포:

firebase deploy --project morneven-fc90f

정적 파일만 배포:

firebase deploy --only hosting --project morneven-fc90f

검증

배포 전 유용한 확인 명령:

npm run verify
firebase deploy --only hosting --project morneven-fc90f --non-interactive

Function/API를 변경한 경우에는 배포 후 /api/session, /api/images, /api/guestbook, 로그인, 이미지 업로드, 이미지 삭제를 확인하세요.

에셋 메모

현재 Dock 아이콘:

• assets/dock-instagram.svg
• assets/dock-kakao.svg
• assets/dock-guestbook.svg
• assets/dock-naver-booking-20260519.webp
• assets/dock-naver-map.webp

기본 보드 이미지는 assets/pottery-01.jpeg부터 assets/pottery-08.jpeg까지입니다.

보안 메모

• .env, .local-data/, uploads/, 실제 비밀번호 값은 버전 관리 대상에서 제외합니다.
• Firestore와 Storage rules는 클라이언트의 직접 읽기/쓰기를 차단합니다.
• 브라우저는 /api/**만 호출하고, 권한이 필요한 작업은 서버 또는 Firebase Function에서 처리합니다.
• 관리자 비밀번호는 환경 변수 또는 Firebase Secret Manager에서만 관리합니다.