-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
[DETAIL] 메인페이지 주소 변경 UI 구현
- Loading branch information
Showing
16 changed files
with
16,357 additions
and
6 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import axios from 'axios'; | ||
import { NAVER_MAPS_CLIENT_ID, NAVER_MAP_CLOUD_SECRET_ID } from 'config/constants'; | ||
|
||
const getAddress = async (latitude: number, longitude: number): Promise<string> => { | ||
const response = await axios.get('/map-reversegeocode/v2/gc', { | ||
params: { | ||
coords: `${longitude},${latitude}`, | ||
sourcecrs: 'epsg:4326', | ||
orders: 'roadaddr', | ||
output: 'json', | ||
}, | ||
headers: { | ||
'X-NCP-APIGW-API-KEY-ID': NAVER_MAPS_CLIENT_ID, | ||
'X-NCP-APIGW-API-KEY': NAVER_MAP_CLOUD_SECRET_ID, | ||
}, | ||
}); | ||
|
||
const { data } = response; | ||
if (data?.results?.length > 0) { | ||
return `${data.results[0].region.area1.name} ${data.results[0].region.area2.name} ${data.results[0].region.area3.name} ${data.results[0].land.name} ${data.results[0].land.number1}`; | ||
} | ||
return '주소 정보 없음'; | ||
}; | ||
|
||
export default getAddress; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,19 @@ | ||
.home { | ||
width: 100%; | ||
} | ||
|
||
.map { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
z-index: 1; | ||
} | ||
|
||
.locationBox { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
z-index: 3; | ||
} |
37 changes: 37 additions & 0 deletions
37
src/pages/Home/components/LocationInfo/LocationInfo.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
@use "src/utils/styles/mediaQuery.scss" as media; | ||
|
||
.map-container { | ||
display: none; | ||
|
||
@include media.media-breakpoint-up(mobile) { | ||
position: absolute; | ||
right: 24px; | ||
top: 24px; | ||
height: 57px; | ||
border-radius: 100px; | ||
border: none; | ||
display: flex; | ||
align-items: center; | ||
justify-content: space-between; | ||
font-size: 20px; | ||
font-weight: 500; | ||
line-height: 24.96px; | ||
color: #222222; | ||
z-index: 2; | ||
backdrop-filter: blur(2px); | ||
background-color: #ffffff99; | ||
box-shadow: 1px 1px 10px 1px #0000001a; | ||
cursor: pointer; | ||
} | ||
|
||
&__text { | ||
display: flex; | ||
margin-left: 24px; | ||
} | ||
|
||
&__image { | ||
display: flex; | ||
margin-right: 24px; | ||
margin-left: 10px; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { ReactComponent as Arrow } from 'assets/svg/home/arrow.svg'; | ||
import styles from './LocationInfo.module.scss'; | ||
|
||
interface LocationInfoProps { | ||
address: string | null; | ||
onClick: () => void; | ||
} | ||
|
||
export default function LocationInfo({ address, onClick }: LocationInfoProps): JSX.Element { | ||
return ( | ||
<button | ||
type="button" | ||
className={styles['map-container']} | ||
onClick={onClick} | ||
> | ||
{address ? ( | ||
<div className={styles['map-container__text']}>{address}</div> | ||
) : ( | ||
<div className={styles['map-container__text']}>위치 정보를 가져오는 중...</div> | ||
)} | ||
<Arrow className={styles['map-container__image']} /> | ||
</button> | ||
); | ||
} |
111 changes: 111 additions & 0 deletions
111
src/pages/Home/components/Map/components/Location/Location.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
.container { | ||
position: fixed; | ||
top: 50%; | ||
left: 50%; | ||
transform: translate(-50%, -50%); | ||
display: flex; | ||
width: 617px; | ||
height: 749px; | ||
flex-direction: column; | ||
border-radius: 15px; | ||
backdrop-filter: blur(2px); | ||
background-color: #ffffffcc; | ||
z-index: 3; | ||
} | ||
|
||
.box { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
|
||
&__title { | ||
display: flex; | ||
color: #ff7f23; | ||
font-size: 28px; | ||
font-weight: 700; | ||
margin: 68px auto 12px; | ||
} | ||
|
||
&__subTitle { | ||
display: flex; | ||
font-size: 16px; | ||
font-weight: 400; | ||
} | ||
} | ||
|
||
.search { | ||
display: flex; | ||
align-items: baseline; | ||
margin-left: 40px; | ||
|
||
&__box { | ||
display: flex; | ||
width: 426px; | ||
height: 46px; | ||
border-radius: 20px; | ||
background-color: white; | ||
box-shadow: 5px 5px 15px 1px #0000001a; | ||
border: none; | ||
margin-top: 48px; | ||
} | ||
|
||
&__image { | ||
display: flex; | ||
margin: auto 20px; | ||
} | ||
|
||
&__text { | ||
display: flex; | ||
border: none; | ||
width: 350px; | ||
font-size: 18px; | ||
font-weight: 500; | ||
} | ||
|
||
&__button { | ||
display: flex; | ||
border: none; | ||
background-color: #ff7f23; | ||
color: white; | ||
border-radius: 100px; | ||
width: 72px; | ||
height: 46px; | ||
justify-content: center; | ||
align-items: center; | ||
font-weight: 500; | ||
font-size: 18px; | ||
margin-left: 39px; | ||
box-shadow: 5px 5px 15px 1px #0000001a; | ||
} | ||
} | ||
|
||
.location { | ||
display: flex; | ||
border: none; | ||
margin-top: 8px; | ||
font-size: 16px; | ||
font-weight: 400; | ||
margin-left: 32px; | ||
border-bottom: 1px solid #c4c4c4; | ||
width: 510px; | ||
padding: 10px; | ||
cursor: pointer; | ||
|
||
&__active { | ||
display: flex; | ||
align-items: center; | ||
border-radius: 50px; | ||
padding: 3px 25px 3px 10px; | ||
|
||
&:hover { | ||
display: flex; | ||
background-color: #eeeeee; | ||
} | ||
} | ||
|
||
&__image { | ||
display: flex; | ||
margin: 8px; | ||
margin-left: 17px; | ||
} | ||
} |
28 changes: 28 additions & 0 deletions
28
src/pages/Home/components/Map/components/Location/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import { ReactComponent as Search } from 'assets/svg/home/search.svg'; | ||
import { ReactComponent as Point } from 'assets/svg/home/point.svg'; | ||
import styles from './Location.module.scss'; | ||
|
||
export default function Location(): JSX.Element { | ||
return ( | ||
<div className={styles.container}> | ||
<div className={styles.box}> | ||
<div className={styles.box__title}>현재 위치가 올바르지 않은가요?</div> | ||
<div className={styles.box__subTitle}>현재 계신 곳의 위치를 아래 검색창을 통해</div> | ||
<div className={styles.box__subTitle}>알려주시면 반영하겠습니다.</div> | ||
</div> | ||
<div className={styles.search}> | ||
<div className={styles.search__box}> | ||
<Search className={styles.search__image} /> | ||
<input type="text" className={styles.search__text} placeholder="지번, 도로명, 건물명으로 검색해주세요." /> | ||
</div> | ||
<button className={styles.search__button} type="button">등록</button> | ||
</div> | ||
<div className={styles.location}> | ||
<div className={styles.location__active}> | ||
<Point className={styles.location__image} /> | ||
현재 위치로 설정 | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import { useEffect, useRef, useState } from 'react'; | ||
import useBooleanState from 'utils/hooks/useBooleanState'; | ||
import getAddress from 'api/location'; | ||
import makeToast from 'utils/ts/makeToast'; | ||
|
||
export default function useHome() { | ||
const [isClickLocation, active, unactive] = useBooleanState(false); | ||
const locationRef = useRef<HTMLDivElement | null>(null); | ||
const [userLocation, setUserLocation] = useState({ | ||
latitude: null as number | null, | ||
longitude: null as number | null, | ||
address: null as string | null, | ||
}); | ||
|
||
useEffect(() => { | ||
function handleClickOutside(event: MouseEvent) { | ||
if (locationRef.current && !locationRef.current.contains(event.target as Node)) { | ||
unactive(); | ||
} | ||
} | ||
document.addEventListener('mouseup', handleClickOutside); | ||
return () => { | ||
document.removeEventListener('mouseup', handleClickOutside); | ||
}; | ||
}, [unactive]); | ||
|
||
const updateUserLocation = () => { | ||
if (navigator.geolocation) { | ||
navigator.geolocation.getCurrentPosition(async (position) => { | ||
const addressData = await getAddress( | ||
position.coords.latitude, | ||
position.coords.longitude, | ||
); | ||
setUserLocation((prevUserLocation) => ({ | ||
...prevUserLocation, | ||
latitude: position.coords.latitude, | ||
longitude: position.coords.longitude, | ||
address: addressData, | ||
})); | ||
}, (error) => { | ||
makeToast('error', error.message); | ||
}); | ||
} | ||
}; | ||
|
||
useEffect(() => { | ||
updateUserLocation(); | ||
}, []); | ||
|
||
return { | ||
isClickLocation, | ||
active, | ||
locationRef, | ||
userLocation, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,30 @@ | ||
import Map from './components/Map'; | ||
import { Container as MapDiv } from 'react-naver-maps'; | ||
import useHome from './components/Map/hooks/useHome'; | ||
import Location from './components/Map/components/Location/index'; | ||
import NaverMap from './components/Map'; | ||
import styles from './Home.module.scss'; | ||
import LocationInfo from './components/LocationInfo'; | ||
|
||
export default function Home(): JSX.Element { | ||
const { | ||
isClickLocation, active, userLocation, locationRef, | ||
} = useHome(); | ||
return ( | ||
<div className={styles.home}> | ||
<Map /> | ||
<LocationInfo address={userLocation.address} onClick={active} /> | ||
<div className={styles.map}> | ||
<MapDiv> | ||
<NaverMap /> | ||
</MapDiv> | ||
</div> | ||
{isClickLocation && ( | ||
<div | ||
className={styles.locationBox} | ||
ref={locationRef} | ||
> | ||
<Location /> | ||
</div> | ||
)} | ||
</div> | ||
); | ||
} |
Oops, something went wrong.