publish

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,
   })

src/app/mypage/address/_components/AddressOption.tsx

@@ -14,6 +14,7 @@ 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'
@@ -40,6 +41,8 @@ const AddressOption = () => {
   const queryClient = useQueryClient()
 
   const handleComplete = async (data: { address: string }) => {
+    setPopup(false)
+
     addressToGeolocation(data.address, {
       onSuccess: (data) => {
         showModal({
@@ -310,27 +313,38 @@ 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()
+  }
+
   return (
     <div className="w-full max-w-[min(480px,100dvw)] bg-white">
       <div className="relative flex justify-end p-mobile_safe">
         <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-lg font-bold">
           주소 등록
         </div>
-        <Icon name="X" size={24} onClick={hideModal} className="stroke-2" />
+        <Icon name="X" size={24} onClick={handleClose} className="stroke-2" />
       </div>
       <div className="h-[calc(100dvh-64px)] overflow-y-auto">
-        <AddressDetail type={type} userAddress={userAddress} defaultAddressData={addressData} />
+        <AddressDetail
+          type={type}
+          userAddress={userAddress}
+          defaultAddressData={addressData}
+          onSaveInSignup={onSaveInSignup}
+        />
       </div>
     </div>
   )

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<ModalProps> = ({ isOpen, onClose, children })
 
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
-      <div className="rounded bg-white p-4 shadow-lg">
+      <div className="w-[calc(100dvw-40px)] rounded bg-white p-4 shadow-lg">
         <div className="mb-2 flex justify-end">
           <Icon name="X" size={24} onClick={onClose} className="stroke-2" />
         </div>

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}
       />
     </div>
   )

src/app/mypage/address/detail/_components/MapInfo.tsx

@@ -9,7 +9,9 @@ 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 memberStore from '@/store/user'
 import { useQueryClient } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { AddressData } from './AddressDetail'
@@ -18,15 +20,18 @@ 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()
 
   const { hideModal } = modalStore()
+  const { setMember } = memberStore()
 
   const [addressDetail, setAddressDetail] = useState('')
   const [alias, setAlias] = useState('')
@@ -70,6 +75,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,
@@ -82,7 +100,11 @@ const MapInfo = ({
 
     const _options = {
       onSuccess: () => {
-        refetchMember()
+        refetchMember().then((res) => {
+          if (res.data) {
+            setMember(res.data)
+          }
+        })
         queryClient.invalidateQueries({ queryKey: ['address'] })
         hideModal()
       },

src/app/reviews/_components/Review.tsx

@@ -27,7 +27,7 @@ const Review = () => {
   } = useInfiniteScroll<CompletedReviewType>({
     queryKey: 'completed-reviews',
     endpoint: 'reviews',
-    size: 2,
+    size: 10,
   })
 
   const handleChangeTab = (tab: ReviewTabType) => {
@@ -69,7 +69,7 @@ const Review = () => {
               />
             ))
           ) : (
-                <NoWritableReview />
+            <NoWritableReview />
           )}
         </motion.div>