2. PART 1 | 팀 소개
PART 2 | 개요
PART 3 | 개발환경
PART 4 | 일정
PFD
Contents
PART 5 | 설계 & 산출물
PART 6 | 핵심코드
PART 7 | 스토리보드
PART 8 | 후기
3. PART 1 팀 소개
구성원 및 역할
송민준
이다은
안현호
#조장 #로그인 #회원가입 #커뮤니티 #알림
#마이페이지 #포트폴리오 등록 #호스팅 #보안
#갈공 #메인 #프로필 모아보기
# 포트폴리오 모아보기, 상세, 관리, 스크랩
#IT뉴스
#프로필 등록 #프로필 뷰
#프로필 관리 #통합 검색
4. PART 2 개요
배경 및 목적
배경
목적
신입 개발자들이 구직 활동 간에 포트폴리오 제출하는 방식에 어려움을
겪는 경우가 많다. 특정 프로그램에 종속된 파일을 보내는 경우도 있으며
이는 감점 요인인 경우가 많다.
신입 개발자들을 대상으로 포트폴리오 관리를 해주는 서비스를 제공하여
구직 활동을 쉽게 만들고자 한다. 또한 선배 개발자들로부터 피드백을 받을
수 있는 기능을 제공하여 만족도를 높이고 커뮤니티를 통해 정보 공유도
가능하게 한다.
5. PART 3 개발환경
개발환경
• O/S : Windows 10(개발환경), Linux Ubuntu 18.04(운영환경)
• Server : Apache2, Tomcat8.5
• DB : Oracle 11g(RDS)
• Framework/Flatform : Spring, bootstrap, jQuery, mybatis
• Programming Language : Java, HTML, JavaScript
• Tools : STS, Github, Aquerytool, StarUML, SQL Developer, CS6
• API : Google, Kakao, Naver, Summernote
17. PART 6 핵심코드
핵심코드 - 안현호
WNC
3. jQuery
- ajax를 통한 데이터 호출
2
3
4. jQuery
- 스크롤을 내렸을 시
ajax를 통한 데이터 호출
18. PART 7 스토리보드
스토리보드 - 로그인
WNC
4
3. 아이디 저장
- 쿠키 값 설정
2. 비밀번호 암호화
- salt 값으로 해싱
2
1
1. 로그인 페이지
- 로그인 페이지로 이동
3
4. SSO
- 구글, 카카오 간편 로그인
19. PART 7 스토리보드
스토리보드 - 회원가입
WNC
3. recaptcha
- 자동 가입 방지
2. 약관 확인
- 약관 방침
1. 회원정보
- 간단한 정보 입력1
2
3
20. PART 7 스토리보드
스토리보드 - 알림창
WNC
2. 기능 버튼
- 마이페이지 이동
- 로그아웃
1. 알림
- 본인이 게시한 게시물에
대한 알림 정보
1
2
21. PART 7 스토리보드
스토리보드 - 마이페이지
WNC
2. 최근 활동
- 기본 정보
- 활동 로그
(등록, 추천, 댓글 등)
1. Tab
- 최근 활동, 정보 수정,
프로필 Tab
1 2
22. PART 7 스토리보드
스토리보드 - 마이페이지
WNC
2. 회원 탈퇴
- 비밀번호 확인 후 탈퇴
1. 정보수정
- 회원 정보 수정
2
1
23. PART 7 스토리보드
스토리보드 – 포트폴리오 등록
WNC
2. recaptcha
- 자동 등록 방지
1. 포트폴리오 등록
- 포트폴리오 정보 등록
- 이미지로 보여줄
파일 첨부
24. PART 7 스토리보드
스토리보드 – 게시판
WNC
2. 정렬
- 작성일, 조회, 추천 순으로
리스트 확인 가능
1. 검색
- 작성자, 제목, 내용,
제목+내용으로 검색 가능
1
2
3
3. 계층형
- 계층형 게시판
4. 페이지네이션
- 페이지네이션
4 5. 카테고리
- 자유게시판, 스터디
Q&A 로 구분
25. PART 7 스토리보드
스토리보드 – 게시판
WNC
2. 파일 첨부
- 파일 첨부 다수 가능
1. summernote
- summernote api
3. recaptcha
- 자동 등록 방지
1
2
3
4. 답변, 수정
- 기본적으로 동일
(수정은 recaptcha X)
26. PART 7 스토리보드
스토리보드 – 게시판
WNC
2. 기능 버튼
- 추천, 읽은 수, 답글,
수정, 삭제, 리스트
1. 게시판 정보
- 기본 정보
3. 댓글
- 댓글 입력, 수정, 삭제
1
2
3
4. XSS 필터
- XSS 공격 방지(Jsoup)
27. PART 7 스토리보드
스토리보드 – 프로필
WNC
3. 프로필 등록 완성도
- 프로필 등록 진행도를
보여주고 애니메이션이 진행
되는동안 이전, 다음 버튼
비활성화
2. 선택파일 미리보기
- 선택한 파일의 경로를
찾아서 띄워주고 이미지파일이
아닐경우 초기화
1. 프로필 등록 시작
- 시작버튼을 누르면 ajax를
사용하여 이미 등록된 프로필이
있는지 체크하여 없을시
진행가능
1
2
3
28. PART 7 스토리보드
스토리보드 – 프로필
WNC 3. 결과
-등록 성공 실패에 따른
이미지를 띄워주고 등록된
프로필로 이동할수있는
버튼생성
2. 등록
- ajax를 통해 insert
1. 대분류
- 대분류에 따라 소분류
카테고리가 변경되며 input창
에 쉼표를 구분자로 입력됨.
2
1 3
29. PART 7 스토리보드
스토리보드 – 프로필
WNC
3. 기술
-프로필에 등록한 기술을
콤마로 구분하여 해당 스킬에
맞는 아이콘 노출
2. 포트폴리오 슬라이드
-첨부파일의 첫번째 이미지
노출, 클릭시 상세 뷰를
모달창으로 띄워줌
1. 수정
- 정보 수정버튼
본인 프로필 일시에 활성화
1
2
3
1
1
4
4. 블로그 & 깃허브 링크
-자신이 입력한 주소로
새창을 통해 바로가는 링크버튼
30. PART 7 스토리보드
스토리보드 – 검색
WNC 3. 사이드바 토글
-사이드바를 열고 닫을수
있는 버튼
2. 더보기
-클릭시 해당페이지로
검색어 이동 더많은 컨텐츠
노출
1. 상세링크
-컨텐츠 제목을 클릭시
해당 컨텐츠 상세 페이지 이동
4. 네이게이션바
-클릭시 해당 위치이동
1
3
2
4
31. WNC
PART 7 스토리보드
스토리보드 – 메인 페이지
3. Daily, Weekly, Monthly
- 클릭 시 ajax를 통해
날짜를 기준으로 추천을
제일 많이 받은 순으로 최대
5개의 포트폴리오 노출
- All 클릭 시 포트폴리오
모아보기 페이지로 이동
2. 이미지 슬라이드
- hover 시 정보 노출
- 클릭 시 상세페이지 노출1
1. 베스트 포트폴리오
- 추천을 3이상 받은
포트폴리오가 한달내에 있을 시,
Nortworthy Portfolios
- 없을 시, 최근에 추천 받은
Recently Noted Portfolios 노출
2
3
32. WNC
PART 7 스토리보드
스토리보드 – 메인 페이지
2. 주요 기능
- hover 시 버튼 노출
- click 시 해당 기능 수행
프로필
1) 관리하기
2) 모아보기
포트폴리오
1) 관리하기
2) 모아보기
커뮤니티
1) 자유 게시판
2) 스터디 게시판
3) QnA 게시판
IT뉴스
1) 보러가기
1
1. 사이트 소개
- 사이트의 장점 소개
2
33. WNC
PART 7 스토리보드
스토리보드 – 포트폴리오
2. 포트폴리오 아이템
- hover 시 버튼 노출
- click 시 상세 페이지 노출
1
1. 포트폴리오 추가+
- click 시 포트폴리오 작성
페이지 이동
2
3 4
3. 포트폴리오 수정
- click 시 수정 페이지 이동
4. 포트폴리오 삭제
- click 시 정말 삭제할지
여부 확인 후, ajax를 통한
삭제
34. WNC
PART 7 스토리보드
스토리보드 – 프로필 모아보기
3. 프로필 아이템
- 프로필 사진, 활동 점수,
포트폴리오 수, 피드백 수 노출
- click 시 프로필 페이지로 이동
2. 활동 기간 / 가입 날짜
- select 변경 시
ajax를 통해 조건에 해당하는
프로필만 노출 혹은 정렬
2
1 1. 카테고리
- click 시 ajax 를 통해
카테고리에 해당하는
프로필만 노출
3
4. 유저 아이콘
- click 시 유저 페이지로 이동
4
35. WNC
PART 7 스토리보드
스토리보드 – 포트폴리오 모아보기
3. 포트폴리오 아이템
- 포트폴리오 썸네일, 제목,
작성자 정보, 조회 수, 추천 수,
피드백 수 노출
- click 시 ajax로 상세페이지 노출
2. 전체기간 / 최신순
- select 변경 시
ajax를 통해 조건에 해당하는
포트폴리오만 노출 혹은 정렬
21
1. 카테고리
- click 시 ajax 를 통해
카테고리에 해당하는
포트폴리오만 노출
3
4. 작성자 닉네임
- click 시 프로필 페이지로 이동할지
여부 확인 후 이동
4
5
5. 포트폴리오 스크랩
- click 시 ajax를 통한 포트폴리오
스크랩
36. WNC
PART 7 스토리보드
스토리보드 – 포트폴리오 상세페이지
4
3. 추천, 스크랩
- 클릭 시 ajax 를 통한
포트폴리오 추천, 스크랩
2. 이미지 슬라이더
- click 시 이미지 확대
2
1
1. 포트폴리오 헤더
- 포트폴리오 정보
3 4. 피드백 작성
- click 시 피드백 작성 폼 노출
5
6
7 8
9
10
5. 전체/베스트 최신순/추천순
- 변경 시 해당하는 피드백만 ajax
를 통해 호출
6. 피드백 작성자 정보
- click 시 프로필 페이지로 이동
여부 확인. 확인 시 이동
7. 피드백 추천/취소
- click 시 ajax를 통한 피드백
추천, 취소
8. 피드백 수정/삭제
- 작성자 본인에게만 노출
- click 시 ajax를 통한 수정, 삭제
10. 방문하기
- click 시 site 이동
9. 포트폴리오 작성자
- click 시 프로필 페이지 이동
37. WNC
PART 7 스토리보드
스토리보드 – 포트폴리오 상세페이지
2. 작성 완료
- click 시 ajax 를 통한 작성
2
1
1. 작성 취소
- click 시 작성 취소
1
3
3. 피드백 여부 거절 시
- 피드백이 필요없는 포트폴리오
입니다. 노출 및 작성 버튼 비활성화
38. WNC
PART 7 스토리보드
스토리보드 – IT 뉴스 페이지
3. 관련기사
- Naver 검색 API 활용
- click 시 해당 뉴스 페이지
새창으로 오픈
2. 속보
- 크롤링을 통한 속보 기사
- click 시 해당 뉴스 페이지
새창으로 오픈
2
1
1. 카테고리
- ajax를 통해 해당하는
카테고리의 뉴스 속보 호출
3
4. 페이지네이션
- click 시 ajax를 통해
이전, 다음 10개의 기사
가져오기
- 맨 처음, 마지막 일 경우,
비활성화
4
