Aurora Modules

인스타그램피드

메인 페이지에서 인스타그램 연동시 노출되는 인스타그램 피드 모듈입니다.

모듈명: instagram원본소스

인스타그램 피드 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
isLoaded	boolean	false	인스타그램 데이터 로드 여부
username	string	-	인스타그램 사용자명
feed	Feed[]	[]	인스타그램 미디어 조회 API 응답값 중 `data`와 동일 (아래 타입 참조)

Feed 타입

속성명	타입	기본값	설명
media_type	string	-	미디어 유형 (VIDEO, IMAGE, CAROUSEL_ALBUM)
thumbnail_url	string	-	썸네일 URL (VIDEO 미디어에만 제공)
permalink	string	-	미디어 영구 URL
media_url	string	-	미디어 URL
username	string	-	인스타그램 유저 이름

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<shopby-instagram>
    <div>
        {{#if feed}}
        <header class="instagram-feed__heading">
            <em>@ {{username}}</em>
        </header>

        <article class="instagram-feed__contents">
            {{#each feed}}
            <figure class="instagram-feed__media">
                <img src="{{#if thumbnail_url}}{{thumbnail_url}}{{else}}{{media_url}}{{/if}}" alt="" loading="lazy" />
            </figure>
            {{/each}}
        </article>
        {{/if}} {{#unless isLoaded}}
        <article class="instagram-feed__contents">
            <div class="instagram-feed__media-skeleton"></div>
            <div class="instagram-feed__media-skeleton"></div>
            <div class="instagram-feed__media-skeleton"></div>
        </article>
        {{/unless}}
    </div>
</shopby-instagram>

<shopby-instagram>
    <div>
        {{#if feed}}
        <div class="instagram-feed__heading">
            <em>@ {{username}}</em>
        </div>

        <article class="instagram-feed__contents">
            {{#each feed}}
            <figure class="instagram-feed__media">
                <img src="{{#if thumbnail_url}}{{thumbnail_url}}{{else}}{{media_url}}{{/if}}" alt="" loading="lazy" />
            </figure>
            {{/each}}
        </article>
        {{/if}} {{#unless isLoaded}}
        <article class="instagram-feed__contents">
            <div class="instagram-feed__media-skeleton"></div>
            <div class="instagram-feed__media-skeleton"></div>
            <div class="instagram-feed__media-skeleton"></div>
        </article>
        {{/unless}}
    </div>
</shopby-instagram>

/* 여기에 스타일 코드를 작성해주세요. */