occur error about Card component and map function

@@ -2,7 +2,7 @@
 ## CHATBOT WITH CRAWLING
 ## CHATBOT WITH CRAWLING
 
 
 front
 front
-- [x] Modify card component 
+- [ ] Modify card component 
 - [ ] Remove card message on dialogflow
 - [ ] Remove card message on dialogflow
 - [ ] Modify Intent on dialogflow
 - [ ] Modify Intent on dialogflow
 - [ ] Add additional functions on dialogflow
 - [ ] Add additional functions on dialogflow

@@ -2,6 +2,7 @@ import {
     SAVE_MESSAGE,
     SAVE_MESSAGE,
 } from './types';
 } from './types';
 
 
+//dataToSubmit 에 conversation이 들어감.
 export function saveMessage(dataToSubmit) {
 export function saveMessage(dataToSubmit) {
    
    
     return {
     return {

@@ -2,6 +2,7 @@ import {
     SAVE_MESSAGE,
     SAVE_MESSAGE,
 } from '../_actions/types';
 } from '../_actions/types';
 
 
+//비어있는 message array에 넣을 것
 export default function (state = {messages:[]}, action) {
 export default function (state = {messages:[]}, action) {
     switch (action.type) {
     switch (action.type) {
         case SAVE_MESSAGE:
         case SAVE_MESSAGE:

@@ -44,7 +44,11 @@ function Chatbot() {
                 console.log("res",response)
                 console.log("res",response)
 
 
                 for (let content of response.data) {
                 for (let content of response.data) {
-                    console.log(content)
+                    conversation = {
+                        who: '소통이',
+                        content : content
+                    }
+                    dispatch(saveMessage(conversation))
                 }
                 }
                 
                 
             } else {
             } else {
@@ -78,6 +82,7 @@ function Chatbot() {
     }
     }
 
 
 
 
+    //eventQuery 삭제하기.
     const eventQuery = async (event) => {
     const eventQuery = async (event) => {
 
 
         // We need to take care of the message Chatbot sent 
         // We need to take care of the message Chatbot sent 
@@ -130,7 +135,7 @@ function Chatbot() {
     }
     }
 
 
     const renderCards = (cards) => {
     const renderCards = (cards) => {
-        return cards.map((card,i) => <Card key={i} cardInfo={card.structValue} />)
+        return cards.map((card,i) => <Card key={i} cardInfo={card.content} />)
     }
     }
 
 
 
 
@@ -142,7 +147,8 @@ function Chatbot() {
         // template for normal text 
         // template for normal text 
         if (message.content && message.content.text && message.content.text.text) {
         if (message.content && message.content.text && message.content.text.text) {
             return <Message key={i} who={message.who} text={message.content.text.text} />
             return <Message key={i} who={message.who} text={message.content.text.text} />
-        } else if (message.content && message.content.payload.fields.card) {
+        } 
+        else if (message.content && message.content.description) {
 
 
             const AvatarSrc = message.who === '소통이' ? <Icon type="robot" /> : <Icon type="smile" />
             const AvatarSrc = message.who === '소통이' ? <Icon type="robot" /> : <Icon type="smile" />
 
 
@@ -151,7 +157,7 @@ function Chatbot() {
                     <List.Item.Meta
                     <List.Item.Meta
                         avatar={<Avatar icon={AvatarSrc} />}
                         avatar={<Avatar icon={AvatarSrc} />}
                         title={message.who}
                         title={message.who}
-                        description={renderCards(message.content.payload.fields.card.listValue.values)}
+                        description={renderCards(message.content)}
                     />
                     />
                 </List.Item>
                 </List.Item>
             </div>
             </div>

@@ -4,6 +4,34 @@ import { Card, Icon } from 'antd';
 const { Meta } = Card;
 const { Meta } = Card;
 
 
 function CardComponent(props) {
 function CardComponent(props) {
+    console.log(props)
+    return (
+        <Card
+            style={{ width: 300 }}
+            cover={
+                <img
+                    alt={props.cardInfo.content.description}
+                    src={props.cardInfo.content.image} />
+            }
+            actions={[
+                <a target="_blank" rel="noopener noreferrer" href={props.cardInfo.content.link}>
+                    <Icon type="ellipsis" key="ellipsis" />
+                </a>
+            ]}
+        >
+            <Meta
+                title={props.cardInfo.content.title}
+                description={props.cardInfo.content.description}
+            />
+
+        </Card>
+
+    )
+}
+
+
+/*
+function CardComponent(props) {
     return (
     return (
         <Card
         <Card
             style={{ width: 300 }}
             style={{ width: 300 }}
@@ -27,5 +55,5 @@ function CardComponent(props) {
 
 
     )
     )
 }
 }
-
+*/
 export default CardComponent
 export default CardComponent