Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
butter-studio
Commits
70a7254f
Commit
70a7254f
authored
Jul 07, 2021
by
Kim, Subin
Browse files
kakaoMap 추가
parent
47ca3f32
Changes
4
Hide whitespace changes
Inline
Side-by-side
client/public/index.html
View file @
70a7254f
...
@@ -24,6 +24,7 @@
...
@@ -24,6 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
Learn how to configure a non-root public URL by running `npm run build`.
-->
-->
<script
type=
"text/javascript"
src=
"//dapi.kakao.com/v2/maps/sdk.js?appkey= a04f2d1d1722f5fbadd556e742465d9f&libraries=services"
></script>
<title>
Butter Studio
</title>
<title>
Butter Studio
</title>
</head>
</head>
<body>
<body>
...
...
client/src/components/Admin/CinemaEdit.js
View file @
70a7254f
import
{
useState
}
from
"
react
"
;
import
KakaoMap
from
"
../KakaoMap
"
;
import
styles
from
"
./admin.module.scss
"
;
const
CinemaEdit
=
()
=>
{
const
CinemaEdit
=
()
=>
{
const
[
cinemaInfo
,
setCinemaInfo
]
=
useState
({
cinema
:
""
,
transportation
:
""
,
parking
:
""
,
adress
:
""
})
const
[
search
,
setSearch
]
=
useState
(
""
)
function
handleChange
(
e
)
{
function
handleChange
(
e
)
{
const
{
name
,
value
}
=
e
.
target
const
{
name
,
value
}
=
e
.
target
console
.
log
(
"
name=
"
,
name
,
"
value
=
"
,
value
)
setCinemaInfo
({
...
cinemaInfo
,
[
name
]:
value
}
)
}
}
return
(
return
(
<>
<>
<
h2
className
=
"
border-bottom border-2 text-center pb-2 me-2
"
>
현재
영화관
정보
<
/h2
>
<
h2
className
=
"
border-bottom border-2 text-center pb-2 me-2
"
>
현재
영화관
정보
<
/h2
>
<
input
type
=
"
text
"
className
=
"
form-control
"
id
=
"
cinema
"
name
=
"
cinema
"
onChange
=
{
handleChange
}
/
>
<
input
type
=
"
text
"
className
=
{
`
form-control
mb-2
${
styles
.
shadowNone
}
`
}
id
=
"
cinema
"
name
=
"
cinema
"
onChange
=
{
handleChange
}
/
>
<
p
>
총
상영관
수
:
8
개관
|
총
좌석
수
:
1
,
282
석
<
/p
>
<
p
>
총
상영관
수
:
8
개관
|
총
좌석
수
:
1
,
282
석
<
/p
>
<
div
className
=
"
mb-3
"
>
<
div
className
=
"
mb-3
"
>
<
label
for
=
"
transportation
"
className
=
"
form-label
"
>
대중교통
안내
<
/label
>
<
label
for
=
"
transportation
"
className
=
"
form-label
"
>
대중교통
안내
<
/label
>
<
textarea
className
=
"
form-control
"
id
=
"
transportation
"
name
=
"
transportation
"
onChange
=
{
handleChange
}
><
/textarea
>
<
textarea
className
=
{
`
form-control
${
styles
.
shadowNone
}
${
styles
.
textarea
}
`
}
rows
=
"
7
"
id
=
"
transportation
"
name
=
"
transportation
"
onChange
=
{
handleChange
}
><
/textarea
>
<
/div
>
<
/div
>
<
div
className
=
"
mb-3
"
>
<
div
className
=
"
mb-3
"
>
<
label
for
=
"
parking
"
className
=
"
form-label
"
>
자가용
/
주차안내
<
/label
>
<
label
for
=
"
parking
"
className
=
"
form-label
"
>
자가용
/
주차안내
<
/label
>
<
textarea
className
=
"
form-control
"
id
=
"
parking
"
name
=
"
parking
"
onChange
=
{
handleChange
}
><
/textarea
>
<
textarea
className
=
{
`form-control
${
styles
.
shadowNone
}
${
styles
.
textarea
}
`
}
rows
=
"
7
"
id
=
"
parking
"
name
=
"
parking
"
onChange
=
{
handleChange
}
><
/textarea
>
<
/div
>
<
label
for
=
"
adress
"
className
=
"
form-label
"
>
지도보기
<
/label
>
<
div
className
=
"
input-group mb-3
"
>
<
span
className
=
"
input-group-text
"
id
=
"
currentMap
"
><
i
className
=
"
bi bi-geo-alt-fill
"
><
/i></
span
>
<
input
type
=
"
text
"
className
=
{
`form-control
${
styles
.
shadowNone
}
`
}
id
=
"
adress
"
name
=
"
adress
"
aria
-
label
=
"
map
"
aria
-
describedby
=
"
currentMap
"
onChange
=
{
handleChange
}
/
>
<
button
className
=
"
btn btn-dark
"
type
=
"
button
"
id
=
"
currentMap
"
onClick
=
{()
=>
setSearch
(
cinemaInfo
.
adress
)}
><
i
className
=
"
bi bi-search
"
><
/i></
button
>
<
/div
>
<
div
className
=
"
d-flex justify-content-center mb-5
"
>
<
KakaoMap
adress
=
{
search
}
/
>
<
/div
>
<
/div
>
<
label
>
지도보기
<
/label
>
<
/
>
<
/
>
)
)
}
}
...
...
client/src/components/Admin/admin.module.scss
View file @
70a7254f
...
@@ -14,4 +14,16 @@
...
@@ -14,4 +14,16 @@
z-index
:
10
;
z-index
:
10
;
}
}
}
}
}
.shadowNone
{
&
:focus
{
-webkit-box-shadow
:
none
;
box-shadow
:
none
;
border-color
:
#000
;
}
}
.textarea
{
resize
:
none
;
}
}
\ No newline at end of file
client/src/components/KakaoMap.js
0 → 100644
View file @
70a7254f
import
{
useEffect
,
useRef
}
from
"
react
"
;
const
{
kakao
}
=
window
;
const
KakaoMap
=
({
adress
})
=>
{
const
kakaoMapDiv
=
useRef
(
null
)
useEffect
(()
=>
{
const
container
=
kakaoMapDiv
.
current
const
options
=
{
center
:
new
kakao
.
maps
.
LatLng
(
33.450701
,
126.570667
),
level
:
3
};
const
map
=
new
kakao
.
maps
.
Map
(
container
,
options
);
const
geocoder
=
new
kakao
.
maps
.
services
.
Geocoder
();
geocoder
.
addressSearch
(
`
${
adress
}
`
,
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
});
map
.
setCenter
(
coords
);
}
else
if
(
adress
!=
''
)
{
alert
(
"
찾을 수 없는 주소입니다. 다시 입력해주세요.
"
)
}
});
},
[
adress
])
return
(
<
div
ref
=
{
kakaoMapDiv
}
style
=
{{
width
:
"
500px
"
,
height
:
"
400px
"
}}
><
/div
>
)
}
export
default
KakaoMap
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment