[Django App 3-11] 인스타그램 클론 코딩_팔로잉 계정 리스트 모달&컬렉션 탭

<Complete List>

1. 데이터베이스 및 UI 설계하기

• 인스타그램 UI 구성
• 데이터베이스 테이블 설계 및 구현

2. 앱 만들기

• instagram, accounts 앱 만들기
• views.py 분리하기

3. 회원가입 페이지

• 비밀번호 암호화 함수 구현 - 해시 함수

4. 로그인 페이지

• 세션에 사용자 ID 저장하기

5. 로그아웃 뷰

6. 메인 페이지

• 6-1. 좋아요 뷰 / 좋아요 취소 뷰
• 6-2. 북마크 뷰 / 북마크 취소 뷰

7. 포스트 리스트 페이지

• 7-1. 팔로우 뷰 / 언팔로우 뷰

8. 포스트 상세 페이지

9. 포스트 업로드 페이지

10. 회원 정보 수정 페이지

11. 비밀번호 수정 페이지

12. 포스트 수정 페이지

13. 포스트 삭제 뷰

 

<To Do List>

7-2. 포스트 리스트 페이지

• 팔로잉 계정 리스트 모달

7-3. 포스트 리스트 페이지

• 컬렉션 탭 추가

 

---

7-2 포스트 리스트 페이지(팔로잉 계정 리스트 모달)

• pystagram에서 작업
• 포스트 리스트 페이지의 팔로잉 계정 리스트 모달

7-2.1 PostListView

...
# 아이디가 클릭된 유저의 팔로잉 리스트
strSql = "SELECT username, profile_img_src, profile_msg"
strSql += " FROM accounts_user AU"
strSql += " JOIN following F ON AU.username = F.following_id"
strSql += " WHERE F.user_id = (%s)"
result = cursor.execute(strSql, (user_id,))
datas = cursor.fetchall()

followingUsers = []
for data in datas:
    raw_data = {'username': data[0],
                'profile_img_src': data[1],
                'profile_msg': data[2],}

    # 현재 유저의 팔로잉 리스트에 대한 팔로우 여부
    strSql = "SELECT COUNT(following_id)"
    strSql += " FROM following"
    strSql += " WHERE user_id = (%s)"
    strSql += " AND following_id = (%s)"

    result = cursor.execute(strSql, (user.username, raw_data['username']))
    data = cursor.fetchall()
    raw_data['follow'] = data[0][0]

    followingUsers.append(raw_data)
...

 

7-2.2 post_list.html

• 전체코드 - github
• 팔로잉 계정 리스트 모달 추가

 

7-3 포스트 리스트 페이지(컬렉션 탭)

• pystagram에서 작업
• 포스트 리스트 페이지의 컬렉션 탭

7-3.1 PostListView

• 컬렉션 탭은 현재 유저가 자신의 포스트 리스트 페이지에서만 볼 수 있는 것이므로 postListUser와 request.user가

  다른 경우 컬렉션 포스트 리스트를 SELECT 하지 않는다.

# 컬렉션 포스트 리스트
collection = []
if postListUser == user:
    strSql = "SELECT P.post_id, P.post_img_url"
    strSql += " FROM post P"
    strSql += " JOIN bookmark B ON P.post_id = B.post_id"
    strSql += " WHERE B.user_id = (%s)"
    strSql += " ORDER BY B.time DESC"
    result = cursor.execute(strSql, (user_id,))
    datas = cursor.fetchall()

    for data in datas:
        raw_data = {'post_id': data[0],
                    'post_img_url': data[1],}
        collection.append(raw_data)

 

7-3.2 post_list.html / collection.html

• 전체코드 - github
• 포스트 탭 / 컬렉션 탭 분리 - 각각의 탭은 html 파일을 따로 만든 후, post_list.html에 include

 

• post_list.html

...
<!-- 탭 메뉴 게시물/저장됨 -->
<div class="user_posts">
    <nav>
        <div class="nav nav-tabs justify-content-center" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-post-tab" data-toggle="tab" href="#nav-post" role="tab" aria-controls="nav-post" aria-selected="true">게시글</a>
            {% if postListUser.username == user.username %}
            <a class="nav-item nav-link" id="nav-save_post-tab" data-toggle="tab" href="#nav-save_post" role="tab" aria-controls="nav-save_post" aria-selected="false">저장됨</a>
            {% endif %}
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-post" role="tabpanel" aria-labelledby="nav-post-tab">
            {% include 'posts.html' %}
        </div>
        <div class="tab-pane fade" id="nav-save_post" role="tabpanel" aria-labelledby="nav-save_post-tab">
            {% include 'collection.html' %}
        </div>
    </div>
</div>
...

 

• collection.html

{% for post in collection %}
    <div class="postBox">
        <div class="postImg">
            <a href="{% url 'pystagram:pn_post_detail' post.post_id %}">
                <img src="{{ post.post_img_url }}" alt="post_img" class="innerImg">
            </a>
        </div>
    </div>
{% endfor %}