From c80a2b52e3d215460ca8945b95907b74148b9529 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=EC=84=9D?= <4up456@naver.com> Date: Mon, 3 Mar 2025 19:43:36 +0900 Subject: [PATCH 1/9] =?UTF-8?q?=E2=9C=A8=20Feat:=20=20=ED=9A=8C=EC=9B=90?= =?UTF-8?q?=EA=B0=80=EC=9E=85=20=EC=8B=9C=20=EC=A3=BC=EC=86=8C=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../address/_components/AddressOption.tsx | 22 ++++- .../detail/_components/AddressDetail.tsx | 4 + .../address/detail/_components/MapInfo.tsx | 16 ++++ src/components/shared/SignupModal.tsx | 94 ++++++++++++++----- 4 files changed, 112 insertions(+), 24 deletions(-) diff --git a/src/app/mypage/address/_components/AddressOption.tsx b/src/app/mypage/address/_components/AddressOption.tsx index 1d5f359..b87c073 100644 --- a/src/app/mypage/address/_components/AddressOption.tsx +++ b/src/app/mypage/address/_components/AddressOption.tsx @@ -20,6 +20,7 @@ import { useQueryClient } from '@tanstack/react-query' import { useState } from 'react' import DaumPostcode from 'react-daum-postcode' import AddressDetail, { AddressData } from '../detail/_components/AddressDetail' +import { SignupData } from '@/models/auth' const AddressOption = () => { const [word, setWord] = useState('') @@ -310,27 +311,42 @@ const AddressOption = () => { ) } -const AddressDetailModal = ({ +export const AddressDetailModal = ({ type, userAddress, addressData, + onSaveInSignup, }: { type?: AddressType userAddress?: AddressResponseData addressData?: AddressData + onSaveInSignup?: (addressData: SignupData['address']) => void }) => { const { hideModal } = modalStore() + const handleClose = () => { + hideModal() + if (onSaveInSignup) { + // 회원가입 시 주소 검색 모달 추가로 닫기 + hideModal() + } + } + return (
주소 등록
- +
- +
) diff --git a/src/app/mypage/address/detail/_components/AddressDetail.tsx b/src/app/mypage/address/detail/_components/AddressDetail.tsx index 09c5312..1eadd8c 100644 --- a/src/app/mypage/address/detail/_components/AddressDetail.tsx +++ b/src/app/mypage/address/detail/_components/AddressDetail.tsx @@ -7,6 +7,7 @@ import { useGeoLocationStore } from '@/store/geoLocation' import { useState } from 'react' import { useKakaoLoader } from 'react-kakao-maps-sdk' import MapInfo from './MapInfo' +import { SignupData } from '@/models/auth' export interface AddressData { type: AddressType | undefined @@ -24,10 +25,12 @@ const AddressDetail = ({ type = AddressType.HOME, userAddress, defaultAddressData, + onSaveInSignup, }: { type?: AddressType userAddress?: AddressResponseData defaultAddressData?: AddressData + onSaveInSignup?: (addressData: SignupData['address']) => void }) => { const [loading] = useKakaoLoader({ appkey: process.env.NEXT_PUBLIC_KAKAO_APP_KEY!, @@ -66,6 +69,7 @@ const AddressDetail = ({ addressData={addressData} onAddressChange={handleAddressChange} userAddress={userAddress} + onSaveInSignup={onSaveInSignup} /> ) diff --git a/src/app/mypage/address/detail/_components/MapInfo.tsx b/src/app/mypage/address/detail/_components/MapInfo.tsx index ddf17c1..9549a1c 100644 --- a/src/app/mypage/address/detail/_components/MapInfo.tsx +++ b/src/app/mypage/address/detail/_components/MapInfo.tsx @@ -13,15 +13,18 @@ import { modalStore } from '@/store/modal' import { useQueryClient } from '@tanstack/react-query' import { useEffect, useState } from 'react' import { AddressData } from './AddressDetail' +import { SignupData } from '@/models/auth' const MapInfo = ({ addressData, onAddressChange, userAddress, + onSaveInSignup, }: { addressData: AddressData onAddressChange: (data: AddressData) => void userAddress?: AddressResponseData + onSaveInSignup?: (addressData: SignupData['address']) => void }) => { const queryClient = useQueryClient() const { toast } = useToast() @@ -70,6 +73,19 @@ const MapInfo = ({ } } + if (onSaveInSignup) { + onSaveInSignup({ + memberAddressType: addressData.type as AddressType, + roadAddress: addressData.roadAddr || addressData.address, + jibunAddress: addressData.address, + detailAddress: addressDetail, + alias: addressData.type === AddressType.OTHERS ? alias : '', + latitude: addressData.coords.lat, + longitude: addressData.coords.lng, + }) + return + } + const _address: Address = { memberAddressType: addressData.type, roadAddress: addressData.roadAddr || addressData.address, diff --git a/src/components/shared/SignupModal.tsx b/src/components/shared/SignupModal.tsx index e1c9f76..13d8503 100644 --- a/src/components/shared/SignupModal.tsx +++ b/src/components/shared/SignupModal.tsx @@ -1,16 +1,20 @@ +import useGetAddress from '@/api/useGetAddress' +import useGetAddressToGeolocation from '@/api/useGetAddressToGeolocation' import usePostSignup from '@/api/usePostSignup' +import { AddressDetailModal } from '@/app/mypage/address/_components/AddressOption' import { Button } from '@/components/button' import Icon from '@/components/Icon' import Input from '@/components/Input' import { useToast } from '@/hooks/useToast' import { ApiErrorResponse } from '@/lib/api' import { formatPhoneNumber, unformatPhoneNumber } from '@/lib/format' +import { SignupData } from '@/models/auth' import { modalStore } from '@/store/modal' import { zodResolver } from '@hookform/resolvers/zod' -import { useState } from 'react' +import { useRef, useState } from 'react' +import DaumPostcode from 'react-daum-postcode' import { useForm } from 'react-hook-form' import { z } from 'zod' -import Address from '@/app/mypage/address/page' const SignupModal = () => { const { hideModal } = modalStore() @@ -69,8 +73,8 @@ const signupFormSchema = z.object({ }) const SignupForm = () => { - const { showModal, hideModal, addressData } = modalStore() - + const { showModal, hideModal } = modalStore() + const phoneInputRef = useRef(null) const { mutate: signup } = usePostSignup() const { toast } = useToast() const { @@ -159,9 +163,16 @@ const SignupForm = () => { }) } + const handleChangeAddress = (addressData: SignupData['address']) => { + setValue('address', addressData) + hideModal() // 주소 찾기 디테일 모달 닫기 + hideModal() // 주소 찾기 모달 닫기 + phoneInputRef.current?.focus() // 전화번호 입력 필드로 포커스 이동하여 가입하기 버튼 활성화 + } + const handleAddressClick = () => { showModal({ - content: , + content: , useAnimation: true, }) if (!isClickedAddressButton) { @@ -268,6 +279,7 @@ const SignupForm = () => { setFocusedField('phone') trigger('signname') }} + ref={phoneInputRef} /> {errors.phone && focusedField !== 'phone' && (
{errors.phone.message}
@@ -291,8 +303,10 @@ const SignupForm = () => { 주소 찾기 - {addressData?.roadAddress ? ( -
{addressData?.roadAddress}
+ {addressValue?.roadAddress ? ( +
+ {addressValue?.roadAddress + ' ' + addressValue?.detailAddress} +
) : ( isClickedAddressButton && (
주소를 입력해주세요.
@@ -301,12 +315,7 @@ const SignupForm = () => {
-
@@ -314,18 +323,61 @@ const SignupForm = () => { ) } -const AddressModal = () => { - const { hideModal } = modalStore() +const AddressModal = ({ + onSaveInSignup, +}: { + onSaveInSignup: (addressData: SignupData['address']) => void +}) => { + const { showModal, hideModal } = modalStore() + const { mutate: addressToGeolocation } = useGetAddressToGeolocation() + const { address } = useGetAddress() + const { toast } = useToast() + + const handleComplete = async (data: { address: string }) => { + addressToGeolocation(data.address, { + onSuccess: (data) => { + showModal({ + content: ( + + ), + useAnimation: true, + useDimmedClickClose: true, + }) + }, + onError: (error) => { + console.log({ error }) + toast({ + title: '주소 검색에 실패했습니다.', + description: '다시 시도해주세요.', + variant: 'destructive', + position: 'center', + }) + }, + }) + } + + const handleClose = () => { + hideModal() + } return ( -
-
-
- 대표주소 등록 +
+
+
+
- +
-
) } From 9093bb6674373a213089c3fe103dfc93ecd930ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=EC=84=9D?= <4up456@naver.com> Date: Mon, 3 Mar 2025 20:27:51 +0900 Subject: [PATCH 2/9] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=20=ED=9A=8C=EC=9B=90?= =?UTF-8?q?=EA=B0=80=EC=9E=85=20=EC=A3=BC=EC=86=8C=20=EC=9E=85=EB=A0=A5=20?= =?UTF-8?q?UI=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/SignupModal.tsx | 38 +++++++++++++-------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/shared/SignupModal.tsx b/src/components/shared/SignupModal.tsx index 13d8503..1d44609 100644 --- a/src/components/shared/SignupModal.tsx +++ b/src/components/shared/SignupModal.tsx @@ -292,26 +292,26 @@ const SignupForm = () => { > 주소 - - - {addressValue?.roadAddress ? ( -
- {addressValue?.roadAddress + ' ' + addressValue?.detailAddress} -
- ) : ( - isClickedAddressButton && ( +
+ + {!addressValue?.roadAddress && isClickedAddressButton && (
주소를 입력해주세요.
- ) - )} + )} +
From fb0a24829d6cc8c497e1aaa8a8c39f22a754b042 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=EC=84=9D?= <4up456@naver.com> Date: Mon, 3 Mar 2025 20:31:03 +0900 Subject: [PATCH 3/9] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=20=EC=BB=A8=ED=8A=B8?= =?UTF-8?q?=EB=A1=A4=EB=93=9C=20=EC=96=B8=EC=BB=A8=ED=8A=B8=EB=A1=A4?= =?UTF-8?q?=EB=93=9C=20=EC=B6=A9=EB=8F=8C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/SignupModal.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/shared/SignupModal.tsx b/src/components/shared/SignupModal.tsx index 1d44609..659ab56 100644 --- a/src/components/shared/SignupModal.tsx +++ b/src/components/shared/SignupModal.tsx @@ -59,6 +59,7 @@ const signupFormSchema = z.object({ .regex(/^[a-zA-Z가-힣]+$/, '이름은 영문, 한글만 가능합니다.'), phone: z .string() + .min(1, '전화번호를 입력해주세요.') .min(10, '전화번호는 8자 이상이어야 합니다.') .max(13, '전화번호는 11자 이내여야 합니다.'), address: z.object({ @@ -74,7 +75,6 @@ const signupFormSchema = z.object({ const SignupForm = () => { const { showModal, hideModal } = modalStore() - const phoneInputRef = useRef(null) const { mutate: signup } = usePostSignup() const { toast } = useToast() const { @@ -167,7 +167,6 @@ const SignupForm = () => { setValue('address', addressData) hideModal() // 주소 찾기 디테일 모달 닫기 hideModal() // 주소 찾기 모달 닫기 - phoneInputRef.current?.focus() // 전화번호 입력 필드로 포커스 이동하여 가입하기 버튼 활성화 } const handleAddressClick = () => { @@ -279,7 +278,6 @@ const SignupForm = () => { setFocusedField('phone') trigger('signname') }} - ref={phoneInputRef} /> {errors.phone && focusedField !== 'phone' && (
{errors.phone.message}
From 6f1266925708e47e938be4fd1c636e0260537aef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=EC=84=9D?= <4up456@naver.com> Date: Mon, 3 Mar 2025 20:35:08 +0900 Subject: [PATCH 4/9] =?UTF-8?q?=F0=9F=8E=A8=20Design:=20=20=EC=A3=BC?= =?UTF-8?q?=EC=86=8C=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20UI=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/SignupModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/shared/SignupModal.tsx b/src/components/shared/SignupModal.tsx index 659ab56..47b07b5 100644 --- a/src/components/shared/SignupModal.tsx +++ b/src/components/shared/SignupModal.tsx @@ -299,7 +299,7 @@ const SignupForm = () => { onClick={handleAddressClick} > {addressValue?.roadAddress ? ( - + {addressValue?.roadAddress + ' ' + addressValue?.detailAddress} ) : ( From af466ad552adb5ca59da96d45650df265c6cc774 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=EC=84=9D?= <4up456@naver.com> Date: Mon, 3 Mar 2025 20:41:39 +0900 Subject: [PATCH 5/9] =?UTF-8?q?=E2=9C=A8=20Feat:=20=20=EC=A3=BC=EC=86=8C?= =?UTF-8?q?=20=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20=EC=9C=A0=ED=9A=A8=EC=84=B1?= =?UTF-8?q?=20=EA=B2=80=EC=82=AC=20=EC=8B=A4=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/SignupModal.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/shared/SignupModal.tsx b/src/components/shared/SignupModal.tsx index 47b07b5..fa51996 100644 --- a/src/components/shared/SignupModal.tsx +++ b/src/components/shared/SignupModal.tsx @@ -164,7 +164,9 @@ const SignupForm = () => { } const handleChangeAddress = (addressData: SignupData['address']) => { - setValue('address', addressData) + setValue('address', addressData, { + shouldValidate: true, // 주소 입력 시 유효성 검사 실행 + }) hideModal() // 주소 찾기 디테일 모달 닫기 hideModal() // 주소 찾기 모달 닫기 } From 7bb701bd209c79e34d83b2c70b59bff9eb73f986 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=EC=84=9D?= <4up456@naver.com> Date: Mon, 3 Mar 2025 21:07:19 +0900 Subject: [PATCH 6/9] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=20=EB=B9=88=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EC=9D=B4=20=EB=93=B1=EC=9E=A5=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/SignupModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/shared/SignupModal.tsx b/src/components/shared/SignupModal.tsx index fa51996..59d681d 100644 --- a/src/components/shared/SignupModal.tsx +++ b/src/components/shared/SignupModal.tsx @@ -376,7 +376,7 @@ const AddressModal = ({
- +
) From 73e078187082b331510e487eb0bcb7890b16e1cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EC=9A=A9=EC=84=9D?= <4up456@naver.com> Date: Mon, 3 Mar 2025 21:08:23 +0900 Subject: [PATCH 7/9] =?UTF-8?q?=F0=9F=8E=A8=20Design:=20=20=EC=A3=BC?= =?UTF-8?q?=EC=86=8C=20=EC=83=81=EC=84=B8=20=ED=99=94=EB=A9=B4=EC=9D=80=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=93=B1=EC=9E=A5=20=EC=95=A0=EB=8B=88?= =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/SignupModal.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/shared/SignupModal.tsx b/src/components/shared/SignupModal.tsx index 59d681d..ff21fd2 100644 --- a/src/components/shared/SignupModal.tsx +++ b/src/components/shared/SignupModal.tsx @@ -350,8 +350,6 @@ const AddressModal = ({ onSaveInSignup={onSaveInSignup} /> ), - useAnimation: true, - useDimmedClickClose: true, }) }, onError: (error) => { From 3cc508cb40ad4f276db8817694ab614c3bd3a3eb Mon Sep 17 00:00:00 2001 From: Suhyeon Jeon Date: Mon, 3 Mar 2025 22:24:08 +0900 Subject: [PATCH 8/9] fix: signup --- src/api/usePostLogout.ts | 1 + .../address/_components/AddressOption.tsx | 6 +- .../address/detail/_components/MapInfo.tsx | 2 +- src/components/shared/SignupModal.tsx | 189 ++++++++++++------ 4 files changed, 130 insertions(+), 68 deletions(-) diff --git a/src/api/usePostLogout.ts b/src/api/usePostLogout.ts index 4e61236..019cf62 100644 --- a/src/api/usePostLogout.ts +++ b/src/api/usePostLogout.ts @@ -22,6 +22,7 @@ const usePostLogout = () => { queryClient.removeQueries({ queryKey: ['member'] }) queryClient.removeQueries({ queryKey: ['favorites'] }) queryClient.removeQueries({ queryKey: ['carts'] }) + queryClient.removeQueries({ queryKey: ['address'] }) }, retry: 0, }) diff --git a/src/app/mypage/address/_components/AddressOption.tsx b/src/app/mypage/address/_components/AddressOption.tsx index b87c073..ce9fc6c 100644 --- a/src/app/mypage/address/_components/AddressOption.tsx +++ b/src/app/mypage/address/_components/AddressOption.tsx @@ -14,13 +14,13 @@ import Separator from '@/components/Separator' import LoginButtonSection from '@/components/shared/LoginButtonSection' import { useToast } from '@/hooks/useToast' import { cn } from '@/lib/utils' +import { SignupData } from '@/models/auth' import { modalStore } from '@/store/modal' import memberStore from '@/store/user' import { useQueryClient } from '@tanstack/react-query' import { useState } from 'react' import DaumPostcode from 'react-daum-postcode' import AddressDetail, { AddressData } from '../detail/_components/AddressDetail' -import { SignupData } from '@/models/auth' const AddressOption = () => { const [word, setWord] = useState('') @@ -326,10 +326,6 @@ export const AddressDetailModal = ({ const handleClose = () => { hideModal() - if (onSaveInSignup) { - // 회원가입 시 주소 검색 모달 추가로 닫기 - hideModal() - } } return ( diff --git a/src/app/mypage/address/detail/_components/MapInfo.tsx b/src/app/mypage/address/detail/_components/MapInfo.tsx index 9549a1c..4010f3c 100644 --- a/src/app/mypage/address/detail/_components/MapInfo.tsx +++ b/src/app/mypage/address/detail/_components/MapInfo.tsx @@ -9,11 +9,11 @@ import Input from '@/components/Input' import { Button } from '@/components/button' import { useToast } from '@/hooks/useToast' import { cn } from '@/lib/utils' +import { SignupData } from '@/models/auth' import { modalStore } from '@/store/modal' import { useQueryClient } from '@tanstack/react-query' import { useEffect, useState } from 'react' import { AddressData } from './AddressDetail' -import { SignupData } from '@/models/auth' const MapInfo = ({ addressData, diff --git a/src/components/shared/SignupModal.tsx b/src/components/shared/SignupModal.tsx index ff21fd2..410b8a2 100644 --- a/src/components/shared/SignupModal.tsx +++ b/src/components/shared/SignupModal.tsx @@ -1,5 +1,6 @@ -import useGetAddress from '@/api/useGetAddress' import useGetAddressToGeolocation from '@/api/useGetAddressToGeolocation' +import useGetGeolocationToAddress from '@/api/useGetGeolocationToAddress' +import { Address } from '@/api/usePostAddress' import usePostSignup from '@/api/usePostSignup' import { AddressDetailModal } from '@/app/mypage/address/_components/AddressOption' import { Button } from '@/components/button' @@ -9,9 +10,10 @@ import { useToast } from '@/hooks/useToast' import { ApiErrorResponse } from '@/lib/api' import { formatPhoneNumber, unformatPhoneNumber } from '@/lib/format' import { SignupData } from '@/models/auth' +import { useGeoLocationStore } from '@/store/geoLocation' import { modalStore } from '@/store/modal' import { zodResolver } from '@hookform/resolvers/zod' -import { useRef, useState } from 'react' +import { useEffect, useState } from 'react' import DaumPostcode from 'react-daum-postcode' import { useForm } from 'react-hook-form' import { z } from 'zod' @@ -75,7 +77,8 @@ const signupFormSchema = z.object({ const SignupForm = () => { const { showModal, hideModal } = modalStore() - const { mutate: signup } = usePostSignup() + const { coordinates } = useGeoLocationStore() + const { toast } = useToast() const { register, @@ -116,6 +119,13 @@ const SignupForm = () => { 'signname' | 'password' | 'nickname' | 'username' | 'phone' | null >(null) const [isClickedAddressButton, setIsClickedAddressButton] = useState(false) + const [currentAddress, setCurrentAddress] = useState
(null) + + const { mutate: addressToGeolocation } = useGetAddressToGeolocation() + const { mutate: geolocationToAddress, data: geolocationToAddressData } = + useGetGeolocationToAddress() + + const { mutate: signup } = usePostSignup() const onSubmit = handleSubmit((formData) => { const processedFormData = { @@ -168,12 +178,37 @@ const SignupForm = () => { shouldValidate: true, // 주소 입력 시 유효성 검사 실행 }) hideModal() // 주소 찾기 디테일 모달 닫기 - hideModal() // 주소 찾기 모달 닫기 + } + + const handleComplete = (address: { jibunAddress: string; roadAddress: string }) => { + addressToGeolocation(address.jibunAddress, { + onSuccess: (data) => { + const doc = data.documents[0] + + showAddressDetailModal({ + memberAddressType: undefined, + jibunAddress: address.jibunAddress, + roadAddress: address.roadAddress, + detailAddress: '', + alias: '', + latitude: Number(doc.y), + longitude: Number(doc.x), + }) + }, + onError: (error) => { + toast({ + title: '주소 검색에 실패했습니다.', + description: '다시 시도해주세요.', + variant: 'destructive', + position: 'center', + }) + }, + }) } const handleAddressClick = () => { showModal({ - content: , + content: , useAnimation: true, }) if (!isClickedAddressButton) { @@ -181,6 +216,50 @@ const SignupForm = () => { } } + const showAddressDetailModal = (address: Address) => { + showModal({ + content: ( + + ), + useAnimation: true, + }) + } + + useEffect(() => { + if (coordinates) { + geolocationToAddress({ + longitude: coordinates.longitude.toString(), + latitude: coordinates.latitude.toString(), + }) + } + }, [coordinates]) + + useEffect(() => { + if (geolocationToAddressData) { + const doc = geolocationToAddressData.documents[0] + + setCurrentAddress({ + memberAddressType: undefined, + jibunAddress: doc.address.address_name, + roadAddress: doc.road_address?.address_name || '', + detailAddress: '', + alias: '', + latitude: coordinates?.latitude || 0, + longitude: coordinates?.longitude || 0, + }) + } + }, [geolocationToAddressData]) + return (
{ height: 'calc(100vh - 94px)', }} > -
+
{ > 주소 -
- - {!addressValue?.roadAddress && isClickedAddressButton && ( -
주소를 입력해주세요.
- )} + +
현재 위치로 주소 찾기
+
@@ -324,45 +417,11 @@ const SignupForm = () => { } const AddressModal = ({ - onSaveInSignup, + handleComplete, }: { - onSaveInSignup: (addressData: SignupData['address']) => void + handleComplete: (data: { jibunAddress: string; roadAddress: string }) => void }) => { - const { showModal, hideModal } = modalStore() - const { mutate: addressToGeolocation } = useGetAddressToGeolocation() - const { address } = useGetAddress() - const { toast } = useToast() - - const handleComplete = async (data: { address: string }) => { - addressToGeolocation(data.address, { - onSuccess: (data) => { - showModal({ - content: ( - - ), - }) - }, - onError: (error) => { - console.log({ error }) - toast({ - title: '주소 검색에 실패했습니다.', - description: '다시 시도해주세요.', - variant: 'destructive', - position: 'center', - }) - }, - }) - } + const { hideModal } = modalStore() const handleClose = () => { hideModal() @@ -370,11 +429,17 @@ const AddressModal = ({ return (
-
+
- + { + hideModal() + handleComplete(data) + }} + autoClose={true} + />
) From a35b4b88c7b909c5fed4e14b72326dd6979b1ea8 Mon Sep 17 00:00:00 2001 From: Suhyeon Jeon Date: Mon, 3 Mar 2025 22:57:00 +0900 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20=EC=A3=BC=EC=86=8C=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/mypage/address/_components/AddressOption.tsx | 2 ++ src/app/mypage/address/_components/AddressSearchModal.tsx | 4 ++-- src/app/mypage/address/detail/_components/MapInfo.tsx | 8 +++++++- src/app/reviews/_components/Review.tsx | 4 ++-- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/app/mypage/address/_components/AddressOption.tsx b/src/app/mypage/address/_components/AddressOption.tsx index 2c3b7dc..44e70c1 100644 --- a/src/app/mypage/address/_components/AddressOption.tsx +++ b/src/app/mypage/address/_components/AddressOption.tsx @@ -41,6 +41,8 @@ const AddressOption = () => { const queryClient = useQueryClient() const handleComplete = async (data: { address: string }) => { + setPopup(false) + addressToGeolocation(data.address, { onSuccess: (data) => { showModal({ diff --git a/src/app/mypage/address/_components/AddressSearchModal.tsx b/src/app/mypage/address/_components/AddressSearchModal.tsx index 3fa02d0..a413829 100644 --- a/src/app/mypage/address/_components/AddressSearchModal.tsx +++ b/src/app/mypage/address/_components/AddressSearchModal.tsx @@ -1,5 +1,5 @@ -import React, { ReactNode } from 'react' import Icon from '@/components/Icon' +import React, { ReactNode } from 'react' interface ModalProps { isOpen: boolean @@ -12,7 +12,7 @@ const AddressSearchModal: React.FC = ({ isOpen, onClose, children }) return (
-
+
diff --git a/src/app/mypage/address/detail/_components/MapInfo.tsx b/src/app/mypage/address/detail/_components/MapInfo.tsx index 4010f3c..6074c61 100644 --- a/src/app/mypage/address/detail/_components/MapInfo.tsx +++ b/src/app/mypage/address/detail/_components/MapInfo.tsx @@ -11,6 +11,7 @@ import { useToast } from '@/hooks/useToast' import { cn } from '@/lib/utils' import { SignupData } from '@/models/auth' import { modalStore } from '@/store/modal' +import memberStore from '@/store/user' import { useQueryClient } from '@tanstack/react-query' import { useEffect, useState } from 'react' import { AddressData } from './AddressDetail' @@ -30,6 +31,7 @@ const MapInfo = ({ const { toast } = useToast() const { hideModal } = modalStore() + const { setMember } = memberStore() const [addressDetail, setAddressDetail] = useState('') const [alias, setAlias] = useState('') @@ -98,7 +100,11 @@ const MapInfo = ({ const _options = { onSuccess: () => { - refetchMember() + refetchMember().then((res) => { + if (res.data) { + setMember(res.data) + } + }) queryClient.invalidateQueries({ queryKey: ['address'] }) hideModal() }, diff --git a/src/app/reviews/_components/Review.tsx b/src/app/reviews/_components/Review.tsx index 3d5e40c..52b930f 100644 --- a/src/app/reviews/_components/Review.tsx +++ b/src/app/reviews/_components/Review.tsx @@ -27,7 +27,7 @@ const Review = () => { } = useInfiniteScroll({ queryKey: 'completed-reviews', endpoint: 'reviews', - size: 2, + size: 10, }) const handleChangeTab = (tab: ReviewTabType) => { @@ -69,7 +69,7 @@ const Review = () => { /> )) ) : ( - + )}