021 마이페이지

마지막으로 마이페이지를 작성해 보도록 하겠습니다. 마이페이지를 작성하기에 앞서 제일 먼저 수정해야 하는 파일은 layout.html입니다.

여기 사람 모형 아이콘에다가 마이페이지로 가는 링크를 만들어 주도록 하겠습니다. config/templates/layout.html 맨 처음에 뼈대를 잡았던 파일이 있습니다. div.splite_user_icon_outline 태그 부분을 수정합니다. 마이페이지는 아무나 가면 안 되기 때문에 사용자가 로그인 상태일 때만 마이페이지로 이동합니다. 로그인 상태가 아니라면 버튼을 눌러도 마이페이지로 갈 수 없고 로그인 페이지로 보내주겠습니다.

파일명 : config/templates/layout.html


{% if user.is_authenticated %}           
<div class="sprite_user_icon_outline">
    <a href="{% url 'post:my_post_list' user.username %}"></a>
</div>                
{% else %}                
<div class="sprite_user_icon_outline">
    <a href="{% url 'accounts:login' %}"></a>
</div>                
{% endif %}

우리가 content 블록 부분 head 블록, 총 두개의 블록을 만들었습니다. 자바스크립트를 불러올 블록을 하나 더 추가하도록 하겠습니다. 마이페이지 부분에서는 외부에서 자바스크립트 파일을 불러와서 사용을 할 것입니다.

파일명 : config/templates/layout.html


<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다.) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- <script src="{% static 'js/insta.js' %}"></script> -->
{% block js %}
{% endblock %}

위에서 쓰인 마이페이지 URL도 urls.py에 정의하도록 하겠습니다.

파일명 : post/urls.py


urlpatterns = [
    ...
    path('<username>/list/detail/', my_post_list, name='my_post_list'),
]

이름을 받고 요청을 받으면 뷰 함수가 작동하도록 하겠습니다. my_post_list 뷰 함수를 views.py에 정의하겠습니다.

파일명 : post/views.py


def my_post_list(request, username):
    user = get_object_or_404(get_user_model(), username=username)
    user_profile = user.profile
    target_user = get_user_model().objects.filter(id=user.id)
        
    post_list = user.post_set.all() 
    all_post_list = Post.objects.all()
    
    return render(request, 'post/my_post_list.html', {
        'user_profile': user_profile,
        'target_user': target_user,
        'post_list': post_list,
        'all_post_list': all_post_list,
        'username': username,
    })

참고로 반복적인 조인 연산을 줄여 쿼리를 최적화 하고 싶다면 다음과 같이 작성하시면 됩니다.

파일명 : post/views.py


target_user = get_user_model().objects.filter(id=user.id)\
																			.select_related('profile')\
																      .prefetch_related('profile__follower_user__from_user', 'profile__follow_user__to_user')

my_post_list.html를 post/templates/post 폴더 안에 만들도록 하겠습니다.

파일명 : post/templates/post/my_post_list.html


{% extends "post/layout.html" %}
{% load static %}

{% block head %}
<link rel="stylesheet" href="{% static 'css/mylist.css' %}">
<link rel="stylesheet" href="{% static 'css/profile.css' %}">
{% endblock %}

{% block content %}
<div id="main_container">
    <section class="b_inner">
        <div class="hori_cont">
            <div class="profile_wrap">
                <div class="profile_img">
                    {% if user_profile.picture %}
                    <img src="{{ user_profile.picture.url }}" alt="{{ user.username }}의 프로필 사진">
                    {% else %}
                    <img src="{% static 'imgs/img_section/img01.jpg' %}" alt="{{ user.username }}의 프로필 사진">
                    {% endif %}
                </div>
            </div>

            <div class="detail">
                <div class="top">
                    <div class="user_name">{{ user.profile.nickname }}</div>
                    <a href="{% url 'accounts:logout' %}" class="logout">로그아웃</a>
                </div>

                <ul class="middle">
                    <li>
                        <span>게시물</span>
                        {{ user.post_set.count }}
                    </li>
                    <li>
                        <span>팔로워</span>
                        {{ user.profile.follower_count }}
                    </li>
                    <li>
                        <span>팔로우</span>
                        {{ user.profile.following_count }}
                    </li>
                </ul>

                <p class="about">
                    <span class="nick_name on">내가쓴글</span>
                    <span class="book_mark">북마크</span>
                </p>
            </div>
        </div>

        <div class="mylist_contents contents_container active">
            {% for post in post_list %}
            <div class="pic">
                <a href="{% url 'post:post_detail' post.pk %}"><img src="{{ post.photo.url }}" alt=""></a>
            </div>
            {% endfor %}
        </div>

        <div class="bookmark_contents contents_container">
            {% for post in all_post_list %}
            {% for bookmark_user in post.bookmark_user_set.all %}
            <div class="pic">
                {% if user == bookmark_user.profile.user %}
                <a href="{% url 'post:post_detail' post.pk %}"><img src="{{ post.photo.url }}" alt=""></a>
                {% endif%}
            </div>
            {% endfor %}
            {% endfor%}
        </div>
    </section>
</div>
{% endblock %}

마이페이지로 들어가면 작성한 게시물, 팔로워/팔로우 수가 보입니다. 북마크를 누르면 북마크 게시글이 보여야하는데 아직 작동하지 않습니다. JavaScript로 조작할 것입니다. config/static/js 폴더에 profile.js 파일을 추가합니다.

파일명 : config/static/js/profile.js


const tapContainer = document.querySelector('.about');
const flex_Container = document.querySelectorAll('.contents_container');
const taps = document.querySelectorAll('.about > span');

function openCity(e){
    let elem = e.target;
    
    if(elem.matches('[class="nick_name"]')){        
        flex_Container[0].classList.add('active');
        flex_Container[1].classList.remove('active');
        taps[0].classList.add('on');
        taps[1].classList.remove('on');        
    }else if(elem.matches('[class="book_mark"]')){        
        flex_Container[1].classList.add('active');
        flex_Container[0].classList.remove('active');
        taps[1].classList.add('on');
        taps[0].classList.remove('on');        
    } 
}

tapContainer.addEventListener('click', openCity);

이제 my_post_list.html 에서 js 블록을 추가하여 profile.js를 추가합니다.

파일명 : post/templates/post/my_post_list.html


...

{% block js %}
<script src="{% static 'js/profile.js' %}"></script>
{% endblock %}

이제 북마크를 누르면 잘 변경이 됩니다.