diff --git a/src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx b/src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx index 6a6ea0f9..94943892 100644 --- a/src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx +++ b/src/components/Auth/AuthInput/AuthInputBox/AuthInputItem/AuthInput.tsx @@ -33,7 +33,7 @@ const AuthInput = ({ return (
-
diff --git a/src/components/Mypage/UserInfoForm.tsx b/src/components/Mypage/UserInfoForm.tsx index 6126a244..8cedc7e4 100644 --- a/src/components/Mypage/UserInfoForm.tsx +++ b/src/components/Mypage/UserInfoForm.tsx @@ -4,11 +4,12 @@ import { Link, useNavigate } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; import { UserInfoState } from '@recoil/Auth.atom'; import { useEffect } from 'react'; -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'; +import { BackBox } from '@components/common'; +import DeleteMemberButton from './DeleteMemberButton'; const UserInfoForm = () => { const { @@ -53,52 +54,66 @@ const UserInfoForm = () => { }; return ( -
-
-
- -
-
-
- {userInfo?.email} + <> + { + navigate('/mypage'); + }} + showSave + isSaveValid={isValid} + saveHandler={handleSubmit(onInfoSubmit)}> + 회원정보 수정 + +
+ +
+
+ +
+
+
+ {userInfo?.email} +
+ + 비밀번호 변경 + +
+ +
+ + +
- - 비밀번호 변경 - -
- -
- - -
+ +
-
- 완료 -
- + ); }; diff --git a/src/components/common/BackBox/BackBox.tsx b/src/components/common/BackBox/BackBox.tsx index 0d29c96f..6e51e9c9 100644 --- a/src/components/common/BackBox/BackBox.tsx +++ b/src/components/common/BackBox/BackBox.tsx @@ -8,6 +8,7 @@ interface Props { showSkip?: boolean; skipHandler?: VoidFunction; showSave?: boolean; + isSaveValid?: boolean; saveHandler?: VoidFunction; showShare?: boolean; shareHandler?: VoidFunction; @@ -20,6 +21,7 @@ const BackBox = ({ showSkip, skipHandler, showSave, + isSaveValid, saveHandler, showShare, shareHandler, @@ -51,7 +53,8 @@ const BackBox = ({ )} {showSave && ( diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index ec00f17e..5676e760 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -305,36 +305,19 @@ export const CheckIcon = ({ ); }; -interface LeftIconProps { - width?: number; - height?: number; - fill?: string; - onClick?: VoidFunction; - cursor?: string; -} - -export const LeftIcon = ({ - width = 8, - height = 15, - fill = '#1E1E1E', - onClick, - cursor = 'pointer', -}: LeftIconProps) => { +export const LeftIcon = () => { return ( + xmlns="http://www.w3.org/2000/svg" + width="9" + height="16" + viewBox="0 0 9 16" + fill="none"> ); @@ -1806,3 +1789,21 @@ export const GrayCalendarIcon: React.FC = ({}) => { ); }; + +export const AuthDropDownIcon = () => { + return ( + + + + ); +}; diff --git a/src/pages/mypage/editUserInfo.page.tsx b/src/pages/mypage/editUserInfo.page.tsx index aab9743d..4932b44c 100644 --- a/src/pages/mypage/editUserInfo.page.tsx +++ b/src/pages/mypage/editUserInfo.page.tsx @@ -1,28 +1,7 @@ -import DeleteMemberButton from '@components/Mypage/DeleteMemberButton'; import UserInfoForm from '@components/Mypage/UserInfoForm'; -import { BackBox } from '@components/common'; -import { useNavigate } from 'react-router-dom'; const EditUserInfo = () => { - const navigate = useNavigate(); - return ( - <> - { - navigate('/mypage'); - }} - // showSave - // saveHandler={() => {}} - > - 회원정보 수정 - -
- - -
- - ); + return ; }; export default EditUserInfo; diff --git a/src/pages/mypage/editUserSurvey.page.tsx b/src/pages/mypage/editUserSurvey.page.tsx index adf0f324..12124c49 100644 --- a/src/pages/mypage/editUserSurvey.page.tsx +++ b/src/pages/mypage/editUserSurvey.page.tsx @@ -1,21 +1,47 @@ +import { putMemberSurvey } from '@api/member'; import AuthSurvey from '@components/Auth/AuthSurvey/AuthSurvey'; import { BackBox } from '@components/common'; +import { SubmitHandler, useForm } from 'react-hook-form'; import { useNavigate } from 'react-router-dom'; const EditUserSurvey = () => { const navigate = useNavigate(); + const { + register, + handleSubmit, + setValue, + formState: { isValid }, + } = useForm(); + + const onSaveSubmit: SubmitHandler = async (data) => { + try { + const res = await putMemberSurvey({ survey: data }); + if (res.data.status === 200) { + navigate(-1); + } + } catch (err) { + console.error(err); + alert('오류가 발생했습니다. 다시 시도해주세요'); + } + }; + + console.log(isValid); + return ( <> { navigate(-1); - }}> + }} + showSave + isSaveValid={isValid} + saveHandler={handleSubmit(onSaveSubmit)}> 나의 여행 취향 설정
- +
); diff --git a/src/pages/signup/signup.page.tsx b/src/pages/signup/signup.page.tsx index def45d2d..7ee023b0 100644 --- a/src/pages/signup/signup.page.tsx +++ b/src/pages/signup/signup.page.tsx @@ -9,10 +9,12 @@ import { import { BackBox } from '@components/common'; import SubmitBtn from '@components/common/button/SubmitBtn'; import { CheckboxIcon } from '@components/common/icons/Icons'; +import { UserInfoState } from '@recoil/Auth.atom'; import { setItem } from '@utils/localStorageFun'; import { useEffect } from 'react'; import { SubmitHandler, useForm } from 'react-hook-form'; import { useNavigate } from 'react-router-dom'; +import { useSetRecoilState } from 'recoil'; const Signup = () => { const { @@ -39,6 +41,8 @@ const Signup = () => { } }, [password, trigger]); + const setUserInfo = useSetRecoilState(UserInfoState); + const onSignupSubmit: SubmitHandler = async (data) => { const { email, password } = data; @@ -48,6 +52,14 @@ const Signup = () => { password, }); if (res.status === 200) { + setUserInfo({ + nickname: res.data.data.nickName!, + email: res.data.data.email!, + profileImageUrl: null, + ageType: null, + genderType: null, + survey: null, + }); setItem('accessToken', res.data.data.tokenInfo.accessToken); navigate('/signup/success'); } diff --git a/src/pages/signup/signupSuccess.page.tsx b/src/pages/signup/signupSuccess.page.tsx index 82eeb663..9a8fa527 100644 --- a/src/pages/signup/signupSuccess.page.tsx +++ b/src/pages/signup/signupSuccess.page.tsx @@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom'; const SignupSuccess = () => { const navigate = useNavigate(); return ( -
+
diff --git a/src/pages/signup/signupSurvey.page.tsx b/src/pages/signup/signupSurvey.page.tsx index a00fe2e2..f3a73cf7 100644 --- a/src/pages/signup/signupSurvey.page.tsx +++ b/src/pages/signup/signupSurvey.page.tsx @@ -3,9 +3,32 @@ import { BackBox } from '@components/common'; import AuthSurvey from '@components/Auth/AuthSurvey/AuthSurvey'; import { useNavigate } from 'react-router-dom'; import { ProgressBarIcon } from '@components/common/icons/Icons'; +import { SubmitHandler, useForm } from 'react-hook-form'; +import SubmitBtn from '@components/common/button/SubmitBtn'; +import { putMemberSurvey } from '@api/member'; const SignupSurvey = () => { const navigate = useNavigate(); + + const { + register, + handleSubmit, + setValue, + formState: { isDirty, isValid }, + } = useForm(); + + const onSaveSubmit: SubmitHandler = async (data) => { + try { + const res = await putMemberSurvey({ survey: data }); + if (res.data.status === 200) { + navigate('/signup/info'); + } + } catch (err) { + console.error(err); + alert('오류가 발생했습니다. 다시 시도해주세요'); + } + }; + return (
{ title={'어떤 여행을 좋아하세요?'} subTitle="여행 취향을 골라주세요." /> - + + + 완료 +
); }; diff --git a/src/utils/authSelectOptions.ts b/src/utils/authSelectOptions.ts index d16d0a59..576bbc79 100644 --- a/src/utils/authSelectOptions.ts +++ b/src/utils/authSelectOptions.ts @@ -1,12 +1,10 @@ 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대' },