내일배움캠프 - Instagram clone coding - (3) 2-3일차 개발일지

스파르타 코딩클럽

내일배움캠프 AI 웹개발자양성과정 2회차

2022.04.29.-05.02 Instagram web UI clone coding - (3) 2-3일차 개발일지

0. 프로젝트 정보

1) 인스타그램 Web UI 클론 코딩
2) 목적

• 프론트엔드의 레이아웃을 알아보고 알맞은 태그와 속성을 이용하여 배치할 수 있는 능력 상승
• 반응형 레이아웃 만들어보기

1. 스토리 슬라이드부분

전체 부분인 stories의 width와
보이는 부분인 card의 width를 구해 차이만큼을
max-margin으로 잡고 버튼을 누를때마다 margin-left를 변경

• common.js

// 스토리 슬라이드 함수
// vector : 슬라이드 방향 - 0:왼쪽, 1:오른쪽
function move_story_slide(vector) {
    let margin_text = $('#stories').css('margin-left')
    let width_text = $('#stories').css('width')
    let box_text = $('#card').css('width')

    let margin_num = Number(margin_text.slice(0, -2))
    let width_num = Number(width_text.slice(0, -2))
    let box_num = Number(box_text.slice(0, -2))

    let max_margin = 0  // 최대 마진 값
    let move_margin = 150   // 한번 이동할 때 움직일 마진 값

    if (width_num > box_num) {
        max_margin = width_num - box_num
    }

    if (vector == 1) {
        if (margin_num == 0) {
            $('#bg_slide_button_left').css("opacity", "1")
            $('#bg_slide_button_left').css("display", "block")
        }
        margin_num = margin_num - move_margin
        if (margin_num < -1 * max_margin) {
            margin_num = -1 * max_margin
            $('#bg_slide_button_right').css("opacity", "0")
            $('#bg_slide_button_right').css("display", "none")
        }
    } else {
        if (margin_num == -1 * max_margin) {
            $('#bg_slide_button_right').css("opacity", "1")
            $('#bg_slide_button_right').css("display", "block")
        }
        margin_num = margin_num + move_margin
        if (margin_num > 0) {
            margin_num = 0
            $('#bg_slide_button_left').css("opacity", "0")
            $('#bg_slide_button_left').css("display", "none")
        }
    }
    let update_margin = (margin_num).toString() + "px"

    $('#stories').css('margin-left', update_margin)
}

2. 검색창 입력시 게시버튼 활성화

포스트별 name을 붙여서 포스트를 구분하여 버튼활성화

• common.js

  // 현재 선택된 댓글창에 상태에 따라 게시 버튼 효과 변경
    $('.post_comment_input').on('focus blur keyup', () => {
        let name = $(':focus').attr('name');

        if($(`.post_comment_input[name='${name}']`).val() === ""){
            $(`.post_comment_input_btn[name='${name}']`).css('opacity', '0.5')
        } else {
            $(`.post_comment_input_btn[name='${name}']`).css('opacity', '1')
        }
    })

3. 기타 정보

1) 이전 강의일지

https://velog.io/@kimphysicsman/내일배움캠프-Instagram-clone-coding-2-1일차-개발일지

2) github

https://github.com/kimphysicsman/clone_instagram

3) 발표영상

https://youtu.be/8_W51i9YCx0