From 2b6f276b8408998ba2f574ae55efc05d77b9ac99 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Fri, 26 Jan 2024 18:21:47 +0900 Subject: [PATCH 1/6] =?UTF-8?q?Refactor:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AuthInputBox/AuthInputItem/AuthInput.tsx | 2 +- .../SignupInfo/AuthDropDown/AuthDropDown.tsx | 102 ++++++------------ .../AuthDropDown/AuthDropDownOption.tsx | 82 +++----------- .../Auth/SignupInfo/SignupInfoForm.tsx | 6 +- src/components/Mypage/UserInfoForm.tsx | 8 +- src/components/common/icons/Icons.tsx | 18 ++++ src/utils/authSelectOptions.ts | 2 - 7 files changed, 75 insertions(+), 145 deletions(-) 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..ae351363 100644 --- a/src/components/Mypage/UserInfoForm.tsx +++ b/src/components/Mypage/UserInfoForm.tsx @@ -34,6 +34,8 @@ const UserInfoForm = () => { setValue('ageType', userInfo?.ageType); }, [userInfo]); + console.log(watch()); + const onInfoSubmit: SubmitHandler = async (data) => { const { nickname, profileImageUrl, genderType, ageType } = data; @@ -85,13 +87,15 @@ const UserInfoForm = () => { label="성별" options={genderArr} name={'genderType'} - register={register} + setValue={setValue} + value={watch('genderType')} /> diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index 1969e0b1..1612c7b6 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -1792,3 +1792,21 @@ export const GrayCalendarIcon: React.FC = ({}) => { ); }; + +export const AuthDropDownIcon = () => { + return ( + + + + ); +}; 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대' }, From 38accfbf32ee48cac8da555b422ef1bf22f019e0 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Fri, 26 Jan 2024 18:35:56 +0900 Subject: [PATCH 2/6] =?UTF-8?q?Refactor:=20=EC=99=84=EB=A3=8C=20->=20?= =?UTF-8?q?=EC=A0=80=EC=9E=A5=20=EB=B2=84=ED=8A=BC=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Mypage/UserInfoForm.tsx | 110 ++++++++++++++----------- src/pages/mypage/editUserInfo.page.tsx | 23 +----- 2 files changed, 61 insertions(+), 72 deletions(-) diff --git a/src/components/Mypage/UserInfoForm.tsx b/src/components/Mypage/UserInfoForm.tsx index ae351363..c0cc9ff8 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 { @@ -19,7 +20,7 @@ const UserInfoForm = () => { resetField, setError, setValue, - formState: { errors, isValid }, + formState: { errors }, } = useForm({ mode: 'onChange', criteriaMode: 'all', @@ -34,8 +35,6 @@ const UserInfoForm = () => { setValue('ageType', userInfo?.ageType); }, [userInfo]); - console.log(watch()); - const onInfoSubmit: SubmitHandler = async (data) => { const { nickname, profileImageUrl, genderType, ageType } = data; @@ -55,54 +54,65 @@ const UserInfoForm = () => { }; return ( -
-
-
- -
-
-
- {userInfo?.email} + <> + { + navigate('/mypage'); + }} + showSave + saveHandler={handleSubmit(onInfoSubmit)}> + 회원정보 수정 + +
+ +
+
+ +
+
+
+ {userInfo?.email} +
+ + 비밀번호 변경 + +
+ +
+ + +
- - 비밀번호 변경 - -
- -
- - -
-
-
- 완료 + +
- + ); }; 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; From 7233bab84de09a375aa2c81369a55be0bdfaf64e Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Fri, 26 Jan 2024 19:24:39 +0900 Subject: [PATCH 3/6] =?UTF-8?q?Refactor:=20=EC=99=84=EB=A3=8C=20->=20?= =?UTF-8?q?=EC=A0=80=EC=9E=A5=20=EB=B2=84=ED=8A=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Auth/AuthSurvey/AuthSurvey.tsx | 41 +++---------------- src/components/Mypage/UserInfoForm.tsx | 3 +- src/components/common/BackBox/BackBox.tsx | 5 ++- src/pages/mypage/editUserSurvey.page.tsx | 30 +++++++++++++- src/pages/signup/signupSurvey.page.tsx | 30 +++++++++++++- 5 files changed, 68 insertions(+), 41 deletions(-) diff --git a/src/components/Auth/AuthSurvey/AuthSurvey.tsx b/src/components/Auth/AuthSurvey/AuthSurvey.tsx index a4d02834..9f5f446b 100644 --- a/src/components/Auth/AuthSurvey/AuthSurvey.tsx +++ b/src/components/Auth/AuthSurvey/AuthSurvey.tsx @@ -1,25 +1,16 @@ -import SubmitBtn from '@components/common/button/SubmitBtn'; import AuthSurveyOption from './AuthSurveyOption'; -import { SubmitHandler, useForm } from 'react-hook-form'; -import { putMemberSurvey } from '@api/member'; -import { useNavigate } from 'react-router-dom'; import { surveyArr } from '@utils/survey.constants'; import { useEffect } from 'react'; import { UserInfoState } from '@recoil/Auth.atom'; import { useRecoilState } from 'recoil'; +import { UseFormRegister, UseFormSetValue } from 'react-hook-form'; interface Props { - path?: string; + register: UseFormRegister; + setValue: UseFormSetValue; } -const AuthSurvey = ({ path }: Props) => { - const { - register, - handleSubmit, - setValue, - formState: { isDirty, isValid }, - } = useForm(); - const navigate = useNavigate(); +const AuthSurvey = ({ register, setValue }: Props) => { const [userInfo, _] = useRecoilState(UserInfoState); useEffect(() => { if (userInfo?.survey) { @@ -33,29 +24,8 @@ const AuthSurvey = ({ path }: Props) => { } }, [userInfo]); - const onSaveSubmit: SubmitHandler = async (data) => { - try { - const res = await putMemberSurvey({ survey: data }); - if (res.data.status === 200) { - // setUserInfo((prevUserInfo) => { - // const newPrevUserInfo = prevUserInfo!; - // newPrevUserInfo.survey = data; - // return newPrevUserInfo; - // }); - if (path) { - navigate(path); - } else { - navigate(-1); - } - } - } catch (err) { - console.error(err); - alert('오류가 발생했습니다. 다시 시도해주세요'); - } - }; - return ( -
+
{surveyArr.map((section) => (
@@ -75,7 +45,6 @@ const AuthSurvey = ({ path }: Props) => {
))}
- 완료
); }; diff --git a/src/components/Mypage/UserInfoForm.tsx b/src/components/Mypage/UserInfoForm.tsx index c0cc9ff8..8cedc7e4 100644 --- a/src/components/Mypage/UserInfoForm.tsx +++ b/src/components/Mypage/UserInfoForm.tsx @@ -20,7 +20,7 @@ const UserInfoForm = () => { resetField, setError, setValue, - formState: { errors }, + formState: { errors, isValid }, } = useForm({ mode: 'onChange', criteriaMode: 'all', @@ -61,6 +61,7 @@ const UserInfoForm = () => { navigate('/mypage'); }} showSave + isSaveValid={isValid} saveHandler={handleSubmit(onInfoSubmit)}> 회원정보 수정 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/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/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="여행 취향을 골라주세요." /> - + + + 완료 +
); }; From 5494bf205d62be73446d34c7358fac663348f1c6 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Fri, 26 Jan 2024 21:04:04 +0900 Subject: [PATCH 4/6] =?UTF-8?q?Refactor:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EB=B0=A9=EC=8B=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/signup/signup.page.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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'); } From 654b791dc19750b2b9336f25e8e3d67fff26db84 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Fri, 26 Jan 2024 21:08:37 +0900 Subject: [PATCH 5/6] =?UTF-8?q?Design:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EC=84=B1=EA=B3=B5=20=EB=B2=84=ED=8A=BC=20=EC=9C=84?= =?UTF-8?q?=EB=A1=9C=20=EC=98=AC=EB=A6=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/signup/signupSuccess.page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ( -
+
From e2af705c01a87c1f7615f06bfc84fec60cc9fe93 Mon Sep 17 00:00:00 2001 From: jisu Seo Date: Fri, 26 Jan 2024 21:12:24 +0900 Subject: [PATCH 6/6] =?UTF-8?q?Design:=20=EB=92=A4=EB=A1=9C=EA=B0=80?= =?UTF-8?q?=EA=B8=B0=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/icons/Icons.tsx | 37 ++++++++------------------- 1 file changed, 10 insertions(+), 27 deletions(-) diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index 1612c7b6..b47046ad 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -279,36 +279,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"> );