$$config title: 지금이약 기술서 keywords: - IT - 영양제 쇼핑몰 $$ ## 최종 프로젝트 지금이약 기술서 > 지금이약은 영양제 구매 사이트 입니다. > 건강기능식품을 구매할 수 있습니다. > 구매자의 건강/생활습관/취향을 설문하여 커스텀 영양제를 구매할 수 있습니다. > 진행 기간: 2023.08.01 \~ 2023.08.29

프로젝트 산출물

* [수행 계획서](https://docs.google.com/document/d/1Xz1rPARy-KCWPvELtaEQ6fU-WFUDG2_f-NKiSH0bdtU/edit?usp=sharing) * [요구사항 정의서](https://docs.google.com/spreadsheets/d/1pszMao77zcYlpvppYXBi7X0kyO53bmmI/edit?usp=sharing&ouid=112014038183968571293&rtpof=true&sd=true) * [사용자 화면 정의서(UI/UX)](https://docs.google.com/presentation/d/1WsP8y-RnrM5vKQzKNtHQlKCi1cU8qIfLbdoCPZJfqhE/edit?usp=sharing) * [DB 설계 자료](https://slog.gg/p/12867)

발표 영상

* [발표](https://youtu.be/KQxIbo0OAP0) $$youtube KQxIbo0OAP0 $$ ## ? 팀원 전세린(조장) 김상엽 김호현
## 목차 * [? 배포 링크](#-%EB%B0%B0%ED%8F%AC-%EB%A7%81%ED%81%AC) * [? 팀 규칙](#-%ED%8C%80-%EA%B7%9C%EC%B9%99) * [브랜치 전략](#%EB%B8%8C%EB%9E%9C%EC%B9%98-%EC%A0%84%EB%9E%B5) * [트렐로](#%ED%8A%B8%EB%A0%90%EB%A1%9C) * [? 주요 폴더 구조](#-%EC%A3%BC%EC%9A%94-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0) * [?️ 기술 스택](#%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%83%9D) * [? DB 설계 자료](#-DB-%EC%84%A4%EA%B3%84-%EC%9E%90%EB%A3%8C) * [? 서비스 소개](#-%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%86%8C%EA%B0%9C) * [? 페이지](#-%ED%8E%98%EC%9D%B4%EC%A7%80) * [? 기능 구현](#-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84) ## ? 링크 [지금이약 사이트 링크](https://jigumiyak.com/) [지금이약 Github 링크](https://github.com/cojar/jigumiyak) [지금이약 Trello 링크](https://trello.com/b/GzcTHzmu/2%EC%A1%B0-%EC%A7%80%EA%B8%88%EC%9D%B4%EC%95%BD)
## ? 팀 규칙 ### 브랜치 전략 * upstream에는 main 브랜치만 존재 * 브랜치명: `feature-cl-번호` * ex: `feature-cl-01` * dev 브랜치에서 브랜치 생성 및 작업 후 `origin:dev` 로 PR * 코드리뷰 받고 승인 받으면 `origin:dev`에 merge * dev 브랜치에서 문제없이 실행되면 `origin:main`에 merge ### 트렐로 ![img](https://i.imgur.com/xsKuMwM.png) ### 트렐로 ![img](https://i.imgur.com/iV59GIv.jpg) ## ? 주요 폴더 구조 ``` ?jigumiyak ├── ?admin ├── ?board ├── ?cart ├── ?chat ├── ?faq ├── ?file ├── ?inquiry ├── ?notice ├── ?nutrient ├── ?product ├── ?purchase ├── ?security ├── ?survey └── ?user ?resources ├── ?static ├── ?templates └── ?application.properties ``` ## ?️ 기술 스택

## ? DB 설계 자료 ### ERD ![img](https://i.imgur.com/GDVpCQt.jpg)
## ? 서비스 소개 ### 담당한 파트 - 1:1 채팅 상담/ 문의하기/ 관리자-문의/ 커뮤니티/ 관리자-커뮤니티 --- ### ? 1:1 채팅 상담 ##### \- 웹소켓을 활용한 실시간 채팅 상담 구현 ##### ㄴ 약사가 온라인일 때 상담 가능 | **1:1 채팅 상담** | | --------- | | ![채팅 상담](https://i.imgur.com/Nj5Ij7Z.png) | ##### \- 채팅 화면구성 ```html // chat.html

실시간 채팅

상담 시간 : 9am ~ 6pm

약사 MASTER

offline

``` ##### \- WebSocket 설정 ##### ㄴ WebSocket을 활성화하고 핸들러 등록 ##### ㄴ chatHandler를 "/ws/chat" 경로에 등록, WebSocket 연결을 위한 엔드포인트 ##### ㄴ chatHandler로 웹소켓 서버와 클라이언트 사이에서 통신 관리 및 처리 ```java // WebSocketConfig.java @Configuration @EnableWebSocket @RequiredArgsConstructor public class WebSocketConfig implements WebSocketConfigurer { @Autowired private final ChatHandler chatHandler; @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(chatHandler, "/ws/chat").setAllowedOrigins("*") .addInterceptors(new HttpSessionHandshakeInterceptor()); } } ``` ```java // ChatHandler.java @Component @Log4j2 public class ChatHandler extends TextWebSocketHandler { private static List onlineList = new ArrayList<>(); private static List sessionList = new ArrayList<>(); Map userSession = new HashMap<>(); ObjectMapper json = new ObjectMapper(); // message @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { // websocket으로 수신한 텍스트 메시지 처리 // 메세지 데이터 저장 Map dataMap = new HashMap<>(); // master status String masterStatus = null; if (userSession.containsKey("master")) { masterStatus = "online"; } else { masterStatus = "offline"; } // sending time LocalDateTime currentTime = LocalDateTime.now(); String time = currentTime.format(DateTimeFormatter.ofPattern("hh:mm a, E")); // message data 메시지 보낸 아이디와 메시지 내용을 변수에 저장 String senderId = (String) session.getAttributes().get("sessionId"); String payload = message.getPayload(); System.out.println("payload >>> " + payload); // json문자열을 dataMap으로 변환하고 추가 데이터 저장 dataMap = jsonToMap(payload); dataMap.put("senderId", senderId); dataMap.put("time", time); dataMap.put("masterStatus", masterStatus); dataMap.put("onlineList", onlineList); //수신자 id String receiverId = (String) dataMap.get("receiverId"); log.info("final dataMap >>> " + dataMap); // send a message System.out.println("receiver session >>> " + userSession.get(receiverId)); String msg = json.writeValueAsString(dataMap); if (userSession.get(receiverId) != null) { userSession.get(receiverId).sendMessage(new TextMessage(msg)); // send to receiver } // send a message myself if(!senderId.equals(receiverId)) { dataMap.put("receiverId", senderId); msg = json.writeValueAsString(dataMap); session.sendMessage(new TextMessage(msg)); // send to myself } } // 웹소켓 연결되고 사용자가 서버 연결되었을 때 메세지 출력 @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { // 세션 목록에 저장 String senderId = (String) session.getAttributes().get("sessionId"); sessionList.add(session); log.info("sessionId >>> " + senderId); onlineList.add(senderId); userSession.put(senderId, session); // 마스터 접속 시 모든 사용자에 메시지 전송 if (senderId.equals("master")) { TextMessage msg = new TextMessage(senderId + " 님이 접속했습니다."); sendToAll(msg, senderId); } else { // 일반 사용자인 경우 마스터에게 접속 메시지 전송 Map data = new HashMap<>(); data.put("message", senderId + "님이 접속하셨습니다."); data.put("receiverId", "master"); data.put("newOne", senderId); // 메시지를 json 형식으로 바꾸고 마스터에 전송 TextMessage msgToMaster = new TextMessage(json.writeValueAsString(data)); handleMessage(session, msgToMaster); } log.info(session + " client connected"); } // 연결 종료 @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { // 세션목록에서 제거하고 온라인 사용자 목록, 사용자 세션에서 제거 String senderId = (String) session.getAttributes().get("sessionId"); sessionList.remove(session); onlineList.remove(senderId); userSession.remove(senderId); // 마스터 퇴장시 모든 사용자에게 메시지 전송 if (senderId.equals("master")) { TextMessage msg = new TextMessage(senderId + " 님이 퇴장했습니다."); sendToAll(msg, senderId); } else { // 일반 사용자 퇴장시 마스터에게 전송 Map data = new HashMap<>(); data.put("message", senderId + "님이 퇴장하셨습니다."); data.put("receiverId", "master"); data.put("outOne", senderId ); TextMessage msg = new TextMessage(json.writeValueAsString(data)); handleMessage(session, msg); } log.info(session + "client disconnected"); } public void getOnlineList() throws IOException { } // json 문자열을 map형식으로 변환 public Map jsonToMap(String jsonString) throws JsonMappingException, JsonProcessingException { Map map = new HashMap<>(); // ObjectMapper를 사용하여 JSON 문자열을 Map으로 변환 ObjectMapper jmapper = new ObjectMapper(); map = jmapper.readValue(jsonString, new TypeReference>() { }); return map; } // 모든 사용자에게 메시지 전송 public void sendToAll(TextMessage message, String senderId) throws Exception { // map 생성 Map dataMap = new HashMap<>(); // master status String masterStatus = null; if (userSession.containsKey("master")) { masterStatus = "online"; } else { masterStatus = "offline"; } // sending time LocalDateTime currentTime = LocalDateTime.now(); String time = currentTime.format(DateTimeFormatter.ofPattern("hh:mm a E")); // message data String payload = message.getPayload(); log.info("payload >>> " + payload); dataMap.put("message", message.getPayload()); dataMap.put("senderId", senderId); dataMap.put("time", time); dataMap.put("masterStatus", masterStatus); dataMap.put("onlineList", onlineList); // user online status dataMap.put("newOne", "master"); String receiverId = (String) dataMap.get("receiverId"); log.info("final dataMap >>> " + dataMap); // send a message log.info("receiver session >>> " + userSession.get(receiverId)); // 모든 사용자에게 전송 for (String r : userSession.keySet()) { dataMap.put("receiverId", r); String msg = json.writeValueAsString(dataMap); userSession.get(r).sendMessage(new TextMessage(msg)); } } // 온라인 사용자 목록을 클라이언트에 전송 public void sendOnlineList(WebSocketSession session) throws IOException { Map map = new HashMap<>(); // 온라인 사용자 목록 저장 map.put("onlineList", onlineList); String list = json.writeValueAsString(map); log.info("map >>> " + map); session.sendMessage(new TextMessage(list)); } } ``` | **미로그인 시 로그인 페이지 이동** | | ----------------- | | ![로그인](https://i.imgur.com/01nKzKv.png) | ##### \- 채팅 입장시 로그인 검증 및 아이디 확인 ##### ㄴ SpringSecurity의 PreAuthorize로 메소드 실행 전 검사 ```java // ChatController.java @PreAuthorize("isAuthenticated()") @GetMapping("/chat") public void getChat(HttpServletRequest request, @RequestParam String id) { HttpSession session = request.getSession(); System.out.println("chat param id 값 출력 : " + id); if (id.equals("guest")) { String name = "guest" + session.toString().substring(session.toString().indexOf("@")); session.setAttribute("sessionId", name); } else if(id.equals("master")) { String name = "master"; session.setAttribute("sessionId", name); } log.info("@ChatController, getChat()"); } ``` *** ### ? 문의하기 | **문의하기 화면** | | ------- | | ![문의](https://i.imgur.com/O8CpxB6.png) | | **문의 작성** | | ----- | | ![문의 작성](https://i.imgur.com/dcpQied.png) | ##### \- Spring Boot Validation을 통한 작성 입력값 검증 ##### ㄴ 필수 입력 항목과 선택 입력 항목 구분 ##### ㄴ 필수 입력란 공백시 에러 메세지 출력 ```java @Getter @Setter public class InquiryForm { @NotEmpty(message="제목 필수항목") private String subject; @NotEmpty(message="내용 필수항목") private String content; @NotEmpty(message="카테고리 필수항목") private String category; private boolean email; private boolean state; private MultipartFile img; } ``` ```html // inquiry_form.html // 입력값 검증 에러 발생 시 에러 메시지 출력

// form_error.html

``` ##### \- 필수 입력란 전체 입력 시 등록 버튼 활성화 ```html $(document).ready(function() { var saveButton = $("#saveButton"); var categoryInput = $("#category"); var subjectInput = $("input[name='subject']"); var contentInput = $("textarea[name='content']"); function updateSaveButtonColor() { if (categoryInput.val() && subjectInput.val() && contentInput.val()) { saveButton.css("background", "#E9B384"); // Active color } else { saveButton.css("background", "#C0C0C0"); // Inactive color } } categoryInput.on("input", updateSaveButtonColor); subjectInput.on("input", updateSaveButtonColor); contentInput.on("input", updateSaveButtonColor); $(".cancel").on("click", function() { var confirmed = window.confirm("문의 작성을 취소하시겠습니까?"); if (confirmed) { window.location.href = "/inquiry"; } }); // Initial button color update updateSaveButtonColor(); }); ``` ##### \- 이미지 첨부 ##### ㄴ 첨부 이미지 경로 저장 ##### ㄴ SpringSecurity의 PreAuthorize로 create 메소드 실행 전 검사 ```java //InquiryController.java @PreAuthorize("isAuthenticated()") @GetMapping("/create") public String inquiryCreate (InquiryForm inquiryForm) { return "inquiry/inquiry_form"; } @PreAuthorize("isAuthenticated()") @PostMapping("/create") public String inquiryCreate (@Valid InquiryForm inquiryForm, BindingResult bindingResult, Principal principal) throws IOException { if (bindingResult.hasErrors()) { return "inquiry/inquiry_form"; } SiteUser inquirer = this.userService.getUserByLoginId(principal.getName()); this.inquiryService.create(inquiryForm.getSubject(), inquiryForm.getContent(), inquiryForm.isEmail(), inquiryForm.getCategory(), inquirer, inquiryForm.getImg()); return "inquiry/inquiry_success"; } //InquiryService.java public Inquiry create (String subject, String content, boolean email, String category, SiteUser inquirer, MultipartFile file) throws IOException { GenFile img = null; if (!file.isEmpty()){ img = this.fileService.upload(file, "inquiry", "img", inquirer.getLoginId()); } Inquiry inquiry = Inquiry.builder() .subject(subject) .content(content) .email(email) .category(category) .inquirer(inquirer) .img(img) .build(); this.inquiryRepository.save(inquiry); return inquiry; } //FileService.java public GenFile upload(MultipartFile file, String primaryPath, String secondaryPath, String uploader) throws IOException { String[] fileBits = file.getContentType().split("/"); String type = fileBits[0]; String ext; switch (fileBits[1]) { case "jpg", "jpeg" -> ext = "jpg"; case "png" -> ext ="png"; default -> ext = "etc"; } // file type == image // file ext == jpg, jpeg, png if (!type.equals("image") || ext.equals("etc")) { throw new IOException("file type not allowed"); } // file path == root/primaryPath/secondaryPath // file name == uploader_date.ext; String date = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyyMMdd_HHmmss_n")); String saveDirPath = fileRootPath + File.separator + primaryPath + File.separator + secondaryPath; String saveFilePath = saveDirPath + File.separator + uploader + "_" + date + "." + ext; File target = new File(saveDirPath); if (!target.exists()) { log.info(saveDirPath + " 경로가 존재하지 않습니다."); target.mkdirs(); log.info(saveDirPath + " 경로를 생성했습니다."); } else { log.info(saveDirPath + " 경로가 존재합니다."); } file.transferTo(new File(saveFilePath)); log.info(saveFilePath + " 파일 저장을 완료했습니다."); GenFile genFile = GenFile.builder() .primaryPath(primaryPath) .secondaryPath(secondaryPath) .uploader(uploader) .date(date) .ext(ext) .build(); this.fileRepository.save(genFile); return genFile; } ``` | **문의 목록** | | ----- | | ![문의 목록](https://i.imgur.com/2zCHXFd.png) | ##### \- 로그인한 사용자의 문의 목록 출력 ##### ㄴ SpringSecurity의 PreAuthorize로 inquiryList 메소드 실행 전 검사 ##### ㄴ 로그인한 사용자의 문의 목록을 한 페이지에 10개 씩 출력 ```java // InquiyController.java @PreAuthorize("isAuthenticated()") @GetMapping("/list") public String inquiryList(Model model, @RequestParam(value="page", defaultValue="0") int page, Principal principal) { SiteUser siteUser = this.userService.getUserByLoginId(principal.getName()); Page paging = this.inquiryService.getList(page, siteUser); model.addAttribute("paging", paging); List inquiryList = this.inquiryService.getList(siteUser); model.addAttribute("inquiryList", inquiryList); return "inquiry/list"; } // InquiryService.java public Page getList(int page, SiteUser siteUser) { List sorts = new ArrayList<>(); sorts.add(Sort.Order.desc("createDate")); Pageable pageable = PageRequest.of(page, 10, Sort.by(sorts)); return this.inquiryRepository.findAllByInquirer(siteUser, pageable); } // InquiryRepository.java Page findAllByInquirer(SiteUser inquirer, Pageable pageable); ``` ##### \- 총 문의 개수 출력 ##### \- 문의 카테고리와 답변 현황\, 메일 신청 현황 출력 ```html // list.html

``` | **문의 관리 목록** | | -------- | | ![문의 관리 목록](https://i.imgur.com/OIOsEc3.png) | ##### \- 답변 대기 상태인 문의 목록 모두 출력 ##### \- 모든 문의 글 삭제 가능 ##### \- 답변 완료 상태인 문의 목록 페이지 이동 버튼 ```java //AdminController.java //답변 대기 목록 @GetMapping("/inquiry") public String inquiry(Model model, @RequestParam(value = "page", defaultValue = "0") int page) { Page paging = this.inquiryService.getList(page, false); model.addAttribute("paging", paging); model.addAttribute("nav", "inquiry"); return "admin/admin_inquiry"; } //답변 완료 목록 @GetMapping("/inquiry/done") public String inquiryDone(Model model, @RequestParam(value = "page", defaultValue = "0") int page) { Page paging = this.inquiryService.getList(page,true); model.addAttribute("paging", paging); model.addAttribute("nav", "inquiry"); return "admin/inquiry_done"; } ``` ```java //InquiryService.java //답변 상태로 답변 목록을 불러오고 작성날짜 내림차순으로 정렬 public Page getList(int page, boolean state) { List sorts = new ArrayList<>(); sorts.add(Sort.Order.desc("createDate")); Pageable pageable = PageRequest.of(page, 30, Sort.by(sorts)); return this.inquiryRepository.findAllByState(state, pageable); } ``` | **문의 관리** | | ----- | | ![문의 관리](https://i.imgur.com/ApOZe4g.png) | ##### \- 문의 글 조회 및 답변 작성\,수정\,삭제 기능 ##### \- 이메일 신청한 글은 이메일 발송 버튼 표시 ##### \- 이메일 발송 완료시 메시지 표시 ```java //AdminController.java @GetMapping("/inquiry/{id}") public String inquiryDetail (Model model, @PathVariable("id") Long id, InquiryForm inquiryForm, InquiryAnswerForm inquiryAnswerForm) { Inquiry inquiry = this.inquiryService.getInquiry(id); model.addAttribute("inquiry", inquiry); model.addAttribute("nav", "inquiry"); return "admin/inquiry_detail"; } ``` ##### \- 답변완료 이메일 발송 로직 ```java //InquiryController.java @GetMapping("/sendEmail/{id}") @ResponseBody public ResponseEntity sendEmail(@PathVariable("id") Long id) { Inquiry inquiry = this.inquiryService.getInquiry(id); SiteUser user = this.userService.getUserByLoginId(inquiry.getInquirer().getLoginId()); String email = user.getEmail(); Map errors = new HashMap<>(); if (!this.userService.sendEmail(inquiry, email, "1:1 상담")) { errors.put("loginId", new RsData<>("F-6", "이메일 발송 중에 오류가 발생했습니다", "")); return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(errors); } return ResponseEntity.status(HttpStatus.OK) .body(new RsData<>("S-1", "이메일을 발송했습니다", null)); } //UserSerive.java public boolean sendEmail(Inquiry inquiry, String email, String titleType) { Long id = inquiry.getId(); String url = String.format("https://jigumiyak/inquiry/list/%s", id); try { MimeMessage mimeMessage = this.javaMailSender.createMimeMessage(); MimeMessageHelper helper = new MimeMessageHelper(mimeMessage, true, "UTF-8"); String title = "지금이약 " + titleType + " 발송 메일입니다."; String content = "

"; content += "

"; content += "지금이약 [" + titleType + "] 입니다.
"; content += "

답변이 등록되었습니다.

"; content += "지금이약 홈페이지"; content += "

"; content += "

"; helper.setTo(email); helper.setSubject(title); helper.setText(content, true); this.javaMailSender.send(mimeMessage); return true; } catch (Exception e) { return false; } } ```
### ? FAQ | **FAQ** | | --- | | ![FAQ](https://i.imgur.com/EdQZven.png) | ##### \- FAQ 카테고리별 조회 및 검색 기능 ##### \- 이전 문의화면에서 검색했을 경우 전체 카테고리에서 검색\, 카테고리 선택 후 검색 가능 ```java //FaqController.java //@RequestMapping("/faq") @GetMapping("") public String faqList(Model model, @RequestParam(value = "category", defaultValue = "") String category, @RequestParam(value = "kw", defaultValue = "") String kw){ if (category.equals("")) { List faqList = this.faqService.getList(kw); model.addAttribute("faqList", faqList); } else { List faqList = this.faqService.getList(category, kw); model.addAttribute("faqList", faqList); } return "faq/faq"; } //FaqService.java public List getList() { return this.faqRepository.findAll(); } public List getList(String kw) { return this.faqRepository.findAllByKeywordInAllCategories(kw); } public List getList(String category, String kw) { return this.faqRepository.findAllByCategoryAndKeyword(category, kw); } public Faq getFaq(Long id) { Optional faq = this.faqRepository.findById(id); if (faq.isPresent()) { return faq.get(); } else { throw new DataNotFoundException("faq not found"); } } //FaqRepository.java Page findAll(Pageable pageable); @Query("select " + "distinct f " + "from Faq f " + "where " + " f.question like %:kw% ") List findAllByKeywordInAllCategories(@Param("kw") String kw); @Query("select " + "distinct f " + "from Faq f " + "where " + " f.category = :category" + " and f.question like %:kw% ") List findAllByCategoryAndKeyword(@Param("category") String category, @Param("kw") String kw); ``` | **FAQ 관리** | | ------ | | ![FAQ 관리](https://i.imgur.com/BNCu0ge.png) | ##### \- FAQ 추가\, 수정\, 삭제 기능 ```java //AdminController.java @GetMapping("/faq") public String faq(Model model) { List faqList = this.faqService.getList(); model.addAttribute("faqList", faqList); model.addAttribute("nav", "inquiry"); return "admin/admin_faq"; } //FaqController.java @PreAuthorize("isAuthenticated()") @GetMapping("/create") public String faqCreate(FaqForm faqForm) { return "admin/faq_form"; } @PreAuthorize("isAuthenticated()") @PostMapping("/create") public String faqCreate(@Valid FaqForm faqForm, BindingResult bindingResult) { if (bindingResult.hasErrors()) { return "admin/faq_form"; } this.faqService.create(faqForm.getQuestion(), faqForm.getAnswer(), faqForm.getCategory()); return "redirect:/admin/faq"; } @PreAuthorize("isAuthenticated()") @GetMapping("/modify/{id}") public String faqModify(FaqForm faqForm, @PathVariable("id") Long id) { Faq faq = this.faqService.getFaq(id); faqForm.setQuestion(faq.getQuestion()); faqForm.setAnswer(faq.getAnswer()); faqForm.setCategory(faq.getCategory()); return "admin/faq_form"; } @PreAuthorize("isAuthenticated()") @PostMapping("/modify/{id}") public String faqModify(@Valid FaqForm faqForm, BindingResult bindingResult, @PathVariable("id") Long id) { if (bindingResult.hasErrors()) { return "admin/faq_form"; } Faq faq = this.faqService.getFaq(id); this.faqService.modify(faq, faqForm.getQuestion(), faqForm.getAnswer(), faqForm.getCategory()); return "redirect:/admin/faq"; } @PreAuthorize("isAuthenticated()") @GetMapping("/delete/{id}") public String boardDelete(@PathVariable("id") Long id) { Faq faq = this.faqService.getFaq(id); this.faqService.delete(faq); return "redirect:/admin/faq"; } // FaqService.java public Faq create(String question, String answer, String category) { Faq faq = Faq.builder() .question(question) .answer(answer) .category(category) .build(); this.faqRepository.save(faq); return faq; } public void modify(Faq faq, String question, String answer, String category) { faq = faq.toBuilder() .question(question) .answer(answer) .category(category) .build(); this.faqRepository.save(faq); } public void delete(Faq faq) { this.faqRepository.delete(faq); } ```
*** ### ? 커뮤니티 | **커뮤니티 목록** | | ------- | | ![커뮤니티 목록](https://i.imgur.com/fgGHMf5.png) | ##### \- 페이지네이션 글 개수 조절 기능 ##### \- 글 개수 \+ 제목/내용/작성자로 검색 기능 ##### \- 작성일시 순\, 조회수 순\, 추천수 순으로 글 정렬 ```java //BoardController.java @GetMapping("") public String boardList(Model model, @RequestParam(value="page", defaultValue="0") int page, @RequestParam(value = "kw", defaultValue = "") String kw, @RequestParam(value = "kwc", defaultValue = "") String kwc, @RequestParam(value = "pageSize", defaultValue = "10") int pageSize, @RequestParam(value = "order", defaultValue = "createDate") String order) { Page paging = this.boardService.getList(page, kw, kwc, pageSize, order); model.addAttribute("paging", paging); model.addAttribute("kw", kw); model.addAttribute("kwc", kwc); model.addAttribute("pageSize", pageSize); model.addAttribute("order", order); return "board_list"; } //BoardService.java public Page getList(int page, String kw, String kwc, int size, String order) { List sorts = new ArrayList<>(); if (order.equals("hit")) { sorts.add(Sort.Order.desc("hit")); } else if (order.equals("vote")) { sorts.add(Sort.Order.desc("vote")); } else if (order.equals("old")) { sorts.add(Sort.Order.asc("createDate")); } else { sorts.add(Sort.Order.desc("createDate")); } Pageable pageable = PageRequest.of(page, size, Sort.by(sorts)); if (kwc.equals("title")) { return this.boardRepository.findSubjectByKeyword(kw, pageable); } else if (kwc.equals("content")) { return this.boardRepository.findContentByKeyword(kw, pageable); } else if (kwc.equals("titleandcontent")) { return this.boardRepository.findSubjectAndContentByKeyword(kw, pageable); } else if (kwc.equals("author")) { return this.boardRepository.findAuthorByKeyword(kw, pageable); } return this.boardRepository.findAllByKeyword(kw, pageable); } //BoardRepository.java @Query("select " + "distinct b " + "from Board b " + "left outer join SiteUser u1 on b.author=u1 " + "where " + " b.subject like %:kw% " + " or b.content like %:kw% " + " or u1.loginId like %:kw% ") Page findAllByKeyword(@Param("kw") String kw, Pageable pageable); @Query("select " + "distinct b " + "from Board b " + "where " + " b.subject like %:kw% ") Page findSubjectByKeyword(@Param("kw") String kw, Pageable pageable); @Query("select " + "distinct b " + "from Board b " + "where " + " b.content like %:kw% ") Page findContentByKeyword(@Param("kw") String kw, Pageable pageable); @Query("select " + "distinct b " + "from Board b " + "where " + " b.subject like %:kw% " + " or b.content like %:kw% ") Page findSubjectAndContentByKeyword(@Param("kw") String kw, Pageable pageable); @Query("select " + "distinct b " + "from Board b " + "left outer join SiteUser u1 on b.author=u1 " + "where " + " u1.loginId like %:kw% ") Page findAuthorByKeyword(@Param("kw") String kw, Pageable pageable); ``` ##### \- 쿠키 이용 조회수 카운트 및 표시 기능 ```java //BoardController.java //30분 동안 유지되는 쿠키 생성, 쿠키가 존재하면 조회수 카운트 제외 private boolean hitCountJudge(Long id, HttpServletRequest request, HttpServletResponse response) { String refer = request.getHeader("REFERER"); if (refer == null) return false; String path = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort(); String referUri = refer.replaceFirst(path, ""); System.out.println(referUri); if (!referUri.contains("/board") && !referUri.contains("/index") && !referUri.contains("/user/mypage")) return false; Cookie oldCookie = null; Cookie[] cookies = request.getCookies(); if (cookies != null) { for (Cookie cookie : cookies) { if (cookie.getName().equals("boardHit")) { oldCookie = cookie; } } } // 관련 쿠키가 있다면 if (oldCookie != null) { if (!oldCookie.getValue().contains("[" + id + "]")) { oldCookie.setValue(oldCookie.getValue() + "_[" + id + "]"); oldCookie.setPath("/"); oldCookie.setMaxAge(30); response.addCookie(oldCookie); return true; } return false; } else { Cookie newCookie = new Cookie("boardHit", "[" + id + "]"); newCookie.setPath("/"); newCookie.setMaxAge(30); response.addCookie(newCookie); return true; } } ``` ##### \- 추천수 표시 기능 ```java //Borad.java //추천자 수를 저장하는 vote 생성 @ManyToMany Set voter; private Integer vote; //BoardService.java //추천시 추천자 수 업데이트하는 메소드 public void updateVote(Board board) { int vote = board.getVoter().size(); board = board.toBuilder() .vote(vote) .build(); this.boardRepository.save(board); } ``` | 커뮤니티 글작성 | | -------- | | ![커뮤니티 글작성](https://i.imgur.com/pgZhaOL.png) | ##### \- 로그인한 사용자만 글 작성 가능 ##### \- 로그인한 사용자가 작성한 글 수정\, 삭제 가능 ```java //BoardController.java //글 작성 @PreAuthorize("isAuthenticated()") @GetMapping("/create") public String boardCreate(BoardForm boardForm) { return "board_form"; } @PreAuthorize("isAuthenticated()") @PostMapping("/create") public String boardCreate(@Valid BoardForm boardForm, BindingResult bindingResult, Principal principal) { if (bindingResult.hasErrors()) { return "board_form"; } SiteUser siteUser = this.userService.getUserByLoginId(principal.getName()); Board b = this.boardService.create(boardForm.getSubject(),boardForm.getContent(), siteUser); return String.format("redirect:/board/%d", b.getId()); } //글 수정 @PreAuthorize("isAuthenticated()") @GetMapping("/modify/{id}") public String boardModify(BoardForm boardForm, @PathVariable("id") Long id, Principal principal) { Board board = this.boardService.getBoard(id); if(!board.getAuthor().getLoginId().equals(principal.getName())) { throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "수정권한이 없습니다."); } boardForm.setSubject(board.getSubject()); boardForm.setContent(board.getContent()); return "board_form"; } @PreAuthorize("isAuthenticated()") @PostMapping("/modify/{id}") public String boardModify(@Valid BoardForm boardForm, BindingResult bindingResult, Principal principal, @PathVariable("id") Long id) { if (bindingResult.hasErrors()) { return "board_form"; } Board board = this.boardService.getBoard(id); if (!board.getAuthor().getLoginId().equals(principal.getName())) { throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "수정권한이 없습니다."); } this.boardService.modify(board, boardForm.getSubject(), boardForm.getContent()); return String.format("redirect:/board/%d", id); } //글 삭제 @PreAuthorize("isAuthenticated()") @GetMapping("/delete/{id}") public String boardDelete(Principal principal, @PathVariable("id") Long id) { Board board = this.boardService.getBoard(id); if (!board.getAuthor().getLoginId().equals(principal.getName())) { throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "삭제권한이 없습니다."); } this.boardService.delete(board); return "redirect:/board"; } //BoardForm.java //커뮤니티 글 작성 시 입력 제한 @Getter @Setter public class BoardForm { @NotEmpty(message="제목은 필수항목입니다.") @Size(max=300) private String subject; @NotEmpty(message="내용은 필수항목입니다.") private String content; } ``` | **커뮤니티 상세** | | ------- | | ![커뮤니티 상세](https://i.imgur.com/AuFiUGj.png) | ##### \- 글 제목\, 작성일\, 수정일\, 작성자\, 내용\, 추천수\, 댓글\, 대댓글 표시 ##### \- 댓글 페이지네이션 ##### \- jQuery 활용 대댓글 숨김 및 아코디언 형식으로 표시 ```java @GetMapping("/{id}") public String detail(Model model, @PathVariable("id") Long id, BoardCommentForm boardCommentForm, BoardRecommentForm boardRecommentForm, HttpServletRequest request, HttpServletResponse response, @RequestParam(value = "cmtPage", defaultValue = "0") int cmtPage) { Board board; if (hitCountJudge(id, request, response)) { board = this.boardService.hit(id); } else { board = this.boardService.getBoard(id); } model.addAttribute("board", board); Page paging = this.boardCommentService.getList(board, 5,cmtPage); model.addAttribute("paging", paging); return "board_detail"; } //board_detail.html --- 생략 ---

--- 생략 --- function _rcBoxInit() { $(".recomment-box").click(function() { $(this).siblings(".hover").find(" > .rcmtcon").stop().slideUp(300); $(this).siblings(".hover").removeClass("hover"); if ($(this).hasClass("hover")) { $(this).find(" > .rcmtcon").stop().slideUp(300); $(this).removeClass("hover"); } else { $(this).find(" > .rcmtcon").stop().slideDown(300); $(this).addClass("hover"); } }); $(".rcmtcon").click(function() { return event.stopPropagation(); }); } _rcBoxInit(); --- 생략 --- ``` ##### \- ajax 활용 추천하기 기능 ##### \- 로그인한 사용자만 추천 가능 ##### \- 자신이 작성한 글\, 댓글 추천 불가능 ```html //board_detail.html //추천버튼 선택시 로그인 상태 확인과 작성자 확인 및 메시지 출력 --- 생략 ---

--- 생략 ---

--- 생략 --- function _vote(_this) { var isVote; if ($(_this).hasClass("recommended")) { isVote = confirm("정말 추천을 취소하시겠습니까?"); } else { isVote = confirm("정말 추천하시겠습니까?"); } if (isVote) { $.ajax({ url: _this.getAttribute("data-uri"), type: "GET", success: function() { $('#vote-box').load(location.href+' #vote-box'); $('#c-vote-box').load(location.href+' #c-vote-box'); console.log("성공"); }, error: function(response) { alert(response.responseJSON.message); console.log(response); } }); } } ``` ```java //BoardController.java //추천 변경시 추천수 변경도 진행 @PreAuthorize("isAuthenticated()") @GetMapping("/vote/{id}") public String boardVote(Model model, Principal principal, @PathVariable("id") Long id) { Board board = this.boardService.getBoard(id); SiteUser siteUser = this.userService.getUserByLoginId(principal.getName()); if (board.getAuthor().getLoginId().equals(siteUser.getLoginId())) { throw new RuntimeException("본인이 작성한 글은 추천할 수 없습니다."); } this.boardService.vote(board, siteUser); this.boardService.updateVote(board); model.addAttribute("board", board); return "board_detail :: #board_detail"; } //BoardService.java public void vote(Board board, SiteUser siteUser) { if (board.getVoter().contains(siteUser)) { board.getVoter().remove(siteUser); } else { board.getVoter().add(siteUser); } this.boardRepository.save(board); } ``` ##### \- 로그인한 사용자만 댓글\, 대댓글 작성 가능 ##### \- 댓글\, 대댓글 작성\, 수정\, 삭제 기능 ##### \- 댓글\, 대댓글 유효성 검사 기능 ```java //BoardCommentController.java //Recomment는 댓글과 유사하므로 생략 @PreAuthorize("isAuthenticated()") @PostMapping("/create/{id}") public String createComment(Model model, @PathVariable("id") Long id, @Valid BoardCommentForm boardCommentForm, BindingResult bindingResult, Principal principal) { Board board = this.boardService.getBoard(id); SiteUser siteUser = this.userService.getUserByLoginId(principal.getName()); if (bindingResult.hasErrors()) { model.addAttribute("board", board); return "board_detail"; } BoardComment comment = this.boardCommentService.create(board, boardCommentForm.getContent(), siteUser); return String.format("redirect:/board/%s#comment_%s", comment.getBoard().getId(), comment.getId()); } @PreAuthorize("isAuthenticated()") @GetMapping("/modify/{id}") public String commentModify(Model model, BoardCommentForm boardCommentForm, @PathVariable("id") Long id, Principal principal) { BoardComment boardComment = this.boardCommentService.getBoardComment(id); model.addAttribute("boardComment", boardComment); if (!boardComment.getAuthor().getLoginId().equals(principal.getName())) { throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "수정권한이 없습니다."); } boardCommentForm.setContent(boardComment.getContent()); return "bcomment_form"; } @PreAuthorize("isAuthenticated()") @PostMapping("/modify/{id}") public String commentModify(@Valid BoardCommentForm boardCommentForm, BindingResult bindingResult, @PathVariable("id") Long id, Principal principal) { if (bindingResult.hasErrors()) { return "bcomment_form"; } BoardComment boardComment = this.boardCommentService.getBoardComment(id); if (!boardComment.getAuthor().getLoginId().equals(principal.getName())) { throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "수정권한이 없습니다."); } this.boardCommentService.modify(boardComment, boardCommentForm.getContent()); return String.format("redirect:/board/%s#comment_%s", boardComment.getBoard().getId(), boardComment.getId()); } @PreAuthorize("isAuthenticated()") @GetMapping("/delete/{id}") public String commentDelete(Principal principal, @PathVariable("id") Long id) { BoardComment boardComment = this.boardCommentService.getBoardComment(id); if (!boardComment.getAuthor().getLoginId().equals(principal.getName())) { throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "삭제권한이 없습니다."); } this.boardCommentService.delete(boardComment); return String.format("redirect:/board/%s", boardComment.getBoard().getId()); } //BoardCommentService.java public BoardComment create(Board board, String content, SiteUser author) { BoardComment comment = BoardComment.builder() .content(content) .author(author) .board(board) .build(); this.boardCommentRepository.save(comment); return comment; } public BoardComment getBoardComment(Long id) { Optional comment = this.boardCommentRepository.findById(id); if (comment.isPresent()) { return comment.get(); } else { throw new DataNotFoundException("comment not found"); } } public void modify(BoardComment comment, String content) { comment = comment.toBuilder() .content(content) .build(); this.boardCommentRepository.save(comment); } public void delete(BoardComment boardComment) { this.boardCommentRepository.delete(boardComment); } public void vote(BoardComment boardComment, SiteUser siteUser) { if (boardComment.getVoter().contains(siteUser)) { boardComment.getVoter().remove(siteUser); } else { boardComment.getVoter().add(siteUser); } this.boardCommentRepository.save(boardComment); } public Page getList(Board board, int size, int page ) { List sorts = new ArrayList<>(); sorts.add(Sort.Order.desc("createDate")); Pageable pageable = PageRequest.of(page, size, Sort.by(sorts)); return this.boardCommentRepository.findAllByBoard(board, pageable); } //BoardCommentForm.java @Getter @Setter public class BoardCommentForm { @NotEmpty(message = "내용은 필수항목입니다.") @Size(max = 200, message ="내용을 200자 이내로 작성해주세요." ) private String content; } ``` | **커뮤니티 글 관리** | | --------- | | ![커뮤니티 글 관리](https://i.imgur.com/4CeJ5F8.png) | ##### \- 커뮤니티 전체 글 조회 및 삭제 기능 ```java //AdminController.java @GetMapping("/board") public String board(Model model, @RequestParam(value="page", defaultValue="0") int page, @RequestParam(value = "kw", defaultValue = "") String kw) { Page paging = this.boardService.getList(page, kw); model.addAttribute("paging", paging); model.addAttribute("kw", kw); model.addAttribute("nav", "board"); return "admin/admin_board"; } @GetMapping("/board/delete/{id}") public String boardDelete(@PathVariable("id") Long id) { Board board = this.boardService.getBoard(id); this.boardService.delete(board); return "redirect:/admin/board"; } ``` | **커뮤니티 댓글, 대댓글 관리** | | --------------- | | ![커뮤니티 댓글 관리](https://i.imgur.com/YoXErMS.png) | ##### \- 해당하는 글의 댓글 조회 및 삭제 기능 ##### \- 해당하는 댓글의 대댓글 조회 및 삭제 기능 ```java //AdminController.java //댓글 조회 @GetMapping("/board/{id}") public String comment(Model model, @PathVariable("id") Long id, @RequestParam(value="page", defaultValue="0") int page, @RequestParam(value = "cmtPage", defaultValue = "0") int cmtPage) { Board board = this.boardService.getBoard(id); model.addAttribute("board", board); Page paging = this.boardCommentService.getList(board, 20,cmtPage); model.addAttribute("paging", paging); model.addAttribute("nav", "board"); return "admin/admin_board_comment"; } //댓글 삭제 @GetMapping("/comment/delete/{id}") public String commentDelete( @PathVariable("id") Long id) { BoardComment boardComment = this.boardCommentService.getBoardComment(id); this.boardCommentService.delete(boardComment); return String.format("redirect:/admin/board/%s", boardComment.getBoard().getId()); } //대댓글 조회 @GetMapping("/comment/{id}") public String recomment(Model model, @PathVariable("id") Long id) { BoardComment boardComment = this.boardCommentService.getBoardComment(id); model.addAttribute("comment", boardComment); List recommentList = this.boardRecommentService.getList(boardComment); model.addAttribute("recommentList", recommentList); model.addAttribute("nav", "board"); return "admin/admin_board_recomment"; } //대댓글 삭제 @GetMapping("/recomment/delete/{id}") public String recommentDelete( @PathVariable("id") Long id) { BoardRecomment boardRecomment = this.boardRecommentService.getBoareRecomment(id); this.boardRecommentService.delete(boardRecomment); return String.format("redirect:/admin/comment/%s", boardRecomment.getComment().getId()); } ``` *** ??감사합니다??