# 최종 프로젝트 pageflow팀 기술서 - 사용자는 일반적인 블로그, 커뮤니티 글이아닌, 정형화된 전자책의 형식으로 컨텐츠를 생산한다. 사용자는 웹 안에서 책의 발행부터 감상까지 모두 편리하게 이용가능하다. 간단명료하고 단순한 디자인과 불필요한 요소들을 제거하여, 사용자가 오로지 전자책이라는 도메인에 집중할 수 있도록 한다. # 팀원 - 박현재 - 백세찬(팀장) - 심유정 - 한인철 # 목차 - [배포 링크](https://pageflow.org) - github 협업 - DB 구조 - 폴더 구조 - 기술 스택 - 프로젝트 # 배포 링크 - [pageflow 배포 주소: pageflow.org](https://pageflow.org) # DB 구조 [DB 설계 자료](https://www.slog.gg/post/detail/13291?listUrl=%2Fpost%2FmyList) # pageflow GitHub | 팀원 이름 | GitHub Repository | | --- | --- | | pageflow | [pageflow](https://github.com/sechan100/pageflow.git) | |박현재 | [hyeonjae1023]( https://github.com/hyeonjae1023)| | 백세찬| [sechan100](https://github.com/sechan100) | | 한인철| [gsw05018](https://github.com/gsw05018) | |심유정|[rantinum](https://github.com/rantinum)| # 폴더 구조 ?pageflow ├ java │ ├── base: 권한, 인증, 예외 핸들러 프로젝트 환경 설정 │ ├── domain: 책, 회원, 상호작용 │ ├── infra: 이메일, 이미지, 랜덤 비밀번호 관련 ├── react: 작성, 뷰어 페이지 # 기술 스택

# 프로젝트 $$youtube 4UXutAZg9KM $$ $$youtube SQgFgiTH29o $$ ## list ![image.png](/gen/post/2023_12_19/67.png) - 직관적이고 모던한 디자인의 메인 페이지 - 작가 닉네임과 제목을 통한 검색 지원 - 등록순, 추천순, 댓글순의 정렬 기능 지원 ``` @RestController @RequiredArgsConstructor public class ApiBookListController { private final BookService bookService; @GetMapping("/api/books/list") public List getBooksApi(@RequestParam(value = "page", defaultValue = "0") int page, @RequestParam(value = "kw", defaultValue = "") String kw, @RequestParam(value = "sortOption", defaultValue = "createdDate") String sortOption) { Slice paging = this.bookService.getList(page, kw, sortOption); return paging.getContent(); } } ``` Slice를 이용한 무한스크롤 구현 ``` public Slice getList(int page, String kw, String sortOption) { Pageable pageable; Specification spec = search(kw); //'좋아요'순 정렬을 선택했을 경우의 처리 if("preferenceCount".equals(sortOption)) { //'좋아요' 순으로 정렬하기 위해 Pageable을 구성. //이 경우 'preferenceCount'는 실제 필드가 아니므로, Sort.by를 사용하지 않음. pageable = PageRequest.of(page, 20); Slice bookWithPrefs = bookRepository.findAllBooksOrderByPreferenceCount(spec, pageable); return bookWithPrefs.map(bwp -> new BookSummary(bwp.getBook(), bwp.getPreferenceCount(), null)); } else if("commentCount".equals(sortOption)) { //'댓글' 순으로 정렬하기 위해 Pageable을 구성. //이 경우 'commentCount'는 실제 필드가 아니므로, Sort.by를 사용하지 않음. pageable = PageRequest.of(page, 20); Slice bookWithcomments = bookRepository.findAllBooksOrderByCommentCount(spec, pageable); return bookWithcomments.map(bwc -> new BookSummary(bwc.getBook(),null, bwc.getCommentCount())); } else { //기존 정렬 옵션에 따른 처리 pageable = PageRequest.of(page, 20, Sort.by(Sort.Direction.DESC, sortOption)); Slice books = bookRepository.findAll(spec, pageable); return books.map(BookSummary::new); } } ``` ## Write - 웹 안에서 바로 책을 작성 - 작성한 책을 출판 검수 신청 - 인터랙티브한 작성 페이지 ![image.png](/gen/post/2023_12_19/78.png) ![image.png](/gen/post/2023_12_19/79.png) ![image.png](/gen/post/2023_12_19/80.png) ![image.png](/gen/post/2023_12_19/81.png) ![image.png](/gen/post/2023_12_19/82.png) ## Read ![image.png](/gen/post/2023_12_19/69.png) - 실제 책처럼 페이지별로 넘어가는 뷰 - 책의 진행률을 나타내는 퍼센트 바 - 화면 클릭시 퍼센트 바 숨김으로 독서 방해요소 제거 ``` @Controller @RequiredArgsConstructor @Transactional public class BookViewController { private final BookService bookService; private final Rq rq; /** * @return react book read form page */ @GetMapping("/viewer/{bookId}") public String bookViewForm(@PathVariable("bookId") Long bookId) { Book book = bookService.repoFindBookById(bookId); String viewerUrl = "forward:/react/build/book_viewer/index.html"; // 출판된 책인 경우 허용 if(book.getStatus().equals(BookStatus.PUBLISHED)){ return viewerUrl; // 출판은 안되었지만, 작가나 관리자는 허용 } else if(rq.getUserSession().isAdmin() || rq.getUserSession().getId().equals(book.getAuthor().getId())) { return viewerUrl; } throw new IllegalArgumentException("책이 출판되지 않았습니다."); } } ```

전자책 등록 및 뷰어 서비스(pageflow)