프록시 재설정, api/datas, MealCard 생성

 node_modules
+json_datas.json
\ No newline at end of file

@@ -1794,6 +1794,51 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.28",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz",
+      "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.28",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
+      "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-/6xXiJFCMEQxqxXbL0FPJpwq5Cv6MRrjsbJEmH/t5vOvB4dILDpnY0f7zZSlA8+TG7jwlt12miF/yZpZkykucA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-70FAyiS5j+ANYD4dh9NGowTorNDnyvQHHpCM7FpnF7GxtDjBUCKdrFqCPzesEIpNDFNd+La3vex+jDk4nnUfpA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",
+      "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.28"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz",
+      "integrity": "sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -2313,6 +2358,14 @@
         "@types/node": "*"
       }
     },
+    "@types/http-proxy": {
+      "version": "1.17.4",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.4.tgz",
+      "integrity": "sha512-IrSHl2u6AWXduUaDLqYpt45tLVCtYv7o4Z0s1KghBCDgIIS9oW5K1H8mZG/A2CfeLdEa7rTd1ACOiHBc1EMT2Q==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
@@ -3104,6 +3157,37 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.2.tgz",
@@ -6975,9 +7059,9 @@
       "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q="
     },
     "http-proxy": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
-      "integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==",
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "requires": {
         "eventemitter3": "^4.0.0",
         "follow-redirects": "^1.0.0",
@@ -6985,14 +7069,55 @@
       }
     },
     "http-proxy-middleware": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
-      "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.0.4.tgz",
+      "integrity": "sha512-8wiqujNWlsZNbeTSSWMLUl/u70xbJ5VYRwPR8RcAbvsNxzAZbgwLzRvT96btbm3fAitZUmo5i8LY6WKGyHDgvA==",
       "requires": {
-        "http-proxy": "^1.17.0",
-        "is-glob": "^4.0.0",
-        "lodash": "^4.17.11",
-        "micromatch": "^3.1.10"
+        "@types/http-proxy": "^1.17.4",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "lodash": "^4.17.15",
+        "micromatch": "^4.0.2"
+      },
+      "dependencies": {
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+        },
+        "micromatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.0.5"
+          }
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
       }
     },
     "http-signature": {
@@ -13931,6 +14056,17 @@
             }
           }
         },
+        "http-proxy-middleware": {
+          "version": "0.19.1",
+          "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
+          "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
+          "requires": {
+            "http-proxy": "^1.17.0",
+            "is-glob": "^4.0.0",
+            "lodash": "^4.17.11",
+            "micromatch": "^3.1.10"
+          }
+        },
         "is-absolute-url": {
           "version": "3.0.3",
           "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",

@@ -3,10 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-regular-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/react-fontawesome": "^0.1.9",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
     "bootstrap": "^4.5.0",
+    "http-proxy-middleware": "^1.0.4",
     "react": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
     "react-dom": "^16.13.1",
@@ -34,6 +41,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "proxy": "http://localhost:5000/"
+  }
 }

 <!DOCTYPE html>
 <html lang="en" style="margin: 0;
 height: 100%;
-overflow: hidden;
+
 ">
   <head>
     <meta charset="utf-8" />
@@ -29,7 +29,7 @@ overflow: hidden;
     -->
     <title>MEALKHU</title>
   </head>
-  <body style="width : 100%; height:100%; margin: 0; overflow:hidden;">
+  <body style="width : 100%; height:100%; margin: 0;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" style="width : 100%; height:100%;"></div>
     <!--

 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "MEALKHU",
+  "name": "MEALKHU",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "fork.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "fork.ico",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "fork.ico",
       "type": "image/png",
       "sizes": "512x512"
     }

+button {
+    opacity: 1.0;
+  }
+  
+  button:hover {
+    opacity: 0.2;
+  }

+import React from 'react';
+import { Card, CardBody, CardTitle, CardText, CardImg, CardFooter, Button } from 'reactstrap';
+import './MealCard.css';
+import { faAngleRight } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+const MealCard = (props) => {
+  return (
+    <>
+      <Card style={{
+        'marginTop': '0.6rem',
+        'marginBottom': '0.6rem',
+        'boxShadow': '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
+      }}>
+        
+        <CardImg 
+        top width="100%" 
+        onerror="this.src='https://pngimage.net/wp-content/uploads/2018/06/no-image-available-icon-png-8.png'"
+        src={props.img} alt="Card image cap" />
+        <CardBody>
+          <CardTitle><strong>{props.name}</strong></CardTitle>
+          <CardText>
+            <small>{props.menu}</small>
+          </CardText>
+        </CardBody>
+        <CardFooter className="wrap" style={{
+          'padding': '0 0 0 0'
+        }}>
+        
+        <Button 
+        className="button"  
+        style={{
+          'width':'100%',
+          'borderRadius':'0 0 0 0',
+          'backgroundColor': '#F6F6F6',
+          'border': '0px',
+          'color':'black'
+        }}>
+        <span style={{
+          'float':'left',
+          'fontSize': '14px'
+        }}>
+        View more
+        </span>
+          <FontAwesomeIcon style={{
+            'color': 'black',
+            'float': 'right',
+            'paddingTop':'0.1rem'
+          }}
+          size="lg" icon={faAngleRight} />
+        </Button>
+        </CardFooter>
+      </Card>
+    </>
+  );
+};
+
+export default MealCard;
\ No newline at end of file

@@ -18,11 +18,11 @@ const NavBar = (props) => {
   return (
     <div>
     
-      <Navbar style={{'background-color': '#940f0f'}} light expand="md">
+      <Navbar style={{'backgroundColor': '#940f0f'}} light expand="md">
       <Container className="themed-container">
-        <png>
+        <span>
             <a href='/'><img src="logo.png" width="50" /></a>
-        </png>
+        </span>
         <NavbarBrand href="/" style={{'marginLeft':'1.5rem', 'color':'#fff'}}>MEALKHU</NavbarBrand>
         <NavbarToggler onClick={toggle} />
           <Collapse isOpen={isOpen} navbar>

@@ -2,6 +2,7 @@ import React from 'react';
 import NavBar from '../components/NavBar';
 
 const LandingPage = (props) => {
+
     return (
         <>
             <NavBar/>

-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import NavBar from '../components/NavBar';
+import MealCard from '../components/MealCard';
+import { Container, Row, Col } from "reactstrap";
+import axios from 'axios';
 
 const MenuPage = (props) => {
+    const [datas, setDatas] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    useEffect(() => {
+        const fetchData = async () => {
+            const result = await axios(
+              'http://192.168.0.2:5000/api/datas',
+              // localhost로 바꾸기
+            );
+            setDatas(result.data);
+            setIsLoading(true);
+          };
+       
+          fetchData();
+    }, []);
+    
     return (
         <>
             <NavBar/>
-            menu page
+            <Container>
+            <Row xs="2" sm="2" md="4">
+                
+                    {
+                        isLoading ? ( 
+                            datas.map((data) => 
+                            <Col>
+                            <MealCard
+                                id = {data.id}
+                                name = {data.name}
+                                address = {data.address}
+                                latitude = {data.latitude}
+                                longitude = {data.longitude}
+                                type = {data.type}
+                                menu = {data.menu}
+                                img = {data.img}
+                                img_source = {data.img_source}
+                            />
+                            </Col>
+                            ) 
+                         ) : 'Loading' 
+                    }
+                    
+                
+            </Row>
+            </Container>
         </>
     );
 }

+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+  app.use(
+    '/api',
+    createProxyMiddleware({
+      target: 'http://localhost:5000',
+      changeOrigin: true,
+    })
+  );
+};
\ No newline at end of file

@@ -46,6 +46,16 @@
         "qs": "6.7.0",
         "raw-body": "2.4.0",
         "type-is": "~1.6.17"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.4.24",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        }
       }
     },
     "bytes": {
@@ -303,9 +313,9 @@
       }
     },
     "iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.5.1.tgz",
+      "integrity": "sha512-ONHr16SQvKZNSqjQT9gy5z24Jw+uqfO02/ngBSBoqChZ+W8qXX7GPRa1RoUnzGADw8K63R1BXUMzarCVQBpY8Q==",
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -494,6 +504,16 @@
         "http-errors": "1.7.2",
         "iconv-lite": "0.4.24",
         "unpipe": "1.0.0"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.4.24",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        }
       }
     },
     "read-pkg": {

@@ -17,6 +17,7 @@
   "dependencies": {
     "body-parser": "^1.19.0",
     "concurrently": "^5.2.0",
-    "express": "^4.17.1"
+    "express": "^4.17.1",
+    "iconv-lite": "^0.5.1"
   }
 }

 const express = require('express');
 const bodyParser = require('body-parser');
+const fs = require('fs');
+var iconv  = require('iconv-lite');
 
 const app = express();
 const port = process.env.PORT || 5000;
 
+const dataBuffer = fs.readFileSync('json_datas.json')
+
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
 
@@ -12,4 +16,11 @@ app.get('/api/hello', (req, res) => {
     res.send('Hello skrrrr!');
 });
 
+
+app.get('/api/datas', (req, res) => {
+    iconv.extendNodeEncodings();
+    res.header("Access-Control-Allow-Origin", "http://localhost:3000");
+    res.send(iconv.decode(dataBuffer, 'EUC-KR').toString());
+})
+
 app.listen(port, () => console.log(`Listening on port ${port}`));
\ No newline at end of file