eastjun-dev · ganeodolu · Feb 4, 2020 · Feb 4, 2020 · Feb 5, 2020 · Feb 6, 2020
diff --git a/mission005/ganeodolu/css/styles.css b/mission005/ganeodolu/css/styles.css
@@ -0,0 +1,174 @@
+.container {
+    width: 700px;
+    margin: 50px auto 80px;
+}
+
+.header {
+    border: 4px solid #ff9536;
+    border-radius: 14px;
+}
+
+.title {
+    display: inline-block;
+    margin: 10px 20px;
+    font-size: 20px;
+    color: #bd5a00;
+}
+
+.search {
+    display: inline-block;
+    float: right;
+    margin: 7px;
+}
+
+#txt-search {
+    width: 300px;
+    height: 30px;
+    border: 1px solid #ffecd9;
+    border-radius: 7px;
+    background-color: #fff6eb;
+    box-sizing: border-box;
+    vertical-align: middle;
+    outline: none;
+    text-indent: 10px;
+    font-size: 17px;
+}
+
+.btn-search {
+    width: 70px;
+    height: 30px;
+    border: 1px solid #cacaca;
+    border-radius: 7px;
+    background-color: #fff;
+    margin-left: 3px;
+    vertical-align: middle;
+    outline: none;
+    cursor: pointer;
+}
+
+.btn-stored {
+    width: 120px;
+    height: 30px;
+    border: 1px solid #cacaca;
+    border-radius: 7px;
+    background-color: #fff;
+    margin-left: 3px;
+    vertical-align: middle;
+    outline: none;
+    cursor: pointer;
+}
+
+.total {
+    margin: 20px 10px 7px;
+    font-size: 13px;
+    color: #bd5a00;
+}
+
+#item-template {
+    display: none;
+}
+
+.item {
+    padding: 10px 20px;
+    border: 1px solid #d2d2d2;
+    border-radius: 14px;
+    margin-bottom: 10px;
+}
+
+.item-no {
+    display: inline-block;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 30px;
+    color: #a0a0a0;
+    vertical-align: middle;
+    min-width: 17px;
+}
+
+.item-detail {
+    display: inline-block;
+    margin-left: 10px;
+    vertical-align: middle;
+}
+
+.item-name {
+    font-size: 20px;
+}
+
+.item-addr {
+    font-size: 14px;
+    color: #909090;
+    margin-top: 2px;
+}
+
+.paging {
+    text-align: center;
+    margin-top: 23px;
+}
+
+.paging a {
+    text-decoration: none;
+    margin-right: 8px;
+    color: #bd5a00;
+}
+
+.paging a.current {
+    font-weight: bold;
+    color: #ffb500;
+}
+
+.paging a.prev {
+    margin-right: 15px;
+}
+
+.paging a.next {
+    margin-left: 7px;
+}
+
+/* modal */
+.mdl-dialog {
+    border: none;
+    box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+    width: 500px;
+}
+.mdl-dialog__title {
+    padding: 24px 24px 10;
+    margin: 0;
+    font-size: 2.5rem; 
+}
+.mdl-dialog__actions {
+    padding: 8px 8px 8px 24px;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-direction: row-reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse;
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; 
+}
+.mdl-dialog__actions > * {
+margin-right: 8px;
+height: 36px; }
+.mdl-dialog__actions > *:first-child {
+    margin-right: 0; }
+.mdl-dialog__actions--full-width {
+padding: 0 0 8px 0; }
+.mdl-dialog__actions--full-width > * {
+    height: 48px;
+    -webkit-flex: 0 0 100%;
+        -ms-flex: 0 0 100%;
+            flex: 0 0 100%;
+    padding-right: 16px;
+    margin-right: 0;
+    text-align: right; }
+.mdl-dialog__content {
+    color: rgba(0,0,0, 0.54); 
+}
+
+.label {margin-bottom: 96px;}
+.label * {display: inline-block;vertical-align: top;}
+.label .left {background: url("http://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_l.png") no-repeat;display: inline-block;height: 24px;overflow: hidden;vertical-align: top;width: 7px;}
+.label .center {background: url(http://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_bg.png) repeat-x;display: inline-block;height: 24px;font-size: 12px;line-height: 24px;}
+.label .right {background: url("http://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_r.png") -1px 0  no-repeat;display: inline-block;height: 24px;overflow: hidden;width: 6px;}
diff --git a/mission005/ganeodolu/index.html b/mission005/ganeodolu/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<div lang="ko">
+
+    <head>
+        <meta charset="UTF-8">
+        <title>Mission 5</title>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+        <link href="css/styles.css" rel="stylesheet" />
+        <script type="text/javascript"
+            src="//dapi.kakao.com/v2/maps/sdk.js?appkey=05384f5ffa79058c52233387b2b1142b&libraries=services"></script>
+
+    </head>
+
+    <body>
+
+        <dialog id="dialog" class="mdl-dialog">
+            <h3 class="mdl-dialog__title">가게 위치</h3>
+            <div class="mdl-dialog__content">
+                <div id="map" style="width:500px;height:350px;"></div>
+            </div>
+            <div class="mdl-dialog__actions">
+                <button type="button" class="mdl-button">
+                    <span class="material-icons">close</span>
+                </button>
+            </div>
+        </dialog>
+
+        <div class="container">
+            <div class="header">
+
+                <div class="title">가게 찾기</div>
+                <div class="search">
+                    <button class="btn-delete">최근 검색어 삭제</button>
+                    <input id="txt-search" type="text" list="searched" autofocus />
+                    <datalist id="searched">
+                    </datalist>
+                    <button class="btn-search">검색</button>
+                </div>
+            </div>
+            <div class="body">
+                <!-- <div class="total"></div>
+            <div class="list">
+                <div class="item">
+                    <div class="item-no"></div>
+                    <div class="item-detail">
+                        <div class="item-name"></div>
+                        <div class="item-addr"></div>
+                    </div>
+                </div>
+            </div> -->
+            </div>
+
+            <div class="paging">
+
+            </div>
+        </div>
+        <script>
+
+        </script>
+
+        <script type='module' src='./js/App.js'></script>
+    </body>
+
+</div>
diff --git a/mission005/ganeodolu/js/App.js b/mission005/ganeodolu/js/App.js
@@ -0,0 +1,78 @@
+import { apiHandler } from '../util/api.js'
+import SearchStoreName from './SearchStoreName.js'
+import ShowStoreList from './ShowStoreList.js'
+import ShowHistoryList from './ShowHistoryList.js'
+import ManagePage from './ManagePage.js'
+import ShowPage from './ShowPage.js'
+import ManageMap from './ManageMap.js'
+
+function App() {
+    const $targetSearchInput = document.querySelector('#txt-search')
+    const $targetSearchButton = document.querySelector('.btn-search')
+    const $targetDeleteButton = document.querySelector('.btn-delete')
+
+    const searchStoreName = new SearchStoreName({
+        $targetInput: $targetSearchInput,
+        $targetButton: $targetSearchButton,
+        $targetDelete: $targetDeleteButton,
+        onAccessSearch: async (page, keyword) => {
+            const data = await apiHandler({
+                apiPage: page,
+                apiKeyword: keyword
+            })
+            const totalPage = data.total
+            showHistoryList.setState(keyword)
+            showStoreList.setState(data, keyword, page)
+            showPage.setState(page, totalPage)
+        },
+        onClickDelete: () => {
+            showHistoryList.render()
+        }
+    })
+
+    const $targetHistory = document.querySelector('#searched')
+    const showHistoryList = new ShowHistoryList({
+        $target: $targetHistory,
+        data: []
+    })
+
+    const $targetShowResult = document.querySelector('.body')
+    const showStoreList = new ShowStoreList({
+        $target: $targetShowResult,
+        data: [],
+        keyword: [],
+        page: []
+    })
+
+    const $targetShowPage = document.querySelector('.paging')
+    const $targetTotal = document.querySelector('.total')
+    const managePage = new ManagePage({
+        $target: $targetShowPage,
+        $targetHistory: $targetHistory,
+        onClickPage: async (page, keyword) => {
+            const data = await apiHandler({
+                apiPage: page,
+                apiKeyword: keyword
+            })
+            const totalPage = data.total
+            showStoreList.setState(data, keyword, page)
+            showPage.setState(page, totalPage)
+        }
+    })
+    const showPage = new ShowPage({
+        $target: $targetShowPage,
+        $page: [],
+        $totalPage: [],
+        $pageOffset: [],
+    })
+    const $targetMap = document.querySelector('#map')
+    const $targetItem = document.querySelector('.item-detail')
+    const $targetDialog = document.querySelector('#dialog');
+    const manageMap = new ManageMap({
+        $target: $targetMap,
+        $targetItem: $targetShowResult,
+        $targetDialog: $targetDialog,
+    })
+}
+
+new App()
diff --git a/mission005/ganeodolu/js/ManageMap.js b/mission005/ganeodolu/js/ManageMap.js
@@ -0,0 +1,51 @@
+export default function ManageMap({ $target, $targetDialog, $targetItem }) {
+    this.$target = $target
+    this.$targetDialog = $targetDialog
+    this.$targetItem = $targetItem
+
+    let mapOption = {
+        center: new kakao.maps.LatLng(33.450701, 126.570667),
+        level: 3
+    };
+    let map = new kakao.maps.Map(this.$target, mapOption);
+    let geocoder = new kakao.maps.services.Geocoder();
+
+    this.$targetItem.addEventListener('click', (e) => {
+        if (e.target.closest('div.item')) {
+            let storeName = e.target.closest('div.item').lastElementChild.firstElementChild.textContent
+            let storeAddress = e.target.closest('div.item').lastElementChild.lastElementChild.textContent
+            geocoder.addressSearch(storeAddress, function (result, status) {
+                if (status === kakao.maps.services.Status.OK) {
+                    const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
+                    const marker = new kakao.maps.Marker({
+                        map: map,
+                        position: coords
+                    });
+                    const customOverlay = new kakao.maps.CustomOverlay({
+                        position: coords,
+                        content: `<div class ="label"><span class="left"></span><span class="center">${storeName}</span><span class="right"></span></div>`
+                    })
+                    $targetDialog.showModal();
+                    setTimeout(function () {
+                        map.relayout()
+                        customOverlay.setMap(map)
+                        map.setCenter(coords);
+                    }, 10)
+                }
+            });
+        }
+    })
+
+    this.$targetDialog.querySelector('button')
+        .addEventListener('click', function () {
+            $targetDialog.close();
+        });
+    window.onclick = function (e) {
+        if (e.target === $targetDialog) {
+            $targetDialog.close();
+        }
+    }
+
+
+
+}