[인스타그램 클론코딩] 10. 게시물 댓글 기능 구현(Front-End)

1. PostRender에서 채팅 아이콘 눌렀을 때, 모달창이 뜨도록 구현

{/* 게시글의 좋아요, 댓글들을 보여주는 부분 */}
<div className={style.post_icon_container}>
    <div className={style.post_icon}>
        {
            !post.like ?
                <i className='bi bi-suit-heart fs-3' style={{cursor: 'pointer'}} onClick={() => setLike(post.postId)}/>:
                <i className='bi bi-suit-heart-fill fs-3' style={{cursor: 'pointer'}} onClick={() => deleteLike(post.postId)} style={{color: 'red'}}/>
        }
        <i className='bi bi-chat fs-3' style={{marginLeft: '10px', cursor: 'pointer'}} onClick={() => onClickChat(idx)}/>
        <PostChat isOpen={chatIsOpen[idx]} chatIsOpen={chatIsOpen} onClickExitChat={onClickExitChat} idx={idx} postId={post.postId}/>
    </div>
    <div className={style.post_icon_num}>
        <div style={{marginRight: '10px'}}>
            좋아요 갯수  ,
        </div>
        <div>
            댓글 갯수
        </div>
    </div>
</div>

 

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: 10,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center'
        },
        content: {
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            background: "white",
            padding: 0,
            overflow: "auto",
            top: '10%',
            left: '40%',
            width: '500px',
            height: '600px',
            WebkitOverflowScrolling: "touch",
            borderRadius: "14px",
            outline: "none",
            zIndex: 10,
        },
    }

    const isOpen = props.isOpen;
    const idx = props.idx;
    const onClickExitChat = props.onClickExitChat;
    const postId = props.postId;
    const chatIsOpen = props.chatIsOpen;

    const [chatList, setChatList] = useState();
    const [chat, setChat] = useState();
    const userDetail = useSelector(state => state.userDetail);

    const onChangeChat = (e) => {
        setChat(e.target.value);
    }

    const onSubmit = () => {
        withJwtAxios.post("/posts/chat", {postId: postId, content: chat})
            .then((res) => {
                setChatList(() => {
                    return res.data.postChatList
                });
            })
    }

    const getChatList = () => {
        withJwtAxios.get("/posts/chat", {params: {postId: postId}})
            .then((res) => {
                setChatList(() => {
                    return res.data.postChatList
                });
            })
    }

    const deleteChat = (chatId) => {
        if(window.confirm("삭제 하시겠습니까?") === true) {
            withJwtAxios.delete("/posts/chat", {params: {postId: postId, chatId: chatId}})
                .then((res) => {
                    setChatList(() => {
                        return res.data.postChatList
                    });
                })
        }
    }
    const setChatCreateDate = (date) => {
        const createDate = new Date(date)
        const nowDate = new Date();

        const diff = (nowDate.getTime() - createDate.getTime()) / 1000;

        if (diff < 3600) {
            return `${Math.floor(diff/60)} 분전`;
        } else if(diff < 86400) {
            return `${Math.floor(diff/3600)} 시간전`;
        } else if(diff < 864000) {
            return `${Math.floor(diff/86400)} 일전`;
        } else {
            return '오래전';
        }
    }

    useEffect(() => {
        getChatList();
    }, [chatIsOpen])

    return (
        <ReactModal isOpen={isOpen} style={ChatModalStyle} ariaHideApp={false}>
            <div className={style.post_chat_header}>
                <i className="bi bi-x-lg modal-exit-button" style={{cursor: 'pointer'}} onClick={() => {onClickExitChat(idx)}}/>
            </div>
            <div className={style.post_chat_body}>
                {chatList != undefined ?
                    chatList.map((chat) => {
                            return (
                                <div key={chat.chatId}>
                                    <div className={style.chat_container}>
                                        <div className={style.chat_container}>
                                            <img className={style.chat_thumbnail} src={Static_Base_Url + chat.profileUrl}/>
                                            <div style={{marginRight: '10px'}}>
                                                <div style={{fontWeight: 'bold',  whiteSpace: 'nowrap'}}>{chat.nickname}</div>
                                                <div className={style.chat_date}>
                                                    {setChatCreateDate(chat.createdDate)}
                                                </div>
                                            </div>
                                            <div className='modal-chat-content'>{chat.content}</div>
                                        </div>
                                        {userDetail.email === chat.email ?
                                            <i className='i bi-x-square' style={{cursor: 'pointer'}} onClick={() => deleteChat(chat.chatId)}/>
                                            :
                                            <div>
                                            </div>
                                        }

                                    </div>
                                </div>
                            )
                    })
                    :
                    <div>
                    </div>
                }
            </div>
            <div className={style.post_chat_input}>
                <input className={style.input} placeholder='댓글 달기...' onChange={onChangeChat}/>
                <div className={style.submit} onClick={onSubmit}>게시</div>
            </div>
        </ReactModal>
    );
};

export default PostChat;

 

3. 동작 모습