Merge pull request #19 from Jongyeol91/#18

[매장정보] #18 매장정보 페이지 초기 레이아웃

Author: kimji9663

package-lock.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "dependencies": {
+    "@ant-design/icons": "^4.3.0",
     "antd": "^4.2.5",
     "axios": "^0.19.2",
     "next": "^9.4.4",

package.json

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Row, Col } from 'antd';
+import LocationTap from './tab';
+import MapContent from './location';
+
+const Location = () => {
+  return (
+    <>
+      <Row>
+        <div style={{ border: '1px solid black' }}>
+          홈 > 매장정보
+        </div>
+      </Row>
+      <Row>
+        <Col span={8}>
+          <LocationTap />
+          <div style={{ border: '1px solid black', height: '600px' }}>임시 정보</div>
+        </Col>
+        <Col span={10}>
+          <MapContent />
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default Location;

pages/location/index.js

@@ -45,7 +45,7 @@ class MapContent extends Component {
   }
 
   render() {
-    return <MapContents id="Mymap" style={{ width: '90vh', height: '50vh' }} />;
+    return <MapContents id="Mymap" style={{ width: '60vh', height: '50vh' }} />;
   }
 }
 const MapContents = styled.div`

pages/location.js pages/location/location.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Menu } from 'antd';
+import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
+
+const { SubMenu } = Menu;
+
+const LocationTap = () => {
+  const [key, setKey] = useState('');
+
+  const handleClick = (e) => {
+    console.log('click ', e);
+    setKey(e.key);
+  };
+
+  return (
+    <Menu onClick={handleClick} selectedKeys={[key]} mode="horizontal">
+      <Menu.Item key="searchLoc" icon={<MailOutlined />}>
+        지역검색
+      </Menu.Item>
+      <Menu.Item key="storeInfo" icon={<MailOutlined />}>
+        매장정보
+      </Menu.Item>
+    </Menu>
+  );
+};
+
+export default LocationTap;