$$config title: WhatChat 기술 설명서 keywords: - IT - 기술 설명서 $$ # 기능 현황 | 기능 | 구현 | 배포 | 테스트 | | -- | -- | -- | -- | | 게시판 페이지 | ✔ | ✔ | ✔ | | 게시글 생성 | ✔ | ✔ | ✔ | | 게시글 수정 | ✔ | ✔ | ✔ | | 게시글 삭제 | ✔ | ✔ | ✔ | | 게시글 조회 | ✔ | ✔ | ✔ | | 네비게이션 바 생성 | ✔ | ✔ | ✔ | | 회원가입 | ✔ | ✔ | ✔ | | 로그인 | ✔ | ✔ | ✔ | | 댓글 생성 | ✔ | ✔ | ✔ | | 댓글 수정 | ✔ | ✔ | ✔ | | 댓글 삭제 | ✔ | ✔ | ✔ | | 전체채팅 구현 | ✔ | ✔ | ✔ | # 요구사항 ## 요구사항 분석표 | 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 | # 기능 ## 회원 - 회원가입 - 로그인 - 로그아웃 ## 게시판 - 게시판 생성, 조회, 수정, 삭제 ## 댓글 - 댓글 생성, 조회, 수정, 삭제 ## 채팅 - 채팅방을 만들어 전체채팅 가능 # 기술 설명 ## 메인 화면

## 코드 ```js {{>layouts/header}}

Free WhatChat!
Enjoy Your Communication

회원 가입

채팅 시작!

{{>layouts/footer}} ``` ## 회원가입 / 로그인

## 코드 ### controller ```js package com.team.chatproject.controller; import com.team.chatproject.domain.Member; import com.team.chatproject.domain.Rq; import com.team.chatproject.form.SignupForm; import com.team.chatproject.repository.MemberRepository; import com.team.chatproject.service.MemberService; import com.team.chatproject.util.Ut; import lombok.AllArgsConstructor; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.dao.DataIntegrityViolationException; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.validation.BindingResult; import org.springframework.validation.FieldError; import org.springframework.validation.annotation.Validated; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.Map; import java.util.stream.Collectors; @Slf4j @Controller @RequestMapping("/member") @AllArgsConstructor public class MemberController { @Autowired private MemberService memberService; @Autowired private MemberRepository memberRepository; @Autowired private Rq rq; @GetMapping("/signup") public String showSignup(SignupForm signupForm) { return "/member/signup_form"; } @PostMapping("/signup") public String signup(Model model, @Validated SignupForm signupForm, BindingResult bindingResult) { if (bindingResult.hasErrors()) { Map validationErrors = bindingResult.getFieldErrors() .stream().collect(Collectors.toMap( FieldError::getField, FieldError::getDefaultMessage )); if (!validationErrors.isEmpty()) { model.addAttribute("validationErrors", validationErrors); } return "/member/signup_form"; } // 회원가입, 중복아이디, 닉네임 회원가입 불가 구현 try { this.memberService.create(signupForm.getLoginId(), signupForm.getLoginPw(), signupForm.getName(), signupForm.getNickName()); } catch (DataIntegrityViolationException e) { if (memberRepository.findByLoginId(signupForm.getLoginId()).stream().count() != 0) { model.addAttribute("loginIdError", signupForm.getLoginId()); } if (memberRepository.findByNickName(signupForm.getNickName()).stream().count() != 0) { model.addAttribute("nickNameError", signupForm.getNickName()); } return "/member/signup_form"; } return "redirect:/"; } @RequestMapping("/login") public String showLogin() { return "member/login_form"; } @RequestMapping("/doLogin") @ResponseBody public String doLogin(String loginId, String loginPw) { if (rq.isLogin()) { return Ut.jsHistoryBack("이미 로그인되었습니다."); } if (Ut.empty(loginId)) { return Ut.jsHistoryBack("loginId(을)를 입력해주세요."); } if (Ut.empty(loginPw)) { return Ut.jsHistoryBack("loginPw(을)를 입력해주세요."); } Member member = memberService.getMemberByLoginId(loginId); if (member == null) { return Ut.jsHistoryBack("존재하지 않은 로그인아이디 입니다."); } if (member.getLoginPw().equals(loginPw) == false) { return Ut.jsHistoryBack("비밀번호가 일치하지 않습니다."); } rq.login(member); return Ut.jsReplace(Ut.f("%s님 환영합니다.", member.getNickName()), "/"); } @RequestMapping("/doLogout") @ResponseBody public String doLogout() { if (!rq.isLogin()) { return Ut.jsHistoryBack("이미 로그아웃 상태입니다."); } rq.logout(); return Ut.jsReplace("로그아웃 되었습니다.","/"); } } ``` ### service ```js 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

WhatChat {{>css/font}} ``` ## footer ```html ``` ## Service 결과 ### ArticleService ``` 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 = 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", "게시물 수정이 가능합니다."); } } ``` ### CommentService ``` 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); } } ``` ### MemberService ``` 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); } } ``` ### chatserver Service ``` let username = prompt("아이디를 입력하세요"); let roomNum = prompt("채팅방 번호를 입력하세요"); document.querySelector("#username").innerHTML = username; const eventSource = new EventSource(`http://localhost:8234/chat/roomNum/${roomNum}`); // 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; } //대화입력 함수 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(); } }); ```

Free WhatChat! Enjoy Your Communication

Free WhatChat!
Enjoy Your Communication