인스타그램 클론코딩 (팔로워 / 팔로우 Modal page)

포스팅 수정, 삭제 기능을 구현했을 당시,

디테일 페이지에서 modal pop-up 기능을 사용한 것 처럼, 실제 인스타그램 페이지처럼 구축하기 위해서 

포스팅 리스트 페이지에서 해당 유저의 팔로워 / 팔로잉 유저 목록을 모달 페이지로 띄우기로 했다.

 

<포스팅 리스트 (유저 정보) 페이지>

리스트 페이지에서 팔로워 혹은 팔로우 글자를 클릭하게 되면 아래와 같이 Modal 팝업으로 유저 목록이 띄워진다.

 

<해당 유저의 팔로워 목록(Modal 팝업)>

 

<post_listView.py>

Modal 페이지에 띄워지는 데이터

def post_listView(request, list):
    user_id = request.user
    
    following_list = "SELECT profile_msg, profile_img_src, following_id, user_id" #클릭된 유저의 팔로잉 유저 목록
    following_list += " FROM accounts_user"
    following_list += " LEFT OUTER JOIN following on accounts_user.username = following.following_id"
    following_list += " WHERE following.user_id = (%s)"

    following_list_result = cursor.execute(following_list, (list,))
    following_list_datas = cursor.fetchall()

    follower_list = "SELECT profile_msg, profile_img_src, user_id, following_id"  # 클릭된 유저의 팔로워 유저 목록
    follower_list += " FROM accounts_user"
    follower_list += " LEFT OUTER JOIN following on accounts_user.username = following.user_id"
    follower_list += " WHERE following.following_id = (%s)"

    follower_list_result = cursor.execute(follower_list, (list,))
    follower_list_datas = cursor.fetchall()
    
    following_list = []
    for following_list_data in following_list_datas:
        row = {'profile_msg' : following_list_data[0],
               'profile_img_src' : following_list_data[1],
               'following_id' : following_list_data[2],
               'user_id' : following_list_data[3],
               }
        following_list.append(row)

    follower_list = []
    for follower_list_data in follower_list_datas: 
        row = {'profile_msg' : follower_list_data[0],
               'profile_img_src' : follower_list_data[1],
               'user_id' : follower_list_data[2],
               'following_id' : follower_list_data[3],
        follower_list.append(row)

 

 

<post_list.html>

Modal 페이지 부분 코드

<div class="modal-body">
              <!-- 팔로잉 유저 리스트 -->
              <div class="following_user_form">
                {% for following_list in following_list %}
                <div>
                <!-- 프로필사진, 팔로우 아이디, 메세지, 팔로잉, 팔로우 버튼-->
                <div class="following_info">
                  <div class="following_user_img">
                    <img src="{{ following_list.profile_img_src}}" alt="profile_img">
                  </div>
                  <div class="id_message">
                    <div class="following_id" > <a href="{% url 'instagram:list' following_list.following_id %}"> {{ following_list.following_id }} </a> </div>
                    <div class="following_id_message">{{ following_list.profile_msg }}</div>
                  </div>

                <div class="following_btn">
                  {% if user.username != following_list.following_id %}
                    {% if following_list.is_follow == 1 %}
                      <button type="button" class="btn btn-light" id="follow_btn" onclick="follow(this, '{{ following_list.following_id }}')">팔로잉</button>
                    {% endif %}
                    {% if following_list.is_follow == 0 %}
                      <button type="button" class="btn btn-primary" id="follow_btn" onclick="follow(this, '{{ following_list.following_id }}')">팔로우</button>
                    {% endif %}
                  {% endif %}
                </div>
                </div>
                </div>
                {% endfor %}
              </div>
            </div>