[TIL] 2022.05.09 (인스타 UI 클론 코딩 - 팀 프로젝트3)

https://sdrtst.tistory.com/32

[TIL] 2022.05.04 (인스타 UI 클론 코딩 - 팀 프로젝트2)

 

지난 시간에는 마이 페이지 UI에 대한 설정을 해주었고, 오늘은 Flask를 사용하여 MongoDB에 데이터를 가져와 활동과 하단 Feed 박스에 GET으로 불러온 데이터를 표시해주게끔 설정해주었다.

 

그리고 프로젝트를 진행하면서 일부 UI 부분을 몇 가지 수정해주었다.

 

아직은 미완성

 

아직 진행 중인 마이 페이지 UI이다.

이후 추가될 사항이 남아있기에 조금씩 UI도 수정해주면서 기능들을 추가해주었다.

 

다음은 프로젝트를 진행하며 수정된 UI이다.

 

1) Feed 이미지에 hover 기능 추가

마우스를 올리면 약간 흐려지도록 opacity 설정을 해줌

.picture_box img:hover {
    opacity: 0.7;
    cursor: pointer;
}

 

해당 부분은 사진 위에 마우스 hover시 불투명토 설정을 위해 opacity을 0.7 주었고, 마우스 커서가 바뀌도록 설정해주었다.

 

2) 활동(activity) 박스에 스크롤 추가

활동 박스에 스크롤 기능 추가

/* 활동(heart) 박스 */
.activity {
    width: 500px;
    max-height: 300px;
    overflow: auto;
    margin-top: 5px;
    background-color: white;
    position: fixed; /* 고정하기 위해 사용 */
    text-align: center;
    border: 1px solid #DBDBDB;
    border-radius: 1%;
    display: none;
}

/* 활동(heart) 박스에서 스크롤바가 안보이도록 설정 */
.activity::-webkit-scrollbar {
    display: none;
}

/* 활동(heart) 박스 안에 들어가는 여백값 */
.activity_margin {
    margin-top: 30px;
    margin-bottom: 30px;
    padding-right: 50px;
    padding-left: 50px;
}

/* 활동(heart) 박스 내 <p> 태그들의 상/하 여백 */
.activity_margin p {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* 세부 활동들에 대한 텍스트 위치를 왼쪽으로 배치 */
.other_activity {
    text-align: left;
}

 

우선 박스 크기를 데이터 값이 추가되어도 세로로 너무 길어지지 않도록 세로 크기를 max-height: 300px;을 주었다.

스크롤 설정을 위해 overflow를 auto로 해주었고, 스크롤이 안 보이도록 -webkit-scrollbar 설정을 display: none;으로 설정해주어 해당 박스에서 스크롤 막대가 안 보이도록 설정해주었다.

해당 설정은 스크롤 박스만 안 보이도록 설정을 해주었기 때문에, 스크롤은 정상적으로 되는 모습을 볼 수 있다.

 

다음은 Javascript를 사용하여 activity버튼과 profile버튼을 조금 수정해주었다.

 

해당 버튼 설정

// 활동 버튼을 누르면 실행되는 함수
function openActivity() {
    if ($("#activity").css("display") == "block") {
        $("#activity").hide();
    } else {
        $("#activity").show();
        $("#profile_and_logout").hide();
    }
}

// 프로필 버튼을 누르면 실행되는 함수
function openProfile() {
    if ($("#profile_and_logout").css("display") == "block") {
        $("#profile_and_logout").hide();
    } else {
        $("#profile_and_logout").show();
        $("#activity").hide();
    }
}

 

단순히 해당 버튼을 클릭하면 다른 버튼이 꺼지도록 설정해주었다.

이후 시간이 남는다면 화면 클릭 시 창이 닫히는 등의 추가적인 수정을 해줄 것이다.

 

이제 내가 구현하고자 하는 기능들을 만들어보려고 했다.

하지만 큰 정보가 없는 상태로 시작하려다 보니 조금 오랜 시간이 걸렸고, 계속 시도해보다 보니 어느 정도 납득할만한 결과를 도출해냈다.

 

아직은 MongoDB에 데이터가 들어있지 않았기에 시작 전 테스트를 위한 테스트용 데이터들을 생성해두었다.

 

MongoDB에 넣어둔 임시 데이터들

 

아직은 전체적으로 프로젝트가 완성되지 않았기 때문에 테스트용으로 데이터들을 만들어두었다.

 

이제 본격적으로 코드를 구현해보자.

 

1) 활동(activity) 표시 (GET)

테스트용 데이터들이 표시되는 모습

# 마이 페이지 활동 GET
@app.route('/api/activity', methods=['GET'])
def activity_view():
    comments = list(db.comments.find({}, {'_id': False}))
    follower = list(db.follower.find({}, {'_id': False}))
    likes = list(db.likes.find({}, {'_id': False}))
    return jsonify({'result': 'success', 'comments': comments, 'follower': follower, 'likes': likes})

 

우선 해당 데이터베이스에 있는 값을 가져오기 위해 db.위치.find()를 사용하여 해당 위치에 있는 데이터들을 찾아 각 변수에 담아주었다.

 

function Ativity_list() {
    $.ajax({
        type: "GET",
        url: "/api/activity",
        data: {},
        success: function (response) {
            if (response["result"] == "success") {
                let comments = response['comments'];
                let follower = response['follower'];
                let likes = response['likes'];
                // console.log(comments, follower, likes);
                for (let i = 0; i < comments.length; i++) {
                    let user_id = comments[i]['user_id'];
                    let comment_id = comments[i]['comment_id'];
                    // 해당 a 부분에 로그인 시 사용된 user_id값으로 바꿔줄 것
                    if (user_id == "a") {
                        let comment_add_html = `<p>${comment_id}님이 회원님의 게시물에 댓글을 남겼습니다.</p>`
                        $('#activity-box').append(comment_add_html)
                    }
                }
                for (let i = 0; i < follower.length; i++) {
                    let user_id = follower[i]['user_id'];
                    let follow_id = follower[i]['follow_id'];
                    // 해당 a 부분에 로그인 시 사용된 user_id값으로 바꿔줄 것
                    if (user_id == "a") {
                        let follow_add_html = `<p>${follow_id}님이 회원님과 팔로우를 했습니다.</p>`
                        $('#activity-box').append(follow_add_html)
                    }
                }
                for (let i = 0; i < likes.length; i++) {
                    let user_id = likes[i]['user_id'];
                    let like_id = likes[i]['like_id'];
                    // 해당 a 부분에 로그인 시 사용된 user_id값으로 바꿔줄 것
                    if (user_id == "a") {
                        let like_add_html = `<p>${like_id}님이 회원님의 게시물에 좋아요를 남겼습니다.</p>`
                        $('#activity-box').append(like_add_html)
                    }
                }
            }
        }
    })
}

 

그리고 해당 코드와 같이 Ajax와 JQuery를 이용하여 코드를 구현하였다.

 

해당 데이터들을 각 데이터 폴더 내에 user_id 조건을 만족하는 데이터들을 html로 추가해주어 해당 화면처럼 표시되도록 만들어주었다.

 

2) 마이페이지 하단 Feed 표시 (GET)

위(html) / 아래(GET으로 불러온 데이터들)

 

우선 확인을 위해 원래 표시해두었던 html 코드를 한 줄 남겨두었고, 그 밑에 GET으로 조회한 데이터 값이 표시되도록 설정해주며 작업을 진행하였다.

 

# 마이 페이지 하단 피드img GET
@app.route('/api/feeds', methods=['GET'])
def feed_view():
    posts = list(db.posts.find({}, {'_id': False}))
    return jsonify({'result': 'success', 'posts': posts})

 

posts에 있는 이미지 값을 가져와서 해당 부분에 표시하는 것이기 때문에, posts라는 데이터베이스 폴더를 만들고 임시로 img 값(링크)들을 넣어주었다.

 

// 게시물 작성 시 마이페이지 하단에 Feed 목록을 img 형태로 불러옴 GET
// 미완
function Feed_list() {
    $.ajax({
        type: "GET",
        url: "/api/feeds",
        data: {},
        success: function (response) {
            if (response["result"] == "success") {
                let posts = response['posts'];
                for (let i = 0; i < posts.length; i++) {
                    let img = posts[i]['img']
                    let user_id = posts[i]['user_id']

                    if (i % 3 == 0) {
                        let feeds_add_html = `<div class="picture_boxes" id="feeds-box">`
                        $('#feeds-box').append(feeds_add_html)
                    }

                    // 해당 a 부분에 로그인 시 사용된 user_id값으로 바꿔줄 것
                    if (user_id == 'a') {
                        let feed_add_html = `<div class="picture_box">
                                                <img src=${img} alt="">
                                            </div>`
                        $('#feed-box').append(feed_add_html)
                    }
                }
            }
        }
    })
}

<!-- html 부분 -->
<!-- 미완 -->
<div class="picture_boxes" id="feeds-box">
    <div class="picture_box" id="feed-box"></div>
</div>

 

이 부분은 아직 완성되진 않았고, 현재 진행 중인 코드이다.

 

posts에 있는 데이터 중 img의 값을 가져오고 if문을 통해 해당 user_id와 동일한 Feed를 불러오도록 설정해주었다.

 

사진을 보면 알다시피 코드는 정상적으로 실행되는 모습이지만, 아직은 내가 원하는 대로 흘러가지 않는 모습을 볼 수 있었다.

 

no : 바라지 않았던 모습 / ok : 내가 원했던 모습

 

원래는 picture_box가 3개 이상이 되면 4개째에 picture_boxes라는 구역이 하나 더 생성되어 그 구역 내에 생성이 되도록 만들고 싶었다.

>> [ 1구역(1 2 3) 2구역(4 5 6) 3구역(7 8 9) 이런 식으로.. ]

 

아직 미숙한 실력 때문인가, 이해도가 부족해서 그런 건가 아직까지 이해가 되지 않는 부분이다.

그렇기에 남은 시간 동안 계속 시도해볼 예정이다.

 

-

 

이제 점차 시간이 지나면서 팀 프로젝트 마감일이 다가오고 있다.

그렇기에 완벽하게 구현하지 못하는 부분을 보며 조금씩 마음이 조급해지고 있다.

 

내일은 우선적으로 Feed 부분에 대한 설정을 계속해볼 예정이다.

만약 문제가 해결되어서 추가적으로 시간이 남는다면 내가 만들고자 하는 모습의 형태로 완성해보고자 한다.

 

얼마 남지 않은 시간이지만 으쌰 으쌰 노력해보자!

 

:P