Til - 27day

---

파일 업로드를 종료하고 프로젝트 내 마이페이지를 구현하기 시작했다.

---

profile.html

# 그리드 형태로 구성 : 반복문을 돌면서 post가 하나씩 출력됨
<div class="result_list">
	{% for my_result in results %}    # jinja2 반복문
        <div class="post" onclick="result_modal_func('{{ my_result.num }}')">    # 클릭시 모달 오픈
            
            {% if my_result.file_type == 'image' %}    # 파일 타입이 이미지일 경우 img태그
                <img src="{{ my_result.predict_path }}" alt="게시물없음">
            {% elif my_result.file_type == 'video' %}    # 파일 타입이 비디오일 경우 video태그
                <video src="{{ my_result.predict_path }}" alt="게시물없음" type="video/mp4" controls preload="metadata"></video>
            {% endif %}
            # date의 문자열을 인덱싱하여 가져오기
            <p>등록일: {{ my_result.date[:4] }}년 {{ my_result.date[5:7] }}월 {{ my_result.date[8:10] }}일</p>
            <p>작성자: {{ my_result.name }}</p>
            <p>파일종류: {{ my_result.file_type }}</p>
            
        </div>
	{% endfor %}
</div>

profile.html 내 모달작동

// result Modal Func
// 모달창 오픈 : result_num에 해당하는 모달창을 열기
function result_modal_func(result_num) {
    console.log(result_num, typeof (result_num))
    document.querySelector('.modal_post_' + result_num).style.display = 'flex';
    document.querySelector('.modal_overlay_' + result_num).style.display = 'block';
    document.querySelector('.modal_overlay_' + result_num).style.top = window.pageYOffset + 'px';
    $('body').css("overflow", "hidden");  // 오픈시 스크롤방지
}



// 모달창 오픈 : result_num에 해당하는 모달창을 닫기
function result_modal_func_off(result_num) {
    console.log(result_num, typeof (result_num))
    document.querySelector('.modal_post_' + result_num).style.display = 'none';
    document.querySelector('.modal_overlay_' + result_num).style.display = 'none';
    document.querySelector('.modal_overlay_' + result_num).style.top = window.pageYOffset + 'px';
    $('body').css("overflow", "scroll");  // 클로즈시 스크롤노출
}

profile.py

# 블루프린트로 연결
@bp.route('/', methods=['GET'])
def profile():
    token_receive = request.cookies.get('mytoken')  # 쿠키의 토큰값 받기
    try:
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])  # 토큰값 디코드
        user_info = db.USER.find_one({"id": payload['id']})  # 페이로드 내 id값으로 유저정보 검색
        
        # 유저정보의 회사 데이터를 리스트화 후 날짜별 정렬
        results = sorted(list(db.RESULT.find({'company': user_info['company']})), key=lambda x: x['date'], reverse=True)
		
        # 경로값을 수정
        for i, res in enumerate(results):
            results[i]['upload_path'] = '../' + str(res['upload_path'])
            results[i]['predict_path'] = '../' + str(res['predict_path'])
		
        return render_template('profile.html', user_info=user_info, results=results)

	# 예외처리
    except jwt.ExpiredSignatureError:  # 해당 token의 로그인 시간이 만료시 login 페이지로 redirect
        return redirect(url_for("user.login"))
    except jwt.exceptions.DecodeError:  # 해당 token이 다르다면 login 페이지로 redirect
        return redirect(url_for("user.login"))