프로필 관련 내용은 기존에 만들어진 Entity를 활용하는 것이므로 따로 만들 Entity는 없다. 먼저 사용할 Dto부터 생성한다. 1. Profile 관련 Dto 생성 @Data public class ProfileCountResponseDto { private Long board; private Long follower; private Long follow; @Builder public ProfileCountResponseDto(Long board, Long follower, Long follow) { this.board = board; this.follower = follower; this.follow = follow; } } @Data public class ProfileUpdateRequest..

1. PostRender에서 채팅 아이콘 눌렀을 때, 모달창이 뜨도록 구현 {/* 게시글의 좋아요, 댓글들을 보여주는 부분 */} { !post.like ? setLike(post.postId)}/>: deleteLike(post.postId)} style={{color: 'red'}}/> } onClickChat(idx)}/> 좋아요 갯수 , 댓글 갯수 2. PostChat.js 작성 const PostChat = (props) => { const ChatModalStyle = { overlay: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, backgroundColor: "rgba(255, 255, 255, 0.45)", zIndex: ..

1. PostChat Entity와 PostChatRepository 생성 @Entity @Data @NoArgsConstructor public class PostChat extends BaseTimeEntity { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "post_chat_id") private Long id; @ManyToOne @JoinColumn(name = "post_id") private Post post; @ManyToOne @JoinColumn(name = "user_id") private User user; private String content; @Builder public PostChat(Pos..

기존 HomeContainer 작성 부분의 좋아요 버튼 구현 부분을 상세화한다. 1. HomeContainer 수정 const setLike = (postId) => { withJwtAxios.get("/like", {params: {postId: postId}}) .then((res) => { setPostList(res.data.postList); }); } const deleteLike = (postId) => { withJwtAxios.delete("/like", {params: {postId: postId}}) .then((res) => { setPostList(res.data.postList); }); } return ( ... { !post.like ? setLike(post.postId)}..

게시글 좋아요 기능을 구현하는 로직은 다음과 같다. 헤당 게시글과 좋아요를 누른 유저의 정보를 DB에 저장하며, 그 정보를 토대로 좋아요를 누른 상태와 아닌 상태를 구분하는 것이다. 1. PostDto 수정 기존의 PostDto에서 추가적으로 게시글에 대한 게시글 좋아요를 누른 상태인지를 반환해주는 like라는 불리언 변수를 추가해주었다. @Data public class PostDto { private Long postId; private UserDto user; private String content; private List postFileList; private boolean like; @Builder public PostDto(Long postId, UserDto user, String cont..

앞에서 말했듯이, 본인과 팔로잉한 유저들의 게시글들을 보여주는 홈화면을 제작한다. 1. HomeContainer 작성 const HomeContainer = () => { const [postList, setPostList] = useState(); // 게시글 리스트 const [postIndex, setPostIndex] = useState(); // 게시글의 파일 순서에 대한 처리를 위한 배열 useEffect(() => { withJwtAxios.get('/post-list') .then((res) => { setPostList(res.data.postList); setPostIndex(new Array(res.data.postList.length).fill(0)); }); }, []) // 왼쪽..