diff --git a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx index 0ff87eea..1c57aed0 100644 --- a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx +++ b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDown.tsx @@ -1,33 +1,26 @@ import AuthDropDownOption from './AuthDropDownOption'; -import * as Select from '@radix-ui/react-select'; -import { DownIcon } from '@components/common/icons/Icons'; -import { UseFormRegister, UseFormSetValue } from 'react-hook-form'; +import { UseFormRegister } from 'react-hook-form'; interface Props { label: string; - text: string; options: SelectOption[]; name: string; register: UseFormRegister; - setValue: UseFormSetValue; - - // initialState: string | null; - // setState: React.Dispatch>; } -const AuthDropDown = ({ - label, - text, - options, - name, - register, - setValue, -}: Props) => { - const onSelectClick = (e: any) => { - setValue(name, e); - }; - +const AuthDropDown = ({ label, options, name, register }: Props) => { return ( +
+

{label}

+ +
+ //
//

{label}

//
//
-
- -

{label}

- - - - - - - - - - {options.map((option) => ( - - {option.value} - - ))} - - - - -
+ //
+ // + //

{label}

+ // + // + // + // + // + // + // + // + // + // {options.map((option) => ( + // + // {option.value} + // + // ))} + // + // + // + // + //
); }; diff --git a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx index f1f2a0a0..077cad1e 100644 --- a/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx +++ b/src/components/Auth/SignupInfo/AuthDropDown/AuthDropDownOption.tsx @@ -1,7 +1,3 @@ -import { CheckIcon } from '@components/common/icons/Icons'; -import * as Select from '@radix-ui/react-select'; -import React, { ReactNode, Ref } from 'react'; - // interface Props { // children: string; // clickHandler?: VoidFunction; @@ -42,30 +38,39 @@ import React, { ReactNode, Ref } from 'react'; // export default AuthDropDownOption; -interface SelectItemProps { - value: string; - children: ReactNode; - className?: string; - disabled?: boolean; -} +// interface SelectItemProps { +// value: string; +// children: ReactNode; +// className?: string; +// disabled?: boolean; +// } + +// const AuthDropDownOption = React.forwardRef( +// ( +// { children, className, ...props }: SelectItemProps, +// forwardedRef: Ref, +// ) => { +// return ( +// +// {children} +// +// +// +// +// ); +// }, +// ); -const AuthDropDownOption = React.forwardRef( - ( - { children, className, ...props }: SelectItemProps, - forwardedRef: Ref, - ) => { - return ( - - {children} - - - - - ); - }, -); +// export default AuthDropDownOption; + +interface Props { + option: SelectOption; +} +const AuthDropDownOption = ({ option }: Props) => { + return ; +}; export default AuthDropDownOption; diff --git a/src/components/Auth/SignupInfo/SignupInfoForm.tsx b/src/components/Auth/SignupInfo/SignupInfoForm.tsx index 8c5732ff..5fe4e480 100644 --- a/src/components/Auth/SignupInfo/SignupInfoForm.tsx +++ b/src/components/Auth/SignupInfo/SignupInfoForm.tsx @@ -8,6 +8,7 @@ import { useEffect } from 'react'; import SubmitBtn from '@components/common/button/SubmitBtn'; import AuthDropDown from './AuthDropDown/AuthDropDown'; import AuthNicknameInputBox from '../AuthInput/AuthInputBox/AuthNicknameInputBox'; +import { ageArr, genderArr } from '@utils/authSelectOptions'; const SignupInfoForm = () => { const { @@ -23,8 +24,6 @@ const SignupInfoForm = () => { mode: 'onChange', criteriaMode: 'all', }); - // const [genderType, setGenderType] = useState(null); - // const [ageType, setAgeType] = useState(null); const navigate = useNavigate(); @@ -43,8 +42,8 @@ const SignupInfoForm = () => { const res = await putMember({ nickname: nickname, profileImageUrl: profileImageUrl, - genderType: genderType, - ageType: ageType, + ageType: ageType === '' ? null : ageType, + genderType: genderType === '' ? null : genderType, }); if (res.status === 200) { navigate('/'); @@ -77,19 +76,15 @@ const SignupInfoForm = () => {
@@ -101,17 +96,3 @@ const SignupInfoForm = () => { }; export default SignupInfoForm; - -const genderArr: SelectOption[] = [ - { id: 'FEMALE', value: '여' }, - { id: 'MALE', value: '남' }, - { id: 'NON_BINARY', value: '기타' }, -]; - -const ageArr: SelectOption[] = [ - { id: 'TEENAGER', value: '10대' }, - { id: 'TWENTIES', value: '20대' }, - { id: 'THIRTIES', value: '30대' }, - { id: 'FOURTIES', value: '40대' }, - { id: 'ABOVE_FIFTIES', value: '50대 이상' }, -]; diff --git a/src/components/Auth/SignupInfo/UserInfoImg.tsx b/src/components/Auth/SignupInfo/UserInfoImg.tsx index 904fd8b9..f699ed36 100644 --- a/src/components/Auth/SignupInfo/UserInfoImg.tsx +++ b/src/components/Auth/SignupInfo/UserInfoImg.tsx @@ -28,7 +28,7 @@ const UserInfoImg = ({ register, setValue, inputValue }: AuthImgProps) => { { watch, resetField, setError, + trigger, formState: { errors, isValid }, } = useForm({ mode: 'onChange', @@ -26,6 +28,14 @@ const EditPwForm = () => { const navigate = useNavigate(); + const password = watch('password'); + const passwordCheck = watch('passwordCheck'); + useEffect(() => { + if (passwordCheck) { + trigger('passwordCheck'); + } + }, [password, trigger]); + const onEditPwSubmit: SubmitHandler = async (data) => { const { currentPw, password } = data; diff --git a/src/components/Mypage/UserInfoForm.tsx b/src/components/Mypage/UserInfoForm.tsx index 2925a017..6126a244 100644 --- a/src/components/Mypage/UserInfoForm.tsx +++ b/src/components/Mypage/UserInfoForm.tsx @@ -8,6 +8,7 @@ import SubmitBtn from '@components/common/button/SubmitBtn'; import UserInfoImg from '@components/Auth/SignupInfo/UserInfoImg'; import AuthNicknameInputBox from '@components/Auth/AuthInput/AuthInputBox/AuthNicknameInputBox'; import AuthDropDown from '@components/Auth/SignupInfo/AuthDropDown/AuthDropDown'; +import { ageArr, genderArr } from '@utils/authSelectOptions'; const UserInfoForm = () => { const { @@ -29,20 +30,22 @@ const UserInfoForm = () => { useEffect(() => { setValue('nickname', userInfo?.nickname); setValue('profileImageUrl', userInfo?.profileImageUrl); + setValue('genderType', userInfo?.genderType); + setValue('ageType', userInfo?.ageType); }, [userInfo]); const onInfoSubmit: SubmitHandler = async (data) => { - const { nickname, profileImageUrl } = data; + const { nickname, profileImageUrl, genderType, ageType } = data; try { const res = await putMember({ nickname: nickname, profileImageUrl: profileImageUrl, - ageType: null, - genderType: null, + ageType: ageType === '' ? null : ageType, + genderType: genderType === '' ? null : genderType, }); if (res.status === 200) { - navigate('/'); + navigate('/mypage'); } } catch (err) { console.error('회원정보 수정 요청 중 에러 발생', err); @@ -80,19 +83,15 @@ const UserInfoForm = () => {
@@ -104,17 +103,3 @@ const UserInfoForm = () => { }; export default UserInfoForm; - -const genderArr: SelectOption[] = [ - { id: '1', value: '여' }, - { id: '2', value: '남' }, - { id: '3', value: '기타' }, -]; - -const ageArr: SelectOption[] = [ - { id: '1', value: '10대' }, - { id: '2', value: '20대' }, - { id: '3', value: '30대' }, - { id: '4', value: '40대' }, - { id: '5', value: '50대 이상' }, -]; diff --git a/src/pages/mypage/editUserInfo.page.tsx b/src/pages/mypage/editUserInfo.page.tsx index 02cb39a8..aab9743d 100644 --- a/src/pages/mypage/editUserInfo.page.tsx +++ b/src/pages/mypage/editUserInfo.page.tsx @@ -12,8 +12,9 @@ const EditUserInfo = () => { backHandler={() => { navigate('/mypage'); }} - showSave - saveHandler={() => {}}> + // showSave + // saveHandler={() => {}} + > 회원정보 수정
diff --git a/src/pages/signup/signup.page.tsx b/src/pages/signup/signup.page.tsx index 77c69186..def45d2d 100644 --- a/src/pages/signup/signup.page.tsx +++ b/src/pages/signup/signup.page.tsx @@ -10,6 +10,7 @@ import { BackBox } from '@components/common'; import SubmitBtn from '@components/common/button/SubmitBtn'; import { CheckboxIcon } from '@components/common/icons/Icons'; import { setItem } from '@utils/localStorageFun'; +import { useEffect } from 'react'; import { SubmitHandler, useForm } from 'react-hook-form'; import { useNavigate } from 'react-router-dom'; @@ -21,6 +22,7 @@ const Signup = () => { watch, resetField, setError, + trigger, formState: { errors, isValid }, } = useForm({ mode: 'onChange', @@ -29,6 +31,14 @@ const Signup = () => { const navigate = useNavigate(); + const password = watch('password'); + const passwordCheck = watch('passwordCheck'); + useEffect(() => { + if (passwordCheck) { + trigger('passwordCheck'); + } + }, [password, trigger]); + const onSignupSubmit: SubmitHandler = async (data) => { const { email, password } = data; diff --git a/src/utils/authSelectOptions.ts b/src/utils/authSelectOptions.ts new file mode 100644 index 00000000..0e544aa7 --- /dev/null +++ b/src/utils/authSelectOptions.ts @@ -0,0 +1,15 @@ +export const genderArr: SelectOption[] = [ + { id: '', value: '성별을 선택해주세요.' }, + { id: 'FEMALE', value: '여' }, + { id: 'MALE', value: '남' }, + { id: 'NON_BINARY', value: '기타' }, +]; + +export const ageArr: SelectOption[] = [ + { id: '', value: '연령대를 설정해주세요.' }, + { id: 'TEENAGER', value: '10대' }, + { id: 'TWENTIES', value: '20대' }, + { id: 'THIRTIES', value: '30대' }, + { id: 'FOURTIES', value: '40대' }, + { id: 'ABOVE_FIFTIES', value: '50대 이상' }, +];