TIL10 UI 클론 코딩 플젝 3일차 (인스타 UI 모티브)

 

 

목업페이지

Day1 첫째날 어떻게할지 구상하던도중 그려놨던것들

 

/*스토리 라인 프로필*/
.story-profile {
    width: 65px;
    height: 65px;
    border-radius: 70%;
    position: relative;
    border: 3px solid transparent;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to left, #b347ab, #d42694, orange 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    /*overflow: hidden;*/
}

/*스토리 박스*/
.story-box {
    height: 119px;
    border: solid 1px #dbdbdb;
    display: flex;
    border-radius: 2px;
    justify-content: space-around;
    background-color: white;
    font-weight: lighter;
    font-size: 11px;
    color: #696868;
    text-align: center;
}

.story-name {
    margin-top: 5px;
}

 

스토리 라인 프로필을 이 css를 이용하여 구현하였다.

 

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
    animation: showText1 0.5s;
}

.modal_body {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 330px;
    text-align: center;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
    transform: translateX(-50%) translateY(-50%);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    line-height: 50px;
}

.modal-text {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #dbdbdb;
    background-color: white;
}

 

 

모달기능을 구현한부분

 

<!-----------모달------------------------------------------------------------------------------------------------------>
<div id="modal-option" class="modal-overlay">
    <div id="modal-script" class="modal_body">
        <button style="color:red; font-weight: bold; background-color: white; margin-top: -20px; border: none; border-radius: 10px;">
            신고
        </button>
        <button class="modal-text" style="color: red; font-weight: bold;">
            팔로우 취소
        </button>
        <button class="modal-text">
            게시물로 이동
        </button>
        <button class="modal-text">
            공유 대상...
        </button>
        <button class="modal-text">
            링크 복사
        </button>
        <button class="modal-text" style="border-bottom: 1px solid #dbdbdb;">
            퍼가기
        </button>
        <button id="close-modal" class="close-area"
                style="background-color: white; border: none; border-radius: 10px;">
            취소
        </button>
    </div>
</div>
<script>

    // 모달 열기
    const modal = document.getElementById("modal-option");
    const buttonOpenModal = document.getElementById("open-modal");
    buttonOpenModal.addEventListener("click", e => {
        modal.style.top = window.pageYOffset + 'px'; // 모달띄울시, 스크롤이 내려가면 창이 뜨는 위치 수정
        modal.style.display = "flex";  // 모달 나타나게하기
        document.body.style.overflowY = "hidden"; // 모달 띄웠을때 스크롤안되게하기

    });

    // 모달 닫기
    const buttonCloseModal = document.getElementById("close-modal");
    buttonCloseModal.addEventListener("click", e => {
        modal.style.display = "none";
        document.body.style.overflowY = "visible";
    });

    modal.addEventListener("click", e => {
        const evTarget = e.target
        if (evTarget.classList.contains("modal-overlay")) {
            modal.style.display = "none"
            document.body.style.overflowY = "visible";
        }
    });

 

 

 

 

 

 

 

 

구현해낸 영상 링크

영상링크: https://www.youtube.com/watch?v=8TnWU3ofm7E

이번 UI 클론코딩을하면서 

 

이 분의 영상을 참고하면서 만들었지만 https://www.youtube.com/watch?v=M8UPyeF5DfM

 

튜터님께서 가이드해주신 기준에 부적합했기에 메인레이아웃의 스타일을 바꿔주는데 시간을 많이 들였던거같습니다. 그리고 대체적으로 구현자체가 많이 빡세다기보다는 기술 하나하나 집어넣는데 구조가 비정상적이면 거기에서 내 구조로 응용해서 사용하는 부분이 많이 어려웠던거같아요 기술자체는 맞지만 레이아웃 구조때문에 적용을하더라도 어떻게 보면 참고했던 자료의 부분을 많이 따라가야되기때문에 중간에 코드가 많이 꼬이기도하고 레이아웃도 많이 꼬여서 고생을 많이했던거같습니다. 부트스트랩 nav바 기술을 가져왔구 캐러셀을 사용하여 인스타그램의 포스팅페이지와 유사하게끔 구성을 해놨습니다. 그 과정에서 id값을 활용하여 중복해서 불러오는 기술을 몰랐기에 부트스트랩에있는 캐러셀을 각각 가져와서 비슷하게 구성을 해놨는데 이부분에대해서는 튜터님께서 지도하에 알려주셨으면 좋겠다는생각을했습니다. 저희도 이걸 짜보겠지만 저희가 짜는것에서 그치지않고 튜터님들도 모범답안을 하나정도씩 가지고 계셔야 저희가 나중에 리펙토링을하더라도 보다 수월하게 진행할수있지않을까싶기도하고 튜터님들의 그런 아이디어 적인 부분이나 로직같은부분이 현업에서 많이 사용하시는분들의 기술들이니 더 이해하기도 빠르고 좋은 로직이 아닐까싶네요 이건 개인적인 의사지만 참 이러한 부분들은 필요한거같습니다.

모달부분을 넣어서 기존인스타 느낌에 팝업창을 띄울수있게 노력했구요 이 부분에서 팀원들의 도움을 받아서 직접적으로 알려주기엔 시간이 서로 안맞아 많이 참고하여서 코드를 활용해봤습니다. 직접찾아보기도했고 이걸 적용시켰을때 얼마나 더 깔끔한지도 비교해봤구요.

이번 프로젝트를 하면서 느낀점은 무언가를 구현함에있어서 하나의 생각에 묶여서 한가지의시선으로만바라보는 그런부

분을 많이 고쳐야겠다는 생각이들었습니다. 

 

깃허브주소: https://github.com/creamone/kimjinsoo_uiclone

 

 

10조 김삼이일(KTLO:KIM THREE LEE ONE) 팀장 김진수

 

1. Keep

• 1. 내가 구현할수있는로직에 대해서 생각해볼수있는 자세 가지기
• 2. 내가 구현하고자 하는것을 안되더라도 끝까지 포기하지 않는 자세
• 3. 안되면 팀원들과 공유해보면서 진행해보기

2. Problem

• 1. 어떤걸 어떻게 해야될지 모르겠던점
• 2. git을 어떻게 쓸지모르겠던점
• 3. 문제가생기면 너무 나 스스로 해결하려했던점

 

2) 원인

• 많은 자료들을 보더라도 분별력있게 좋고 나쁨을 아직은 판단하지못해서
• git에 대한 강의를 사전에 충분히보거나 나머지시간에 봤어야했는데 안봤던점
• 도움을 받아야 당연한건데 어디서부터 어디를 물어봐야될지는 잘 모르겠고 그걸 다 물어보기엔 너무 많은 시간이 할애됨 내가 구현해야될 기본적인건 어떻게든 완료는하지만 남들이 다 구현하는 그 이상의것들을 나는 놓치는거같은 느낌이들게됨

 

3. Try

1. 다음 프로젝트때는 시선을 한곳에 고정하지않고 자꾸 새로운 자료들을 계속 찾아보고 내가 원하는걸 명확하게 하고 가야될거같다. 너무 안일하게 영상 하나보고 그걸로 틀을 짤수있다는 오만한 판단
2. git에 대한 강의를 좀 저녁에라도 찾아서 학습하고 자주사용해봐야겠다. 
3. 튜터님에게 적극적으로 질문해야할것이고 음.. 질문도 구체적으로 명확하게 물어봐야겠다 너무 범위가 넓게 물어보니까 튜터님도 넓은범위로 대답해주셨기때문에 나도 어느정도 구체화시켜서 질문을 해야겠다.