diff --git a/src/components/pages/searchAddress/PostCode.tsx b/src/components/pages/searchAddress/PostCode.tsx new file mode 100644 index 0000000..9f1134c --- /dev/null +++ b/src/components/pages/searchAddress/PostCode.tsx @@ -0,0 +1,44 @@ +import React, { SetStateAction, Dispatch } from 'react'; +import DaumPostcode from 'react-daum-postcode'; +// const scriptUrl = 'https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js'; + +interface IPostcodeInterface { + address: string; + setAddress: Dispatch>; + setIsPopupOpen: Dispatch>; +} + +export const Postcode = ({ address, setAddress, setIsPopupOpen }: IPostcodeInterface) => { + // const open = useDaumPostcodePopup(scriptUrl); + // console.log(address); + + const handleComplete = async (data: any) => { + let fullAddress = data.address; + let extraAddress = ''; + + if (false) { + // disabled + if (data.addressType === 'R') { + if (data.bname !== '') { + extraAddress += data.bname; + } + if (data.buildingName !== '') { + extraAddress += extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName; + } + + fullAddress += extraAddress !== '' ? ` (${extraAddress})` : ''; + } + } + // console.log(data); + console.log(fullAddress); // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)' + + setAddress(fullAddress); + setIsPopupOpen(false); + }; + + return ( +
+ +
+ ); +}; diff --git a/src/hooks/common/useGetCurrentLocation.tsx b/src/hooks/common/useGetCurrentLocation.tsx new file mode 100644 index 0000000..8ce2eae --- /dev/null +++ b/src/hooks/common/useGetCurrentLocation.tsx @@ -0,0 +1,26 @@ +import { useEffect, useState } from 'react'; + +export default function useGetCurrentLocation() { + const [location, setLocation] = useState({ latitude: '', longitude: '' }); + const [error, setError] = useState(''); + + const handleSuccess = (pos: any) => { + const { latitude, longitude } = pos.coords; + setLocation({ latitude, longitude }); + }; + + const handleError = (error: any) => { + setError(error.message); + }; + + useEffect(() => { + const { geolocation } = window.navigator; + + if (!geolocation) { + setError('위치 추적 허용이 되어 있지 않습니다.'); + } + geolocation.getCurrentPosition(handleSuccess, handleError); + }, []); + + return { location, error }; +} diff --git a/src/pages/searchAddress/index.tsx b/src/pages/searchAddress/index.tsx new file mode 100644 index 0000000..305a5bf --- /dev/null +++ b/src/pages/searchAddress/index.tsx @@ -0,0 +1,101 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import { CommonWrapper, Header } from '@components/common'; +import CommonBtn from '@components/common/CommonBtn'; +import { useRouter } from 'next/router'; +import { Postcode } from '@components/pages/searchAddress/PostCode'; +import { TextInput } from '@components/Input'; +import searchIcon from '@assets/icons/search.svg'; +import Image from 'next/image'; + +// ### **회원가입시 지역 인증 기능** +// - 가입할 때 특정 지역(개발자님의 거주지역)에서 6km 이내에 위치하고 있는지 확인하고 맞으면 회원가입을 할 수 있고, 아니면 회원가입을 못하게 하는거예요! + +// ### 3) 회원가입정보 입력 + +// 만약 중도에 뒤로가기 버튼을 누르거나 이탈하려고 할 경우 ‘회원가입을 종료하시겠습니까?’라는 문구가 뜹니다. ‘예’를 누르면 메인페이지로 돌아갑니다. +// 정상적으로 입력해 회원가입이 완료되면 로그인 페이지로 이동하여 ‘회원가입이 완료되었습니다.’라는 문구가 뜹니다. + +function SearchAddress() { + const router = useRouter(); + + const [isPopupOpen, setIsPopupOpen] = useState(false); + const [address, setAddress] = useState(''); + + const handleAddress = () => { + setIsPopupOpen(!isPopupOpen); + }; + + const moveToSignup = () => { + router.push('signup'); + }; + + return ( + +
+ +

+ 내가 사는 곳의
동네를 입력해주세요 +

+
+ + +
+ {isPopupOpen && ( +
+ +
+ )} + +
+ 동네 인증하기 +
+
+ + ); +} + +export default SearchAddress; + +const Wrapper = styled(CommonWrapper)` + background-color: #fff; + height: 100%; +`; + +const LoginContainer = styled.div` + display: flex; + flex-direction: column; + padding: 16px; + overflow-y: auto; + height: 100vh; + + h2 { + font-weight: 400; + font-size: 20px; + line-height: 32px; + letter-spacing: 0.15px; + } + + .buttonBox { + width: 100%; + margin: 2rem 0; + } + + .inputBox { + margin: 1rem 5px; + padding: 5px; + display: flex; + justify-content: center; + } + Image { + margin: 0 3px; + } +`; + +const SearchInput = styled(TextInput)` + width: 90%; + border-radius: 0px; + border: none; + border-bottom: 1px solid #bfbfbf; + padding: 6px 1px; +`;