$$config title: 포트폴리오 기술 설명서 keywords: - IT - JAVA - Spring Boot - MVC 패턴 $$ # 포트폴리오 기술 설명서 - 개요 - 소개 - 링크 - 기술스택 - 형상&배포 관리 - 개발환경 - 기술스택 - 프론트 기술 - 기간 - 구현기능리스트 - 사용자 - 게시물 - 회원 - 동작화면 & 소스코드 - 회원가입 - 로그인 - 로그아웃 - 아이디/비밀번호 찾기 - 회원정보수정 - 게시판 - 게시물 상세페이지 - 조회수 - 추천/비추천 - 댓글 - 댓글 작성 - 댓글 수정 - 댓글 삭제 - 게시물 작성 - 게시물 삭제 - 게시물 수정 # ? 개요 ## 소개 - 해당 프로젝트는 JAVA 기반으로 MVC구조의 커뮤니티 사이트 이며, 개인 프로젝트 입니다. - 회원가입을 통해 자유롭게 이용할 수 있도록 구현하였습니다. ## 링크 - ? GitHub Repository : [ https://github.com/jtj3107/sb_c_2021]( https://github.com/jtj3107/sb_c_2021) - ? 블로그 : [https://slog.gg/b/37](https://slog.gg/b/37) - ? 사이트 : [(https://#](https://#) 배포 준비중 # ? 기술스택 ## 형상&배포 관리 - Git, GitHub ## 개발툴 - STS - SQLYog community Edition - Maven - Git, Github - Visual Studio Code - Chrome - Windows 10 - CentOS (예정) ## 백엔드 기술 - Tomcat - JDK 1.5 - Servlet / JSP - MariaDB - ajax - Lombok - Jackson(json 파서용) - javax.mail(이메일 발송) ## 프론트 기술 - HTML - CSS - JS - jQuery - 테일윈드 - daisyUI ## 기간 - 시작 : 2021-09-01 - 완료 : 2021-09-30 # ? 구현기능리스트 ## 사용자 ### 회원 - 회원가입 - 로그인 - 로그아웃 - 아이디 찾기 - 비밀번호 찾기(임시패스워드를 이메일로 발송) - 회원정보수정 - 인터셉터를 통한 권한체크 - NeedLoginInterceptor - NeedLogoutInterceptor - 로그인이 안된 상태에서 로그인이 필요한 페이지로 이동시 - 로그인 후 원래 이동하려면 곳으로 이동 - 로그인 시 페이지 유지 ### 게시물 - 멀티 게시판 - 공지사항게시판 - 자유게시판 - 게시물 검색 - 검색어 타입 - 제목 - 내용 - 제목 + 내용 - 페이징 - 작성 - 로그인 필요 - 게시판 선택 가능 - 제목, 내용 - 작성 권한체크 - 수정 - 수정 권한체크 - 본인만 수정 가능 - 삭제 - 삭제 권한체크 - 본인만 삭제 가능 # ? 동작화면 & 소스코드 ## 회원가입 ### UsrMemberController.java ```java // /usr/member/join 요청이 들어오면 사용자에게 join.jsp로 화면을 보여준다. @RequestMapping("/usr/member/join") public String showJoin() { return "usr/member/join"; } ``` ![image](https://imgur.com/veNkMli.png) ![image](https://imgur.com/2TLlrwa.png) #### src/main/webapp/WEB-INF/jsp/usr/member/join.jsp - ajax를 활용하여 로그인 아이디 중복 여부 체크(usr/member/getLoginIdDup로 이동) ```javascript ``` - 회원가입에 필요한 데이터들이 공백을 제거하고 입력되어 있는지 확인. ![image](https://i.imgur.com/lqXktm0.png) ```html

이용약관 다시 확인하기

이용약관에 동의합니다.

개인정보취급방침 다시 확인하기

개인정보취급방침에 동의합니다.

로그인 아이디

로그인 비밀번호

로그인 비밀번호 확인

이름

닉네임

이메일

전화번호

``` - 회원가입 버튼을 누르면 입력된 데이터를 가지고 UsrMemberController.java의 doJoin함수로 이동 #### UsrMemberController.java ```java @RequestMapping("/usr/member/doJoin") @ResponseBody public String doJoin(String loginId, String loginPw, String name, String nickname, String cellphoneNo, String email) { if (Ut.empty(loginId)) { return rq.jsHistoryBack("loginId(을)를 입력해주세요."); } if (Ut.empty(loginPw)) { return rq.jsHistoryBack("loginPw(을)를 입력해주세요."); } if (Ut.empty(name)) { return rq.jsHistoryBack("name(을)를 입력해주세요."); } if (Ut.empty(nickname)) { return rq.jsHistoryBack("nickname(을)를 입력해주세요."); } if (Ut.empty(cellphoneNo)) { return rq.jsHistoryBack("cellphoneNo(을)를 입력해주세요."); } if (Ut.empty(email)) { return rq.jsHistoryBack("email(을)를 입력해주세요."); } ResultData joinRd = memberService.join(loginId, loginPw, name, nickname, cellphoneNo, email); if (joinRd.isFail()) { return rq.jsHistoryBack(joinRd.getMsg()); } return rq.jsReplace(joinRd.getMsg(), "/"); } ``` - 컨트롤러에서 2차 유효성 검사 진행 - 해당 데이터 memberService.join으로 넘김. ```java public ResultData join(String loginId, String loginPw, String name, String nickname, String cellphoneNo, String email) { // 로그인아이디 중복체크 Member oldMember = getMemberByLoginId(loginId); if (oldMember != null) { return ResultData.from("F-7", Ut.f("해당 로그인아이디(%s)는 이미 사용중 입니다.", loginId)); } // 이름 + 이메일 중복체크 oldMember = getMemberByNameAndEmail(name, email); if (oldMember != null) { return ResultData.from("F-8", Ut.f("해당 이름(%s)과 이메일(%s)은 이미 사용중 입니다.", name, email)); } memberRepository.join(loginId, loginPw, name, nickname, cellphoneNo, email); int id = memberRepository.getLastInsertId(); return ResultData.from("S-1", "회원가입이 완료되었습니다.", "id", id); } ``` - getMemberByLoginId() 로그인 아이디 중복체크. - getMemberByNameAndEmail() 이름+이메일 중복체크. - memberRepository.getLastInsertId() 방금 생성된 회원의 회원번호를 가져옴. ```java @Insert(""" INSERT INTO `member` SET regDate = NOW(), updateDAte = NOW(), loginId = #{loginId}, loginPw = #{loginPw}, `name` = #{name}, nickname = #{nickname}, cellphoneNo = #{cellphoneNo}, email = #{email} """) void join(@Param("loginId") String loginId, @Param("loginPw") String loginPw, @Param("name") String name, @Param("nickname") String nickname, @Param("cellphoneNo") String cellphoneNo, @Param("email") String email); ``` #### UsrMemberController.java - ajax를 이용한 로그인 중복 여부 확인하는 함수 ```java @RequestMapping("/usr/member/getLoginIdDup") @ResponseBody public ResultData actionGetLoginIdDup(String loginId) { if (Ut.empty(loginId)) { return ResultData.from("S-1", "loginId(을)를 입력해주세요."); } Member member = memberService.getMemberByLoginId(loginId); ResultData memberRd = null; if (member != null) { memberRd = ResultData.from("F-1", Ut.f("`%s`(은)는 이미 사용중인 아이디 입니다.", loginId), "loginId", loginId); return memberRd; } memberRd = ResultData.from("S-1", Ut.f("`%s`(은)는 사용 가능한 아이디 입니다.", loginId), "loginId", loginId); return memberRd; } ``` ## 로그인 ### UsrMemberController.java ```java // /usr/member/login 요청이 들어오면 login.jsp로 이동 @RequestMapping("/usr/member/login") public String showLogin() { return "usr/member/login"; } ``` ![image](https://i.imgur.com/zthRRVW.png) #### src/main/webapp/WEB-INF/jsp/usr/member/login.jsp ```html

로그인 아이디
로그인 비밀번호
로그인

``` - 로그인 버튼을 누르면 입력된 데이터를 가지고 UsrMemberController.java의 doLogin함수로 이동 ```java @RequestMapping("/usr/member/doLogin") @ResponseBody public String doLogin(String loginId, String loginPw) { if (rq.isLogined()) { return rq.jsHistoryBack("이미 로그인되었습니다."); } if (Ut.empty(loginId)) { return rq.jsHistoryBack("loginId(을)를 입력해주세요."); } if (Ut.empty(loginPw)) { return rq.jsHistoryBack("loginPw(을)를 입력해주세요."); } Member member = memberService.getMemberByLoginId(loginId); if (member == null) { return rq.jsHistoryBack("존재하지 않는 로그인 아이디 입니다."); } if (member.getLoginPw().equals(loginPw) == false) { return rq.jsHistoryBack("비밀번호가 일치하지 않습니다."); } rq.login(member); return rq.jsReplace(Ut.f("%s님 환영합니다.", member.getNickname()), "/"); } ``` - 컨트롤러에서 2차 유효성 검사 진행 - 해당 데이터 memberService.join으로 넘김. #### MemberService.java ```java public Member getMemberByLoginId(String loginId) { return memberRepository.getMemberByLoginId(loginId); } ``` #### MemberRepository.java ```java @Select(""" SELECT * FROM `member` AS M WHERE M.loginId = #{loginId} """) Member getMemberByLoginId(@Param("loginId") String loginId); ``` #### Rq.java ```java public void login(Member member) { session.setAttribute("loginedMemberId", member.getId()); } ``` - session에 로그인된 회원 id 저장 #### UsrMemberController.java ```java if (Ut.empty(redirectUri)) { redirectUri = "/"; } String alertMsg = Ut.f("%s님 환영합니다.", member.getNickname()); boolean isUsingTempPassword = memberService.isUsingTempPassword(member.getId()); if (isUsingTempPassword) { alertMsg = Ut.f("%s님은 현재 임시 비밀번호를 사용중입니다. 변경 후 이용해주세요.", member.getNickname()); redirectUri = "../member/myPage"; } boolean isNeedToModifyOldLoginPw = memberService.isNeedToModifyOldLoginPw(member.getId()); if (isNeedToModifyOldLoginPw) { int oldPasswordDays = memberService.getOldPasswordDays(); alertMsg = Ut.f("가장 마지막 비밀번호 변경일로 부터 " + oldPasswordDays + "일이 경과되었습니다. 비밀번호를 변경해주세요.", member.getNickname()); redirectUri = "../member/myPage"; } return rq.jsReplace(alertMsg, redirectUri); ``` - 해당 회원이 임시 비밀번호 이거나 비밀번호 변경일로 부터 90이상 경과되었을 경우 비밀번호 수정 권유 - 해당 git 링크(attr) : [https://github.com/jtj3107/sb_c_2021/blob/master/src/main/java/com/jtj/exam/demo/service/AttrService.java](https://github.com/jtj3107/sb_c_2021/blob/master/src/main/java/com/jtj/exam/demo/service/AttrService.java) ![image](https://i.imgur.com/bqKZbLU.png) ![image](https://i.imgur.com/W73un7N.png) ## 로그아웃 ### UsrMemberController.java ```java @RequestMapping("/usr/member/doLogout") @ResponseBody public String doLogout() { if (!rq.isLogined()) { return rq.jsHistoryBack("이미 로그아웃 상태입니다."); } rq.logout(); return rq.jsReplace("로그아웃 되었습니다.", "/"); } ``` ### Rq.java ```java public void logout() { session.removeAttribute("loginedMemberId"); } ``` - session에 저장된 회원 id정보 삭제 ## 아이디/비밀번호 찾기 ![image](https://i.imgur.com/m9eqwDb.png) ![image](https://i.imgur.com/uglm2Ji.png) ### UsrMemberController.java ```java @RequestMapping("/usr/member/doFindLoginId") @ResponseBody public String doFindLoginId(String name, String email) { if (Ut.empty(name)) { return rq.jsHistoryBack("name(을)를 입력해주세요."); } if (Ut.empty(email)) { return rq.jsHistoryBack("email(을)를 입력해주세요."); } Member oldMember = memberService.getMemberByNameAndEmail(name, email); if (oldMember == null) { return rq.jsHistoryBack("존재하지 않는 회원입니다."); } String redirectUri = "../member/login?loginId=" + oldMember.getLoginId(); return rq.jsReplace(Ut.f("회원님의 아이디는 `%s`입니다.", oldMember.getLoginId()), redirectUri); } ``` ### MemberService.java ```java public Member getMemberByNameAndEmail(String name, String email) { return memberRepository.getMemberByNameAndEmail(name, email); } ``` ### MemberRepository.java ```java @Select(""" SELECT * FROM `member` AS M WHERE M.name = #{name} AND M.email = #{email} """) Member getMemberByNameAndEmail(@Param("name") String name, @Param("email") String email); ``` ### UsrMemberController.java ```java @RequestMapping("/usr/member/doFindLoginPw") @ResponseBody public String doFindLoginPw(String loginId, String email) { if (Ut.empty(loginId)) { return rq.jsHistoryBack("loginId(을)를 입력해주세요."); } if (Ut.empty(email)) { return rq.jsHistoryBack("email(을)를 입력해주세요."); } Member oldMember = memberService.getMemberByLoginId(loginId); if (oldMember == null) { return rq.jsHistoryBack("존재하지 않는 회원입니다."); } if (oldMember.getEmail().equals(email) == false) { return rq.jsHistoryBack("회원님의 이메일과 입력하신 이메일이 다릅니다."); } ResultData sendTempLoginPwToEmailRd = memberService.sendTempLoginPwToEmail(oldMember); if (sendTempLoginPwToEmailRd.isFail()) { return rq.jsHistoryBack(sendTempLoginPwToEmailRd.getMsg()); } return rq.jsReplace(sendTempLoginPwToEmailRd.getMsg(), "../member/login"); } ``` ### MemberService.java - loginId로 해당 member 정보 얻어온뒤 임시비밀번호 이메일 발송 ```java public ResultData sendTempLoginPwToEmail(Member actor) { String title = "[" + siteName + "] 임시 패스워드 발송"; String tempPassword = Ut.getTempPassword(6); String body = "

임시 패스워드 : " + tempPassword + "

"; body += "로그인 하러가기"; if (actor.getEmail().length() == 0) { return ResultData.from("F-1", "회원님의 이메일이 존재하지 않습니다."); } ResultData sendResultData = emailService.send(actor.getEmail(), title, body); if (sendResultData.isFail()) { return ResultData.from("F-2", sendResultData.getMsg()); } setTempLoginPw(actor, tempPassword); return ResultData.from("S-1", Ut.f("임시 비밀번호를 `%s`로 발송 하였습니다.", actor.getEmail())); } private void setTempLoginPw(Member actor, String tempLoginPw) { memberRepository.modify(actor.getId(), Ut.sha256(tempLoginPw), null, null, null, null); } ``` ### EmailService.java - EmailService 로 해당 값 보낸 뒤 임시패스워드 이메일로 전송 ```java public ResultData send(String email, String title, String body) { MailHandler mail; try { mail = new MailHandler(sender); mail.setFrom(emailFrom.replaceAll(" ", ""), emailFromName); mail.setTo(email); mail.setSubject(title); mail.setText(body); mail.send(); } catch (Exception e) { e.printStackTrace(); return ResultData.from("F-1", "메일이 실패하였습니다."); } return ResultData.from("S-1", "메일이 발송되었습니다."); } ``` ### MemberRepository.java - 이메일 발송 후 임시비밀번호 변경 ```java @Update(""" """) void modify(int id, String loginPw, String name, String nickname, String email, String cellphoneNo); ``` ## 회원정보수정 - 회원 마이페이지로 이동 ![image](https://i.imgur.com/xy26xkq.png) - 회원 비밀번호 재확인 ![image](https://i.imgur.com/oJiFlXO.png) - 회원정보수정 ![image](https://i.imgur.com/JKtQ75a.png) ### MemberCotroller.java - 회원정보수정 페이지에서 회원변경 인증키 생성 - 없을시 변경 불가 ```java @RequestMapping("/usr/member/modify") public String showModify(String memberModifyAuthKey) { if (Ut.empty(memberModifyAuthKey)) { return rq.historyBackJsOnView("memberModifyAuthKey(이)가 필요합니다."); } ResultData checkMemberModifyAuthKeyRd = memberService.checkMemberModifyAuthKey(rq.getLoginedMemberId(), memberModifyAuthKey); if (checkMemberModifyAuthKeyRd.isFail()) { return rq.historyBackJsOnView(checkMemberModifyAuthKeyRd.getMsg()); } return "usr/member/modify"; } ``` ### MemberService.java ```java public ResultData checkMemberModifyAuthKey(int actorId, String memberModifyAuthKey) { String saved = attrService.getValue("member", actorId, "extra", "memberModifyAuthKey"); if (!saved.equals(memberModifyAuthKey)) { return ResultData.from("F-1", "일치하지 않거나 만료되었습니다."); } return ResultData.from("S-1", "정상적인 코드입니다."); } ``` ### MemberCotroller.java - 인증키 재확인후 회원정보 변경 ```java @RequestMapping("/usr/member/doModify") @ResponseBody public String doModify(String memberModifyAuthKey, String loginPwReal, String name, String nickname, String email, String cellphoneNo) { if (Ut.empty(memberModifyAuthKey)) { return rq.historyBackJsOnView("memberModifyAuthKey(이)가 필요합니다."); } ResultData checkMemberModifyAuthKeyRd = memberService.checkMemberModifyAuthKey(rq.getLoginedMemberId(), memberModifyAuthKey); if (checkMemberModifyAuthKeyRd.isFail()) { return rq.historyBackJsOnView(checkMemberModifyAuthKeyRd.getMsg()); } if (Ut.empty(loginPwReal)) { loginPwReal = null; } if (Ut.empty(name)) { return rq.jsHistoryBack("name(을)를 입력해주세요."); } if (Ut.empty(nickname)) { return rq.jsHistoryBack("nickname(을)를 입력해주세요."); } if (Ut.empty(email)) { return rq.jsHistoryBack("email(을)를 입력해주세요."); } if (Ut.empty(cellphoneNo)) { return rq.jsHistoryBack("cellphoneNo(을)를 입력해주세요."); } ResultData modifyRd = memberService.modify(rq.getLoginedMemberId(), loginPwReal, name, nickname, email, cellphoneNo); return rq.jsReplace(modifyRd.getMsg(), "/"); } ``` ### MemberService.java ```java public ResultData modify(int id, String loginPw, String name, String nickname, String email, String cellphoneNo) { memberRepository.modify(id, loginPw, name, nickname, email, cellphoneNo); return ResultData.from("S-1", "회원정보가 수정되었습니다."); } ``` ### MemberRepository.java ```java @Update(""" """) void modify(int id, String loginPw, String name, String nickname, String email, String cellphoneNo); ``` ## 인터셉터를 통한 권한체크 ### NeedLoginInterceptor.java ```java @Component public class NeedLoginInterceptor implements HandlerInterceptor { private Rq rq; public NeedLoginInterceptor(Rq rq) { this.rq = rq; } @Override public boolean preHandle(HttpServletRequest req, HttpServletResponse resp, Object handler) throws Exception { if (!rq.isLogined()) { String afterLoginUri = rq.getEncodedCurrentUri(); rq.printReplaceJs("로그인 후 이용해주세요.", "../member/login?afterLoginUri=" + afterLoginUri); return false; } return HandlerInterceptor.super.preHandle(req, resp, handler); } } ``` - 글 작성, 수정, 삭제에 로그인 여부 확인 하는 인터셉터 - 로그인 후 이전 페이지로 이동 ### NeedLogoutInterceptor.java ```java @Component public class NeedLogoutInterceptor implements HandlerInterceptor { private Rq rq; public NeedLogoutInterceptor(Rq rq) { this.rq = rq; } @Override public boolean preHandle(HttpServletRequest req, HttpServletResponse resp, Object handler) throws Exception { if (rq.isLogined()) { rq.printHistoryBakJs("로그아웃 후 이용해주세요."); return false; } return HandlerInterceptor.super.preHandle(req, resp, handler); } } ``` - 로그인 상태에서 회원가입이나 중복 로그인 시도시 처리하는 인터셉터 ## 게시판 ![image](https://i.imgur.com/CcBDlNu.png) ```html

게시물 개수 : ${articlesCount}개

번호 작성날짜 수정날짜 조회 추천 작성자 제목

${article.id} ${article.forPrintType1RegDate} ${article.forPrintType1UpdateDate} ${article.hitCount} ${article.goodReactionPoint} ${article.extrawriterName} ${article.title}

1 ... ${i} ... ${pagesCount}

``` - 한 페이지 10개씩 나오게 페이징 기능 구현 - 게시물 검색 기능 구현 #### UsrArticleController.java ```java @RequestMapping("/usr/article/list") public String showList(Model model, @RequestParam(defaultValue = "1") int boardId, @RequestParam(defaultValue = "title,body") String searchKeywordTypeCode, @RequestParam(defaultValue = "") String searchKeyword, @RequestParam(defaultValue = "1") int page) { Board board = boardService.getBoardById(boardId); if (board == null) { return rq.historyBackJsOnView(Ut.f("%d번 게시판은 존재하지 않습니다.", boardId)); } int articlesCount = articleService.getArticlesCount(boardId, searchKeywordTypeCode, searchKeyword); int itemsCountInApage = 10; int pagesCount = (int) Math.ceil((double) articlesCount / itemsCountInApage); List < Article > articles = articleService.getForPrintArticles(rq.getLoginedMemberId(), boardId, searchKeywordTypeCode, searchKeyword, itemsCountInApage, page); model.addAttribute("boardId", boardId); model.addAttribute("page", page); model.addAttribute("board", board); model.addAttribute("searchKeywordTypeCode", searchKeywordTypeCode); model.addAttribute("searchKeyword", searchKeyword); model.addAttribute("pagesCount", pagesCount); model.addAttribute("articlesCount", articlesCount); model.addAttribute("articles", articles); return "usr/article/list"; } ``` - 게시판 별 게시물 갯수 추출(getArticlesCount) - 게시물 목록 (getForPrintArticles) #### ArticleService.java ```java public int getArticlesCount(int boardId) { return articleRepository.getArticlesCount(boardId); } ``` ```java public List < Article > getForPrintArticles(int actorId, int boardId, String searchKeywordTypeCode, String searchKeyword, int itemsCountInApage, int page) { int limitStart = (page - 1) * itemsCountInApage; int limitTake = itemsCountInApage; List < Article > articles = articleRepository.getForPrintArticles(boardId, limitStart, limitTake, searchKeywordTypeCode, searchKeyword); for (Article article: articles) { updateForPrintData(actorId, article); } return articles; } ``` - 로그인된 사용자가 삭제 및 수정가능한지 확인(updateForPrintData) ```java private void updateForPrintData(int actorId, Article article) { if (article == null) { return; } ResultData actorCanDeleteRd = actorCanDelete(actorId, article); article.setExtraactorCanDelete(actorCanDeleteRd.isSuccess()); ResultData actorCanModifyRd = actorCanModify(actorId, article); article.setExtraactorCanModify(actorCanModifyRd.isSuccess()); } public ResultData actorCanDelete(int actor, Article article) { if (article == null) { return ResultData.from("F-1", "게시물이 존재하지 않습니다."); } if (article.getMemberId() != actor) { return ResultData.from("F-2", "권한이 없습니다."); } return ResultData.from("S-1", "게시물 삭제가 가능합니다."); } public ResultData actorCanModify(int actor, Article article) { if (article == null) { return ResultData.from("F-1", "게시물이 존재하지 않습니다."); } if (article.getMemberId() != actor) { return ResultData.from("F-2", "권한이 없습니다."); } return ResultData.from("S-1", "게시물 수정이 가능합니다."); } ``` #### ArticleRepository.java ```java @Select(""" """) public List
getForPrintArticles(int boardId, int limitStart, int limitTake, String searchKeywordTypeCode, String searchKeyword); ``` ## 게시물 상세페이지 ![image](https://i.imgur.com/JCPydRO.png) - 댓글, 좋아요, 조회수 기능 구현 - localStorage 사용으로 같은 회원 조회수 중복 방지 - 조회수 ajax사용 #### Detail.jsp ```javascript ``` ```html

번호
${article.id}

작성날짜 ${article.forPrintType2RegDate}

수정날짜 ${article.forPrintType2UpdateDate}

작성자 ${article.extrawriterName}

조회 ${article.hitCount}

추천
${article.goodReactionPoint} 좋아요 ? 싫어요 ? 좋아요 ? 싫어요 ? 좋아요 ? 싫어요 ?

제목 ${article.title}

내용 ${article.forPrintBody}

게시물 수정 게시물 삭제

``` - 로그인한 회원이 작성자일 경우 수정, 삭제 버튼 활성화 #### UsrArticleController.java ```java @RequestMapping("/usr/article/detail") public String showDetail(Model model, int id) { Article article = articleService.getForPrintArticle(rq.getLoginedMemberId(), id); model.addAttribute("article", article); List < Reply > replies = replyService.getForPrintReplies(rq.getLoginedMember(), "article", id); model.addAttribute("replies", replies); ResultData actorCanMakeReactionPointRd = reactionPointService.actorCanMakeReactionPoint(rq.getLoginedMemberId(), "article", id); model.addAttribute("actorCanMakeReaction", actorCanMakeReactionPointRd.isSuccess()); if (actorCanMakeReactionPointRd.getResultCode().equals("F-2")) { int sumReactionPointByMemberId = (int) actorCanMakeReactionPointRd.getData1(); if (sumReactionPointByMemberId > 0) { model.addAttribute("actorCanCancelGoodReaction", true); } else { model.addAttribute("actorCanCancelBadReaction", true); } } return "usr/article/detail"; } ``` - article정보를 model에 추가 #### ArticleService.java ```java public Article getForPrintArticle(int actorId, int id) { Article article = articleRepository.getForPrintArticle(id); updateForPrintData(actorId, article); return article; } ``` #### ArticleRepository.java ```java @Select(""" """) public Article getForPrintArticle(@Param("id") int id); ``` ### 조회수 - ajax 기능을 이용해 Detail.jsp -> MemberCotroller로 이동 #### MemberController.java ```java @RequestMapping("/usr/article/doIncreaseHitCount") @ResponseBody public ResultData < Integer > doIncreaseHitCount(int id) { ResultData < Integer > increaseHitCountRd = articleService.increaseHitCount(id); if (increaseHitCountRd.isFail()) { return increaseHitCountRd; } // 조회수를 불러오는 함수 ResultData < Integer > rd = ResultData.newData(increaseHitCountRd, "hitCount", articleService.getArticleHitCount(id)); rd.setData2("id", id); return rd; } ``` #### MemberService.java ```java public ResultData < Integer > increaseHitCount(int id) { int affectedRowsCount = articleRepository.increaseHitCount(id); if (affectedRowsCount == 0) { return ResultData.from("F-1", "해당 게시물이 존재하지 않습니다.", "affectedRowsCount", affectedRowsCount); } return ResultData.from("S-1", "조회수가 증가었습니다.", "affectedRowsCount", affectedRowsCount); } ``` #### MemberRepository.java ```java @Update(""" """) public int increaseHitCount(int id); ``` ### 추천/비추천 ![image](https://i.imgur.com/l0g8bqG.png) ![image](https://i.imgur.com/GeiXJDY.png) #### ReactionPointService.java - 추천/비추천 여부 확인 ```java public ResultData actorCanMakeReactionPoint(int actorId, String relTypeCode, int relId) { if (actorId == 0) { return ResultData.from("F-1", "로그인 후 이용해주세요."); } int sumReactionPointByMemberId = reactionPointRepository.getSumReactionPointByMemberId(relTypeCode, relId, actorId); if (sumReactionPointByMemberId != 0) { return ResultData.from("F-2", "리액션이 불가능합니다.", "sumReactionPointByMemberId", sumReactionPointByMemberId); } return ResultData.from("S-1", "리액션이 가능합니다.", "sumReactionPointByMemberId", sumReactionPointByMemberId); } ``` ```java @Select(""" """) int getSumReactionPointByMemberId(String relTypeCode, int relId, int memberId); ``` #### ReactionPointController.java ```java @RequestMapping("/usr/reactionPoint/doGoodReaction") @ResponseBody String doGoodReaction(String relTypeCode, int relId, String replaceUri) { ResultData actorCanMakeReactionPointRd = reactionPointService .actorCanMakeReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); if (actorCanMakeReactionPointRd.isFail()) { return rq.jsHistoryBack(actorCanMakeReactionPointRd.getMsg()); } ResultData addGoodReactionPointRd = reactionPointService.addGoodReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); return rq.jsReplace(addGoodReactionPointRd.getMsg(), replaceUri); } @RequestMapping("/usr/reactionPoint/doBadReaction") @ResponseBody String doBadReaction(String relTypeCode, int relId, String replaceUri) { ResultData actorCanMakeReactionPointRd = reactionPointService .actorCanMakeReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); if (actorCanMakeReactionPointRd.isFail()) { return rq.jsHistoryBack(actorCanMakeReactionPointRd.getMsg()); } ResultData addBadReactionPointRd = reactionPointService.addBadReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); return rq.jsReplace(addBadReactionPointRd.getMsg(), replaceUri); } @RequestMapping("/usr/reactionPoint/doCancelGoodReaction") @ResponseBody String doCancelGoodReaction(String relTypeCode, int relId, String replaceUri) { ResultData actorCanMakeReactionPointRd = reactionPointService .actorCanMakeReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); if (actorCanMakeReactionPointRd.isSuccess()) { return rq.jsHistoryBack("이미 취소되었습니다."); } ResultData deleteGoodReactionPointRd = reactionPointService.deleteGoodReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); return rq.jsReplace(deleteGoodReactionPointRd.getMsg(), replaceUri); } @RequestMapping("/usr/reactionPoint/doCancelBadReaction") @ResponseBody String doCancelBadReaction(String relTypeCode, int relId, String replaceUri) { ResultData actorCanMakeReactionPointRd = reactionPointService .actorCanMakeReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); if (actorCanMakeReactionPointRd.isSuccess()) { return rq.jsHistoryBack("이미 취소되었습니다."); } ResultData deleteBadReactionPointRd = reactionPointService.deleteBadReactionPoint(rq.getLoginedMemberId(), relTypeCode, relId); return rq.jsReplace(deleteBadReactionPointRd.getMsg(), replaceUri); } ``` #### ReactionPointService.java ```java public ResultData addGoodReactionPoint(int actorId, String relTypeCode, int relId) { reactionPointRepository.addGoodReactionPoint(actorId, relTypeCode, relId); switch (relTypeCode) { case "article": articleService.increaseGoodReactionPoint(relId); break; } return ResultData.from("S-1", "좋아요 처리 되었습니다."); } public ResultData addBadReactionPoint(int actorId, String relTypeCode, int relId) { reactionPointRepository.addBadReactionPoint(actorId, relTypeCode, relId); switch (relTypeCode) { case "article": articleService.increaseBadReactionPoint(relId); break; } return ResultData.from("S-1", "싫어요 처리 되었습니다."); } public ResultData deleteGoodReactionPoint(int actorId, String relTypeCode, int relId) { reactionPointRepository.deleteReactionPoint(actorId, relTypeCode, relId); switch (relTypeCode) { case "article": articleService.decreaseGoodReactionPoint(relId); break; } return ResultData.from("S-1", "좋아요 취소처리 되었습니다."); } public ResultData deleteBadReactionPoint(int actorId, String relTypeCode, int relId) { reactionPointRepository.deleteReactionPoint(actorId, relTypeCode, relId); switch (relTypeCode) { case "article": articleService.decreaseBadReactionPoint(relId); break; } return ResultData.from("S-1", "싫어요 취소처리 되었습니다."); } ``` #### ReactionPointRepository.java ```java @Select(""" """) int getSumReactionPointByMemberId(String relTypeCode, int relId, int memberId); @Insert(""" INSERT INTO reactionPoint SET regDate = NOW(), updateDate = NOW(), relTypeCode = #{relTypeCode}, relId = #{relId}, memberId = #{memberId}, `point` = 1 """) void addGoodReactionPoint(int memberId, String relTypeCode, int relId); @Insert(""" INSERT INTO reactionPoint SET regDate = NOW(), updateDate = NOW(), relTypeCode = #{relTypeCode}, relId = #{relId}, memberId = #{memberId}, `point` = -1 """) void addBadReactionPoint(int memberId, String relTypeCode, int relId); @Delete(""" DELETE FROM reactionPoint WHERE relTypeCode = #{relTypeCode} AND relId = #{relId} AND memberId = #{memberId} """) void deleteReactionPoint(int memberId, String relTypeCode, int relId); ``` ## 댓글 - 로그인 후 작성 가능 ![image](https://i.imgur.com/vPlL2cH.png) ![image](https://i.imgur.com/d88mUoK.png) #### Detail.jsp(댓글부분) ```javascript ``` ```html

댓글 작성

작성자 ${rq.loginedMember.nickname}

내용

댓글작성

로그인 후 이용해주세요.

댓글 리스트(${replies.size()})

번호 작성날짜 수정날짜 추천 작성자 비고 내용

${reply.id} ${reply.forPrintType1RegDate} ${reply.forPrintType1UpdateDate} ${reply.goodReactionPoint} ${reply.extrawriterName} 수정 삭제 ${reply.forPrintBody}

``` #### UsrReplyService.java ```java public List < Reply > getForPrintReplies(Member actor, String relTypeCode, int relId) { List < Reply > replies = replyRepository.getForPrintReplies(relTypeCode, relId); for (Reply reply: replies) { updateForPrintData(actor, reply); } return replies; } ``` #### UsrReplyRepository.java ```java @Select(""" SELECT R.*, M.nickname AS extrawriterName FROM reply AS R LEFT JOIN `member` AS M ON R.memberId = M.id WHERE R.relTypeCode = #{relTypeCode} AND R.relId = #{relId} ORDER BY R.id DESC """) List getForPrintReplies(String relTypeCode, int relId); ``` ### 댓글 작성 #### UsrReplyController.java ```java @RequestMapping("/usr/reply/doWrite") @ResponseBody public String doWrite(String relTypeCode, int relId, String body, String replaceUri) { if (Ut.empty(relTypeCode)) { return rq.jsHistoryBack("relTypeCode(을)를 입력해주세요."); } if (Ut.empty(relId)) { return rq.jsHistoryBack("relId(을)를 입력해주세요."); } if (Ut.empty(body)) { return rq.jsHistoryBack("body(을)를 입력해주세요."); } ResultData < Integer > writeReplyRd = replyService.writeReply(rq.getLoginedMemberId(), relTypeCode, relId, body); int id = writeReplyRd.getData1(); if (Ut.empty(replaceUri)) { switch (relTypeCode) { case "article": replaceUri = Ut.f("../article/detail?id=%d", relId); break; } } return rq.jsReplace(writeReplyRd.getMsg(), replaceUri); } ``` #### ReplyService.java ```java public ResultData < Integer > writeReply(int actorId, String relTypeCode, int relId, String body) { replyRepository.writeReply(actorId, relTypeCode, relId, body); int id = replyRepository.getLastInsertId(); return ResultData.from("S-1", Ut.f("%d번 댓글이 생성되었습니다.", id), "id", id); } ``` #### ReplyReposity.java ```java @Insert(""" INSERT INTO reply SET regDate = NOW(), updateDate = NOW(), memberId = #{memberId}, relTypeCode = #{relTypeCode}, relId = #{relId}, body = #{body} """) void writeReply(int memberId, String relTypeCode, int relId, String body); ``` ### 댓글수정 ![image](https://i.imgur.com/nLTz5ZP.png) #### UsrReplyController.java ```java @RequestMapping("/usr/reply/modify") public String modify(int id, String replaceUri, Model model) { if (Ut.empty(id)) { return rq.historyBackJsOnView("id(을)를 입력해주세요."); } Reply reply = replyService.getForPrintReply(rq.getLoginedMember(), id); if (reply == null) { return rq.historyBackJsOnView(Ut.f("%d번 댓글은 존재하지 않습니다.", id)); } if (reply.isExtraactorCanModify() == false) { return rq.historyBackJsOnView(Ut.f("%d번 댓글을 수정할 권한이 없습니다.", id)); } String relDataTitle = null; switch (reply.getRelTypeCode()) { case "article": Article article = articleService.getArticle(reply.getRelId()); relDataTitle = article.getTitle(); } model.addAttribute("relDataTitle", relDataTitle); model.addAttribute("reply", reply); return "usr/reply/modify"; } ``` ```java @RequestMapping("/usr/reply/doModify") @ResponseBody public String doModify(int id, String body, String replaceUri) { if (Ut.empty(id)) { return rq.jsHistoryBack("id(을)를 입력해주세요."); } Reply reply = replyService.getForPrintReply(rq.getLoginedMember(), id); if (reply == null) { return rq.jsHistoryBack(Ut.f("%d번 댓글은 존재하지 않습니다.", id)); } if (reply.isExtraactorCanModify() == false) { return rq.jsHistoryBack(Ut.f("%d번 댓글을 수정할 권환이 업습니다.", id)); } if (Ut.empty(body)) { return rq.jsHistoryBack("body(을)를 입력해주세요."); } ResultData modifyReplyRd = replyService.modifyReplyRd(id, body); if (Ut.empty(replaceUri)) { switch (reply.getRelTypeCode()) { case "article": replaceUri = Ut.f("../article/detail?id=%d", reply.getRelId()); break; } } return rq.jsReplace(modifyReplyRd.getMsg(), replaceUri); } ``` #### UsrReplyService.java ```java public ResultData modifyReplyRd(int id, String body) { replyRepository.modifyReply(id, body); return ResultData.from("S-1", Ut.f("%d번 댓글을 수정하였습니다.", id)); } ``` #### UsrReplyRepository.java ```java @Update(""" UPDATE reply SET updateDate = NOW(), `body` = #{body} WHERE id = #{id} """) void modifyReply(int id, String body); ``` ### 댓글삭제 ![image](https://i.imgur.com/TawZkLa.png) #### UsrReplyController.java ```java @RequestMapping("/usr/reply/doDelete") @ResponseBody public String doDelete(int id, String replaceUri) { if (Ut.empty(id)) { return rq.jsHistoryBack("id(을)를 입력해주세요."); } Reply reply = replyService.getForPrintReply(rq.getLoginedMember(), id); if (reply == null) { return rq.jsHistoryBack(Ut.f("%d번 댓글은 존재하지 않습니다.", id)); } if (reply.isExtraactorCanDelete() == false) { return rq.jsHistoryBack(Ut.f("%d번 댓글을 삭제할 권한이 없습니다.", id)); } ResultData deleteReplyRd = replyService.deleteReply(id); if (Ut.empty(replaceUri)) { switch (reply.getRelTypeCode()) { case "article": replaceUri = Ut.f("../article/detail?id=%d", reply.getRelId()); break; } } return rq.jsReplace(deleteReplyRd.getMsg(), replaceUri); } ``` #### ReplyService.java ```java public ResultData deleteReply(int id) { replyRepository.deleteReply(id); return ResultData.from("S-1", Ut.f("%d번 댓글을 삭제하였습니다.", id)); } ``` #### ReplyRepository.java ```java @Delete(""" DELETE FROM reply WHERE id = #{id} """) void deleteReply(int id); ``` ## 게시물 작성 ### UsrArticleController.java ```java // /usr/article/write 요청이 들어오면 사용자에게 write.jsp로 화면을 보여준다. @RequestMapping("/usr/article/write") public String showWrite(HttpServletRequest req, Model model) { return "usr/article/write"; } ``` ![image](https://i.imgur.com/PYJTPX8.png) ```html

작성자 ${rq.loginedMember.nickname}

게시판

제목

내용

작성

``` - 작성버튼을 누르면 Controller의 doWrite함수로 이동. ### UsrArticleController.java ```java @RequestMapping("/usr/article/doWrite") @ResponseBody public String doWrite(@RequestParam(defaultValue = "0") int boardId, String title, String body, String replaceUri) { if (Ut.empty(title)) { return rq.jsHistoryBack("title(을)를 입력해주세요."); } if (Ut.empty(body)) { return rq.jsHistoryBack("body(을)를 입력해주세요."); } if (boardId == 0) { return rq.jsHistoryBack("boardId(을)를 선택해주세요."); } ResultData < Integer > writeArticleRd = articleService.writeArticle(rq.getLoginedMemberId(), boardId, title, body); int id = writeArticleRd.getData1(); if (Ut.empty(replaceUri)) { replaceUri = Ut.f("../article/detail?id=%d", id); } return rq.jsReplace(Ut.f("%d번 글이 생성되었습니다.", id), replaceUri); } ``` ### ArticleService.java ```java public ResultData < Integer > writeArticle(int memberId, int boardId, String title, String body) { articleRepository.writeArticle(memberId, boardId, title, body); int id = articleRepository.getLastInsertId(); return ResultData.from("S-1", Ut.f("%d번 게시물이 생성되었습니다.", id), "id", id); } ``` ### ArticleRepository.java ```java public void writeArticle(@Param("memberId") int memberId, @Param("boardId") int boardId, @Param("title") String title, @Param("body") String body); ``` - ArticleRepository.xml로 이동 ### ArticleRepository.xml ```xml INSERT INTO article SET regDate = NOW(), updateDate = NOW(), boardId = #{boardId}, memberId = #{memberId}, title = #{title}, `body` = #{body} ``` ## 게시물 삭제 - 상세보기 페이지에서 게시물 삭제를 누르게되면 사용자에게 한번더 물어보기위해 알림을 띄어준다. ![!이미지](https://i.imgur.com/YoRvPZ9.png) - 확인을 누르면 /article/doDelete로 이동 #### UsrArticleController.java ```java @RequestMapping("/usr/article/doDelete") @ResponseBody public String doDelete(int id) { Article article = articleService.getForPrintArticle(rq.getLoginedMemberId(), id); if (article == null) { return rq.jsHistoryBack(Ut.f("%d번 게시물이 존재하지 않습니다.", id)); } if (article.getMemberId() != rq.getLoginedMemberId()) { return rq.jsHistoryBack("권한이 없습니다."); } articleService.deleteArticle(id); return rq.jsReplace(Ut.f("%d번 게시물을 삭제하였습니다.", id), "../article/list"); } ``` - 해당 게시글의 정보를 가져옴. (getForPrintArticle) - 가져온 정보로 게시글의 존재 유무를 확인. - 현재 로그인한 멤버의 아이디와 해당 게시글의 작성자 아이디가 같은지 확인. #### ArticleService.java ```java public void deleteArticle(int id) { articleRepository.deleteArticle(id); } ``` #### ArticleRepository.java ```java public void deleteArticle(@Param("id") int id); ``` - ArticleRepository.xml로 연결 #### ArticleRepository.xml ```xml DELETE FROM article WHERE id = #{id} ``` ## 게시물 수정 - 상세보기페이지에서 게시물 수정을 누르면 ```java @RequestMapping("/usr/article/modify") public String showModify(Model model, int id) { Article article = articleService.getForPrintArticle(rq.getLoginedMemberId(), id); if (article == null) { return rq.historyBackJsOnView(Ut.f("%d번 게시물이 존재하지 않습니다.", id)); } ResultData actorCanModifyRd = articleService.actorCanModify(rq.getLoginedMemberId(), article); if (actorCanModifyRd.isFail()) { return rq.historyBackJsOnView(actorCanModifyRd.getMsg()); } model.addAttribute("article", article); return "usr/article/modify"; } ``` - 게시물 유무 확인 (getForPrintArticle) - 수정 권한 확인(actorCanModify) - model에 해당 게시물의 값을 추가해준다. #### src/main/webapp/WEB-INF/jsp/usr/article/modify.jsp ![!이미지](https://i.imgur.com/msNmJV9.png) ```html

번호
${article.id}

작성날짜 ${article.regDateForPrint}

수정날짜 ${article.updateDateForPrint}

작성자 ${article.extrawriterName}

제목

내용 ${article.body}

수정

게시물 상세페이지 게시물 수정 게시물 삭제

``` - 기존에 작성했던 게시글의 내용을 그대로 보여준다. - 내용과 제목을 수정할 수 있다. - 수정 버튼을 누르면 doModify함수로 이동한다. #### UsrArticleController.java ```java @RequestMapping("/usr/article/doModify") @ResponseBody public String doModify(int id, String title, String body) { Article article = articleService.getForPrintArticle(rq.getLoginedMemberId(), id); if (article == null) { return rq.jsHistoryBack(Ut.f("%d번 게시물이 존재하지 않습니다.", id)); } ResultData actorCanModifyRd = articleService.actorCanModify(rq.getLoginedMemberId(), article); if (actorCanModifyRd.isFail()) { return rq.jsHistoryBack(actorCanModifyRd.getMsg()); } articleService.modifyArticle(id, title, body); return rq.jsReplace(Ut.f("%d번 글이 수정되었습니다.", id), Ut.f("../article/detail?id=%d", id)); } ``` #### ArticleService.java ```java public ResultData actorCanModify(int actor, Article article) { if (article == null) { return ResultData.from("F-1", "게시물이 존재하지 않습니다."); } if (article.getMemberId() != actor) { return ResultData.from("F-2", "권한이 없습니다."); } return ResultData.from("S-1", "게시물 수정이 가능합니다."); } ``` #### ArticleRepository.java ```java public void modifyArticle(@Param("id") int id, @Param("title") String title, @Param("body") String body); ``` #### ArticleRepository.xml ```xml UPDATE article title = #{title}, `body` = #{body}, updateDate = NOW() WHERE id = #{id} ``` ## ? 테스트 내역 ### 회원가입 - 테스트통과 : 통과 - 테스트날짜 : 2021-10-01 - 테스트수행인 : 조태중 ### 로그인 - 테스트통과 : 통과 - 테스트날짜 : 2021-10-01 - 테스트수행인 : 조태중 ### 회원정보수정 - 테스트통과 : 통과 - 테스트날짜 : 2021-10-01 - 테스트수행인 : 조태중 ### 비밀번호 찾기시 임시패스워드가 이메일로 발송 - 테스트통과 : 통과 - 테스트날짜 : 2021-10-01 - 테스트수행인 : 조태중 ### 회원가입시 로그인아이디 중복찾기가 ajax로 작동 - 테스트통과 : 통과 - 테스트날짜 : 2021-10-01 - 테스트수행인 : 조태중 ### 게시물 검색 - 테스트통과 : 통과 - 테스트날짜 : 2021-10-01 - 테스트수행인 : 조태중 # 이것으로 마치겠습니다. 감사합니다.

번호	${article.id}
작성날짜	${article.forPrintType2RegDate}
수정날짜	${article.forPrintType2UpdateDate}
작성자	${article.extra__writerName}
조회	${article.hitCount}
추천	${article.goodReactionPoint} 좋아요 ? 싫어요 ? 좋아요 ? 싫어요 ? 좋아요 ? 싫어요 ?
제목	${article.title}
내용	${article.forPrintBody}

작성자	${rq.loginedMember.nickname}
게시판
제목
내용
작성