TS_PJ

• Ver. 1.0.0
  • 현재 재능 공유 기능만 가능
  • 추후 커뮤니티 기능 구현 계획

재능 공유 사이트

1. 늘 똑같은 일상생활이 지루하다?

   • TS_PJ 애플리케이션을 이용하여 다양한 여가생활로 지루한 삶을 탈피하길 바란다.

2. 편리하게 재능 공유 서비스를 이용하고 싶다?

   • 현 위치 주변 여가생활 정보를 검색 서비스 제공

설치방법

• Browser: chrom 권장

git clone https://github.com/yjkwon07/TS_PJ.git

1. Server setting

   • Tomcat 8.5 server setting
   • Context 수정
     • 파일 업로드를 위함

   <Context allowCasualMultipartParsing="true" path="/">
     <!-- Default set of monitored resources. If one of these changes, the    -->
     <!-- web application will be reloaded.                                   -->
     <WatchedResource>WEB-INF/web.xml</WatchedResource>
     <WatchedResource>${catalina.base}/conf/web.xml</WatchedResource>
   
     <!-- Uncomment this to disable session persistence across Tomcat restarts -->
     <!--
     <Manager pathname="" />
       -->
     <Resources cachingAllowed="true" cacheMaxSize="100000" />
     <!-- Uncomment this to disable session persistence across Tomcat restarts -->
     <!-- <Manager pathname="" /> -->
   </Context>

2. DB setting

   • 쿼리문 실행
     • DB Query

3. folder

C:/ts_pj/file_repo -> folder create

4. Spring

• jdbc.properties

  jdbc.properties (PATH: ts/WEB-INF/config/jdbc/jdbc.properties)

  jdbc.driverClassName=com.mysql.cj.jdbc.Driver
  jdbc.url= // insert your MYSQL:URL & PORT& DB 
            ex) jdbc:mysql://localhost:3306/TS_PJ?useSSL=false&serverTimezone=Asia/Seoul&allowPublicKeyRetrieval=true&useSSL=false
  jdbc.username= // insert your MYSQL ID ex) root
  jdbc.password= // insert your MYSQL Password ex) 1234
  

5. Node

• .env setting

  .env (PATH: ts_maps/.env)

  PORT=8015
  COOKIE_SECRET=TS_PJ_MAPS
  MYSQL_HOST= // insert your MYSQL Host ex) 127.0.0.1
  MYSQL_PORT= // insert your MYSQL PORT ex) 3306
  MYSQL_ID= // insert your MYSQL ID ex) root
  MYSQL_PASSWORD= // insert your MYSQL Password ex) 1234
  MYSQL_DATABASE=ts_pj
  PLACES_API_KEY=AIzaSyDsLQ-siN80uRGoJqri7Ib9qhYETZm2en8
  

• START

 cd ts_maps 
 npm init
 npm i 
 npm start

API & Module

• Google Maps API
• Youtube API
• timepicker.js
• Dropzone.js
• slick.js

git

• 전략
  • Feature Branch Workflow
  • 커밋 메시지

Page

• Main Page
• LectureInsert Page
• Login Page
• LectureInfo Page
• My Page
• Join Us Page

1. Main Page

지도

• (Google Maps API 적용)
• GoogleMap Object Custom
  • GoogleMap Object Document

1. 마커들이 반경 (50/50)px 모여있으면 클러스터링으로 하나의 마커로 변경
2. 지도에 매핑된 강의 메인 이미지를 클릭 시 강의상세페이지 로 이동
3. 강의 검색 REST API 요청
   • 자동 완성 강의 검색
   • 현재위치를 기준으로 개설된 강의 검색
     • 데이터 규모가 커짐에 따라 렌더링 속도 저하 방지를 위해 현재 보이는 lat, lng 기준으로 강의를 검색
4. 길찾기
   • 강의 검색 후 해당 유저의 현재 위치에서 길찾기 Google API 요청

자동완성 검색 및 길찾기

현재위치를 기준으로 개설된 강의 검색

최신 강의 (비 로그인/로그인 VIEW)

• (slick.js 적용) 최신 등록된 강의 순으로 슬라이드 형식으로 보여준다.

등록한 강의 (로그인 VIEW)

• (slick.js 적용) 로그인시 유저가 등록한 강의목록을 슬라이드 형식으로 보여준다.
  • 강의 이미지 우측 상단 빨간 리본에 강의 마감일을 보이도록 한다.

slick 적용

Page 위로

2. LectureInsert Page (강의등록)

튜터/튜티 VIEW

튜터 권한 Check

• 튜터는 header 페이지에 강의개설 버튼이 보인다.

• 튜티는 header 페이지에 강의개설 버튼이 안 보인다.

Categories DTO

• 메인 카테고리와 서브 카테고리의 데이터는 수정사항이 많이 생길것을 대비해 서버에서 CategoriesDTO 를 만들어 데이터를 받아온다.

DropZone Custom

• DropZone Object Custom
• 모든 이미지를 드래그&드롭으로 업로드가 가능
• 페이지 업로드 후 원하는 사진 삭제 기능
• 메인 이미지 선택 기능
  • 지도에 있는 마커를 클릭 시 나타나는 InfoBox 의 이미지 선택

DropZone

장소 검색

장소 검색 후 Main Page 지도에 렌더링이될 마커 표시 뷰를 미리 볼 수 있다.

• (Google Maps API 적용)
  • GoogleMap Object Custom
    • GoogleMap Object Document
• 장소 검색 REST API 요청
  • 자동 완성 강의 검색

Marker Create

Page 위로

3. Login Page

1. 페이지 header 부분 sign in 버튼 클릭시 페이지를 유지하고 Login Page 팝업

1. 튜터 권한 접근 페이지 접근 시 TutorAuthCheckInterceptor 로 확인하여 로그인 안되어있다면 로그인 페이지 이동

자동로그인

UserController

LoginFormInterceptor

• 로그인시 Remember Me 버튼을 클릭하게 된다면 tbl_user 테이블의 해당 유저의 user_sessionlimit 값을 갱신한다. 즉, user_sessionlimit값이 곧 로그인 유지 시간을 뜻한다.
• user_sessionlimit 값을 갱신후 LoginFormInterceptor 에서 Cookie 값으로 아이디 정보를 저장한다. Cookie 유지 시간은 user_sessionlimit 과 동일하다.
• 모든 페이지는 Cookie값을 가져와서 LOGIN 유무를 판단하여 로그인을 유지할 수 있다.

Page 위로

4. LectureInfo Page (강의상세 조회)

강의이미지

• (slick.js 적용) 강의이미지 파일을 메인, 서브 이미지 순으로 볼 수있다.

강의 장소

• 길찾기
  • 현재 위치에서 해당 강의 길찾기 Google API 요청

강의 영상

• Youtube API 요청
  • LectureInsert Page 에서 YouTube Link 기입 시 VIEW
  • LectureInsert Page 에서 YouTube Link 기입을 안할 시 VIEW에서 제외

튜터의 다른 강의들

• (slick.js 적용) 해당 튜터가 개설한 다른 강의들을 볼 수 있다.

Page 위로

5. My Page (유저 프로필)

유저 프로필

• 유저의 아이디, 이미지, 상태메시지를 볼 수 있다.

등록된 강의 목록 (튜터/튜티 VIEW)

• 유저가 등록한 강의 목록을 보여준다.

강의개설 목록 (튜터 VIEW)

• (slick.js 적용) 해당 유저가 개설한 다른 강의들을 볼 수 있다.

Page 위로

6. Join Us Page (회원 가입)

아이디 중복확인 버튼으로 유저 회원 중복 방지

Page 위로

기획 📆

Google Document을 활용하여 기획 구성

• 프로젝트 관리
  • 2019.09.03 ~ 2019.10.27

프로젝트 기획

Mindmup 🤔

Google Mindmup을 활용하여 아이디어 확장

mindmup

DataBase

• work (MySQL workbench 6.3 CE)
  • DB Design
  • DB Query