오늘 뭐 먹지? (MenuSelection)

개요

본인 위치 근처에 있는 음식점을 조회하여 먹을 음식을 고를 수 있는 웹 어플리케이션 서비스

개발환경

OS : Windows 10

Web Browser : Google Chrome

IDE : Spring Tool Suite 3 Version: 3.9.11.RELEASE

Language : Java (JDK 1.8.0_231), javascirpt, JSP

Skill : Ajax, CSS

Server : Tomcat 8.0

Framework : Spring 5.2.2.RELEASE, Mybatis, JQuery, Bootstrap

DBMS : MariaDB 10.4

Configuration Management : Git

사이트맵

ER-Diagram

패키지 분류

com.menuselection.multicam.bean

• 각 Bean 클래스

com.menuselection.multicam.common

• 공통적으로 사용하는 클래스

com.menuselection.multicam.controller

• 각 controller 클래스

com.menuselection.multicam.DAO

• 각 DAO 인터페이스 및 DAOImpl 클래스

com.menuselection.multicam.service

• 각 service 인터페이스 및 serviceImpl 클래스

페이지 분류

views/common

• include 필요한 header, footer.jsp 파일 포함

views

• 공통 jsp 파일 제외 모든 jsp 파일 포함
  • home : 메인페이지
  • kakao : 카카오 맵 API 연동 페이지(개발 작업을 위한 임시 페이지)
  • addressList, roadAddressList : 지번주소, 도로명주소 더보기 페이지
  • placeList : 음식점 리스트 페이지
  • worldcupmain : 음식 월드컵 페이지
  • board, boardAction, writeBoard, content : 맛집 공유 게시판 페이지

resources

• js, image 파일 포함

실제 실행화면 및 기능 설명

메인 화면

• 상단 메뉴 클릭 시 메인페이지, 음식 월드컵, 맛집공유 게시판 페이지 이동 가능

카카오맵 주소 검색 화면

• 현재 위치 조회 (SSL 미적용 시 geolocation 적용 불가)

• 지번, 도로명 주소 조회
• 지번, 도로명 주소 페이징 처리(10개씩 조회가능)

• 주소 검색 후 해당 주소 선택 시 현위치로 표시 후 주변 음식점 45개씩 조회가능(별표로 표시)

(Kakao API 기준 최대 15개까지 , 연속 호출시 최대 45개까지 조회가능)

• 해당 음식점 선택 시 해당 음식점의 상단에 아이콘 및 ToolTip 박스 표시
• 해당 음식점의 상세보기 클릭시 해당 음식점 URL로 이동

음식 월드컵

• 메인 메뉴에서 음식 월드컵 메뉴 선택시 음식월드컵 메인으로 이동
• 월드컵 시작 버튼으로 진행 가능

• 2개의 메뉴씩 이미지가 나오며, 원하는 메뉴 선택 시 선택한 메뉴가 누적됨

• 모든 단계를 선택했을 경우 최종으로 선택한 메뉴가 노출되면서 끝마침

맛집 공유 게시판

• 본인이 먹은 음식점의 메뉴 평가를 후기 형식으로 공유가능
• 제목을 클릭할 경우 해당 게시글에 대한 상세 내용 확인가능

• 글쓰기 버튼을 클릭 시 게시글 작성 페이지로 이동가능
• 제목, 내용, 작성자, 비밀번호를 입력하여 새로운 게시글 추가가능
• 비밀번호는 수정 및 삭제시 활용가능