From 75cbd49fcd4dd6e39fd0f50c54647557cf97df1a Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Tue, 4 Feb 2020 19:33:22 +0900 Subject: [PATCH 1/8] M5 first commit --- mission005/ganeodolu/css/styles.css | 114 ++++++++++++++++++++++++++++ mission005/ganeodolu/index.html | 40 ++++++++++ 2 files changed, 154 insertions(+) create mode 100644 mission005/ganeodolu/css/styles.css create mode 100644 mission005/ganeodolu/index.html diff --git a/mission005/ganeodolu/css/styles.css b/mission005/ganeodolu/css/styles.css new file mode 100644 index 0000000..5f63dfa --- /dev/null +++ b/mission005/ganeodolu/css/styles.css @@ -0,0 +1,114 @@ +.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; +} + +.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; +} \ No newline at end of file diff --git a/mission005/ganeodolu/index.html b/mission005/ganeodolu/index.html new file mode 100644 index 0000000..774d7c2 --- /dev/null +++ b/mission005/ganeodolu/index.html @@ -0,0 +1,40 @@ + + + + + + Mission 5 + + + + + + + +
+
+
가게 찾기
+
+ + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + + + \ No newline at end of file From a86fbd954e964ffd23d81f89deb31204b860048c Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Tue, 4 Feb 2020 22:44:41 +0900 Subject: [PATCH 2/8] =?UTF-8?q?M5=20=EB=A9=94=EC=9D=B8=ED=99=94=EB=A9=B4,?= =?UTF-8?q?=20=EA=B2=80=EC=83=89=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 검색버튼 클릭은 커스텀이벤트 사용 --- mission005/ganeodolu/index.html | 15 +++------- mission005/ganeodolu/js/App.js | 33 +++++++++++++++++++++ mission005/ganeodolu/js/HistoryStoreName.js | 3 ++ mission005/ganeodolu/js/SearchStoreName.js | 23 ++++++++++++++ mission005/ganeodolu/js/ShowStoreList.js | 23 ++++++++++++++ mission005/ganeodolu/util/api.js | 15 ++++++++++ mission005/ganeodolu/util/constant.js | 18 +++++++++++ mission005/ganeodolu/util/template.js | 16 ++++++++++ 8 files changed, 135 insertions(+), 11 deletions(-) create mode 100644 mission005/ganeodolu/js/App.js create mode 100644 mission005/ganeodolu/js/HistoryStoreName.js create mode 100644 mission005/ganeodolu/js/SearchStoreName.js create mode 100644 mission005/ganeodolu/js/ShowStoreList.js create mode 100644 mission005/ganeodolu/util/api.js create mode 100644 mission005/ganeodolu/util/constant.js create mode 100644 mission005/ganeodolu/util/template.js diff --git a/mission005/ganeodolu/index.html b/mission005/ganeodolu/index.html index 774d7c2..0983d04 100644 --- a/mission005/ganeodolu/index.html +++ b/mission005/ganeodolu/index.html @@ -19,22 +19,15 @@ -
+
-
+
+
- -
-
-
-
-
-
-
- + \ No newline at end of file diff --git a/mission005/ganeodolu/js/App.js b/mission005/ganeodolu/js/App.js new file mode 100644 index 0000000..5281ff8 --- /dev/null +++ b/mission005/ganeodolu/js/App.js @@ -0,0 +1,33 @@ +import { apiHandler } from '../util/api.js' +import SearchStoreName from './SearchStoreName.js' +import ShowStoreList from './ShowStoreList.js' +import HistoryStoreList from './HistoryStoreName.js' + +function App(){ + + const $targetSearchInput = document.querySelector('#txt-search') + const $targetSearchButton = document.querySelector('.btn-search') + $targetSearchInput.focus() + const searchStoreName = new SearchStoreName({ + $targetInput: $targetSearchInput, + $targetButton: $targetSearchButton, + onSearch: async (keyword, page) => { + const data = await apiHandler({ + apiKeyword: keyword, + apiPage: page}) + console.log(data) + showStoreList.setState(data, page) + } + }) + + const $targetShowResult = document.querySelector('.list') + const showStoreList = new ShowStoreList({ + $target: $targetShowResult, + data: [], + page: [] + }) + + const historyStoreList = new HistoryStoreList({}) +} + +new App() \ No newline at end of file diff --git a/mission005/ganeodolu/js/HistoryStoreName.js b/mission005/ganeodolu/js/HistoryStoreName.js new file mode 100644 index 0000000..3e63e4a --- /dev/null +++ b/mission005/ganeodolu/js/HistoryStoreName.js @@ -0,0 +1,3 @@ +export default function HistoryStoreName({}){ + +} \ No newline at end of file diff --git a/mission005/ganeodolu/js/SearchStoreName.js b/mission005/ganeodolu/js/SearchStoreName.js new file mode 100644 index 0000000..da38a6c --- /dev/null +++ b/mission005/ganeodolu/js/SearchStoreName.js @@ -0,0 +1,23 @@ +import { KEY_NAME, EVENT_NAME } from '../util/constant.js' + + +export default function SearchStoreName({$targetInput, $targetButton, onSearch}){ + this.$targetInput = $targetInput + this.$targetButton = $targetButton + + this.$targetInput.addEventListener('keypress', (e) => { + if(e.key === KEY_NAME.ENTER){ + console.log(e.target.value) + let keyword = e.target.value + onSearch(keyword, 1) + } + }) + + this.$targetInput.addEventListener(EVENT_NAME.CLICK, (e) => { + onSearch(e.target.value, 1) + }) + + this.$targetButton.addEventListener('click', (e) => { + $targetInput.dispatchEvent(new Event(EVENT_NAME.CLICK)) + }) +} \ No newline at end of file diff --git a/mission005/ganeodolu/js/ShowStoreList.js b/mission005/ganeodolu/js/ShowStoreList.js new file mode 100644 index 0000000..1f168ff --- /dev/null +++ b/mission005/ganeodolu/js/ShowStoreList.js @@ -0,0 +1,23 @@ +import { renderedStoreListHTML } from '../util/template.js' + +export default function ShowStoreList({ $target, data, page }) { + this.$target = $target + this.data = data + this.page = page + + + this.setState = function (nextData, nextPage) { + this.data = nextData + this.page = nextPage + this.render() + } + + this.render = function () { + console.log(this.data) + if (this.data.list) { + this.$target.innerHTML = renderedStoreListHTML(this.data, this.page) + } + } + + this.render() +} \ No newline at end of file diff --git a/mission005/ganeodolu/util/api.js b/mission005/ganeodolu/util/api.js new file mode 100644 index 0000000..585aab3 --- /dev/null +++ b/mission005/ganeodolu/util/api.js @@ -0,0 +1,15 @@ +import { API_NAME, ERROR_NAME } from './constant.js' + +const apiHandler = async ({apiKeyword, apiPage}) => { + try { + const res = await fetch(`${API_NAME.URI}searchKeyword=${apiKeyword}&perPage=10&page=${apiPage}`) + if (res.ok) { + const data = await res.json() + return data + } + } catch (error) { + throw new Error(ERROR_NAME.NO_ANSWER) + } +} + +export { apiHandler } \ No newline at end of file diff --git a/mission005/ganeodolu/util/constant.js b/mission005/ganeodolu/util/constant.js new file mode 100644 index 0000000..70883e9 --- /dev/null +++ b/mission005/ganeodolu/util/constant.js @@ -0,0 +1,18 @@ +const API_NAME = { + URI: 'https://floating-harbor-78336.herokuapp.com/fastfood?', + +} + +const KEY_NAME = { + ENTER: 'Enter' +} + +const ERROR_NAME = { + NO_ANSWER: '서버가 응답하지 않습니다', +} + +const EVENT_NAME = { + CLICK: 'clickSearchButton' +} + +export { API_NAME, ERROR_NAME, KEY_NAME, EVENT_NAME } \ No newline at end of file diff --git a/mission005/ganeodolu/util/template.js b/mission005/ganeodolu/util/template.js new file mode 100644 index 0000000..d8a34e6 --- /dev/null +++ b/mission005/ganeodolu/util/template.js @@ -0,0 +1,16 @@ +function renderedStoreListHTML(inputValue, countPage) { + let result = inputValue.list.map((val, idx) => { + return ` +
+
${(countPage-1)*10+idx+1}
+
+
${val.name}
+
${val.addr}
+
+
+ ` + }).join('') + return result +} + +export {renderedStoreListHTML} \ No newline at end of file From 12b37eeb9f59a24f11501a2236cb21e222a3c54a Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Wed, 5 Feb 2020 22:55:08 +0900 Subject: [PATCH 3/8] =?UTF-8?q?M5=20=EC=B5=9C=EA=B7=BC=EA=B2=80=EC=83=89?= =?UTF-8?q?=EC=96=B4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit datalist 스타일로 표현 --- mission005/ganeodolu/index.html | 10 ++++-- mission005/ganeodolu/js/App.js | 29 ++++++++++------- mission005/ganeodolu/js/HistoryStoreName.js | 3 -- mission005/ganeodolu/js/SearchStoreName.js | 6 ++-- mission005/ganeodolu/js/ShowHistoryList.js | 36 +++++++++++++++++++++ mission005/ganeodolu/js/ShowStoreList.js | 8 +++-- mission005/ganeodolu/util/template.js | 16 +++++++-- 7 files changed, 83 insertions(+), 25 deletions(-) delete mode 100644 mission005/ganeodolu/js/HistoryStoreName.js create mode 100644 mission005/ganeodolu/js/ShowHistoryList.js diff --git a/mission005/ganeodolu/index.html b/mission005/ganeodolu/index.html index 0983d04..d6b2302 100644 --- a/mission005/ganeodolu/index.html +++ b/mission005/ganeodolu/index.html @@ -15,15 +15,19 @@
가게 찾기
- + + + + +
-
+
diff --git a/mission005/ganeodolu/js/App.js b/mission005/ganeodolu/js/App.js index 5281ff8..c513050 100644 --- a/mission005/ganeodolu/js/App.js +++ b/mission005/ganeodolu/js/App.js @@ -1,33 +1,40 @@ import { apiHandler } from '../util/api.js' import SearchStoreName from './SearchStoreName.js' import ShowStoreList from './ShowStoreList.js' -import HistoryStoreList from './HistoryStoreName.js' +import ShowHistoryList from './ShowHistoryList.js' -function App(){ +function App() { const $targetSearchInput = document.querySelector('#txt-search') const $targetSearchButton = document.querySelector('.btn-search') $targetSearchInput.focus() + const searchStoreName = new SearchStoreName({ $targetInput: $targetSearchInput, $targetButton: $targetSearchButton, - onSearch: async (keyword, page) => { + onAccessSearch: async (keyword, page) => { const data = await apiHandler({ - apiKeyword: keyword, - apiPage: page}) - console.log(data) - showStoreList.setState(data, page) - } + apiKeyword: keyword, + apiPage: page + }) + showHistoryList.setState(keyword) + showStoreList.setState(data, keyword, page) + } + }) + + const $targetHistory = document.querySelector('#searched') + const showHistoryList = new ShowHistoryList({ + $target: $targetHistory, + data: [] }) - const $targetShowResult = document.querySelector('.list') + const $targetShowResult = document.querySelector('.body') const showStoreList = new ShowStoreList({ $target: $targetShowResult, data: [], + keyword: [], page: [] }) - - const historyStoreList = new HistoryStoreList({}) } new App() \ No newline at end of file diff --git a/mission005/ganeodolu/js/HistoryStoreName.js b/mission005/ganeodolu/js/HistoryStoreName.js deleted file mode 100644 index 3e63e4a..0000000 --- a/mission005/ganeodolu/js/HistoryStoreName.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function HistoryStoreName({}){ - -} \ No newline at end of file diff --git a/mission005/ganeodolu/js/SearchStoreName.js b/mission005/ganeodolu/js/SearchStoreName.js index da38a6c..2cd66b2 100644 --- a/mission005/ganeodolu/js/SearchStoreName.js +++ b/mission005/ganeodolu/js/SearchStoreName.js @@ -1,7 +1,7 @@ import { KEY_NAME, EVENT_NAME } from '../util/constant.js' -export default function SearchStoreName({$targetInput, $targetButton, onSearch}){ +export default function SearchStoreName({$targetInput, $targetButton, onAccessSearch}){ this.$targetInput = $targetInput this.$targetButton = $targetButton @@ -9,12 +9,12 @@ export default function SearchStoreName({$targetInput, $targetButton, onSearch}) if(e.key === KEY_NAME.ENTER){ console.log(e.target.value) let keyword = e.target.value - onSearch(keyword, 1) + onAccessSearch(keyword, 1) } }) this.$targetInput.addEventListener(EVENT_NAME.CLICK, (e) => { - onSearch(e.target.value, 1) + onAccessSearch(e.target.value, 1) }) this.$targetButton.addEventListener('click', (e) => { diff --git a/mission005/ganeodolu/js/ShowHistoryList.js b/mission005/ganeodolu/js/ShowHistoryList.js new file mode 100644 index 0000000..87eae58 --- /dev/null +++ b/mission005/ganeodolu/js/ShowHistoryList.js @@ -0,0 +1,36 @@ +import { renderedHistoryHTML } from '../util/template.js' + +export default function ShowHistoryList({ $target, data }) { + this.$target = $target + this.data = data + + this.render = function () { + this.data = this.getHistory() + this.$target.innerHTML = renderedHistoryHTML(this.data) + } + this.setState = function (nextData) { + this.data = this.setHistory(nextData) + this.render() + } + + this.getHistory = function () { + const getKeyword = localStorage.getItem('storedKeywords') + let keywordList = getKeyword ? getKeyword.split(',') : ['최근 검색어가 없습니다'] + return keywordList + } + + this.setHistory = function (inputValue) { + const getKeyword = localStorage.getItem('storedKeywords') + let keywordList = getKeyword ? getKeyword.split(',') : [] + let indexKeyword = keywordList.indexOf(inputValue) + if (indexKeyword !== -1) { + keywordList.splice(indexKeyword, 1) + } + keywordList.unshift(inputValue) + let result = keywordList.splice(0, 5) + localStorage.setItem('storedKeywords', result.toString()) + return result + } + + this.render() +} \ No newline at end of file diff --git a/mission005/ganeodolu/js/ShowStoreList.js b/mission005/ganeodolu/js/ShowStoreList.js index 1f168ff..ec45052 100644 --- a/mission005/ganeodolu/js/ShowStoreList.js +++ b/mission005/ganeodolu/js/ShowStoreList.js @@ -1,13 +1,15 @@ import { renderedStoreListHTML } from '../util/template.js' -export default function ShowStoreList({ $target, data, page }) { +export default function ShowStoreList({ $target, data, keyword, page }) { this.$target = $target this.data = data + this.keyword = keyword this.page = page - this.setState = function (nextData, nextPage) { + this.setState = function (nextData, nextKeyword, nextPage) { this.data = nextData + this.keyword = nextKeyword this.page = nextPage this.render() } @@ -15,7 +17,7 @@ export default function ShowStoreList({ $target, data, page }) { this.render = function () { console.log(this.data) if (this.data.list) { - this.$target.innerHTML = renderedStoreListHTML(this.data, this.page) + this.$target.innerHTML = renderedStoreListHTML(this.data, this.keyword, this.page) } } diff --git a/mission005/ganeodolu/util/template.js b/mission005/ganeodolu/util/template.js index d8a34e6..86cab78 100644 --- a/mission005/ganeodolu/util/template.js +++ b/mission005/ganeodolu/util/template.js @@ -1,4 +1,4 @@ -function renderedStoreListHTML(inputValue, countPage) { +function renderedStoreListHTML(inputValue, searchKeyword, countPage) { let result = inputValue.list.map((val, idx) => { return `
@@ -10,7 +10,19 @@ function renderedStoreListHTML(inputValue, countPage) {
` }).join('') + return ` +
총 ${inputValue.total}개의 가게를 찾았습니다.
+
${result}
+ ` +} + +function renderedHistoryHTML(inputValue){ + let result = inputValue.map((val)=> { + return ` + + ` + }).join('') return result } -export {renderedStoreListHTML} \ No newline at end of file +export {renderedStoreListHTML, renderedHistoryHTML} \ No newline at end of file From b74bdbdebe86f5d9056c6efb295a6bd25bd6154b Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Thu, 6 Feb 2020 16:13:19 +0900 Subject: [PATCH 4/8] =?UTF-8?q?M5=20=EC=B5=9C=EA=B7=BC=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=EC=96=B4=20=EC=82=AD=EC=A0=9C=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission005/ganeodolu/css/styles.css | 12 ++++++++++++ mission005/ganeodolu/index.html | 5 +++-- mission005/ganeodolu/js/App.js | 5 +++++ mission005/ganeodolu/js/SearchStoreName.js | 13 ++++++++++++- mission005/ganeodolu/js/ShowHistoryList.js | 3 ++- mission005/ganeodolu/util/constant.js | 6 +++++- mission005/ganeodolu/util/template.js | 1 + 7 files changed, 40 insertions(+), 5 deletions(-) diff --git a/mission005/ganeodolu/css/styles.css b/mission005/ganeodolu/css/styles.css index 5f63dfa..e84b587 100644 --- a/mission005/ganeodolu/css/styles.css +++ b/mission005/ganeodolu/css/styles.css @@ -46,6 +46,18 @@ 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; diff --git a/mission005/ganeodolu/index.html b/mission005/ganeodolu/index.html index d6b2302..969ef0f 100644 --- a/mission005/ganeodolu/index.html +++ b/mission005/ganeodolu/index.html @@ -15,10 +15,11 @@
가게 찾기
+ - - +
diff --git a/mission005/ganeodolu/js/App.js b/mission005/ganeodolu/js/App.js index c513050..10b7b38 100644 --- a/mission005/ganeodolu/js/App.js +++ b/mission005/ganeodolu/js/App.js @@ -7,11 +7,13 @@ function App() { const $targetSearchInput = document.querySelector('#txt-search') const $targetSearchButton = document.querySelector('.btn-search') + const $targetDeleteButton = document.querySelector('.btn-delete') $targetSearchInput.focus() const searchStoreName = new SearchStoreName({ $targetInput: $targetSearchInput, $targetButton: $targetSearchButton, + $targetDelete: $targetDeleteButton, onAccessSearch: async (keyword, page) => { const data = await apiHandler({ apiKeyword: keyword, @@ -19,6 +21,9 @@ function App() { }) showHistoryList.setState(keyword) showStoreList.setState(data, keyword, page) + }, + onClickDelete: () => { + showHistoryList.render() } }) diff --git a/mission005/ganeodolu/js/SearchStoreName.js b/mission005/ganeodolu/js/SearchStoreName.js index 2cd66b2..cbd6185 100644 --- a/mission005/ganeodolu/js/SearchStoreName.js +++ b/mission005/ganeodolu/js/SearchStoreName.js @@ -1,9 +1,10 @@ import { KEY_NAME, EVENT_NAME } from '../util/constant.js' -export default function SearchStoreName({$targetInput, $targetButton, onAccessSearch}){ +export default function SearchStoreName({$targetInput, $targetButton, $targetDelete, onAccessSearch, onClickDelete}){ this.$targetInput = $targetInput this.$targetButton = $targetButton + this.$targetDelete = $targetDelete this.$targetInput.addEventListener('keypress', (e) => { if(e.key === KEY_NAME.ENTER){ @@ -20,4 +21,14 @@ export default function SearchStoreName({$targetInput, $targetButton, onAccessSe this.$targetButton.addEventListener('click', (e) => { $targetInput.dispatchEvent(new Event(EVENT_NAME.CLICK)) }) + + this.$targetInput.addEventListener('focus', (e) => { + e.target.value = '' + }) + + this.$targetDelete.addEventListener('click', (e) => { + + localStorage.removeItem('storedKeywords') + onClickDelete() + }) } \ No newline at end of file diff --git a/mission005/ganeodolu/js/ShowHistoryList.js b/mission005/ganeodolu/js/ShowHistoryList.js index 87eae58..660c6a2 100644 --- a/mission005/ganeodolu/js/ShowHistoryList.js +++ b/mission005/ganeodolu/js/ShowHistoryList.js @@ -1,4 +1,5 @@ import { renderedHistoryHTML } from '../util/template.js' +import { MESSAGE_NAME } from '../util/constant.js' export default function ShowHistoryList({ $target, data }) { this.$target = $target @@ -15,7 +16,7 @@ export default function ShowHistoryList({ $target, data }) { this.getHistory = function () { const getKeyword = localStorage.getItem('storedKeywords') - let keywordList = getKeyword ? getKeyword.split(',') : ['최근 검색어가 없습니다'] + let keywordList = getKeyword ? getKeyword.split(',') : [`${MESSAGE_NAME.NO_RESULT}`] return keywordList } diff --git a/mission005/ganeodolu/util/constant.js b/mission005/ganeodolu/util/constant.js index 70883e9..398f863 100644 --- a/mission005/ganeodolu/util/constant.js +++ b/mission005/ganeodolu/util/constant.js @@ -15,4 +15,8 @@ const EVENT_NAME = { CLICK: 'clickSearchButton' } -export { API_NAME, ERROR_NAME, KEY_NAME, EVENT_NAME } \ No newline at end of file +const MESSAGE_NAME = { + NO_RESULT: '최근 검색어가 없습니다' +} + +export { API_NAME, ERROR_NAME, KEY_NAME, EVENT_NAME, MESSAGE_NAME } \ No newline at end of file diff --git a/mission005/ganeodolu/util/template.js b/mission005/ganeodolu/util/template.js index 86cab78..32069fd 100644 --- a/mission005/ganeodolu/util/template.js +++ b/mission005/ganeodolu/util/template.js @@ -20,6 +20,7 @@ function renderedHistoryHTML(inputValue){ let result = inputValue.map((val)=> { return ` + ` }).join('') return result From 91859a71d211965cd4a230cdb614fab2fa3e2cc9 Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Fri, 7 Feb 2020 17:26:36 +0900 Subject: [PATCH 5/8] =?UTF-8?q?M5=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission005/ganeodolu/index.html | 9 +++--- mission005/ganeodolu/js/App.js | 33 +++++++++++++++++++--- mission005/ganeodolu/js/ManagePage.js | 29 +++++++++++++++++++ mission005/ganeodolu/js/SearchStoreName.js | 11 ++++---- mission005/ganeodolu/js/ShowPage.js | 30 ++++++++++++++++++++ mission005/ganeodolu/js/ShowStoreList.js | 1 - mission005/ganeodolu/util/api.js | 2 +- mission005/ganeodolu/util/constant.js | 11 ++++---- mission005/ganeodolu/util/template.js | 28 ++++++++++++------ 9 files changed, 123 insertions(+), 31 deletions(-) create mode 100644 mission005/ganeodolu/js/ManagePage.js create mode 100644 mission005/ganeodolu/js/ShowPage.js diff --git a/mission005/ganeodolu/index.html b/mission005/ganeodolu/index.html index 969ef0f..c2b7f7c 100644 --- a/mission005/ganeodolu/index.html +++ b/mission005/ganeodolu/index.html @@ -18,19 +18,18 @@ -
-
-
+
+ +
diff --git a/mission005/ganeodolu/js/App.js b/mission005/ganeodolu/js/App.js index 10b7b38..075b21a 100644 --- a/mission005/ganeodolu/js/App.js +++ b/mission005/ganeodolu/js/App.js @@ -2,9 +2,10 @@ 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' function App() { - const $targetSearchInput = document.querySelector('#txt-search') const $targetSearchButton = document.querySelector('.btn-search') const $targetDeleteButton = document.querySelector('.btn-delete') @@ -14,13 +15,15 @@ function App() { $targetInput: $targetSearchInput, $targetButton: $targetSearchButton, $targetDelete: $targetDeleteButton, - onAccessSearch: async (keyword, page) => { + onAccessSearch: async (page, keyword) => { const data = await apiHandler({ - apiKeyword: keyword, - apiPage: page + apiPage: page, + apiKeyword: keyword }) + const totalPage = data.total showHistoryList.setState(keyword) showStoreList.setState(data, keyword, page) + showPage.setState(page, totalPage) }, onClickDelete: () => { showHistoryList.render() @@ -40,6 +43,28 @@ function App() { 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: [], + }) } new App() \ No newline at end of file diff --git a/mission005/ganeodolu/js/ManagePage.js b/mission005/ganeodolu/js/ManagePage.js new file mode 100644 index 0000000..a7c701b --- /dev/null +++ b/mission005/ganeodolu/js/ManagePage.js @@ -0,0 +1,29 @@ +import { TEXT_NAME } from '../util/constant.js' + +export default function ManagePage({ $target, $targetHistory, onClickPage }) { + this.$target = $target + this.$targetHistory = $targetHistory + + this.$target.addEventListener('click', (e) => { + let getKeyword = this.$targetHistory.firstElementChild.value + let getPage = e.target.text + let getTotal = document.querySelector('.total') + getTotal = Number(getTotal.getAttribute('value')) + getTotal = Math.floor(getTotal / 10) + 1 + if (getPage === TEXT_NAME.PREVIOUS) { + getPage = Number(e.target.nextElementSibling.text) - 1 + if (getPage < 1) { + getPage = 1 + } + onClickPage(getPage, getKeyword, TEXT_NAME.PREVIOUS) + } else if (getPage === TEXT_NAME.NEXT) { + getPage = Number(e.target.previousElementSibling.text) + 1 + if(getPage > getTotal){ + getPage = getTotal + } + onClickPage(getPage, getKeyword, TEXT_NAME.NEXT) + } else if(getPage) { + onClickPage(getPage, getKeyword) + } + }) +} \ No newline at end of file diff --git a/mission005/ganeodolu/js/SearchStoreName.js b/mission005/ganeodolu/js/SearchStoreName.js index cbd6185..11a6a37 100644 --- a/mission005/ganeodolu/js/SearchStoreName.js +++ b/mission005/ganeodolu/js/SearchStoreName.js @@ -1,21 +1,21 @@ import { KEY_NAME, EVENT_NAME } from '../util/constant.js' -export default function SearchStoreName({$targetInput, $targetButton, $targetDelete, onAccessSearch, onClickDelete}){ +export default function SearchStoreName({ $targetInput, $targetButton, $targetDelete, onAccessSearch, onClickDelete }) { this.$targetInput = $targetInput this.$targetButton = $targetButton this.$targetDelete = $targetDelete this.$targetInput.addEventListener('keypress', (e) => { - if(e.key === KEY_NAME.ENTER){ - console.log(e.target.value) + if (e.key === KEY_NAME.ENTER) { let keyword = e.target.value - onAccessSearch(keyword, 1) + onAccessSearch(1, keyword) } }) this.$targetInput.addEventListener(EVENT_NAME.CLICK, (e) => { - onAccessSearch(e.target.value, 1) + let keyword = e.target.value + onAccessSearch(1, keyword) }) this.$targetButton.addEventListener('click', (e) => { @@ -27,7 +27,6 @@ export default function SearchStoreName({$targetInput, $targetButton, $targetDel }) this.$targetDelete.addEventListener('click', (e) => { - localStorage.removeItem('storedKeywords') onClickDelete() }) diff --git a/mission005/ganeodolu/js/ShowPage.js b/mission005/ganeodolu/js/ShowPage.js new file mode 100644 index 0000000..fec6f71 --- /dev/null +++ b/mission005/ganeodolu/js/ShowPage.js @@ -0,0 +1,30 @@ +import { renderedPageHTML } from '../util/template.js' +import { ERROR_NAME, TEXT_NAME } from '../util/constant.js' + +export default function ShowPage({ $target, $page, $totalPage, $pageOffset }) { + this.$target = $target + this.$page = $page + this.$totalPage = $totalPage + this.$pageOffset = $pageOffset + const numPages = 5 + + this.setState = function (nextPage, nextTotalPage, nextPageOffset) { + this.$page = nextPage + this.$totalPage = nextTotalPage + this.$pageOffset = nextPageOffset + this.render() + } + this.render = function () { + const maxPage = Math.floor(this.$totalPage / 10) + 1 + const pageStart = Math.floor((this.$page - 1) / numPages) * numPages + 1 + let pageEnd = pageStart + numPages - 1 + if (maxPage < pageEnd) { + pageEnd = maxPage + } + let pageArray = [] + for (let i = pageStart; i <= pageEnd; i++) { + pageArray.push(i) + } + this.$target.innerHTML = renderedPageHTML(pageArray, this.$page) + } +} \ No newline at end of file diff --git a/mission005/ganeodolu/js/ShowStoreList.js b/mission005/ganeodolu/js/ShowStoreList.js index ec45052..3ff9d9c 100644 --- a/mission005/ganeodolu/js/ShowStoreList.js +++ b/mission005/ganeodolu/js/ShowStoreList.js @@ -15,7 +15,6 @@ export default function ShowStoreList({ $target, data, keyword, page }) { } this.render = function () { - console.log(this.data) if (this.data.list) { this.$target.innerHTML = renderedStoreListHTML(this.data, this.keyword, this.page) } diff --git a/mission005/ganeodolu/util/api.js b/mission005/ganeodolu/util/api.js index 585aab3..41c9fce 100644 --- a/mission005/ganeodolu/util/api.js +++ b/mission005/ganeodolu/util/api.js @@ -1,6 +1,6 @@ import { API_NAME, ERROR_NAME } from './constant.js' -const apiHandler = async ({apiKeyword, apiPage}) => { +const apiHandler = async ({apiPage, apiKeyword}) => { try { const res = await fetch(`${API_NAME.URI}searchKeyword=${apiKeyword}&perPage=10&page=${apiPage}`) if (res.ok) { diff --git a/mission005/ganeodolu/util/constant.js b/mission005/ganeodolu/util/constant.js index 398f863..086d648 100644 --- a/mission005/ganeodolu/util/constant.js +++ b/mission005/ganeodolu/util/constant.js @@ -1,22 +1,21 @@ const API_NAME = { URI: 'https://floating-harbor-78336.herokuapp.com/fastfood?', - } - const KEY_NAME = { ENTER: 'Enter' } - const ERROR_NAME = { NO_ANSWER: '서버가 응답하지 않습니다', } - const EVENT_NAME = { CLICK: 'clickSearchButton' } - const MESSAGE_NAME = { NO_RESULT: '최근 검색어가 없습니다' } +const TEXT_NAME = { + PREVIOUS: '이전', + NEXT: '다음' +} -export { API_NAME, ERROR_NAME, KEY_NAME, EVENT_NAME, MESSAGE_NAME } \ No newline at end of file +export { API_NAME, ERROR_NAME, KEY_NAME, EVENT_NAME, MESSAGE_NAME, TEXT_NAME } \ No newline at end of file diff --git a/mission005/ganeodolu/util/template.js b/mission005/ganeodolu/util/template.js index 32069fd..3bc09e3 100644 --- a/mission005/ganeodolu/util/template.js +++ b/mission005/ganeodolu/util/template.js @@ -2,7 +2,7 @@ function renderedStoreListHTML(inputValue, searchKeyword, countPage) { let result = inputValue.list.map((val, idx) => { return `
-
${(countPage-1)*10+idx+1}
+
${(countPage - 1) * 10 + idx + 1}
${val.name}
${val.addr}
@@ -11,19 +11,31 @@ function renderedStoreListHTML(inputValue, searchKeyword, countPage) { ` }).join('') return ` -
총 ${inputValue.total}개의 가게를 찾았습니다.
+
총 ${inputValue.total}개의 가게를 찾았습니다.
${result}
` } -function renderedHistoryHTML(inputValue){ - let result = inputValue.map((val)=> { +function renderedHistoryHTML(inputValue) { + let result = inputValue.map((val) => { return ` - - - ` + + ` }).join('') return result } -export {renderedStoreListHTML, renderedHistoryHTML} \ No newline at end of file +function renderedPageHTML(inputValue, currentPage) { + let result = inputValue.map((val) => { + return ` + ${val} + ` + }).join('') + return ` + + ${result} + + ` +} + +export { renderedStoreListHTML, renderedHistoryHTML, renderedPageHTML } \ No newline at end of file From be0873de162b075dc94366543f7d480a1c8b9986 Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Fri, 7 Feb 2020 22:52:38 +0900 Subject: [PATCH 6/8] =?UTF-8?q?M5=20=EC=B9=B4=EC=B9=B4=EC=98=A4=EB=A7=B5?= =?UTF-8?q?=20Modal=EB=A1=9C=20=EB=B6=88=EC=95=88=EC=A0=95=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 모달창의 중심에 가게가 잘 보이지 않음 --- mission005/ganeodolu/css/styles.css | 42 ++++++++++++- mission005/ganeodolu/index.html | 79 +++++++++++++++++-------- mission005/ganeodolu/js/App.js | 21 ++++++- mission005/ganeodolu/js/ManageMap.js | 47 +++++++++++++++ mission005/ganeodolu/js/ShowModalMap.js | 16 +++++ mission005/ganeodolu/js/ShowPage.js | 4 +- mission005/ganeodolu/util/constant.js | 3 +- mission005/ganeodolu/util/template.js | 2 +- 8 files changed, 183 insertions(+), 31 deletions(-) create mode 100644 mission005/ganeodolu/js/ManageMap.js create mode 100644 mission005/ganeodolu/js/ShowModalMap.js diff --git a/mission005/ganeodolu/css/styles.css b/mission005/ganeodolu/css/styles.css index e84b587..350fe23 100644 --- a/mission005/ganeodolu/css/styles.css +++ b/mission005/ganeodolu/css/styles.css @@ -123,4 +123,44 @@ .paging a.next { margin-left: 7px; -} \ No newline at end of file +} + +/* 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: 600px; } + /* width: 280px; } */ + .mdl-dialog__title { + padding: 24px 24px 0; + 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 { + padding: 20px 24px 24px 24px; + color: rgba(0,0,0, 0.54); } \ No newline at end of file diff --git a/mission005/ganeodolu/index.html b/mission005/ganeodolu/index.html index c2b7f7c..5add00c 100644 --- a/mission005/ganeodolu/index.html +++ b/mission005/ganeodolu/index.html @@ -1,37 +1,66 @@ - +
- - - Mission 5 + + + Mission 5 + + + - + - + - + +

가게 위치

+
+
+
+
+ +
+ + + -
-
-
가게 찾기
-
- - - - - +
+
+ +
가게 찾기
+
+ + + + + +
-
-
- -
-
+
+ +
+
-
- - + + + + - \ No newline at end of file +
\ No newline at end of file diff --git a/mission005/ganeodolu/js/App.js b/mission005/ganeodolu/js/App.js index 075b21a..4ed7b73 100644 --- a/mission005/ganeodolu/js/App.js +++ b/mission005/ganeodolu/js/App.js @@ -4,12 +4,13 @@ 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' +import ShowModalMap from './ShowModalMap.js' function App() { const $targetSearchInput = document.querySelector('#txt-search') const $targetSearchButton = document.querySelector('.btn-search') const $targetDeleteButton = document.querySelector('.btn-delete') - $targetSearchInput.focus() const searchStoreName = new SearchStoreName({ $targetInput: $targetSearchInput, @@ -65,6 +66,24 @@ function App() { $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, + onClickStore: () => { + // manageMap.$targetItem + } + }) + // const $targetDialogButton = document.querySelector('.dialog-button'); + // const $targetDialog = document.querySelector('#dialog'); + // const showModalMap = ShowModalMap({ + // $targetDialog: $targetDialog, + // $targetDialogButton: $targetDialogButton + // }) + } new App() \ No newline at end of file diff --git a/mission005/ganeodolu/js/ManageMap.js b/mission005/ganeodolu/js/ManageMap.js new file mode 100644 index 0000000..535949d --- /dev/null +++ b/mission005/ganeodolu/js/ManageMap.js @@ -0,0 +1,47 @@ +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) => { + // console.log('eee',map.relayout()) + // console.log($targetItem) + console.log(e.target) + console.log(e.target.closest('div.item').lastElementChild.firstElementChild.textContent) + console.log(e.target.closest('div.item').lastElementChild.lastElementChild.textContent) + let storeName = e.target.closest('div.item').lastElementChild.firstElementChild.textContent + let storeAddress = e.target.closest('div.item').lastElementChild.lastElementChild.textContent + this.$targetDialog.showModal(); + // 주소로 좌표를 검색합니다 + geocoder.addressSearch(storeAddress, function (result, status) { + if (status === kakao.maps.services.Status.OK) { + var coords = new kakao.maps.LatLng(result[0].y, result[0].x); + var marker = new kakao.maps.Marker({ + map: map, + position: coords + }); + var infowindow = new kakao.maps.InfoWindow({ + content: `
${storeName}
` + }); + infowindow.open(map, marker); + map.setCenter(coords); + map.relayout() + } + }); + }) + + this.$targetDialog.querySelector('button:not([disabled])') + .addEventListener('click', function () { + $targetDialog.close(); + }); + + +} \ No newline at end of file diff --git a/mission005/ganeodolu/js/ShowModalMap.js b/mission005/ganeodolu/js/ShowModalMap.js new file mode 100644 index 0000000..4d0ac80 --- /dev/null +++ b/mission005/ganeodolu/js/ShowModalMap.js @@ -0,0 +1,16 @@ +export default function ShowModalMap({ $targetDialog, $targetDialogButton }) { + + // if (!$targetDialog.showModal) { + // dialogPolyfill.registerDialog($targetDialog); + // } + $targetDialogButton.addEventListener('click', function () { + $targetDialog.showModal(); + // setTimeout(function(){ + // map.relayout() + // }, 1000) + }); + $targetDialog.querySelector('button:not([disabled])') + .addEventListener('click', function () { + $targetDialog.close(); + }); +} \ No newline at end of file diff --git a/mission005/ganeodolu/js/ShowPage.js b/mission005/ganeodolu/js/ShowPage.js index fec6f71..68f2b85 100644 --- a/mission005/ganeodolu/js/ShowPage.js +++ b/mission005/ganeodolu/js/ShowPage.js @@ -1,12 +1,12 @@ import { renderedPageHTML } from '../util/template.js' -import { ERROR_NAME, TEXT_NAME } from '../util/constant.js' +import { TEXT_NAME } from '../util/constant.js' export default function ShowPage({ $target, $page, $totalPage, $pageOffset }) { this.$target = $target this.$page = $page this.$totalPage = $totalPage this.$pageOffset = $pageOffset - const numPages = 5 + const numPages = TEXT_NAME.NUM_PAGES this.setState = function (nextPage, nextTotalPage, nextPageOffset) { this.$page = nextPage diff --git a/mission005/ganeodolu/util/constant.js b/mission005/ganeodolu/util/constant.js index 086d648..64cb453 100644 --- a/mission005/ganeodolu/util/constant.js +++ b/mission005/ganeodolu/util/constant.js @@ -15,7 +15,8 @@ const MESSAGE_NAME = { } const TEXT_NAME = { PREVIOUS: '이전', - NEXT: '다음' + NEXT: '다음', + NUM_PAGES: 5 } export { API_NAME, ERROR_NAME, KEY_NAME, EVENT_NAME, MESSAGE_NAME, TEXT_NAME } \ No newline at end of file diff --git a/mission005/ganeodolu/util/template.js b/mission005/ganeodolu/util/template.js index 3bc09e3..51755f3 100644 --- a/mission005/ganeodolu/util/template.js +++ b/mission005/ganeodolu/util/template.js @@ -1,7 +1,7 @@ function renderedStoreListHTML(inputValue, searchKeyword, countPage) { let result = inputValue.list.map((val, idx) => { return ` -
+
${(countPage - 1) * 10 + idx + 1}
${val.name}
From ce60e5e84205fe8d0fd4804ea43b3166ad84f07e Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Sun, 9 Feb 2020 13:13:32 +0900 Subject: [PATCH 7/8] =?UTF-8?q?M5=20=EA=B0=80=EA=B2=8C=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=EB=A5=BC=20=EC=B9=B4=EC=B9=B4=EC=98=A4=EB=A7=B5?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=ED=91=9C=EC=8B=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission005/ganeodolu/css/styles.css | 16 +++++-- mission005/ganeodolu/index.html | 2 - mission005/ganeodolu/js/App.js | 11 ----- mission005/ganeodolu/js/ManageMap.js | 58 +++++++++++++------------ mission005/ganeodolu/js/ShowModalMap.js | 16 ------- 5 files changed, 43 insertions(+), 60 deletions(-) delete mode 100644 mission005/ganeodolu/js/ShowModalMap.js diff --git a/mission005/ganeodolu/css/styles.css b/mission005/ganeodolu/css/styles.css index 350fe23..0c0994a 100644 --- a/mission005/ganeodolu/css/styles.css +++ b/mission005/ganeodolu/css/styles.css @@ -129,10 +129,12 @@ .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: 600px; } + width: 500px; + /* height: 50%; */ +} /* width: 280px; } */ .mdl-dialog__title { - padding: 24px 24px 0; + padding: 24px 24px 10; margin: 0; font-size: 2.5rem; } .mdl-dialog__actions { @@ -162,5 +164,11 @@ margin-right: 0; text-align: right; } .mdl-dialog__content { - padding: 20px 24px 24px 24px; - color: rgba(0,0,0, 0.54); } \ No newline at end of file + /* padding: 20px 24px 24px 24px; */ + 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;} \ No newline at end of file diff --git a/mission005/ganeodolu/index.html b/mission005/ganeodolu/index.html index 5add00c..1412f14 100644 --- a/mission005/ganeodolu/index.html +++ b/mission005/ganeodolu/index.html @@ -25,8 +25,6 @@

가게 위치

- -
diff --git a/mission005/ganeodolu/js/App.js b/mission005/ganeodolu/js/App.js index 4ed7b73..cba7b6f 100644 --- a/mission005/ganeodolu/js/App.js +++ b/mission005/ganeodolu/js/App.js @@ -5,7 +5,6 @@ import ShowHistoryList from './ShowHistoryList.js' import ManagePage from './ManagePage.js' import ShowPage from './ShowPage.js' import ManageMap from './ManageMap.js' -import ShowModalMap from './ShowModalMap.js' function App() { const $targetSearchInput = document.querySelector('#txt-search') @@ -73,17 +72,7 @@ function App() { $target: $targetMap, $targetItem: $targetShowResult, $targetDialog: $targetDialog, - onClickStore: () => { - // manageMap.$targetItem - } }) - // const $targetDialogButton = document.querySelector('.dialog-button'); - // const $targetDialog = document.querySelector('#dialog'); - // const showModalMap = ShowModalMap({ - // $targetDialog: $targetDialog, - // $targetDialogButton: $targetDialogButton - // }) - } new App() \ No newline at end of file diff --git a/mission005/ganeodolu/js/ManageMap.js b/mission005/ganeodolu/js/ManageMap.js index 535949d..b60beb2 100644 --- a/mission005/ganeodolu/js/ManageMap.js +++ b/mission005/ganeodolu/js/ManageMap.js @@ -10,38 +10,42 @@ export default function ManageMap({ $target, $targetDialog, $targetItem }) { let map = new kakao.maps.Map(this.$target, mapOption); let geocoder = new kakao.maps.services.Geocoder(); - this.$targetItem.addEventListener('click', (e) => { - // console.log('eee',map.relayout()) - // console.log($targetItem) - console.log(e.target) - console.log(e.target.closest('div.item').lastElementChild.firstElementChild.textContent) - console.log(e.target.closest('div.item').lastElementChild.lastElementChild.textContent) - let storeName = e.target.closest('div.item').lastElementChild.firstElementChild.textContent - let storeAddress = e.target.closest('div.item').lastElementChild.lastElementChild.textContent - this.$targetDialog.showModal(); - // 주소로 좌표를 검색합니다 - geocoder.addressSearch(storeAddress, function (result, status) { - if (status === kakao.maps.services.Status.OK) { - var coords = new kakao.maps.LatLng(result[0].y, result[0].x); - var marker = new kakao.maps.Marker({ - map: map, - position: coords - }); - var infowindow = new kakao.maps.InfoWindow({ - content: `
${storeName}
` + 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: `
${storeName}
` + }) + $targetDialog.showModal(); + setTimeout(function () { + map.relayout() + customOverlay.setMap(map) + map.setCenter(coords); + }, 10) + } }); - infowindow.open(map, marker); - map.setCenter(coords); - map.relayout() } - }); }) - this.$targetDialog.querySelector('button:not([disabled])') - .addEventListener('click', function () { - $targetDialog.close(); - }); + this.$targetDialog.querySelector('button') + .addEventListener('click', function () { + $targetDialog.close(); + }); + window.onclick = function (e) { + if (e.target === $targetDialog) { + $targetDialog.close(); + } + } + } \ No newline at end of file diff --git a/mission005/ganeodolu/js/ShowModalMap.js b/mission005/ganeodolu/js/ShowModalMap.js deleted file mode 100644 index 4d0ac80..0000000 --- a/mission005/ganeodolu/js/ShowModalMap.js +++ /dev/null @@ -1,16 +0,0 @@ -export default function ShowModalMap({ $targetDialog, $targetDialogButton }) { - - // if (!$targetDialog.showModal) { - // dialogPolyfill.registerDialog($targetDialog); - // } - $targetDialogButton.addEventListener('click', function () { - $targetDialog.showModal(); - // setTimeout(function(){ - // map.relayout() - // }, 1000) - }); - $targetDialog.querySelector('button:not([disabled])') - .addEventListener('click', function () { - $targetDialog.close(); - }); -} \ No newline at end of file From e9ca4c0408919626b000573bf1ff4621c00deba7 Mon Sep 17 00:00:00 2001 From: ganeodolu Date: Sun, 9 Feb 2020 13:25:26 +0900 Subject: [PATCH 8/8] =?UTF-8?q?M5=20css=ED=8C=8C=EC=9D=BC=20=EC=A0=95?= =?UTF-8?q?=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission005/ganeodolu/css/styles.css | 84 ++++++++++++++--------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/mission005/ganeodolu/css/styles.css b/mission005/ganeodolu/css/styles.css index 0c0994a..c69c8b8 100644 --- a/mission005/ganeodolu/css/styles.css +++ b/mission005/ganeodolu/css/styles.css @@ -130,45 +130,45 @@ 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; - /* height: 50%; */ -} - /* width: 280px; } */ - .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 { - /* padding: 20px 24px 24px 24px; */ - 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;} \ No newline at end of file +} +.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;} \ No newline at end of file