[인스타그램 클론코딩] #1

ㅁ목표 기능 구현

1.친구페이지 내가 팔로우 한 사람만 목록에 뜨게 하기

2.프로필페이지 모달창 활용해서 팔로워 목록, 팔로잉 목록 나오게 하기

 

ㅁ구현 방식

1.친구 페이지

1)user/views.py>def user_view

2)templates > user_list.html

3) url.py

#user_list.html
<!-- templates/user/user_list.html -->
{% extends 'base.html' %}
{% block title %}
    사용자 리스트
{% endblock %}

{% block content %}
    <div class="container timeline-container">
        <div class="row">
            <!-- 왼쪽 컬럼 -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{ user.username }}</h5>
                        <p class="card-text"> {{ user.bio }}</p>

                    </div>
                </div>
            </div>
            <!-- 오른 쪽 컬럼-->
            <div class="col-md-7">
                <div class="row">
                    <div class="alert alert-success" role="alert">
                        팔로워 수 : {{ user.followee.count }} 명 || 팔로잉 수 : {{ user.follow.count }} 명
                    </div>
                </div>
                <div class="row">
                    <!-- 사용자 리스트 반복문 -->
                    {% for ul in user_list %}
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">{{ ul.username }}</h5>
                                <h6 class="card-subtitle mb-2 text-muted">{{ ul.email }}</h6>
                                <p class="card-text">
                                    {{ ul.bio }}
                                </p>
                                <p class="card-text">
                                    팔로잉 {{ ul.follow.count }} 명 / 팔로워 {{ ul.followee.count }} 명
                                </p>
                                {% if ul in user.follow.all %}
                                    <a href="/user/follow/{{ ul.id }}" class="card-link">[팔로우 취소]</a>
                                {% else %}
                                    <a href="/user/follow/{{ ul.id }}" class="card-link">[팔로우]</a>
                                {% endif %}
                            </div>
                        </div>
                        <hr>
                    {% endfor %}
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
{% endblock %}

#views.py
@login_required
def user_view(request):
    if request.method == 'GET':
        # 사용자를 불러오기, exclude와 request.user.username 를 사용해서 '로그인 한 사용자'를 제외하기
        # 사용자 중 내가 팔로우 한 사람들만 나오게하기
        user_list = UserModel.objects.all().exclude(username=request.user.username)
        
        follow = UserModel.objects.filter(followee = request.user)

        return render(request, 'user/user_list.html', {'user_list': follow})

#urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('sign-up/', views.sign_up_view, name='sign-up'),
    path('sign-in/', views.sign_in_view, name='sign-in'),
    path('logout/', views.logout, name='logout'),
    path('user/', views.user_view, name='user-list'),
    path('user/follow/<int:id>/', views.user_follow, name='user-follow'),
    path('user/profile/<int:id>/', views.user_profile_view, name='user-profile'),
    path('user/profile/follow/<int:id>/', views.follow_view, name='follow-list'), #팔로우(팔로잉) 모달창 
    path('user/profile/followee/<int:id>/', views.followee_view, name='follewee-list'), #팔로이(팔로워) 모달창
    path('user/fix_profile/', views.profile_edit, name='profile'), # 프로필 수정
 ]

2)프로필 페이지 모달창 나오게 하기 

#follow_list.html

{% extends 'base.html' %}

{% block title %}
    팔로잉
{% endblock %}
{% block content %}
    <div class="modal_overlay">
        <div class="modal_window">
            <div class="container">
                <div class="wrap">
                    <h2 class="title-center"> 팔로잉 </h2>
                    <form class="form-area" method="get" action="/following_list/">
                        {% csrf_token %}
                        <hr>
                        {% for ul in user_list %}
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">{{ ul.username }}</h5>
                                <h6 class="card-subtitle mb-2 text-muted">{{ ul.bio }}</h6>
                            </div>
                        </div>
                        <hr>
                    {% endfor %}
                        {% if error %}
                            <div class="alert alert-danger" role="alert">
                                {{ error }}
                            </div>
                        {% endif %}
                        <div style="float: right">
                            <a href="/user/profile/{{user.id}}" class="btn btn-secondary">프로필 페이지로</a> 
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
{% endblock %}

#followee_list.html
{% extends 'base.html' %}

{% block title %}
    팔로워
{% endblock %}
{% block content %}
    <div class="modal_overlay">
        <div class="modal_window">
            <div class="container">
                <div class="wrap">
                    <h2 class="title-center"> 팔로워 </h2>
                    <form class="form-area" method="get" action="/follower_list/">
                        {% csrf_token %}
                        <hr>
                        {% for ul in user_list %}
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">{{ ul.username }}</h5>
                                <h6 class="card-subtitle mb-2 text-muted">{{ ul.bio }}</h6>
                            </div>
                        </div>
                        <hr>
                    {% endfor %}
                        {% if error %}
                            <div class="alert alert-danger" role="alert">
                                {{ error }}
                            </div>
                        {% endif %}
                        <div style="float: right">
                            <a href="/user/profile/{{user.id}}" class="btn btn-secondary">프로필 페이지로</a> 
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
{% endblock %}

#views.py

@login_required
def followee_view(request, id):
    me = request.user
    user = UserModel.objects.get(id=id) #user id값을 받아서 user class 정보로 찾겠다는 거(기준은 id)     
    user_list = UserModel.objects.all().exclude(username=request.user.username)
    follow = UserModel.objects.filter(follow = user) 

    return render(request,'user/followee_list.html',{"user_list":follow})

@login_required
def follow_view(request, id):
    me = request.user
    user = UserModel.objects.get(id=id) #user id값을 받아서 user class 정보로 찾겠다는 거(기준은 id)     
    user_list = UserModel.objects.all().exclude(username=request.user.username)
    followee = UserModel.objects.filter(followee = user) 

    return render(request,'user/follow_list.html',{"user_list":followee})