커뮤니티 기능을 강화한 여행 사이트입니다.

사이트 URL : http://13.125.213.74:8080/roaming/userboard/mainPage

📦 개발 환경

• editor :
• language :
• database :
• 기타 :
  
  

로밍 사이트

메인 페이지

먼저 로그인을 하지 않은 채 메인 페이지를 들어가면 동행찾기, 커뮤니티, 숙소예약, 짐서비스, 포인트샵 순으로 보여줍니다.

로그인을 하면 상세 보기를 눌러 각 기능 페이지에 들어갈 수 있습니다.

로그인 기능

로밍의 아이디 또는 카카오 토큰을 이용한 아이디를 이용해서 로그인 할 수 있습니다.

회원가입 기능

계정을 생성해주는 회원가입 기능입니다.

유효성 검사 항목들

• 이미 존재하는 아디이 검사
• 비밀번호 재입력이 일치하는지 검사
• 필수 약관 내용에 동의하는지 검사
  
  

커뮤니티 들어가기

제가 구현한 커뮤니티를 들어갑니다.

홈

홈에서는 UNOIN 쿼리를 이용하여 모든 게시물을 한번에 확인할 수 있습니다.

각각의 게시물에 대해 모든 기능을 수행할 수 있습니다.

더보기를 누르거나 댓글 아이콘을 누르면 모달로 크게 보여줍니다.

업로드

사진, 영상을 업로드에 올리면 파일리더로 미리볼 수 있습니다.

업로드 기능은 자바스크립트와 Ajax를 이용하여 비동기로 구현하였습니다.

입력하는 항목들

• 게시물에 대한 제목(사진만 영상은 NULL)
• 게시물에 대한 내용
• 게시물에 대한 위치
  
  

피드(사진 게시물)

여러 사진들을 나열하고 마우스 오버를 하면 게시물에 대한 좋아요 수와 제목을 미리 볼 수 있습니다.

게시물을 클릭하면 피드 상세 페이지로 넘어갑니다.

사진이 여러장 일 때 옆으로 가기 버튼을 눌러 모두 확인할 수 있습니다.

게시물에 대해 댓글을 달고 수정, 삭제도 가능합니다.

하트 이모티콘을 누르면 좋아요와 싫어요를 표현할 수 있습니다.

아래로 스크롤하면 다른 피드를 바로 확인할 수 있습니다.

릴스(영상 게시물)

영상에 대해 좋아요, 댓글이 가능하고 댓글 아이콘이나 더보기를 눌렀을 때 모달로 댓글을 모두 확인할 수 있습니다.

검색

검색창에 단어를 검색하면 게시물의 내용, 제목, 유저 아이디, 닉네임 중 하나가 포함된다면 유저 정보로 검색됩니다.

검색 후 유저를 클릭하면 유저 페이지로 넘어갑니다.

유저 페이지(어느 페이지에서든 유저 사진을 클릭하면 됩니다)

팔로우를 클릭하면 비동기로 바로 팔로잉으로 바뀝니다.

메세지 보내기를 누르면 메세지 페이지로 넘어갑니다.(네비바에서 메세지를 클릭해도 동일)

피드, 릴스를 따로 볼 수 있습니다.

메세지

1:1 채팅을 할 수 있습니다.

나에게 온 채팅 목록을 확인 할 수 있습니다.

알림

나를 팔로워한 유저가 있으면 바로 알림이 옵니다.

프로필

프로필 설정에 들어가 프로필 사진을 변경할 수 있습니다.

erd 다이어그램

테이블 명세서

• R_user : 회원
• R_message_p : 메세지
• R_follow : 팔로우
• R_save_spot : 저장소
• R_save_category : 저장소 카테고리
• R_alerts : 인스타 알림
• R_hash_tag : 해시태그
• R_reels : 릴스
• R_block_users : 차단
• R_tags : 태그
• R_reels_likes : 릴스 좋아요
• R_feed : 피드
• R_feed_likes : 피드 좋아요
• R_reels_comment : 릴스 댓글
• R_feed_comment : 피드 댓글
• R_feed_category : 피드 좋아요 카테고리
• R_feed_image : 피드 상세 이미지