[TIL]내일배움 캠프 - Django + React 쪽지기능

 

채팅 기능도 좋지만 쪽지 기능을 구현하기로 했다.

아쉽게도 팀원 중에 한 분이 백안드 부분을 다 구성해 보셔서 프런트 부분을 진행했다. 

이 부분은 따로 직접 구현을 해봐야겠다.

 

---

 

 

 📮 쪽지 기능

1. 쪽지를 작성
   • 쪽지를 작성하는 페이지 또는 팝업창
2. 쪽지를 보내기
   • 보내는 상대 유저의 아이디 값이 있어야 한다.
     • 상대 프로필로 들어가 쪽지 보내기
     • 작성자 아이디값 누르면 쪽지 보이게
3. 쪽지를 받기
   • 프로필 페이지에 세 쪽지를 확인한다.
   • 프로필 누르면 팝업창도 좋을 듯
   • 프로필에 쪽지 온 것이 확인
4. 쪽지 보기
   • 나에게 보낸 쪽지를 확인
   • 팝업창 또는 페이지에서 확인
5. 다시 1번부터 반복

쪽지 보내기 manytomany를 이용

상대의 user 정보와 나의 값을 보내기

 

 

---

 

버튼 디자인 변경

<button style={{fontWeight: view === 'posts'?   'bold' : '200'}} 
onClick={() => setView('posts')}>내가 작성한 글</button>
<button
style={{fontWeight: view === 'like_posts'?   'bold' : '200'}} 
onClick={() => setView('like_posts')}>좋아요 한 글</button>

 

버튼을 클릭했을 경우에 따라 버튼 색을 변경하기 위해 js 조건문을 이용하여 변경했다.

react도 계속사용하다 보니 처음에 비하면 문법 이해도가 점점 늘어나고 있고 직접 함수를 만들기도 하고 있다. 

이것도 django 풀스택도 좋지만 react도 공부하면 좋을 거 같다.

 

 

---

신고 기능 

 

import React, { useState } from 'react';
import Modal from 'react-modal';
import style from './Report.module.css'

const Report = (e) => {
    const [modalIsOpen, setIsOpen] = useState(false);
    const author = e.author
    const currentUser = e.mbti

    const openModal = () => {
        setIsOpen(true);
    }

    const closeModal = () => {
        setIsOpen(false);
    }

    return (
        <div>
            <button className={style.button} onClick={openModal}  >신고</button>
            <Modal
                isOpen={modalIsOpen}
                onRequestClose={closeModal}
                className = {style.vertica}>
                <div className={style.content} >
                    <h3>!</h3>
                    <h2>신고</h2>
                    <p>'{author}'님을</p>
                    <p>신고 하시겠습니까?</p>
                </div>
                <div className={style.content_button}>
                    <button onClick={closeModal}>아니요</button>
                    <button onClick={closeModal}>네</button>
                </div>
            </Modal>
        </div>
    )
}

export default Report

 

 

이런 식으로 따로 Components를 제작했다. 신고 버튼을 어디서든 사용이 가능하기 위해 따로 제작을 했다.

---

내일 할 일 

 

redis를 적용해 보고 싶어 따로 공부를 진행해 봐야겠다.

검색기능 부분 백엔드에서 어떻게 구상할지 

신고버튼 창을 제작했는데 백엔드에서 처리하는 과정을 제작해 봐야겠다.