$$config title: whatChat 기술서 keywords: - IT - 기술서 $$ # 깃 주소 https://github.com/jeonjongyeong/ChatProject # 기능 현황 | 기능 | 구현 | 배포 | 테스트 | | -- | -- | -- | -- | | 게시판 페이지 | ✔ | ✔ | ✔ | | 게시글 생성 | ✔ | ✔ | ✔ | | 게시글 수정 | ✔ | ✔ | ✔ | | 게시글 삭제 | ✔ | ✔ | ✔ | | 게시글 조회 | ✔ | ✔ | ✔ | | 네비게이션 바 생성 | ✔ | ✔ | ✔ | | 회원가입 | ✔ | ✔ | ✔ | | 로그인 | ✔ | ✔ | ✔ | | 댓글 생성 | ✔ | ✔ | ✔ | | 댓글 수정 | ✔ | ✔ | ✔ | | 댓글 삭제 | ✔ | ✔ | ✔ | | 전체채팅 구현 | ✔ | ✔ | ✔ | # 기능 ## 회원 - 회원가입 - 로그인 - 로그아웃 ## 게시판 - 게시판 생성, 조회, 수정, 삭제 ## 댓글 - 댓글 생성, 조회, 수정, 삭제 ## 채팅 - 채팅방을 만들어 전체채팅 가능 # 요구사항 분석표 | RQ-ID | 화면명 | 요구사항명 | 요구사항내용 | 날짜 | 작성자 | 진행사항 | 버전명 | | -- | -- | -- | -- | -- | -- | -- | -- | | RQ-001 | 공통 | 상단 메뉴 구성 | 네비게이션 관련 메뉴를 구성한다. 게시판과 홈 화면으로 이동할 수 있다. | 7/29 | 이혜성 | 반영 | v0.1 | | RQ-002 | 공통 | 하단 영역 | 사이트의 이름과 로고가 푸터로 있다. | 7/29 | 이혜성 | 반영 | v0.1 | | RQ-003 | 메인 화면 | 가운데 영역 | 공지사항과 자유게시판이 있다. | 7/29 | 이혜성 | 반영 | v0.1 | | RQ-004 | 게시판 | 가운데 영역 | 해당 게시판의 게시글의 리스트가 있다. - 글 20개씩 1페이지.(아래) | ... | 이혜성 | 미반영 | v0.1 | | RQ-005 | 게시판 | 가운데 영역 | 전체 챗팅방이 링크가 있다. | 8/8 | 이혜성 | 반영 | v0.1 | | RQ-006 | 챗팅 | 가운데 영역 | 글 작성 버튼이 있다. - 게시판 옆 | 8/1 | 이혜성 | 반영 | v0.1 | | RQ-007 | 게시글 | 가운데 영역 | 위에서부터 게시판 링크, 게시글 제목, 내용 | 7/30 | 이혜성 | 반영 | v0.1 | | RQ-008 | 게시글 | 가운데 영역 | 게시글 내용 최 하단 중앙에 추천 버튼이 있다. - 비동기 처리방식 | ... | 이혜성 | 미반영 | v0.1 | | RQ-009 | 게시글 | 가운데 영역 | 게시글 박스 아래에 댓글이 있다. 댓글 위에 댓글 작성 폼이 있다. | 8/3 | 이혜성 | 반영 | v0.1 | | RQ-010 | 로그인 화면 | 가운데 영역 | 로그인 폼이 있다. | 8/3 | 이혜성 | 반영 | v0.1 | | RQ-011 | 회원가입 화면 | 가운데 영역 | 회원가입이 가능하다. - 로그인 폼 아래 | 8/3 | 이혜성 | 반영 | v0.1 | ## service ``` package com.team.chatproject.service; import com.team.chatproject.domain.*; import com.team.chatproject.repository.ArticleRepository; import com.team.chatproject.util.DataNotFoundException; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.Pageable; import org.springframework.stereotype.Service; import java.time.LocalDate; import java.util.Collections; import java.util.List; import java.util.Optional; @Service public class ArticleService { @Autowired private ArticleRepository articleRepository; @Autowired private Rq rq; @Autowired private MemberService memberService; public Page

getPageList(Pageable pageable) { return articleRepository.findAll(pageable); } public Boolean getPageCheck(Pageable pageable) { Page

saved = getPageList(pageable); Boolean check = saved.hasNext(); return check; } // public List

getList() { // List

articles = articleRepository.findAll(); // return articles; // } public Article getDetail(Long id) { Optional

opArticle = this.articleRepository.findById(id); if (opArticle.isPresent()) { Article article = opArticle.get(); List commentList = article.getCommentList(); Collections.reverse(commentList); article.setCommentList(commentList); article.setViewCount(article.getViewCount() + 1); this.articleRepository.save(article); return article; } else { throw new DataNotFoundException("article not found"); } } public void create(String title, String body) { Article article = new Article(); //article.setMemberId(memberId); article.setTitle(title); article.setBody(body); Member member = memberService.getMemberById(rq.getLoginMemberId()); article.setNickname(member.getNickName()); article.setRegDate(LocalDate.now()); article.setUpdateDate(LocalDate.now()); this.articleRepository.save(article); } public void delete(Article article) { this.articleRepository.delete(article); } public void modify(Long id, String title, String body) { Optional

opArticle = articleRepository.findById(id); Article article = opArticle.get(); article.setUpdateDate(LocalDate.now()); article.setTitle(title); article.setBody(body); this.articleRepository.save(article); } public ResultData actorCanModify(int actorId, Article article) { if (article == null) { return ResultData.from("F-1", "게시물이 존재하지 않습니다."); } if (article.getMemberId() != actorId) { return ResultData.from("F-2", "권한이 없습니다."); } return ResultData.from("S-1", "게시물 수정이 가능합니다."); } } ``` ``` package com.team.chatproject.service; import com.team.chatproject.domain.Article; import com.team.chatproject.domain.Comment; import com.team.chatproject.domain.Member; import com.team.chatproject.domain.Rq; import com.team.chatproject.repository.CommentRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import java.time.LocalDate; import java.time.LocalDateTime; import java.util.Optional; @Service public class CommentService { @Autowired CommentRepository commentRepository; @Autowired MemberService memberService; @Autowired Rq rq; public Comment getComment(long commentId) { Optional OpComment = commentRepository.findById(commentId); Comment comment = OpComment.get(); return comment; } public void create(Article article, String comments) { Comment newComment = new Comment(); newComment.setComments(comments); newComment.setArticle(article); Member member = memberService.getMemberById(rq.getLoginMemberId()); newComment.setNickname(member.getNickName()); newComment.setRegDate(LocalDate.now()); newComment.setUpdateDate(LocalDate.now()); this.commentRepository.save(newComment); } @Transactional // 수정 public void update(Long id, String comments) { Optional opComment = commentRepository.findById(id); Comment comment = opComment.get(); comment.setUpdateDate(LocalDate.now()); comment.setComments(comments); this.commentRepository.save(comment); } @Transactional public void delete(Comment comment) { this.commentRepository.delete(comment); } } ``` ``` package com.team.chatproject.service; import com.team.chatproject.domain.Member; import com.team.chatproject.repository.MemberRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.time.LocalDateTime; @Service public class MemberService { @Autowired private MemberRepository memberRepository; public void create(String loginId, String password, String name, String nickname ) { Member newMember = new Member(); newMember.setLoginId(loginId); newMember.setLoginPw(password); newMember.setName(name); newMember.setNickName(nickname); newMember.setRegDate(LocalDateTime.now()); newMember.setUpdateDate(LocalDateTime.now()); this.memberRepository.save(newMember); } public Member getMemberByLoginId(String loginId) { return memberRepository.getMemberByLoginId(loginId); } public Member getMemberById(int id) { return memberRepository.getMemberById(id); } public Member getMemberByNickname(int id) { return memberRepository.getMemberById(id); } } ``` ## 쳇팅 서버 로직 ``` js //let username = sessionStorage.getItem('loginMemberNickName'); let username = prompt("아이디를 입력하세요"); let roomNum = 1; //let roomNum = prompt("채팅방 번호를 입력하세요"); document.querySelector("#username").innerHTML = username; const eventSource = new EventSource("http://localhost:8234/chat/roomNum/1"); //const eventSource = new EventSource("http://localhost:8234/sender/ssar/receiver/cos"); eventSource.onmessage = (event) => { const data = JSON.parse(event.data); if(data.sender === username){//로그인한 유저가 보낸 메시지 //파란박스(오른쪽) initMyMessage(data); }else{ initYourMessage(data); //회색(왼쪽) } } //파란박스(오른쪽) function getSendMsgBox(data){ let md = data.createdAt.substring(5,10); let tm = data.createdAt.substring(11,16); let convertTime = tm + " | " + md; return `

${data.msg}

${convertTime} / ${data.sender}

`; } //회색(왼쪽) function getReceiverMsgBox(data){ let md = data.createdAt.substring(5,10); let tm = data.createdAt.substring(11,16); let convertTime = tm + " | " + md; return `

${data.msg}

${convertTime} / ${data.sender}

`; } //내가 쓴 메시지 가져오기 function initMyMessage(data){ let chatBox = document.querySelector("#chat-box"); let sendBox = document.createElement("div"); sendBox.className = "outgoing_msg"; sendBox.innerHTML = getSendMsgBox(data); chatBox.append(sendBox); //스크롤 이동 document.documentElement.scrollTop = document.body.scrollHeight; } //상대가 쓴 메시지 가져오기 function initYourMessage(data){ let chatBox = document.querySelector("#chat-box"); let receivedBox = document.createElement("div"); receivedBox.className = "incoming_msg"; receivedBox.innerHTML = getReceiverMsgBox(data); chatBox.append(receivedBox); //스크롤 이동 document.documentElement.scrollTop = document.body.scrollHeight; } // 넘어온 값이 빈값인지 체크합니다. // !value 하면 생기는 논리적 오류를 제거하기 위해 // 명시적으로 value == 사용 // [], {} 도 빈값으로 처리 var isEmpty = function(value){ if( value == "" || value == null || value == undefined || ( value != null && typeof value == "object" && !Object.keys(value).length ) ){ return true; }else{ return false; } }; //대화입력 함수 function addMessage(){ let msgInput = document.querySelector("#chat-outgoing-msg"); //AJAX 채팅 메시지를 전송 let chat = { sender: username, roomNum: roomNum, msg: msgInput.value }; fetch("http://localhost:8234/chat",{ method: "post", //http post 메서드 (새로운 데이터를 write) body: JSON.stringify(chat), // JS -> JSON headers: { "Content-Type": "application/json; charset=utf-8" } }); msgInput.value=""; } //버튼으로 대화 입력 document.querySelector("#chat-outgoing--button").addEventListener("click",()=>{ addMessage(); }); //엔터로 대화 입력 document.querySelector("#chat-outgoing-msg").addEventListener("keydown",(e)=>{ if(e.keyCode===13){ addMessage(); } }); ```