🏫 위세종(Wesju) , 세종대학교 웹커뮤니티 사이트

세종대학교 재학생만을 위해 제공하는 커뮤니티 사이트입니다.

• 링크 : https://wesejong.cafe24.com (Chrome 환경에서 접속)
  
• 깃허브소스코드 : https://github.com/kangdaeho99/wesejong_public_portfolio
  
• 테스트 계정 ID/PW : test1 / test1
  
• 테스트 계정 ID/PW : test2 / test2

https://wesejong.cafe24.com

프로젝트 설명

• 세종대학교 학생들이 이용할 수 있는 학생 커뮤니티 사이트입니다.
• 개발 기간 : 2021-08-01 ~ 2022-03-01
• 개발 인원 : 2명
• 

프로젝트 기획의도

• 세종대학교의 학생들만의 웹커뮤니티가 없는 점이 아쉬웠습니다. 학교의 특성을 잘 이해하고 있는 학생들이 제작한 커뮤니티가 학생들의 니즈를 만족시킬 수 있다고 생각하여 세종대 재학생들이 직접 웹커뮤니티를 만들어 보았습니다.
• COVID-19로 인해 오랜 사회적 거리두기로 지친 학생들과 친구들을 사귀지 못한 신입생들을 위해 비대면으로 학생들 간 친목을 다질 수 있는 학생 간 랜덤 매칭 서비스를 구현해 보았습니다.

개발목표

• 실제로 배포를 목적으로 하여, 배포를 하여 약 70명정도의 회원이 가입하였고, 미팅매칭이벤트에 20명정도 지원하여 2팀이 매칭에 성공했습니다.
• PC버전과 모바일버전 두개 완성을 목표로 하였습니다.
• 대학생이 만든 사이트가 아닌 일반사이트처럼 보이도록 개발하기 위하여 일반사이트에서 지원하는 기능들을 모두 개발하는것을 목표로 했습니다.

팀인원 및 역할

• 프로젝트 리더, 백엔드 1명: 강대호
• 프론트엔드, 디자인 1명 : 강원지

개발과정

• 서비스의 기획부터 마무리까지 경험해보고 싶었습니다.
• 각 파트마다 1명만 담당을 하여 서비스의 처음부터 끝까지 직접 경험할 수 있었습니다.

📜 기술 스택

프론트엔드 기술스택은 다음과 같습니다.

• HTML/CSS, JavaScript

백엔드 기술스택은 다음과 같습니다.

• Spring FrameWork(MVC Pattern)
• @RequestBody를 활용한 REST API도 혼합활용
• Spring Security (Security)
• MySQL (RDBMS)
• MYBATIS (SQL Mapper)
• Spring WebSocket (TCP Connection)
• SockJS (WebSocket Emulation)
• STOMP (Message Broker)
• Servlet 3.0 MutlipartFile (FileUpload)
• Thumbnailator (FileUpload)
• Mock & JUnit (Test)
• HikariCP (Database Connection Configuration)
• CAFE24, PUTTY, FILEZILLA (Infra)

📒DB구조

DB 제 1NF, 2NF, 3NF 정규화 규칙을 지켰습니다.

사이트접속방법 및 홍보방법

구글에서 ‘wesejong’ 네이버에서 ‘wesejong’을 검색하면 접속가능합니다. 에브리타임 홍보게시판, 세종대학교 갤러리에 홍보

추가 홍보 이미지 클릭

구현된기능

사용자가 할 수 있는 기능들입니다.

• 로그인할수 있습니다.
• 회원가입할수 있습니다.
• 회원탈퇴할수 있습니다.
• 회원 비밀번호 찾기할수 있습니다.
• 회원 비밀번호 수정할수 있습니다.
• 회원 닉네임 변경할 수 있습니다.
• 회원정보확인(마이페이지)할수 있습니다.
• 사용자 간 채팅할 있습니다. ( 1:1 채팅, 단체채팅 )
• 알림쪽지를 받을수 있습니다.( 새로 회원가입시, 글에 댓글이 달릴시, 이벤트에 당첨되었을시 .. )

게시판에서 작업할 수 있는 기능들입니다.

• 게시글 작성할수 있습니다. ( ckeditor 활용한 에디터사용, 이미지 파일 업로드 )
• 게시글 수정할수 있습니다.
• 게시글 삭제할수 있습니다.
• 게시글 작성자에게 채팅할 수 있습니다.
• 게시글 좋아요할수 있습니다.
• 게시글 싫어요할수 있습니다.
• 댓글을 달 수 있습니다.
• 대댓글을 달 수 있습니다.
• 댓글 좋아요할 수 있습니다.

채팅에서 작업할 수 있는 기능들입니다.

• 채팅할 수 있습니다.
• 단체채팅할 수 있습니다.
• 채팅방 나가기할 수 있습니다.

관리자가 할 수 있는 기능들입니다.

• 게시판관리기능 (생성, 삭제)를 할수 있습니다.
• 채팅관리(생성, 삭제)를 할 수 있습니다.
• 회원관리를 할 수 있습니다.
• 데이터베이스테이블을 확인할 수 있습니다.

PC화면 (모바일화면도 제공하나, PC화면만 정리했습니다.)

테스트 계정 ID/PW : test1 / test1
테스트 계정 ID/PW : test2 / test2

1.메인페이지

로그인을 한상태로만 사이트에 기능을 사용가능합니다. Spring Security를 활용하여 Role에 허가된 권한자만 접근할 수 있도록 설정했습니다. 테스트계정으로 접속바랍니다.
테스트 계정 ID/PW : test1 / test1
테스트 계정 ID/PW : test2 / test2
모바일 화면도 제공합니다.

메인페이지 https://wesejong.cafe24.com/

2. 로그인

spring security를 활용하여 관리자, 멤버별로 접근할 수 있는 페이지를 지정했습니다. 로그인에 성공할시 (role = admin)이라면, 관리자페이지로 이동합니다. (role = member)이라면, 메인페이지로 이동합니다.

위세종 로그인화면 https://wesejong.cafe24.com/member/login

2. 회원가입

회원가입을 진행하면서 각각의 정보들을 입력하면서 자바스크립트로 유효성검사들을 처리해주고, 세종대학교 재학생만 가지고 있는 이메일 주소인 @sju.ac.kr 을 통하여 재학생인증을 하도록 개발했습니다. 이메일 인증번호를 Spring Session에 저장하여 사용자가 악의적으로 접근할 수 없도록 개발하였습니다.

회원가입화면 https://wesejong.cafe24.com/member/join

3. 인증번호발송

세종대학교 학생만 가입할 수 있게 세종대학생만이 가입가능한 학교이메일(@sju.ac.kr)로만 발송될 수 있게 처리했습니다. 또한 인증번호발송은 wesejong@weseong.cafe24.com 구글 SMTP를 사용하여 메일을 발송하였습니다

위세종 SMTP를 활용한 메일인증화면

4. 아이디찾기, 패스워드찾기

위세종 아이디/비밀번호를 분실하였을때 이메일 인증번호를 통하여 아이디 찾기,패스워드 찾게 도와줍니다.

아이디찾기 화면 https://wesejong.cafe24.com/member/forgot

패스워드찾기화면 https://wesejong.cafe24.com/member/forgot

5. 마이페이지

본인의 아이디, 닉네임, 이메일, 학번을 볼 수 있습니다. 또한, 사용자는 닉네임 변경, 탈퇴하기 기능, 비밀번호 변경을 할 수 있습니다. Spring Security의 객체를 Session 관리를 통해 현재 로그인한 사용자 고유번호를 통해 정보를 가져옵니다.

마이페이지화면 https://wesejong.cafe24.com/member/mypage#

6. 탈퇴

[마이페이지]-[탈퇴하기] 를 통해 탈퇴할 수 있습니다.

탈퇴하기기능 화면 https://wesejong.cafe24.com/member/secession

7. 알림내역

회원이 받은 알림을 확인할 수 있습니다. 처음에 회원가입을 완료하였을때, 미팅매칭에서 이벤트 신청이 완료되었을때 알림이 오게 만들었습니다. 알림내역 확인 https://wesejong.cafe24.com/member/info/alarm#

8. 채팅방내역

본인이 채팅하고 있는 채팅목록이 나옵니다.채팅방에는 여러명의 사람들이 들어와 함께 채팅할 수 있습니다. 채팅같은경우, 게시글의 작성자, 댓글을 쓴 사람들에게 채팅을 걸 수 있습니다.

채팅목록화면 https://wesejong.cafe24.com/member/info/chatroomlist

9. 채팅방

Spring WebSocket with Stomp(스트리밍 텍스트 지향 프로토콜)를 통하여 채팅기능을 구현했습니다. Stomp 메세지 브로커를 활용하여 메세지를 전송하고 받는것을 topic/subscribe의 구조로 만들었습니다.

채팅을 하는 모습입니다. 오른쪽 상단의 나가기버튼을 통해 채팅방에서 아예 나갈 수 있습니다.

Spring Websocket With Stomp 채팅화면 , test1과 test2가 서로 채팅하는모습https://wesejong.cafe24.com/socket/chat?chatroom_uuid=868e383c-1ffb-4f08-84c8-e15cca6f1864

10. 게시글목록

게시글에서는 검색(제목 + 내용)이 가능합니다. 또한 관리자는 관리자메뉴에서 공지글을 등록할 수 있습니다. 이미지파일이 있을시 목록에 이미지파일 표시, 댓글표시 등이 나타납니다.

게시판 목록화면 https://wesejong.cafe24.com/board/list?board_id=103

11. 게시글 상세보기

게시글 좋아요, 싫어요기능, 댓글 달기, 대댓글달기 기능이 있습니다. 작성자는 원하는 이미지를 원하는 사이즈로 올릴 수 있습니다. <맛집게시판, 맛집게시판에 올려진 게시글상세보기입니다>

게시판 상세보기 화면1 https://wesejong.cafe24.com/board/get?bno=6

12. 게시글 등록

CKEDITOR를 활용하여 웹에디터로 사용했습니다. 이미지 첨부, 글꼴 편집이 가능합니다. 또, CKEDITOR YOUTUBE Plugin을 통해 퍼오기가 가능합니다. 게시글 왼쪽상단에 게시판을 설정하여 원하는 게시판에 글을 작성할 수 있습니다.

12.1 작성한 글의 상세보기

13. MeetMachExplanation

오픈이벤트로 미팅매칭 이벤트를 열어보았습니다. 사용자는 같이 신청할 팀원을 선정하여 초대하게 되고, 초대받게 된 사람들은 알람내역으로 온 알람을 통해 수락을 해야 참여가 가능합니다.

https://wesejong.cafe24.com/meetmatch/event/explanation https://wesejong.cafe24.com/meetmatch/event/explanation https://wesejong.cafe24.com/meetmatch/event/explanation https://wesejong.cafe24.com/meetmatch/event/explanation https://wesejong.cafe24.com/meetmatch/event/explanation

14. 지원서작성

성별과 개인정보 제공에 관하여 정보를 얻은뒤, 미팅인원을 선택합니다. 인원은 2명이면 본인과 다른한명입니다. 인원은 관리자기능에서 유동적으로 변경할 수 있습니다. 그 이후에 같이 지원할 사용자의 아이디를 적고, 존재하는 아이디라면 초록색 ✅가 나오고, 존재하지 않다면 빨간색 ❌표시가 나옵니다.

미팅매칭 지원서작성화면 2 https://wesejong.cafe24.com/meetmatch/event/apply

15. 지원완료

지원이 완료되면, 알림 메세지가 가게되고 발표일까지 기다리게 됩니다.

미팅매칭 지원완료페이지 https://wesejong.cafe24.com/meetmatch/event/apply

16.지원 에러메시지

잘못된 정보가 들어왔을시(ex. 중복지원, 아이디 유효성검사 에러)가 나왔을시 에러가 발생합니다.

미팅매칭 지원실패페이지 https://wesejong.cafe24.com/meetmatch/event/apply

17.지원내역

본인이 지원했던 이력을 볼 수 있습니다. 위의 지원목록을 하나 클릭하면 해당 지원의 상세정보가 나옵니다.

미팅매칭 지원목록페이지 https://wesejong.cafe24.com/meetmatch/event/applicationhistory

18. 지원상세정보입니다.

상세정보에서 미팅 승인/취소를 할 수 있습니다. 미팅 해당팀원 모두 승인이 되어야만 미팅팀에 매칭될 수 있습니다.만약 매칭된다면 자동으로 미팅매칭된 팀이 채팅방에 초대되며, 매칭결과는 성공으로 변하게 됩니다

미팅매칭 지원상세페이지 https://wesejong.cafe24.com/meetmatch/event/applicationdetails?meetmatchteam_seq=20

19. 관리자페이지

Spring Security를 통해 role이 ‘admin’인 사용자는 로그인하자마자 바로 관리자페이지로 이동합니다. 1.회원관리메뉴 Spring Security의 PasswordEncoder로 모든 패스워드는 암호화된 상태에서만 입력됩니다. 2.테이블관리메뉴 게시판의 유연한 관리를 위해 게시판정보의 삽입,삭제,수정이 가능합니다. 3.사용자관리메뉴 alarm(알람) 목록, chatrom(채팅방) 목록, chatroomjoin(채팅에 들어가있는 사용자관리) 목록을 볼수 있습니다. 4.이벤트관리메뉴 meetmatchmanage : 미팅매칭 이벤트 시작, 종료 데이터를 만듭니다. meetmatchpersonnelmanage : 미팅매칭 이벤트의 인원수를 결정합니다.(1:1, 2:2, 4:4 등등) meetmatchdepartment : 과 선택을 위해 만들었지만 실제로 사용하지는 않았습니다. meetmatchprofile : 프로필 저장을 위해 만들었지만 실제로 사용하지는 않았습니다. meetmatchteam : 미팅매칭에 신청한 팀의 목록을 보여줍니다. meematchteammate : 미팅매칭팀에 소속된 팀원들의 정보를 보여줍니다. 이벤트랜덤미팅프로그램실행으로 무작위로 신청한 팀원들을 묶어줍니다.

20. 미팅매칭서비스 개발 후 아쉬웠던점

미팅매칭서비스 같은 경우, 모든 지원을 받은 후에 한꺼번에 매칭을 시켜주는 방식으로 프로그램을 만들었지만, 만들고 난 이후에 보니 일정기간동안 미팅매칭 이벤트를 자동으로 계속해서 연결되는 방식으로 만들어주는것이 사용자 입장에서 더 편하여 더 많은 사용자가 참여했을 것 같습니다. 또한 관리자 입장에서도 이것이 더 편할것같습니다. 처음에 위와 같이 개발했던 이유는 사람들이 미팅매칭이벤트에 좀더 신뢰감을 가지길 원하는 이유로 한꺼번에 매칭을 잡아주는 방법을 개발하였지만, 사람들이 불편함을 느꼈고 그로인해 20명정도 밖에 지원하지 않은 것 같다고 느꼈습니다. 또한 미팅매칭서비스 지원시 개인정보로 성별만 요구하였었는데, 개인정보를 많이 요구할경우 사용자들이 지원하지 않을것같아서 최대한 적은 정보로 지원을 진행했습니다. 그렇지만 지금 생각해보니 좀더 전화번호나 카카오아이디 같은 정보를 요구하여 확실히 매칭시켜준다는 신뢰감을 주는것이 더 좋았을 것 같습니다.