feed 상태에 따른 레프트 메뉴 마크업 변경

pages/index.vue

@@ -61,8 +61,17 @@
         </md-select>
       </md-field>
 
+      <!-- Default Markup (if Feed Empty) -->
+      <md-empty-state v-if="feed.length === 0 && !user" class="md-primary" md-icon="bookmarks" md-lable="Nothing in Feed" md-description="Logint to bookmark headlines">
+        <md-button to="/login" class="md-primary md-raised">
+          Login
+        </md-button>
+      </md-empty-state>
+
+      <md-empty-state v-else-if="feed.length === 0" class="md-accent" md-icon="bookmark_outline" md-lable="Nothing in Feed" md-description="Anythig you bookmark will be safely stored here" />
+
       <!-- Feed Content -->
-      <md-list v-for="headline in feed" :key="headline.id" class="md-triple-line">
+      <md-list v-else v-for="headline in feed" :key="headline.id" class="md-triple-line">
         <md-list-item>
           <md-avatar><img :src="headline.utlToImage" :alt="headline.title"></md-avatar>