이대규

르노코리아 강남 전시장에 도입된 AI 기반 키오스크 시스템. ⓒ에피카

프로젝트 소개

• 르노 강남 대리점에 설치되어 있는 키오스크의 앱을 Electron으로 개발하였습니다.

프로젝트 설명

1. PIKAR Genie

• OpenAI의 GPT 기반으로 동작하는 AI 영업사원 입니다. 해당 챗봇의 UI/UX 개발을 하였습니다.
• SSE로 전송되는 챗봇 데이터를 받아 스트리밍 방식으로 구현하였습니다.
• 키보드 입력 뿐만 아니라 음성인식으로 대화를 할 수 있도록 구현하였습니다.
  네이버 CLOVA Speech, Open AI Whisper 등 외부 API를 활용하여,
  르노에서만 사용하는 차량 모델명 등을 보정하여 인식 할 수 있도록 하였으며
  한국어와 영어 두 가지 언어에서 모두 동작하도록 구현하였습니다.

2. My Fit Renault

• 르노에서 판매중인 차량의 옵션을 선택하여 견적을 낼 수 있는 서비스 입니다.
  차량 옵션 선택 뿐만 아니라 할부 조건, 결제 프로모션 등을 선택할 수 있으며 자세한 견적을 낼 수 있습니다.
• 견적 생성 완료 후 해당 견적서를 문자 또는 이메일로 전송 받을 수 있으며,
  영업사원에게 해당 견적서를 기반으로 구매상담 요청을 할 수도 있습니다.
• 백오피스에서 손쉽게 관련 정보를 관리 할 수 있도록 차량 정보 및 견적서 관리 시스템을 개발하였습니다.

3. My Driving Image

• 르노에서 판매하고 있는 차량과 함께하고 있는 나의 사진을 생성해주는 서비스 입니다.
  에펠탑이 있는 파리 배경으로 이미지를 만들어 제공합니다.
• 정확도 및 생성 속도를 올리기 위하여 사진 촬영 후 Image Segmentation을 진행하였습니다.
  해당 과정에서 Runware AI를 사용하였고 BiRefNet(Bilateral Reference Network) 모델을 활용하였습니다.
• 생성된 사진은 AWS S3에 24시간 동안 저장되며 문자메시지로 전송받을 수 있는 기능도 구현하였습니다.
• 사진 생성에는 구글 나노 바나나 API를 활용하였습니다.

관련 기사

• https://www.sisaon.co.kr/news/articleView.html?idxno=176510

사용기술

• FrontEnd
  • Electron, React.js(Electron Renderer Process)
• BackEnd
  • Node.js(Electron Main Process)
• 상태 관리
  • Zustand
• DB
  • MySQL
• 외부 API
  • Google Nano Banana
  • Runware AI - BiRefNet(Bilateral Reference Network) 모델 활용
  • 네이버 CLOVA Speech
  • Open AI Whisper

프로젝트 소개

• 르노 강남, 동작, 서초방배 대리점을 운영하고 있는 지점장분들과 영업사원분들께서 시승 차량 관리, 배분 관리 등을 용이하게 할 수 있도록 만들어진 크로스플랫폼 모바일 앱 입니다.
• Flutter로 개발하였기 때문에 간편하게 Android 및 iOS 환경 모두를 손쉽게 지원할 수 있었습니다. 화면 부분은 웹뷰(React) 로 만들었습니다.

프로젝트 설명

1. 시승 및 구매상담 관리

• 지점장의 경우 홈페이지나 챗봇 등을 통해 새로 들어온 시승 및 구매상담 신청을 영업사원에게 배정할 수 있습니다.
  매일 아침 9시에 새롭게 배정이 필요한 항목에 대한 건수를 PUSH 알림을 통해서 받을 수 있습니다.
• 영업사원의 경우 본인에게 배정된 항목들에 대한 조회 및 상태 변경을 할 수 있습니다.
• 시승 시작/완료 상태 변경에 따라 해당 시승에 대한 정보가 기록되며, 추후 백오피스를 통해서 시승 경로 등과 같은 정보를 조회할 수 있습니다.

2. 시승 차량 관리

• QR 코드 스캔으로 손쉽게 차량 관리 화면으로 이동할 수 있습니다.
  QR 스캔 이후 해당 차량 정보를 조회하거나 수정할 수 있습니다.

3. 각종 알림 수신

• 시승, 상담 건이 발생 될 때 마다 PUSH 알림이 발송됩니다. 지점장의 경우 신규 배정이 필요하다는 내용의 알림이 발송되며, 영업사원의 경우 배정된 건에 대한 알림이 발송됩니다.
• 르노 강남 대리점에서 운영되고 있는 Table Order 에서 영업사원을 호출하는 경우 해당 앱을 통하여 알림을 수신할 수 있습니다.

사용기술

• FrontEnd
  • Flutter, React.js(Webview)
• BackEnd
  • Spring Boot
• 상태 관리
  • Zustand
• DB
  • MySQL

프로젝트 소개

• 시승, 구매상담 신청 등을 받을 수 있는 사용자 페이지 개발에 참여하였습니다.
• React로 되어 있던 기존 프로젝트를 Next.js로 마이그레이션 하였으며, 현재 유지보수 진행 중 입니다.
• 운영하고 있는 대리점 여러 곳의 시승, 대리점, 무인매장 관리, AI 영업사원 관리 등 각종 관리 기능을 백오피스 웹에서 제공합니다.

프로젝트 설명

기능

• 시승 및 구매상담 신청
  사용자 웹사이트에서 시승 및 구매상담 신청을 받을 수 있으며, 백오피스에서 영업사원이 직접 생성할 수도 있습니다.

• 영업 대시보드
  르노의 영업 관리 애플리케이션의 데이터를 기반으로 하여 시승, 상담, 계약 등의 정보를 한눈에 파악하기 좋게 대시보드 형태로 제공합니다.

• 다국어 지원
  구글 스프레드 시트와 연동하여 i18n 다국어 처리를 하였습니다.
  API 요청을 통해 구글 스프레드 시트로 부터 다국어 정보를 받아서 즉시 웹상에 다국어 컨텐츠를 적용할 수 있으며,
  배포 시 자동으로 스프레드 시트로 부터 데이터를 불러옵니다.

• 백오피스
  React로 백오피스 웹을 개발하였습니다.
  사용자 페이지에서는 SEO 향상 및 서버 컴포넌트 활용을 위해 Next.js를 사용하였지만,
  백오피스는 React만으로 프로젝트를 구성하였습니다.
  차량 관리 뿐만 아니라 프로모션 관리, 대리점 관리, 고객 관리 등 다양한 관리 기능을 제공합니다.

• 배포 자동화
  Docker + AWS ECR + Jenkins로 배포 자동화 구축을 하였습니다.

사용기술

• FrontEnd
  • Next.js, React.js, JavaScript(ES6+)
• BackEnd
  • Spring Boot
• 상태 관리
  • Redux
• DB
  • MySQL
• 차트 라이브러리
  • Chart.js

프로젝트 소개

• 디지털 트윈 과제를 진행하면서 울산대학교의 알람, 센서 데이터와 자사의 알람, 센서 데이터를 통합으로 보여줄 수 있는 대시보드를 기획하고 만들었습니다.

프로젝트 설명

• 화면설계 및 전체 개발 과정 참여
  피그마를 활용하여 화면 설계 및 디자인을 하였으며, 프론트엔드와 백엔드 개발을 주도적으로 담당하였습니다.
• 센서 데이터 집계 및 시각화
  MongoDB로 수집된 데이터를 Aggregate를 사용하여 집계하였습니다.
  전력 사용량, 역률, 전력 소비량 등을 집계하였으며 ApexChart.js를 활용하여 시각화 하였습니다.
• 실시간으로 센서 데이터 표시 & 알람 갱신
  MongoDB로 저장된 설비 및 센서 정보를 실시간으로 불러와서 나타내었습니다. 또한 MariaDB에 저장된 알람 데이터 또한 실시간으로 불러와서 볼 수 있도록 구현하였습니다.
• reactjs-crontab을 사용한 스케줄링 구현
  1시간 단위로 집계되는 통계 정보를 최신화 하기 위해 reactjs-crontab을 사용한 스케줄링을 구현 하였습니다. 정각마다 중앙에 위치하고 있는 통계 데이터를 업데이트 합니다.

사용기술

• FrontEnd
  • React.js, JavaScript(ES6+)
• BackEnd
  • Node.js, Socket.io
• 상태 관리
  • Redux
• DB
  • MongoDB, MariaDB
• 차트 라이브러리
  • ApexChart.js, Chart.js, ReCharts.js

프로젝트 소개

기술 면접 대비를 하며 하루에 한 문제씩 꾸준히 학습하기 위하여 개발한 웹앱입니다.
PWA를 지원하며 알림 설정 시 매일 9시 웹푸시가 발송되어 1문제씩 공부할 수 있습니다.

메인 화면

메인 페이지에서는 당일에 추천되는 1문제가 나타납니다.
힌트 보기를 누르면 힌트가 나오고, 정답 보기를 누르면 자세한 설명과 함께 정답이 나옵니다.

해당 문제는 PUSH 알림을 통해 전송받을 수 있습니다.

전체 질문 목록 화면

전체 목록 페이지에서는 당일에 추천되는 문제 뿐만 아니라 DB에 저장된 모든 문제를 확인할 수 있습니다.

정답 조회 화면

등록 요청 페이지에서는 추가되었으면 하는 면접 질문을 제안할 수 있습니다.
Slack Webhook을 통해 등록 요청이 전송되어 즉시 확인할 수 있습니다.

등록 요청 화면

🔗 바로가기

사용 기술

기술	내용
NextJS 13	SEO 최적화, 서버 컴포넌트, metadata 간편 생성 등을 위하여 App Router 방식이 안정화된 NextJS 13 버전을 선택하여 사용하였습니다.
cheerio	로또 당첨 정보를 불러올 때, 동행복권 사이트 크롤링을 하기 위하여 사용한 라이브러리 입니다.

기능 설명

메인 화면

💡 글자 수 세기

• 글자 수 세기 : 자기소개서와 같은 문서를 작성할 때 글자 수 제한이 있는 경우 유용하게 활용할 수 있도록 글자 수를 자동으로 카운트 해줍니다. 공백 제외, 공백 포함, byte(hwp 및 네이버 기준), 단어, 줄 수 항목으로 구성되어 있습니다.

💡 로또 번호 생성기

• 번호 생성 : 1부터 45까지 중복하지 않는 6자리의 로또 번호를 생성합니다.

💡 로또 당첨 정보

• 당첨 정보 조회 : 동행복권 사이트를 크롤링하여 최신 당첨정보를 조회할 수 있습니다.

💡 사진 크기 조정

• 크기 조정 : 이력서 사진, 프로필 사진 등에 들어갈 사진의 크기를 손쉽게 조정할 수 있도록 만든 기능입니다. ‘이미지 선택’을 눌러 파일을 업로드하고 크기를 입력한 뒤 다운로드 받을 수 있습니다.
• 빠른 선택 : 사람인 이력서 사진, 잡코리아 이력서 사진 등으로 활용하고자 하는 경우 프리셋을 통해 클릭 한번으로 비율에 맞게 크기를 조절할 수 있습니다.

💡 나이 계산기

• 나이 계산 : 출생 년월일을 입력하면 나이와 관련된 정보를 알려줍니다.

• 썸네일 만들기 : 블로그나 SNS에 활용할 수 있는 썸네일을 손쉽게 만들 수 있습니다. 기본 타입에서는 랜덤 그라디언트 배경 설정이 가능하며, 모든 모드에서 다양한 폰트를 다양하게 변경할 수 있습니다.

🔗 바로가기

사용 기술

기술	내용
NextJS 13	SEO 최적화, 서버 컴포넌트, metadata 간편 생성 등을 위하여 App Router 방식이 안정화된 NextJS 13 버전을 선택하여 사용하였습니다.
Axios	인터셉트 기능 사용과 자동 JSON 파싱으로 불필요한 중복 코드를 최소화하였습니다.
TypeScript	타입 에러를 발견하여 프로젝트 안정성을 높이기 위해 사용하였습니다.
Recoil	전역 상태 관리 라이브러리로 Recoil을 사용하였습니다. 이전에 진행하던 프로젝트에서는 Redux를 사용하였으나 보일러 플레이트 코드 등 작성해야 하는 항목이 너무 많아 불편함을 느꼈습니다. 그래서 좀 더 가볍게 사용할 수 있는 해당 라이브러리를 선택하였습니다.

기능 설명

• 본 사이트는 식단 및 건강정보 공유 플랫폼 입니다. 식단 공유는 친구로 설정된 사람끼리 가능합니다.

메인

💡 메인 화면

• 헤더 : 로고 & 메뉴 & 로그인 및 회원가입 버튼이 위치하고 있습니다.
• 캐러샐 : 자동으로 슬라이드 되는 캐러샐이 위치하고 있습니다.
• 버튼 : 공유하기, 출석체크, 자주 묻는 질문, 공지사항 페이지로 바로 이동할 수 있는 버튼이 있습니다.

---

로그인

회원가입

💡 로그인 및 회원가입

• Next-Auth를 활용하여 JSON Web Token(JWT)를 관리하고 조작합니다.
• 이메일 방식 : DB에 계정 정보를 저장 하고 관리합니다.
• oAuth : 카카오 및 구글 2가지를 지원합니다.

---

친구

💡 친구

• 친구 추가 : 추가 버튼을 눌러 상대방 이메일 입력 후 친구 요청을 할 수 있습니다.
• 요청 응답 : 요청 수락, 요청 취소, 친구 삭제, 친구 차단을 할 수 있습니다.
• 정보 보기 : 서로 친구인 경우 클릭 하여 회원 기본 정보와 함께 최근 작성한 글, 최근 작성한 댓글을 확인할 수 있습니다.

---

공유하기

💡 공유하기

• 공유하기 : 클릭 또는 파일을 끌어다가 드롭 하여 업로드 할 수 있습니다.
  • 파일당 최대 3MB, 3장까지 등록할 수 있습니다.
  • 친구로 등록된 유저에 한하여 식단을 공유할 수 있습니다.
• 받은 목록 : 친구가 나에게 보낸 식단 목록을 확인할 수 있습니다.

---

출석체크

💡 출석체크

• 출석하기 : ‘오늘 출석 하기’ 버튼을 눌러 하루에 한 번 출석체크를 할 수 있습니다. - 출석체크 시 100 포인트를 받을 수 있으며, 마이페이지에서 포인트 내역을 확인할 수 있습니다.

---

커뮤니티

💡 커뮤니티

• 글 목록 : React-Query와 Intersection Observer API를 활용하여 무한스크롤을 구현하였습니다.
• 게시글 작성 : 로그인 한 유저만 게시글을 작성할 수 있습니다.
• 보기 옵션 : 카드보기 / 리스트 보기로 변경하여 목록을 볼 수 있습니다.
• 인기 태그 Top5 : 게시글 작성 시 입력한 태그를 집계한 뒤 인기태그 5개를 보여줍니다.

---

고객센터

💡 고객센터

• 자주 묻는 질문 : 자주 묻는 질문 목록을 볼 수 있습니다.
• 1:1 문의 : 문의를 보내고 답변을 받을 수 있습니다.
• 공지사항 : 공지사항 목록을 볼 수 있습니다.

마이페이지

내 정보 수정

비밀번호 변경

내 활동

💡 마이 페이지

• 내 정보 수정 : 닉네임, 자기소개와 같은 내 정보를 수정할 수 있습니다.
• 비밀번호 변경 : 현재 비밀번호와 새로운 비밀번호를 입력한 뒤 비밀번호 변경을 할 수 있습니다.
• 활동 내역 조회 : 내 활동 내역 (게시글 및 댓글 내역) 을 확인할 수 있습니다.
• 포인트 : 적립된 포인트 금액과 내역을 확인할 수 있습니다.

---

관리자 페이지

💡 관리자 페이지

• 접근 제한 : 관리자 등급 유저만 접근 할 수 있습니다.
• 회원 관리 : 가입된 회원 목록을 볼 수 있습니다.
• 글 관리 : 작성된 글 목록을 볼 수 있습니다.
• 댓글 관리 : 작성된 댓글 목록을 볼 수 있습니다.
• API 통계 : 호출된 IP주소를 날짜별로 한눈에 보기 쉽게 그래프로 나타냅니다.
• IP 주소 통계 : 올해 접속된 IP주소를 횟수가 많은 순서로 보여줍니다.

🔗 사이트 바로가기
🔗 영상으로 보기

팀원	역할 및 담당 기능
이대규 (팀장)	- 게시판 기능 - 상품 기능 - 부가 기능 - 전체 디자인
이주영 (팀원)	- 관리자 기능 - 상품 기능 - 부가 기능
안영빈 (팀원)	- 회원 기능 - 상품 기능

프로젝트 소개

• 5개월 가량 자바 및 스프링 수업을 듣고, 약 5주간 개발하여 만든 첫 팀 프로젝트입니다.
• 한빛여행사는 코로나 확산세가 감소됨에 따라 전국 관광지를 알리자는 취지에서 기획하고 제작하였습니다.

개발환경 및 사용기술

• Programming Language :  Java JavaScript
• Web Framework : Spring
• Web Language :  HTML5 CSS
• CSS Framework : Bootstrap
• Bulid tool : Apach Maven
• DataBase (Local) : Oracle
• DataBase (Cloud) : Oracle Cloud
• SQL Mapper : MyBatis
• Web Library : jQuery Ajax Tiles Log4j JSON
• Version Control : SVN Git
• Browser : Google Chrome
• OS : Windows
• IDE : Spring Tool Suite4 intelliJ IDEA

기능

1. 주요 기능
   여행상품구매, 여행후기 작성, 여행후기 조회, 고객센터, 관리자메뉴

2. 부가기능
   날씨정보, 오픈채팅, 추천 경로 찾기

세부 기능 소개

• 관리자

  상품 목록
  등록된 상품의 상품코드, 상품명, 여행기간, 가격을 조회하는 기능입니다.

  상품 등록
  상품명, 가격, 여행기간, 지역, 상세주소, 여행지 상세정보, 이미지를 등록하는 기능입니다.

  지도를 클릭하면 해당 위치에 마커가 찍히고 상세주소란에 마커의 주소정보가 입력됩니다.
  주소 검색으로 대략적인 위치를 찾고 마커로 상세위치를 설정할 수 있습니다.

  상품 수정
  등록된 상품의 가격과 여행기간 상세정보를 수정할 수 있는 기능입니다.

  상품삭제
  체크박스에 체크된 상품 목록을 삭제하는 기능입니다.

  회원 목록
  가입된 전체 회원의 이름, 생년월일, 연락처, 회원가입일을 조회하는 기능입니다.

  이름을 클릭하면 회원의 상세정보를 볼 수 있으며, 상세정보에는 이름, 생년월일, 성별, 연락처, 주소, 회원등급, 가입일, 구매 이력과 보유 마일리지를 조회할 수 있습니다.

  탈퇴신청 목록
  마이페이지에서 회원탈퇴를 신청한 회원들의 목록을 조회하고
  체크박스에 체크된 회원의 탈퇴를 승인하는 기능입니다.

  탈퇴승인을 하게 되면 회원의 데이터가 삭제됩니다.

  예약 관리
  구매된 상품의 예약번호, 패키지명, 예약자, 여행인원, 가격, 연락처, 예약날짜를 조회할 수 있으며 예약 취소를 할 수 있습니다.

  연월별 매출
  당해연도 1월 ~ 12월간의 월간 매출을 확인할 수 있고
  최근 5년간의 연간 매출 또한 확인할 수 있습니다.

  상담 및 문의관리
  전체 1:1 문의글을 조회할 수 있고 제목을 클릭하면 문의글의 내용을 볼 수 있으며,
  해당 문의글에 댓글을 작성할 수 있습니다.

• 회원

  회원가입 이메일 인증
  입력한 이름, 성별, 생년월일, 이메일과 같은 정보를 이메일 중복확인과 인증 절차를 거친 후 회원가입 페이지로 보냅니다.

  회원가입
  이메일 인증 페이지에서 받은 정보와 비밀번호, 주소, 연락처를 추가 입력하여 DB에 등록합니다.

  로그인
  입력한 아이디, 비밀번호를 DB에 조회하여 일치여부, 탈퇴여부를 확인하고 회원정보를 세션에 저장합니다.

  아이디 찾기
  입력한 아이디, 성별, 생년월일, 연락처를 DB에서 조회하여 아이디를 찾습니다.

  비밀번호 찾기
  입력한 이름, 생년월일, 연락처를 DB에서 조회하여 찾은 아이디와 입력한 아이디가 일치할 경우 이메일 인증 후 비밀번호를 찾습니다.

  마이 페이지
  로그인한 회원의 기본 정보와 예약 정보를 조회합니다.

  회원 정보 수정
  회원 정보를 수정하고 연락처 중복확인을 한 후 비밀번호를 입력하여 DB 정보를 수정합니다.

  비밀번호 변경
  현재 비밀번호와 새 비밀번호를 입력하여 비밀번호를 수정합니다.

  회원 탈퇴
  회원 탈퇴 처리를 할 수 있습니다. 회원 정보를 수정하여 로그인, 아이디 찾기, 비밀번호 찾기를 하는 경우가 생기지 않도록 제한합니다.

• 상품

  상품 목록
  상품 목록 페이지에는 현재 예약할 수 있는 상품들이 나타나게 됩니다.

  대표 이미지와 함께 상품 패키지명, 여행설명, 일정, 가격정보 등을 확인할 수 있습니다.
  상단에 있는 검색창 또는 메인 화면에 있는 검색창에서 원하는 상품을 검색할 수도 있습니다.

  상품 상세정보
  상품 상세정보 페이지에는 대표 이미지, 상품 정보, 별점, 여행 설명, 상세 이미지 등이 나타납니다.

  구매하기 버튼을 누르면 바로 구매 페이지로 이동하고,
  장바구니 담기 버튼을 누르면 장바구니에 등록되고 장바구니로 이동할 것인지에 대한 알림창이 나타납니다.

  단, 로그인이 되지 않은 상태라면 비회원 구매 페이지로 이동할 것인지에 대한 알림이 나타나게 되고,
  확인 버튼을 누르면 비회원 구매 페이지로 이동하게 됩니다.

  상세이미지는 슬라이드 형식으로 조회할 수 있습니다.
  또한 상품 페이지에서는 여행 위치 정보를 확인할 수 있습니다.

  여행 위치 정보는 카카오 지도 API를 사용했습니다.

  상품구매
  상품 구매는 회원 구매와 비회원 구매로 나뉩니다.

  회원 구매의 경우 회원 정보를 받아온 다음 예약자정보에 자동으로 입력하여 별도로 정보를 입력할 필요 없이 바로 결제할 수 있게 만들었습니다.

  비회원 구매를 하게 되는 경우에는 예약자 정보를 별도로 입력해야 합니다.

  상품 정보 및 예약자 정보를 확인한 다음 주문서 내역 확인 및 개인정보 제공 동의에 체크해야 결제 페이지로 이동할 수 있습니다.

  결제 시스템은 아임포트 결제 API를 이용했으며, 실제로 결제가 이루어져야만 DB에 결제 정보가 저장됩니다.

  결제에 성공하면 패키지 구매 완료 페이지로 이동되며,
  만약 중간에 결제를 취소하는 등 여러가지 이유로 결제에 실패하게 되면, 실패 페이지로 이동되고 사유도 나타나게 됩니다.

  찜 목록 (장바구니)
  찜 목록에는 구매를 원하는 상품을 담아놓을 수 있는 기능입니다.

  찜 목록에 상품을 담아 놓고 원하는 상품만 골라서 선택구매를 하거나 전체구매를 할 수 있습니다.

• 게시판

  공지사항
  공지사항은 관리자만 작성할 수 있습니다.

  글을 작성할 때 메인글 여부를 체크할 수 있고,
  메인글이라면 게시판 상단에 공지가 고정됩니다.

  또한 메인글로 등록한 공지사항은 홈페이지 최상단의 롤링 공지사항으로도 나타나게 됩니다.

  1:1 문의
  1:1 문의 게시판은 로그인 한 회원만 이용할 수 있습니다.

  문의 게시글을 올리면 관리자 메뉴에서 답변할 수 있고,
  답변이 하나이상 달린 경우 추가의견을 등록할 수 있습니다.

  여행 후기
  여행 후기는 본인이 구매한 여행상품에 대해서만 작성할 수 있도록 만들었습니다.

  후기를 작성할 때는 1점부터 5점까지 별점을 줄 수 있고,
  등록한 별점은 상품목록에 반영됩니다.추천 기능이 있어서 마음에 드는 후기라면 추천할 수 있습니다.

  추천은 로그인 한 회원만 할 수 있습니다.
  추천 정보는 데이터베이스에 저장되기 때문에 추천한 게시글에 한번 더 추천 버튼을 누르면 추천이 취소됩니다.

  하단의 검색란에서 제목, 내용, 작성자 키워드로 후기 검색 또한 가능합니다.

  베스트 후기
  후기의 추천수를 기준으로 상위 10개의 항목만 나타내는 게시판입니다.

  모든 게시판의 글쓰기 기능은 ck에디터를 적용하였고, 이미지 첨부를 할 수 있으며 페이징 처리가 되어 있습니다.

• 부가기능

  날씨정보
  날씨 정보 기능은 OpenWeatherMap API로 구현하였습니다.
  또한 Geolocation API로 사용자의 현재 위치를 확인하며, 해당 지역의 날씨 정보를 나타냅니다.

  오픈채팅
  오픈채팅 기능은 웹소켓을 사용했습니다.

  닉네임 입력 후 오픈채팅에 입장할 수 있고, 닉네임을 입력하지 않으면 Modal창이 나타나게 됩니다.
  사용자가 입력한 채팅과 함께 입장알림, 퇴장알림 등이 채팅에 나타나게 되며 원한다면 대화내용을 지울 수도 있습니다.

  추천경로
  키워드를 입력하고 검색버튼을 누른 뒤, 장소를 여러 곳 선택하고 찾기 버튼을 누르면 추천경로를 찾아줍니다.

ERD