• 팀장 : 조윤영
• 팀원 : 박성훈, 박혜정, 신동준

MOGOTCO 시연 영상

개발 멘토링 사이트를 구축하여 영상채팅을 통해 개발자에게 도움을 받을 수 있는 공간을 만든다.

1. 클라우드 환경 사용(NCP)
2. i-connect API를 이용해 화상 회의를 이용한 멘토링 서비스 구현
3. AI Platform(CLOVA OCR)을 활용한 명함 인식을 통한 신뢰성 높은 멘토가 있는 서비스 구현
4. AI Platform(CLOVA CHATBOT)을 활용한 챗봇 기능 구현
5. 카카오, 깃허브 등 다양한 로그인 API를 활용한 로그인 기능 구현

1. 화상 회의를 통해 멘토링 기능 구현
2. 로그인 API(OAuth) 사용해 로그인 및 회원가입 기능
3. CLOVA OCR을 이용한 멘토의 명함 인식 서비스 기능
4. 결제 API 기능
5. 멘토링 카테고리별, type별 검색 기능, 멘토 카테고리별, 회사별 검색 기능
6. 이메일을 통한 멘토링 알림 기능 및 인증기능
7. 리뷰, 평점 기능
8. CLOVA Chatbot을 pop up으로 이용하여 어느곳에서든 문의가 가능한 기능 구현

메인기능소개

• 아이디 중복 확인
  • [JavaScript] register.html 📌코드 확인
  • AjaxController.java 📌코드 확인

• 비밀번호 일치 여부 확인
  • [JavaScript] register.html 📌코드 확인

• 메일 인증 기능 (주요 기능)

• [JavaScript] register.html (정규식 검사) 📌코드 확인
• [JavaScript] register.html (인증번호 발송) 📌코드 확인
• [JavaScript] register.html (인증번호 일치 여부 확인) 📌코드 확인
• UserController.java 📌코드 확인

주요 기능 실제 작동 화면

• 메일 인증 기능

메인기능소개

• [소셜 로그인 API] login.html 📌코드 확인
• KakaologinAPI.java 📌코드 확인
• SNSLoginController.java 📌코드 확인

실제 작동 화면

메인기능소개

• [JavaScript] 회원 정보 수정 📌코드 확인

실제 작동 화면

메인기능소개

• [Controller] 비회원 판단 후 접근가능한 경로 따로 설정 📌코드 확인

실제 작동 화면

메인 기능 소개

• [Controller] 카테고리, 필터, 텍스트의 유무를 check하는 class를 만들어 유저가 원하는 검색에 가까워지도록 만들어줌. 각각의 default controller를 만들어준 다음 멘토링 페이지 안에서 각각의 조건에 맞게 순환됨.📌코드 확인
• [SQL]멘토링의 검색과 관련된 query문을 정적으로 뽑음.(동적이 아닌 정적으로 뽑은 이유는 전체 검색도 하나의 controller로 동작하게 만들어주고 싶었기 때문.)📌코드 확인

실제 작동 화면

메인 기능 소개

• [SQL]LIMIT를 사용하여 한 페이지당 6개의 멘토링이 검색되도록 설정. 📌코드 확인
• [Controller] 검색에서 사용하였던 controller함수를 이용하여 뿌려줌. 📌코드 확인

실제 작동 화면

멘토링 정보를 주변인들과 공유

• 해당 멘토링의 제목 옆에 있는 카카오톡 이모티콘을 클릭하여 카카오톡으로 공유하기 기능으로 자신이 원하는 사람에게 멘토링 추천을 위한 멘토링 정보를 공유할 수 있습니다.
  

대면 멘토링을 진행을 위한 주소 확인

• 대면 멘토링 일 시 대면 장소를 클릭하면 kakap map API를 활용하여 주소와 마커를 보여줍니다. 멘토링 등록시에 데이터베이스에 저장되는 주소를 kakao map API 제공 해주는 자바스크립트 코드의 지도의 주소가 출력되는 부분에 Controller에서 전달 된 데이터를 Thymeleaf를 사용하여 추가 해주어 해당 대면 멘토링의 주소가 화면에 보여지도록 합니다.
  
  📌대면 멘토링 장소 코드 바로가기
  📌해당 Controller 코드 바로가기
  
  

남은 인원을 확인하며 시간 선택

• Controller를 통해 받아온 해당 멘토링에 대한 시간데이터들을 Thymeleaf를 사용하여 시간별로 남은 인원을 화면에서 확인할 수 있게 하였습니다. 또, Thymeleaf 조건문을 활용하여 시간별 구매 가능한 멘토링 인원이 남아 있다면 원하는 시간을 선택할 수 있고, 없다면 해당 시간 버튼이 사라지게 하였습니다.
  
  📌인원, 시간 선택버튼 코드 바로가기
  📌해당 Controller 코드 바로가기
  
  

명함 및 사원증 회사 인증 후 등록(ocr) 및 수정 등록

• 화면단에서 사용자가 명함 이미지를 업로드하면 파일이 formdata에 담겨지고 명함 등록하는 post 요청을 AjaxController에 비동기로 전송.

• 파일 저장 및 ocr 시스템 실행 📌코드 확인

  • AjaxController에서는 화면단에서 넘어온 파일을 Util클래스의 메서드를 통해 사용자 페이지와 관리자 페이지에 동시에 저장. 그 후 시스템에 저장된 명함이미지를 OcrService의 ocrresult 메서드의 파라미터로 넘겨주면 json 객체가 ajax의 url을 통해 화면단으로 반환.

• OCR 실행 결과 추출 📌코드 확인

  • AjaxController에서 화면단으로 json 객체를 보내어 js의 display함수를 통해 파싱을 한 뒤 각각의 input창에 id값을 할당하여 데이터를 입력.

메인 기능 소개

• [JAVASCRIPT] session의 user정보를 통해 user의 point를 불러온 후 javascript를 통해 input창에 user이 쓰고 싶은 point에 따라 총 가격에 바로 반영되도록 함. 📌코드확인

실제 작동 화면

메인 기능 소개

• [AJAX] session의 user의 보유 coupon여부를 ajax를 통해서 '쿠폰 사용하기'를 클릭했을 때 가져오도록 함. 📌코드확인

실제 작동 화면

메인 기능 소개

• [Controller] 비회원으로 멘토링 상세 페이지까지 볼 수 있고 구매는 로그인 이후에 가능하도록 설정. 따라서 user의 session정보 유무를 판단해줌. 📌코드확인
• [iamport API] 실제 구매와 같은 환경을 구현해보기 위해 kg이니시스에서 제공해준 구매 api를 사용함. javascript를 이용해서 함수를 구현. 📌코드확인

실제 작동 화면

• [Controller] 구매 성공 후 sql에 필요한 정보들을 넣고 point및, 쿠폰, 멘토링의 멤버수의 변화를 controller를 통해서 구현. 📌코드확인

실제 작동 화면

멘토링 진행 관리

• 멘토링을 진행하기 전에 멘티가 구매한 멘토링의 날짜, 시간 정보에 맞추어 전날 아침 8시와 당일로 넘어가는 자정에 알림 메일을 보내주어 멘티가 멘토링 참여에 늦지 않도록 관리해줍니다.
  
  
  [전날 아침8시에 알림 메일이 도착한 모습]
  
  
  [당일로 넘어가는 자정에 알림 메일이 도착한 모습]
  
  

화상회의 멘토링 진행

• 카카오에서 제공해주는 API의 소스 코드에 룸id가 생성되는 코드에 해당 멘토링의 멘토링 옵션에 들어가있는 각각의 시간의 고유한 멘토링옵션 아이디값을 컨트롤러에서 데이터를 받아와 타임리프를 활용하여 대입해주면 해당 시간의 고유의 룸이 생성되어 해당 멘토링의 시간을 구매한 멘티만이 멘토링에 참여할 수 있도록 진행됩니다.
  
  📌MOGOTCO 멘토링 서비스 페이지 코드 바로가기
  📌해당 Controller 코드 바로가기
  
  
• 멘토링 시작 버튼을 클릭하여 상대방과 서로 화상채팅을 할 수 있고 멘토링 종료 버튼을 클릭하여 화상채팅을 종료할 수 있습니다.
  
  
  
  

화상회의 멘토링 추가 기능

• 화면공유하기 버튼을 클릭하면 자신이 원하는 화면을 선택하여 공유할 수 있고, 공유된 화면이 자신과 상대방에게 보여집니다. 그리고 상대방이 공유한 화면도 볼 수 있습니다. 화면공유 중지버튼을 클릭하면 화면 공유가 종료됩니다.
  
  
  [멘티들이 화면을 공유한 모습]

메인기능소개

• [AJAX, CSS] 리뷰 작성 후 데이터 넘기기 📌코드 확인

실제 작동 화면

• 챗봇 (NCP CLOVA의 chatbot custom API)
  • CLOVA Chatbot 빌더에서 설정한 도메인의 학습결과를 기반으로 질의 응답을 제공하는 API를 이용한 고객 문의 대응

• NCP CLOVA의 chatbot custom API는 CLOVA Chatbot 빌더에서 설정한 도메인의 학습결과를 기반으로 상대방의 질문에 대한 응답을 제공하는 API

• 네이버 클라우드 연동 관련 설정

• Chatbot 빌더를 이용하여 대화시나리오 작성한 후 인증키를 발급받고 ChatbotController에 Secret Key를 입력한 후 네이버 api 연동

• 웹소켓

  • 메세지를 주고 받기 위해 StomWebSocketConfig.java에서 웹소켓 설정한 후 화면단에서 javascript로 통해 챗봇 구현

메인기능소개

• [JavaMailSender] 멘토 승인시 알림 메일 발송 📌코드 확인

실제 작동 화면

1. 메일 알람 기능

• 문제 : Only no-arg methods may be annotated with @Scheduled 에러 발생
• 해결 : Scheduler가 parameter를 전달하지 않고 동작하기 때문에 발생한 에러, parameter를 전달하지 않고 단순히 함수만 정해진 시간에 실행하게 바꿈

2. 마이페이지 탈퇴 기능

• 문제 : 탈퇴버튼 클릭시 modal을 사용했는데 confirm이 아니라 true 값을 전달하려면 confirm, cancel 기능을 코딩해야 함
• 해결 : 코딩을 전부 해야하나 했는데 버튼에 id를 부여해 해당 버튼을 눌렀을 때 기능이 작동하게 함

3. point & coupon 기능

• 문제 : 사용하려는 point의 값과 coupon의 값들을 받아서 total price를 같이 계산하는 곳에 다양한 문제들이 있었음.
• 해결 : point나 coupon에 사용에 따른 가격 변화를 hidden으로 저장해둔 다음에 값이 변화할때마다 hidden의 값을 가져와서 값의 변화를 해결함 해결 코드

4. 검색 기능(검색기능에 대한 더 자세한 트러블 슈팅은 yyboom 참고

• 문제 : 카테고리를 선택하고 검색어를 입력하고 type과 페이징 처리까지 같이 하니 어는 순간 특정한 이벤트에 따른 페이지의 순환이 잘 되지 않았음. 검색, 클릭에 따른 원하는 멘토링 아이템이 제대로 나오지 않음.
• 해결 : pagaingcheck controller를 이용하여 현재 사용자가 어떤 카테고리를 클릭했는지, 텍스트를 입력했는지, 어떤 type을 골랐는지에 따라서 판단하여 각각 해당 controller에 보내주는 방식으로 해결하였음. 해결 코드

	$.ajax({
		type : "POST",
		url : "/ocrresult",
		processData : false,
		contentType : false,
	 	data: formData,
		success : function(data) {
			display(data);
		}
	});

$.ajax({
		type : "POST",
		url : "[[@{/ocrresult}]]",
		processData : false,
		contentType : false,
	 	data: formData,
	 	dataType : "JSON",
	 	success: function(obj) {
			display(obj);	
	 	}
	});