ATHEMA

🔗 ATHEMA 웹 서비스 시연 영상

1. 프로젝트 주제

• Naver Cloud Platform과 API(지도, 결제, SNS 로그인, 챗봇) 및 웹소켓을 활용한 테마 기반 여행 예약 웹 서비스 개발

2. 프로젝트 목적

• 사용자가 선택한 테마를 특징으로 한 여행 예약 웹사이트
• ‘어떠한’ 여행을 떠나고 싶은지 먼저 묻고, 그에 따라서 '테마' 여행 추천 및 예약 진행 → Athema = '어때?' + '테마'
• 여행의 목적에 맞게 계획을 짜기 어려워하거나, 정보 수집이 어렵게 느껴지는 사람에게 유용한 서비스
• HTML 5 반응형 웹 사이트 구현
• 수업 시간에 배운 MyBatis, thymeleaf로 동적인 화면 구현
• 수업 시간에 배운 Naver Cloud Platform과 여러 API 등을 활용하여 기능을 다양화
• Zoom, Notion, ERDCloud, Github, Figma 사용을 통해 팀원과의 협업 경험

3. 시스템 구성도 / 사용 도구

⚒️ 시스템 구성도

⚒️ 사용 도구

언어	개발도구	Database	협업도구	Framework	Server
Java HTML5 CSS3 JavaScript XML AJAX	Eclipse 2020-12 SpringBoot 2.7.7	MySQL 8.0.30	Github Zoom Google Drive Google Docs Notion ERD Cloud	Thymeleaf Mybatis 3.2.2	NCP(Naver Cloud Platform) Apache Tomcat

4. DB 설계

11개의 테이블 사용 + 조원끼리 논의한 내용들과 피드백 메모

5. 프로젝트 기능 구현

😃 사용자 페이지

🧑‍💻 관리자 페이지

6. 역할 분담

이름	역할
김상민	상품 관리 테마/지역 검색 상품 옵션 지도 API 위치 기능 문의게시판
선주연	예약 결제 리뷰 예약, 결제, 리뷰 DB 결제 API 관리자-매출 현황
임민하	예약 결제 리뷰 예약, 결제, 리뷰 DB 결제 API 관리자-주문 목록
조재호	문의게시판 위시리스트
최효정	회원가입 사용자/관리자-로그인&로그아웃 소셜로그인 API 회원관리 챗봇 API 1:1 실시간 채팅 문의 문의게시판 view

7. 화면 구성

• 메인 화면
• 테마 혹은 지역을 선택해서 여행 상품을 검색할 수 있다.
  
  
• 챗봇 화면
• Naver Cloud Platform Chatbot 서비스를 이용한 실시간 챗봇 문의 기능이다.
  
• 관리자는 질문을 NCP 서버에 추가하고, 사용자는 추가한 질문에 맞게 질문을 입력하면 AI가 답변을 보내준다.
  
  
  
• 상품 상세 화면
• 상품의 기본 정보와 사진, 다른 구매자의 리뷰를 볼 수 있다.
• 카카오 API를 사용하여 db에 있는 위도 & 경도 데이터를 가져와서 해당 위치의 지도 화면에 보여준다.
  
  
• 상품 결제 화면
• 원하는 상품을 고른 후 구매할 장수를 담고 결제하는 방식이다.
• 결제창은 카카오페이 API를 활용했다.
  
  
• 리뷰 작성 화면
• 사용을 완료한 상품에 대해 리뷰를 1회 작성할 수 있게 설계했다.
  
  
• 관리자 페이지 메인 화면
  
  
• 관리자 페이지 회원 정보 화면
• 가입한 회원의 정보를 한 곳에서 볼 수 있다.
  
  
• 관리자 페이지 회원 수 변화 화면
• 회원 수 변화에 관한 자료를 쉽게 볼 수 있는 화면이다.

8. 트러블슈팅

이름	문제	해결 방법
김상민	① mybatis mapper에서 하나 이상의 parameter 종류를 사용할 때 문제가 발생함. ② 스크립트 영역에서 thymeleaf 값을 불러올때 null은 불러올 수 없는 문제가 발생함. ③ thymeleaf를 이용해서 session에 대한 정보 유무를 판단할 때 페이지 parsing을 진행하지 못한다는 문제가 발생함.	① param# 방식으로 넣어서 문제를 해결함. ② null check를 설정해서 해결함. ③ session의 null 여부를 확인한 후 삼항연산자를 활용하는 방식으로 해결함.
임민하	① 자바스크립트에서 숫자를 더하는 경우 값을 문자로 인식함. ② git 저장소의 소스코드와 로컬의 소스코드 충돌로 pull을 할 수 없는 경우가 생김. ③ 스크립트에서 결제 성공 후 location.href으로 페이지를 넘기면 form 데이터가 넘어가지 않아 데이터를 테이블에 등록할 수 없는 문제가 발생함. ④ 스크립트에서 수량이 0개면 옵션 div 태그를 보여주지 않는 코드를 작성할 예정이었지만 배열이 문자열로 받아짐. [0]이라는 값을 넣은 경우 '[','0',']'로 출력되어 스크립트가 작동되지 않는 문제가 발생 함.	① parseInt() 안에 숫자를 넣어서 해결함. ② 나의 코드를 무시하고 덮어쓰는 방식이지만 overwrite를 클릭, mark as merged 클릭 후 pull 받아 문제 해결 함. ③controller에서 매핑하여 문제 해결함. ④ 타임리프로 데이터를 가져올 때 if문을 사용하여 문제 해결 함.
최효정	① 소셜로그인 구현 시 받아오는 정보가 부족해 NULL로 표시되는 문제가 발생함. ② 비밀번호가 DB에 그대로 노출되는 문제가 발생함. ③ 챗봇 실행시 응답코드 200 (정상 호출) 까지는 받았는데 그 이후로 jsonparser만 돌리면 값이 null로 나오는 문제가 발생함. ④ NCP에 서버 올린 뒤 소셜로그인이 안되는 문제가 발생함. ⑤ NCP에 서버 올리고 챗봇 한글이 깨지는 현상이 나타남.	① 1. id를 email 형식으로 바꾸고 pwd는 null로 변경하되, 자체 register에서는 js를 통해 DB에 null 입력을 제한함. 2. 카카오 가입자는 가입 완료시 이름, 휴대폰 등 필수 정보를 추가로 입력하는 폼을 작성하도록 페이지를 이동시킴. ② pom.xml에 Spring Security 추가 후 인터페이스 객체인 PasswordEncoder 알고리즘을 통해 암호화 거쳐서 DB에 저장하기로 함. 1. SqlException → mem_pwd 컬럼 varchar(100)으로 변경함. 2. Encoded password does not look like BCrypt. → encoder.matches 메소드 문법 순서가 잘못됨. ③ 디코드 된 String값을 한줄씩 디버깅해보니 (JSONObject)bubblesArray.get(0)이 아니라 description 속성은 get(1)번째에 있었음. ④ 스크립트에서 redirectURI 수정 및 Service에서도 해당코드 수정 → 개발자 센터 애플리케이션에도 uri 새로 등록함. ⑤ InpuStreamReader에서 UTF-8로 인코딩해줌 (BufferedReader in = new BufferedReader(new InputStreamReader(con.getInputStream(), "UTF-8")); → Window OS에서는 java 기본 인코딩이 UTF-8이라 문제가 없었던것. 앞으로 입출력 기능 만들 때는 무조건 인코딩을 확인함.
선주연	① 마이페이지에 지난 여행을 출력하기 위해 ”WHERE used=1 OR od.exp_date < now() AND o.mem_code = 3” 라고 SQL 문을 작성했으나 mem_code가 3이 아닌 것들도 같이 출력되는 문제가 생김. DB에 값이 제대로 안 들어가서 생긴 문제인줄 알았으나 OR, AND가 명확하지 않아서 생긴 문제였음. ② 상품 코드가 1인 상품만을 불러오기, 멤버 코드가 1인 멤버의 리뷰/위시리스트 불러오기 등을 구현할 때마다 같은 부분에서 문제가 생김. ③ 타임리프를 쓸 때 값이 없거나 정의되지 않은 값이라는 오류 생김. ④ 작성된 리뷰가 있으면 리뷰 작성 버튼이 안 보이게 하고 작성된 리뷰가 없다면 리뷰 버튼을 보이게 구현하는 것에 어려움을 겪음.	① used가 1이거나 유효기간이 현재보다 작은 것 중에 멤버코드가 3인 것을 표현하려면 “(used=1 OR od.exp_date < now())”를 괄호로 묶어서 명확하게 표시해줘야 함. ②-1. DB에서 정보를 가져오기 위해서는 컨트롤러에 변수 선언을 하고 model. model.addAttribute를 통해 담아줘야 함. 담아주지 않으면 값을 화면단에 전달할 수 없음. ②-2. 타임리프 반복문을 쓸 때에는 반복할 부분이 th:each가 담긴 태그 안에 다 들어가야 함. 태그가 닫히는 부분에 반복할 부분이 다 담겼는지 꼭꼭 확인해야 함. ③ 타임리프에 원하는 값을 담기 위해서는 SQL문을 잘 짜줘야 함. 해당 컬럼이 SQL문에 담겨 있는지 확인해야 하고, 반복문 안에 반복문을 넣을 때 해당 테이블에 그 컬럼이 있는지 잘 확인하고 작성해야 함. ④리뷰의 item_code에 order.item_code가 없으면 리뷰 작성 칸을 보이도록 if문을 작성함. 타임리프에서 lists.contains를 쓰는 형식은 다음과 같음. “${#lists.contains(A, a)}” A라는 리스트에 a 값이 있는지 확인 할 수 있음.