🍚 오늘 뭐 먹지?

결정장애를 위한 메뉴 추천 반응형 웹 (모바일통합구현 수업 프로젝트)

매일 점심·저녁마다 "아무거나"를 외치며 고민하는 시간을 줄여 주는 사이트입니다. 조건을 고르고 버튼 한 번이면 오늘의 메뉴가 정해져요.

주요 기능

탭	기능
🎲 추첨 (index.html)	종류·예산·상황 조건 선택 → 룰렛 추첨, 테마 바로가기(비 오는 날, 해장, 공강 30분 등), 날씨 맞춤 추천, 지도 검색·공유·기록
🏆 월드컵 (worldcup.html)	둘 중 하나를 고르는 메뉴 토너먼트. 후보 수에 맞춰 4강/8강/16강 자동 대진
🎡 돌림판 (roulette.html)	후보를 직접 넣고 돌리는 원판(canvas). 메뉴 무작위·즐겨찾기로 채우기, "누가 계산?" 모드, 결과가 메뉴면 사진·결정→기록, 문자·공유
📖 도감 (menus.html)	전체 메뉴 검색·종류 필터·가격 정렬, ⭐ 즐겨찾기 / 🚫 안 먹는 메뉴 표시, 종류별 요약표(메뉴 수·평균 가격·가장 저렴한 메뉴)
📝 기록 (history.html)	결정한 메뉴 기록, TOP 3, 종류별 막대 그래프, 날짜별 목록
💸 N빵 (split.html)	총액·인원·금액 단위로 1인당 금액 계산(올림), 남는 돈 안내, 최근 메뉴로 채우기, 문자로 보내기
👤 회원 (login.html, signup.html)	회원가입(아이디 중복 확인, 비밀번호 조건·안전도, 약관 동의), 로그인(로그인 상태 유지, 비밀번호 보기, 보던 페이지로 돌아가기), 로그아웃, 회원 탈퇴. 로그인하면 기록·즐겨찾기를 계정마다 따로 저장
📋 게시판 (board.html, board-write.html, board-view.html)	맛집 추천·메뉴 고민·자유 말머리, 제목·내용·작성자 검색, 페이지 번호, 글쓰기·수정·삭제(내 글만), 댓글, 추천, 조회수, 이전글·다음글. 글쓰기·댓글·추천은 로그인 필요

• 반응형: PC(위쪽 메뉴·마우스를 올리면 하위 메뉴, 2단 배치) → 태블릿(☰ 햄버거 메뉴 2열) → 폰(☰ 햄버거 메뉴, 1단 배치, 빠른 추첨 버튼)
• 드롭다운 하위 메뉴: 메뉴마다 ▾ 하위 메뉴(예: 도감 ▾ → 중식, 월드컵 ▾ → 즐겨찾기로 대결)로 원하는 기능에 바로 이동. PC는 mouseover/mouseout 이벤트로 열고 닫고, 햄버거 메뉴에서는 ▾ 버튼으로 펼침
• 마우스 이벤트: 테마 카드에 마우스를 올리면 이모지가 그 테마에 맞는 메뉴 사진으로 바뀜, 사진을 못 불러오면(onerror) 메뉴 이모지로 대신 표시
• 최근 먹은 메뉴 빼기: 최근 3일 동안 결정한 메뉴는 추첨에서 자동 제외 (끄기 가능)
• 날씨 추천: 비·눈이 오면 국물, 더우면 시원한 메뉴를 추천
• 식당 찾기 / 친구에게 알리기: 결과마다 네이버·카카오 지도, 📍 내 주변(현재 위치), 🏫 장안대 근처(위성좌표) 검색, 💬 문자(sms:)·✉️ 메일(mailto:)로 보내기, 공유·복사
• 연락하기: 푸터의 ✉️ 이메일(mailto:) · 📞 전화(tel:) 링크
• 배경음악(BGM): 헤더의 ▶ 재생 / ⏸ 정지 버튼, 다른 탭으로 이동해도 끊김 없이 재생 ("Local Forecast - Elevator" by Kevin MacLeod, CC BY 4.0)
• 다크 모드: 헤더의 🌙 버튼(폰은 ☰ 메뉴 안 "다크 모드")으로 라이트/다크 전환, 고른 테마는 다음에 열어도 그대로
• 방문자 수: 푸터에 오늘 방문·전체 방문 수 표시 (서버 없이 이 브라우저 기준으로 세고, 탭을 옮기거나 새로고침해도 한 번 방문은 1번만 셈)
• 홈 화면 설치: 폰에서 "홈 화면에 추가"하면 앱 아이콘으로 실행

사용 기술

• HTML / CSS / JavaScript (프레임워크, 서버, DB 없음)
• localStorage: 기록·즐겨찾기·설정·회원 정보·게시글을 브라우저에 저장 (기록과 즐겨찾기는 로그인하면 회원마다 따로)
• 회원 정보: 비밀번호는 저장하지 않고 소금값(salt)을 붙여 SHA-256으로 1,000번 해시한 값만 저장. 저장·확인은 js/auth.js 한 곳에서만 해서 나중에 서버·DB로 바꿀 때 이 파일만 고치면 됨
• Open-Meteo 날씨 API (가입·키 불필요, 비상업적 용도 무료, 데이터 CC BY 4.0)
• 메뉴 사진: 위키미디어 공용 자유 라이선스 사진 (작가·라이선스는 credits.html)
• 글꼴: Pretendard / 아이콘: Simple Icons, Material Icons

실행 방법

VS Code에서 폴더를 열고 index.html을 Live Server로 실행하면 됩니다. 파일을 더블클릭해서 열어도 대부분 동작하지만, 브라우저 제한 때문에 아래 두 가지가 달라질 수 있어요.

• 📍 내 위치 기능(날씨, 내 주변 찾기)이 막힐 수 있음
• 탭을 이동할 때 페이지 전체를 다시 불러와서 BGM이 잠깐 끊김

폴더 구조

├─ index.html          추첨 (메인)
├─ worldcup.html       월드컵
├─ menus.html          도감
├─ history.html        기록
├─ roulette.html       돌림판
├─ split.html          N빵 계산기
├─ login.html          로그인
├─ signup.html         회원가입
├─ board.html          게시판 목록
├─ board-write.html    게시판 글쓰기·수정
├─ board-view.html     게시판 글 보기·댓글
├─ manifest.webmanifest  홈 화면 설치 정보
├─ css/style.css       전체 디자인 + 반응형
├─ js/
│  ├─ menus.js         메뉴 데이터 (234개) + 사진 파일 이름
│  ├─ common.js        공통 기능 (저장, 공유, 유틸)
│  ├─ auth.js          회원 정보 저장·확인 (가입, 로그인, 로그아웃, 탈퇴, 비밀번호 해시)
│  ├─ account.js       로그인·회원가입 화면, 헤더의 로그인/내 계정 메뉴
│  ├─ board-store.js   게시판 글·댓글·추천 저장 (나중에 서버·DB로 바꿀 때 이 파일만 수정)
│  ├─ board.js         게시판 목록·글쓰기·글 보기 화면
│  ├─ weather.js       날씨 추천
│  ├─ home.js          추첨 화면
│  ├─ worldcup.js      월드컵
│  ├─ dex.js           도감
│  ├─ history.js       기록
│  ├─ roulette.js      돌림판
│  ├─ split.js         N빵 계산기
│  ├─ credits.js       출처 페이지
│  ├─ router.js        탭 이동 (가운데 내용만 바꿔서 BGM이 끊기지 않음)
│  └─ photo-credits.js 사진 출처 정보
├─ credits.html        출처 및 참고 사이트
├─ plan.html           기획서 (기획 의도, 화면 구성, 기능, 반응형, 초기 기획에서 바뀐 점)
├─ audio/bgm.mp3       배경음악
└─ img/                파비콘, 앱 아이콘, menus/ (메뉴 사진 234장)

참고

• 가격은 1인분 기준 전국 대략적인 가격이며, 지역과 식당마다 다를 수 있습니다.
• 기록·회원 정보·게시글은 사용하는 브라우저에만 저장됩니다. 다른 기기에서는 보이지 않아요.