[FBTB] 2. 독후감 목록 기능 구현

목록 보여주는 기능은 그래도 좀 수월하게 짰다.

오류가 별로 안 나서 (나더라도 이해할 수 있는 오류) 오류 때문에 지체되는 시간이 적었다.

 

UI는 역시 아주 대충 짰다 아무래도 나 미적 감각 없는 듯

대충 어떻게 어떻게 만들고싶다는 생각은 있지만 아직은 기능부터 구현하는게 먼저인 것 같아서 일단 미뤄둔다.

아직 페이지네이션도 구현 안 했고 진짜 기본적인 것만 짰다. (그래서 수월하게 짰던 듯 ㅎ)

 

독후감 목록

 

이제 페이지네이션 구현하고, 웹사이트처럼 보이도록 header도 달고 뒤로가기도 추가하고 해야겠다.

---

구현 코드

 

Backend 

 

- PostListResponseDto

package com.frombooktobook.frombooktobookbackend.controller.post;

import com.frombooktobook.frombooktobookbackend.domain.post.Post;
import lombok.Getter;
import lombok.NoArgsConstructor;

import java.time.LocalDateTime;

@Getter
@NoArgsConstructor
public class PostListResponseDto {
    private Long id;
    private String bookName;
    private String bookAuthor;
    private String title;
    private LocalDateTime createdDate;

    public PostListResponseDto(Post post) {
        this.id=post.getId();
        this.bookName=post.getBookName();
        this.bookAuthor=post.getBookAuthor();
        this.title=post.getTitle();
        this.createdDate=post.getCreatedTime();
    }
    


}

 

- PostService

package com.frombooktobook.frombooktobookbackend.service;

import com.frombooktobook.frombooktobookbackend.controller.post.PostListResponseDto;
import com.frombooktobook.frombooktobookbackend.controller.post.PostResponseDto;
import com.frombooktobook.frombooktobookbackend.domain.post.Post;
import com.frombooktobook.frombooktobookbackend.domain.post.PostRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;

import javax.transaction.Transactional;
import java.util.List;
import java.util.stream.Collectors;

@RequiredArgsConstructor
@Service
public class PostService {
    private final PostRepository postRepository;

    @Transactional
    public Post savePost(Post post) {
         postRepository.save(post);
         return post;
    }

//    public PostResponseDto findById(Long id) {
//        Post post = postRepository.findById(id).orElseThrow(()->
//                new IllegalArgumentException("해당 게시글이 없습니다. id=" +id));
//        return new PostResponseDto(post);
//    }

    public List<PostListResponseDto> findAllByDesc() {
        return postRepository.findAll(Sort.by(Sort.Direction.DESC,"id")).stream()
                .map(PostListResponseDto::new)
                .collect(Collectors.toList());
    }

}

 

- PostController

package com.frombooktobook.frombooktobookbackend.controller.post;

import com.frombooktobook.frombooktobookbackend.domain.post.Post;
import com.frombooktobook.frombooktobookbackend.service.PostService;
import lombok.RequiredArgsConstructor;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;


@RequiredArgsConstructor
@RestController
public class PostController {

    private final PostService postService;


    @PostMapping("/post/write")
    public ResponseEntity<PostResponseDto> CreatePost(
            @RequestBody PostCreateRequestDto requestDto) {
        try {
            Post post = postService.savePost(requestDto.toEntity());
            if(post == null) {
                System.out.println("post가 null입니다.");
            }
            return ResponseEntity.ok()
                    .body(new PostResponseDto(post));

        } catch(Exception e) {
            System.out.println(e);
        }

        return ResponseEntity.ok()
                .body(new PostResponseDto(requestDto.toEntity()));
    }

    // 내림차순 : 제일 최신에 작성된 순서대로 (id가 큰 순서대로)
    @GetMapping("/post")
    public ResponseEntity<List<PostListResponseDto>> postList() {
        return ResponseEntity.ok()
                .body(postService.findAllByDesc());
    }


}

 

구현 코드

 

Frontend

PostListTable < PostListTemplate < PostListPage 

 

-PostListTable

import { useEffect, useState } from 'react';
import PostService from '../../service/PostService';
import style from './PostList.module.css';
const PostListTable = () => {
  const [postList, setPostList] = useState([]);

  useEffect(() => {
    PostService.getPostList().then((response) => {
      setPostList(response.data);
    });
  });

  return (
    <div>
      <table className={style.table}>
        <thead className={style.tableHead}>
          <tr className={style.tableTopRow}>
            <th className={style.th}>글번호</th>
            <th className={style.th}>책 제목</th>
            <th className={style.th}>저자</th>
            <th className={style.th}>독후감 제목</th>
            <th className={style.th}>작성일자</th>
          </tr>
        </thead>
        <tbody>
          {postList.map((post) => (
            <tr key={post.id} className={style.tableRow}>
              <td className={style.td}>{post.id}</td>
              <td className={style.td}>{post.bookName}</td>
              <td className={style.td}>{post.bookAuthor}</td>
              <td className={style.td}>{post.title}</td>
              <td className={style.td}>{post.createdDate}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default PostListTable;

th랑 td마다 className 다는거 원래 css-module 쓰면 다 저렇게 해야하는건진 모르겠지만 .. 일단 저렇게 했다 .. ^*^

 

- PostListTemplate

import style from './PostList.module.css';

const PostListTemplate = ({ children }) => {
  return (
    <div className={style.PostListTemplateBlock}>
      <div className={style.whiteBox}>{children}</div>
    </div>
  );
};

export default PostListTemplate;

 

- PostListPage

import PostListTemplate from '../components/post/PostListTemplate';
import PostListTable from '../components/post/PostListTable';
const PostListPage = () => {
  return (
    <>
      <PostListTemplate>
        <PostListTable />
      </PostListTemplate>
    </>
  );
};

export default PostListPage;

---

그리고 PostService에 post list를 가져오는 함수를 추가했다.

- PostService

import Axios from 'axios';

class PostService {
  createPost = (postForm) => {
    return Axios.post('/post/write', {
      bookName: postForm.bookName,
      bookAuthor: postForm.bookAuthor,
      title: postForm.title,
      content: postForm.content,
      rate: postForm.rate,
    });
  };

  getPostList = () => {
    return Axios.get('/post');
  };
}
export default new PostService();

 

이제 App.js에 PostListPage의 Route를 정해주면 끝이다.

 

- App.js

import { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';
import { Router, Route, Routes } from 'react-router-dom';
import Home from './routes/Home';
import PostWritePage from './routes/PostWritePage';
import Header from './components/Header';
import PostListPage from './routes/PostListPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/post/write" element={<PostWritePage />} />
      <Route path="/post" element={<PostListPage />} />
    </Routes>
  );
}

export default App;