jhynsoo/enjoytrip_FE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add kakao map component

Browse Source
This commit is contained in:
jhynsoo 2024-05-15 22:44:20 +09:00
parent 97be21d84b
commit 4873c82636
7 changed files with 81 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -8,6 +8,7 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=042e55278939bfa9163a67a6fe4021c0&libraries=services,clusterer,drawing"></script>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

1
src/assets/main.css
View File

@ -1,6 +1,7 @@
@import './base.css'; @import './base.css';
#app { #app {
height: 100vh;
margin: 0 auto; margin: 0 auto;
font-weight: normal; font-weight: normal;
} }

2
src/components/AppHeader.vue
View File

@ -9,7 +9,7 @@ import { RouterLink } from 'vue-router';
<RouterLink :to="{ name: 'home' }">EnjoyTrip</RouterLink> <RouterLink :to="{ name: 'home' }">EnjoyTrip</RouterLink>
</div> </div>
<div class="menuWrapper"> <div class="menuWrapper">
<div class="item"><RouterLink :to="{ name: 'home' }">검색</RouterLink></div> <div class="item"><RouterLink :to="{ name: 'search' }">검색</RouterLink></div>
<div class="item"><RouterLink :to="{ name: 'board' }">게시판</RouterLink></div> <div class="item"><RouterLink :to="{ name: 'board' }">게시판</RouterLink></div>
<div class="item" v-if="true"><RouterLink :to="{ name: 'home' }">로그인</RouterLink></div> <div class="item" v-if="true"><RouterLink :to="{ name: 'home' }">로그인</RouterLink></div>
<template v-else> <template v-else>

30
src/components/common/KakaoMap.vue Normal file
View File

@ -0,0 +1,30 @@
<!-- eslint-disable no-undef -->
<script setup>
import { onMounted, ref } from 'vue';
const mapDiv = ref(null);
const map = ref(null);
onMounted(() => {
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3,
};
map.value = new kakao.maps.Map(mapDiv.value, options);
});
</script>
<template>
<div id="map" ref="mapDiv" />
</template>
<style scoped>
#map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

18
src/components/search/SideBar.vue Normal file
View File

@ -0,0 +1,18 @@
<script setup></script>
<template>
<div class="sidebar">asdf</div>
</template>
<style scoped>
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 320px;
height: 100%;
background-color: var(--color-background);
z-index: 99;
border-right: 1px solid var(--color-border);
}
</style>

11
src/router/index.js
View File

@ -30,6 +30,17 @@ const router = createRouter({
}, },
], ],
}, },
{
path: '/search',
component: () => import('@/views/SearchView.vue'),
children: [
{
path: '',
name: 'search',
component: () => import('@/components/common/KakaoMap.vue'),
},
],
},
], ],
}); });

19
src/views/SearchView.vue Normal file
View File

@ -0,0 +1,19 @@
<script setup>
import AppHeader from '@/components/AppHeader.vue';
import { RouterView } from 'vue-router';
</script>
<template>
<AppHeader />
<main>
<RouterView />
</main>
</template>
<style scoped>
main {
position: relative;
width: 100%;
height: 100%;
}
</style>