[도쿄의 사계] #2021/1/21 개발일지

What I did

<Mytripbox 페이지>

🎈 app.py

어느 페이지에서도 트립박스 페이지로 이동할 수 있게 함

@app.route('/tripbox')
def box():
    return render_template("tripbox.html")

🎈 CSS

slick을 이용하여 일단 코드만 넣어 봄.
배경은 밝은 회색. 옆으로 이동 시키는 버튼은 코랄색으로 지정.

{#slick / slider#}
    body {
        background: lightgrey;
    }

    ul {
        padding-top: 50px;
        margin: 0;
    }

    img {
        max-width: 100%;
        object-fit: cover;
    }

    .slider {
        max-width: 600px;
        margin: 0 auto;
        padding-bottom: 10px;
    }

    .slick-prev:before,
    .slick-next:before {
        color: coral; /*--- カラーコード ---*/
    }

🎈 JS

일단은 이미지만 보이게.. 여기에 관광명소 이름이랑 이미지만 같이 끌어다 넣고 싶다. 밑에 동그란 버튼을 눌러도 이동 가능, 옆의 화살표를 눌러도 이동 가능.
(아무 것도 클릭안하면 자동 재생으로 옆으로 이동 함)

   $(function () {
        $('.slider').slick({
            dots: true, //下の丸ぽっち（インジケーター）を表示
            autoplay: true, //自動再生
            autoplaySpeed: 5000 //自動再生の速度
            //ここにオプションを書いていく
        });
    });
    
    

• 폰트 어썸으로 아이콘 넣기!

즐겨찾기의 북마크를 넣기 위해서 폰트 어썸을 사용했는데, 먼저 HTML코드 안에 아래의 코드를 넣어줘야 실행된다. 나는 구버전을 사용했다.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

🎈fontawesome 구버전
https://fontawesome.com/v4.7.0/icons/

🎈fontawesome 뉴버전
https://fontawesome.com/icons?from=io

처음에는 하트를 사용하려 하였으나, 하트는 북마크라는 인지도가 낮고 관광명소명 옆에 붙이니까 애교같이 보여서(예) 우에노❤︎) 그냥 평범하게 북마크로 가기로...

그래도 혹시모르니 일단 메모는 해둬야지.

🎈
fa-heart-o (♡)　

<i class="fa fa-heart-o" aria-hidden="true"></i> 

🎈
fa-heart (🖤)

<i class="fa fa-heart" aria-hidden="true"></i>

그리고 북마크

🎈
fa-bookmark-o (비워짐)

<i class="fa fa-bookmark-o" aria-hidden="true"></i>

🎈
fa-bookmark (채워짐)

<i class="fa fa-bookmark" aria-hidden="true"></i>

Doing..

・　 localStorage 알아보기 (구글링,동영상)
・　 이것 저것 코드 넣어보기
・　 도쿄 관광 공식사이트 코드 확인해보기

What to do

• 클릭했을 때 북마크 추가 및 해제 여부 바로 뜨는 것 (북마크 색깔이 클릭 여하에 따라 바로 바뀜)
• 회원가입/로그인 없이 각각의 유저가 자신만의 tripbox 구현
• 매칭 결과에서 북마크를 클릭하면 Mytripbox의 페이지로 자동 이동 저장시키기
• Mytripbox의 페이지에는 slick이용해서 슬라이드 형식으로 저장된 북마크의 관광명소 확인하기