diff --git a/src/pages/paymentPage/components/userInfoSection/UserInfoSection.tsx b/src/pages/paymentPage/components/userInfoSection/UserInfoSection.tsx index ab1229ad..f9670ed4 100644 --- a/src/pages/paymentPage/components/userInfoSection/UserInfoSection.tsx +++ b/src/pages/paymentPage/components/userInfoSection/UserInfoSection.tsx @@ -11,12 +11,13 @@ const UserInfoSection = () => { register, watch, setValue, - resetField, formState: { errors }, } = useFormContext(); const isDiffUser = watch("isDiffUser"); + watch(["name", "email", "phone"]); + const userInfo = useLoadUserInfo(isDiffUser); useEffect(() => { @@ -24,14 +25,14 @@ const UserInfoSection = () => { setValue("name", userInfo.name, { shouldValidate: true }); setValue("email", userInfo.email, { shouldValidate: true }); setValue("phone", userInfo.phone, { shouldValidate: true }); - } else if (!isDiffUser) { - resetField("name"); - resetField("email"); - resetField("phone"); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [isDiffUser, setValue, userInfo]); + const handleFieldChange = () => { + setValue("isDiffUser", false); + }; + return ( 이용자 정보 @@ -60,6 +61,7 @@ const UserInfoSection = () => { type="text" id="name" placeholder="김양수" + onChange={handleFieldChange} $isError={!!errors.name} /> {errors.name && ( @@ -83,6 +85,7 @@ const UserInfoSection = () => { type="text" id="email" placeholder="이메일을 입력해주세요" + onChange={handleFieldChange} $isError={!!errors.email} /> {errors.email && ( @@ -107,6 +110,7 @@ const UserInfoSection = () => { type="text" id="phone" placeholder="전화번호를 입력해주세요" + onChange={handleFieldChange} $isError={!!errors.phone} /> {errors.phone && ( diff --git a/src/pages/roomDetailPage/RoomDetail.style.ts b/src/pages/roomDetailPage/RoomDetail.style.ts index 0369e77d..f2ad8a3f 100644 --- a/src/pages/roomDetailPage/RoomDetail.style.ts +++ b/src/pages/roomDetailPage/RoomDetail.style.ts @@ -41,7 +41,6 @@ export const OptionWrapper = styled(Flex)` const Box = styled.div` display: flex; flex-direction: column; - align-items: center; gap: 0.5rem; background-color: ${({ theme }) => theme.color.greyScale7};