From db847e423035035036970c14e5a25747cfc12683 Mon Sep 17 00:00:00 2001 From: Hyuna Park Date: Mon, 15 Nov 2021 17:34:36 +0900 Subject: [PATCH 1/8] =?UTF-8?q?fix:=20userInfo=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=A0=95=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MyPage/MyPageInfo/MyInfoEditForm.tsx | 12 ++++++------ itda-front/src/types/MyInfoTypes.ts | 9 +-------- 2 files changed, 7 insertions(+), 14 deletions(-) diff --git a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx index 3e98847..a04ec46 100644 --- a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx +++ b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx @@ -3,12 +3,12 @@ import React, { useState } from "react"; import { useRecoilState } from "recoil"; import { useMutation } from "react-query"; import myPageAPI from "util/API/myPageAPI"; -import { IUserInfo, IUserInputDate } from "types/MyInfoTypes"; +import { IUserInputData } from "types/MyInfoTypes"; import ColorButton from "components/common/Atoms/ColorButton"; import theme from "styles/theme"; const MyInfoEditForm = () => { - const [myInfoError, setMyInfoError] = useState({ + const [myInfoError, setMyInfoError] = useState({ name: "", telephone: "", email: "", @@ -17,15 +17,15 @@ const MyInfoEditForm = () => { newPasswordConfirm: "", }); // !--------api로 받아오는 initial 사용자 정보 - 임시 mock 데이터. 실제 api가져오는 로직으로 바꿔야함. - const [userInfo, setUserInfo] = useState({ + const [userInfo, setUserInfo] = useState>({ name: "홍길동", telephone: "01011112222", email: "roach@test.com", password: "test", }); - //사용자로부터 입력받는 input 데이터 (input들의 상태를 관리) - const [userInputData, setUserInputData] = useState({ + // ! 사용자로부터 입력받는 input 데이터 (input들의 상태를 관리) + const [userInputData, setUserInputData] = useState({ name: userInfo.name, telephone: userInfo.telephone, email: userInfo.email, @@ -86,7 +86,7 @@ const MyInfoEditForm = () => { }); const inputError = validateInputdata(name, value); - setMyInfoError(inputError as IUserInputDate); + setMyInfoError(inputError as IUserInputData); }; const handleDuplicateCheckButtonClick = () => { diff --git a/itda-front/src/types/MyInfoTypes.ts b/itda-front/src/types/MyInfoTypes.ts index 15290a5..b13d488 100644 --- a/itda-front/src/types/MyInfoTypes.ts +++ b/itda-front/src/types/MyInfoTypes.ts @@ -1,11 +1,4 @@ -export interface IUserInfo { - name: string; - telephone: string; //number로 받으면 맨 앞의 0이 8진수 리터럴로 인식됨. string => number 변환할 것. - email: string; - password: string; - } - - export interface IUserInputDate { + export interface IUserInputData { name: string; telephone: string; email: string; From a5a98b45b77e7b3ed7511d443127ef2be7cd0eea Mon Sep 17 00:00:00 2001 From: Hyuna Park Date: Sat, 20 Nov 2021 23:01:33 +0900 Subject: [PATCH 2/8] =?UTF-8?q?fix:=20userInfo=20API=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyPage/MyPageInfo/MyInfoEditForm.tsx | 60 +++++++++++++------ itda-front/src/types/MyInfoTypes.ts | 7 +++ 2 files changed, 48 insertions(+), 19 deletions(-) diff --git a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx index a04ec46..92127cc 100644 --- a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx +++ b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx @@ -1,9 +1,9 @@ import S from "../MyPageStyles"; -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useRecoilState } from "recoil"; -import { useMutation } from "react-query"; +import { useMutation, useQuery } from "react-query"; import myPageAPI from "util/API/myPageAPI"; -import { IUserInputData } from "types/MyInfoTypes"; +import { IUserInfo ,IUserInputData } from "types/MyInfoTypes"; import ColorButton from "components/common/Atoms/ColorButton"; import theme from "styles/theme"; @@ -18,26 +18,52 @@ const MyInfoEditForm = () => { }); // !--------api로 받아오는 initial 사용자 정보 - 임시 mock 데이터. 실제 api가져오는 로직으로 바꿔야함. const [userInfo, setUserInfo] = useState>({ - name: "홍길동", - telephone: "01011112222", - email: "roach@test.com", - password: "test", + name: "", + telephone: "", + email: "", + password: "", }); // ! 사용자로부터 입력받는 input 데이터 (input들의 상태를 관리) const [userInputData, setUserInputData] = useState({ - name: userInfo.name, - telephone: userInfo.telephone, - email: userInfo.email, + name: userInfo?.name, + telephone: userInfo?.telephone, + email: userInfo?.email, password: "", newPassword: "", newPasswordConfirm: "", }); - const myInfoEditMutation = useMutation(async () => { - myPageAPI.user.checkUserInfo(); + // useEffect(() => { + // setUserInfo({ + // ...userInfo, + + // }) + // }, [userInfo]) + + const mutation = useMutation(async () => { + // myPageAPI.user.checkUserInfo(); }); + // todo: 사용자의 정보를 먼저 가져와서 input에 보여줘야 함. 서버 작동하면 살릴 것. + // useEffect(() => { + // const userInfo = myPageAPI.user.checkUserInfo(); + + // console.log(userInfo); + // // setUserInfo(myPageAPI.user.checkUserInfo().data as any); + // }, []); + const { data } = useQuery('userData', myPageAPI.user.checkUserInfo, + { + onSuccess: data => { + const userInfo: IUserInfo = data?.data; + console.log(userInfo); + setUserInfo(userInfo as IUserInfo); + } + }) + + // console.log(data); + + const validateInputdata = (inputName: string, inputValue: string) => { const errors = myInfoError; @@ -114,10 +140,6 @@ const MyInfoEditForm = () => { // myPageAPI.user.updateUserInfo(userInfo); }; - // todo: 사용자의 정보를 먼저 가져와서 input에 보여줘야 함. 서버 작동하면 살릴 것. - // useEffect(() => { - // setUserInfo(mutation.data as any); - // }, []); return ( <> @@ -178,7 +200,7 @@ const MyInfoEditForm = () => { required name="name" label="이름을 입력해주세요." - value={userInputData.name && userInputData.name} + value={userInputData.name ? userInputData.name : userInfo.name} variant="outlined" onChange={handleMyInfoFormChange} error={myInfoError.name !== ""} @@ -191,7 +213,7 @@ const MyInfoEditForm = () => { required name="email" label="이메일을 입력해주세요." - value={userInputData.email && userInputData.email} + value={userInputData.email ? userInputData.email : userInfo.email} variant="outlined" onChange={handleMyInfoFormChange} error={myInfoError.email !== ""} @@ -206,7 +228,7 @@ const MyInfoEditForm = () => { required name="telephone" label="휴대폰 번호를 입력해주세요." - value={userInputData.telephone && userInputData.telephone} + value={userInputData.telephone ? userInputData.telephone : userInfo.telephone} variant="outlined" onChange={handleMyInfoFormChange} error={myInfoError.telephone !== ""} diff --git a/itda-front/src/types/MyInfoTypes.ts b/itda-front/src/types/MyInfoTypes.ts index b13d488..8d33ada 100644 --- a/itda-front/src/types/MyInfoTypes.ts +++ b/itda-front/src/types/MyInfoTypes.ts @@ -1,3 +1,10 @@ +export interface IUserInfo { + name: string; + telephone: string; //number로 받으면 맨 앞의 0이 8진수 리터럴로 인식됨. string => number 변환할 것. + email: string; + password: string; + } + export interface IUserInputData { name: string; telephone: string; From c7f5da566d1191924571650036e59a5022b73c79 Mon Sep 17 00:00:00 2001 From: Hyuna Park Date: Mon, 22 Nov 2021 09:47:53 +0900 Subject: [PATCH 3/8] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EB=B0=8F=20=EC=BD=94=EB=93=9C?= =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyPage/MyPageInfo/MyInfoEditForm.tsx | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx index 92127cc..5ff9cd0 100644 --- a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx +++ b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx @@ -34,35 +34,18 @@ const MyInfoEditForm = () => { newPasswordConfirm: "", }); - // useEffect(() => { - // setUserInfo({ - // ...userInfo, - - // }) - // }, [userInfo]) - const mutation = useMutation(async () => { // myPageAPI.user.checkUserInfo(); }); - // todo: 사용자의 정보를 먼저 가져와서 input에 보여줘야 함. 서버 작동하면 살릴 것. - // useEffect(() => { - // const userInfo = myPageAPI.user.checkUserInfo(); - - // console.log(userInfo); - // // setUserInfo(myPageAPI.user.checkUserInfo().data as any); - // }, []); - const { data } = useQuery('userData', myPageAPI.user.checkUserInfo, + useQuery('userData', myPageAPI.user.checkUserInfo, { onSuccess: data => { const userInfo: IUserInfo = data?.data; - console.log(userInfo); setUserInfo(userInfo as IUserInfo); } }) - // console.log(data); - const validateInputdata = (inputName: string, inputValue: string) => { const errors = myInfoError; From 379e021197238593929c7fa8710f4eb3c5acc2c6 Mon Sep 17 00:00:00 2001 From: Hyuna Park Date: Tue, 23 Nov 2021 18:46:41 +0900 Subject: [PATCH 4/8] =?UTF-8?q?fix:=20inputValue=EA=B0=80=20=EB=B0=98?= =?UTF-8?q?=EB=B3=B5=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EC=B1=84=EC=9B=8C?= =?UTF-8?q?=EC=A7=80=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=ED=94=BD=EC=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyPage/MyPageInfo/MyInfoEditForm.tsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx index 5ff9cd0..ef74eeb 100644 --- a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx +++ b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx @@ -1,6 +1,5 @@ import S from "../MyPageStyles"; import React, { useState, useEffect } from "react"; -import { useRecoilState } from "recoil"; import { useMutation, useQuery } from "react-query"; import myPageAPI from "util/API/myPageAPI"; import { IUserInfo ,IUserInputData } from "types/MyInfoTypes"; @@ -26,14 +25,23 @@ const MyInfoEditForm = () => { // ! 사용자로부터 입력받는 input 데이터 (input들의 상태를 관리) const [userInputData, setUserInputData] = useState({ - name: userInfo?.name, - telephone: userInfo?.telephone, - email: userInfo?.email, + name: "", + telephone: "", + email: "", password: "", newPassword: "", newPasswordConfirm: "", }); + useEffect(() => { + setUserInputData({ + ...userInputData, + name: userInfo.name, + telephone: userInfo.telephone, + email: userInfo.email, + }) + }, [userInfo]) + const mutation = useMutation(async () => { // myPageAPI.user.checkUserInfo(); }); @@ -183,7 +191,7 @@ const MyInfoEditForm = () => { required name="name" label="이름을 입력해주세요." - value={userInputData.name ? userInputData.name : userInfo.name} + value={userInputData.name} variant="outlined" onChange={handleMyInfoFormChange} error={myInfoError.name !== ""} @@ -196,7 +204,7 @@ const MyInfoEditForm = () => { required name="email" label="이메일을 입력해주세요." - value={userInputData.email ? userInputData.email : userInfo.email} + value={userInputData.email} variant="outlined" onChange={handleMyInfoFormChange} error={myInfoError.email !== ""} @@ -211,7 +219,7 @@ const MyInfoEditForm = () => { required name="telephone" label="휴대폰 번호를 입력해주세요." - value={userInputData.telephone ? userInputData.telephone : userInfo.telephone} + value={userInputData.telephone} variant="outlined" onChange={handleMyInfoFormChange} error={myInfoError.telephone !== ""} From ad806c4121f432f3142aa768024bd75b30fb2a5d Mon Sep 17 00:00:00 2001 From: Hyuna Park Date: Tue, 23 Nov 2021 18:56:58 +0900 Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=ED=98=84=EC=9E=AC=EB=B9=84=EB=B0=80?= =?UTF-8?q?=EB=B2=88=ED=98=B8=20=ED=99=95=EC=9D=B8=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=8B=A4=EC=A0=9C=20API=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx index ef74eeb..5c753dc 100644 --- a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx +++ b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx @@ -7,6 +7,7 @@ import ColorButton from "components/common/Atoms/ColorButton"; import theme from "styles/theme"; const MyInfoEditForm = () => { + const [curPassword, setCurPassword] = useState(''); const [myInfoError, setMyInfoError] = useState({ name: "", telephone: "", @@ -34,6 +35,7 @@ const MyInfoEditForm = () => { }); useEffect(() => { + setCurPassword(userInputData.password); setUserInputData({ ...userInputData, name: userInfo.name, @@ -58,9 +60,9 @@ const MyInfoEditForm = () => { const validateInputdata = (inputName: string, inputValue: string) => { const errors = myInfoError; + console.log(inputValue); + if (inputName === "password") { - // todo: 서버에서 비밀번호 가져와서 비교하는 로직 필요할 - const curPassword = "test1234"; // 서버 비밀번호 대체. 임시. errors.password = curPassword === inputValue ? "" : "비밀번호가 일치하지 않습니다."; } From dc9f69de6f2ab06f9eef694751c452d19461c7b0 Mon Sep 17 00:00:00 2001 From: Hyuna Park Date: Thu, 25 Nov 2021 18:49:27 +0900 Subject: [PATCH 6/8] =?UTF-8?q?fix:=20reset=20=ED=9B=84=20=EC=86=8C?= =?UTF-8?q?=EC=8A=A4=EC=BD=94=EB=93=9C=20=EB=B3=B5=EC=9B=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyPage/MyPageInfo/MyInfoEditForm.tsx | 77 ++++++++++++++++--- .../src/components/common/Header/Header.tsx | 11 ++- .../common/Header/LoginDropDown.tsx | 31 ++++++-- itda-front/src/stores/LoginAtoms.ts | 2 +- itda-front/src/util/API/authAPI.ts | 2 +- 5 files changed, 105 insertions(+), 18 deletions(-) diff --git a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx index 5c753dc..83c7e97 100644 --- a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx +++ b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx @@ -2,11 +2,13 @@ import S from "../MyPageStyles"; import React, { useState, useEffect } from "react"; import { useMutation, useQuery } from "react-query"; import myPageAPI from "util/API/myPageAPI"; +import auth from "util/API/authAPI"; import { IUserInfo ,IUserInputData } from "types/MyInfoTypes"; import ColorButton from "components/common/Atoms/ColorButton"; import theme from "styles/theme"; const MyInfoEditForm = () => { + const [isValidEmail, setIsValidEmail] = useState(true); const [curPassword, setCurPassword] = useState(''); const [myInfoError, setMyInfoError] = useState({ name: "", @@ -44,9 +46,29 @@ const MyInfoEditForm = () => { }) }, [userInfo]) - const mutation = useMutation(async () => { + const myInfoEditMutation = useMutation( + async () => { // myPageAPI.user.checkUserInfo(); - }); + } + ); + + // const checkEmailMutation = useMutation( + // async (email: string) => { + // auth.signUp.get.verifyEmail(email) + // }, + // { + // onSuccess: (data) => { + // console.log(data) + // setIsValidEmail(true); + // alert("사용가능한 이메일 입니다."); + // }, + // onError: (data) => { + // console.log(data) + // setIsValidEmail(false); + // // alert("이미 사용중인 이메일 입니다.") + // } + // } + // ) useQuery('userData', myPageAPI.user.checkUserInfo, { @@ -56,7 +78,6 @@ const MyInfoEditForm = () => { } }) - const validateInputdata = (inputName: string, inputValue: string) => { const errors = myInfoError; @@ -96,6 +117,24 @@ const MyInfoEditForm = () => { return errors; }; + const checkEmailValidation = async () => { + // useQuery('checkEmailValidation', (email: string) => {auth.signUp.get.verifyEmail(email)}, { + + // }) + + // const isValidEmail = await auth.signUp.get.verifyEmail(userInputData.email as string); + // await checkEmailMutation.mutate(userInputData.email); + // console.log("checkEmailMutation",checkEmailMutation); + // // return isValidEmail; + // if(checkEmailMutation.status === "success") { + + // return true; + // } else { + // return false; + // } + return await auth.signUp.get.verifyEmail(userInputData.email as string); + } + const handleMyInfoFormChange = (e: React.ChangeEvent) => { const { name, value } = e.target; @@ -108,12 +147,32 @@ const MyInfoEditForm = () => { setMyInfoError(inputError as IUserInputData); }; - const handleDuplicateCheckButtonClick = () => { - // todo: 입력된 데이터 서버에 전송해서 중복검사 결과 보여주기 (아마도 post) - const isDuplicateEmail = true; // 임시 - const emailRegex = /\S+@\S+\.\S+/; + const handleDuplicateCheckButtonClick = async () => { + // const emailRegex = /\S+@\S+\.\S+/; + const isValidEmail = await auth.signUp.get.verifyEmail(userInputData.email as string); + console.log(isValidEmail); + // const isValidEmail = await validationResult ? true : false; + // useQuery('checkDuplicateEmail', auth.signUp.get.verifyEmail(userInputData.email as string), ); // 임시 + await createErrorMessage(isValidEmail); + + // if (!isValidEmail) { + // setMyInfoError({ + // ...myInfoError, + // email: "중복 되는 이메일 입니다. 다른 이메일 주소를 입력하세요.", + // }); + // } - if (isDuplicateEmail) { + // if (!emailRegex.test(userInputData.email)) { + // setMyInfoError({ + // ...myInfoError, + // email: "이메일 주소 형식이 올바르지 않습니다.", + // }); + // } + }; + + const createErrorMessage = (isValidEmail: any) => { + const emailRegex = /\S+@\S+\.\S+/; + if (!isValidEmail) { setMyInfoError({ ...myInfoError, email: "중복 되는 이메일 입니다. 다른 이메일 주소를 입력하세요.", @@ -126,7 +185,7 @@ const MyInfoEditForm = () => { email: "이메일 주소 형식이 올바르지 않습니다.", }); } - }; + } const handleChangeUserInfoButtonClick = () => { console.log("회원정보수정 페이지 클릭됌"); diff --git a/itda-front/src/components/common/Header/Header.tsx b/itda-front/src/components/common/Header/Header.tsx index 15d4363..15168fe 100644 --- a/itda-front/src/components/common/Header/Header.tsx +++ b/itda-front/src/components/common/Header/Header.tsx @@ -5,6 +5,7 @@ import S from "../CommonStyles"; import SideDrawer from "./SideDrawer"; import LoginDropDown from "./LoginDropDown"; import { isSideDrawerClicked } from "stores/SideDrawerAtoms"; +import { isLoggedIn } from "stores/LoginAtoms"; interface MutableRefObject { current: T; @@ -12,8 +13,10 @@ interface MutableRefObject { const Header = () => { const dropDownRef = useRef>(null); - const [isSideDrawerClickedState, setisSideDrawerClickedState] = useRecoilState(isSideDrawerClicked); + const [isSideDrawerClickedState, setisSideDrawerClickedState] = + useRecoilState(isSideDrawerClicked); const [isDropDownActive, setIsDropDownActive] = useState(false); + const [logInState, setLoginState] = useRecoilState(isLoggedIn); const checkPageName = () => { const splitURL = window.location.href.split("/"); @@ -38,6 +41,12 @@ const Header = () => { } }; + const token = localStorage.getItem("token"); + if (token) setLoginState(true); + else { + setLoginState(false); + } + if (isDropDownActive) { window.addEventListener("click", pageClickEvent); } diff --git a/itda-front/src/components/common/Header/LoginDropDown.tsx b/itda-front/src/components/common/Header/LoginDropDown.tsx index 7034775..b5971f9 100644 --- a/itda-front/src/components/common/Header/LoginDropDown.tsx +++ b/itda-front/src/components/common/Header/LoginDropDown.tsx @@ -1,7 +1,8 @@ -import React, { MutableRefObject } from "react"; +import React, { useEffect } from "react"; import { useRecoilState } from "recoil"; import { isLoggedIn } from "stores/LoginAtoms"; import S from "../CommonStyles"; +import { useHistory } from "react-router"; type TLoginDropDownProp = { // ref?: React.MutableRefObject; @@ -11,16 +12,28 @@ type TLoginDropDownProp = { const LoginDropDown = React.forwardRef( ({ className }: TLoginDropDownProp, ref) => { - const loggedInByUser = useRecoilState(isLoggedIn); + const [loggedInByUser, setLoggedInByUser] = useRecoilState(isLoggedIn); const loggedInMenu = ["마이페이지", "로그아웃"]; const loggedOutMenu = ["로그인", "회원가입"]; + const history = useHistory(); + + const handleLogoutButtonClick = () => { + setLoggedInByUser(false); + localStorage.clear(); + history.push("/login"); + }; + return ( - {loggedInByUser[0] + {loggedInByUser ? loggedInMenu.map((menuName: string, index: number) => ( - + )) : loggedOutMenu.map((menuName: string, index: number) => ( @@ -33,13 +46,19 @@ const LoginDropDown = React.forwardRef( type TLoginDropDownMenuProp = { name: string; + handleLogoutButtonClick?: () => void; }; -const LoginDropDownMenu = ({ name }: TLoginDropDownMenuProp) => { +const LoginDropDownMenu = ({ + name, + handleLogoutButtonClick, +}: TLoginDropDownMenuProp) => { return ( {name === "마이페이지" && {name}} - {name === "로그아웃" && {name}} + {name === "로그아웃" && ( + {name} + )} {name === "로그인" && {name}} {name === "회원가입" && {name}} diff --git a/itda-front/src/stores/LoginAtoms.ts b/itda-front/src/stores/LoginAtoms.ts index 7c0566e..8f9cbf4 100644 --- a/itda-front/src/stores/LoginAtoms.ts +++ b/itda-front/src/stores/LoginAtoms.ts @@ -3,7 +3,7 @@ import { ILogin } from "types/LoginTypes"; export const isLoggedIn = atom({ key: "isLoggedIn", - default: true, + default: false, }); export const userLoginData = atom({ diff --git a/itda-front/src/util/API/authAPI.ts b/itda-front/src/util/API/authAPI.ts index 89f07aa..c6fed07 100644 --- a/itda-front/src/util/API/authAPI.ts +++ b/itda-front/src/util/API/authAPI.ts @@ -17,7 +17,7 @@ const verifyEmail = (email: string) => const auth = { signUp: { get: { verifyEmail }, - post: { signUpAsUser, LoginAsUser }, + post: { signUpAsUser }, }, logIn: { post: { LoginAsUser } }, }; From 1624b4e6449260c3684e4769bc38c349f8af0cac Mon Sep 17 00:00:00 2001 From: Hyuna Park Date: Thu, 25 Nov 2021 21:57:21 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?= =?UTF-8?q?=EC=A4=91=EB=B3=B5=ED=99=95=EC=9D=B8=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyPage/MyPageInfo/MyInfoEditForm.tsx | 67 +++---------------- 1 file changed, 8 insertions(+), 59 deletions(-) diff --git a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx index 83c7e97..1bdd580 100644 --- a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx +++ b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx @@ -8,7 +8,6 @@ import ColorButton from "components/common/Atoms/ColorButton"; import theme from "styles/theme"; const MyInfoEditForm = () => { - const [isValidEmail, setIsValidEmail] = useState(true); const [curPassword, setCurPassword] = useState(''); const [myInfoError, setMyInfoError] = useState({ name: "", @@ -52,24 +51,6 @@ const MyInfoEditForm = () => { } ); - // const checkEmailMutation = useMutation( - // async (email: string) => { - // auth.signUp.get.verifyEmail(email) - // }, - // { - // onSuccess: (data) => { - // console.log(data) - // setIsValidEmail(true); - // alert("사용가능한 이메일 입니다."); - // }, - // onError: (data) => { - // console.log(data) - // setIsValidEmail(false); - // // alert("이미 사용중인 이메일 입니다.") - // } - // } - // ) - useQuery('userData', myPageAPI.user.checkUserInfo, { onSuccess: data => { @@ -81,8 +62,6 @@ const MyInfoEditForm = () => { const validateInputdata = (inputName: string, inputValue: string) => { const errors = myInfoError; - console.log(inputValue); - if (inputName === "password") { errors.password = curPassword === inputValue ? "" : "비밀번호가 일치하지 않습니다."; @@ -117,24 +96,6 @@ const MyInfoEditForm = () => { return errors; }; - const checkEmailValidation = async () => { - // useQuery('checkEmailValidation', (email: string) => {auth.signUp.get.verifyEmail(email)}, { - - // }) - - // const isValidEmail = await auth.signUp.get.verifyEmail(userInputData.email as string); - // await checkEmailMutation.mutate(userInputData.email); - // console.log("checkEmailMutation",checkEmailMutation); - // // return isValidEmail; - // if(checkEmailMutation.status === "success") { - - // return true; - // } else { - // return false; - // } - return await auth.signUp.get.verifyEmail(userInputData.email as string); - } - const handleMyInfoFormChange = (e: React.ChangeEvent) => { const { name, value } = e.target; @@ -148,35 +109,23 @@ const MyInfoEditForm = () => { }; const handleDuplicateCheckButtonClick = async () => { - // const emailRegex = /\S+@\S+\.\S+/; const isValidEmail = await auth.signUp.get.verifyEmail(userInputData.email as string); - console.log(isValidEmail); - // const isValidEmail = await validationResult ? true : false; - // useQuery('checkDuplicateEmail', auth.signUp.get.verifyEmail(userInputData.email as string), ); // 임시 await createErrorMessage(isValidEmail); - - // if (!isValidEmail) { - // setMyInfoError({ - // ...myInfoError, - // email: "중복 되는 이메일 입니다. 다른 이메일 주소를 입력하세요.", - // }); - // } - - // if (!emailRegex.test(userInputData.email)) { - // setMyInfoError({ - // ...myInfoError, - // email: "이메일 주소 형식이 올바르지 않습니다.", - // }); - // } }; const createErrorMessage = (isValidEmail: any) => { const emailRegex = /\S+@\S+\.\S+/; - if (!isValidEmail) { + if (isValidEmail === '이메일이 중복되었습니다.') { setMyInfoError({ ...myInfoError, email: "중복 되는 이메일 입니다. 다른 이메일 주소를 입력하세요.", - }); + }) + } else { + alert('사용 가능한 이메일입니다.') + setMyInfoError({ + ...myInfoError, + email: "" + }) } if (!emailRegex.test(userInputData.email)) { From 6aed29fea236a41e4b133041d61f9bdd1fd0778c Mon Sep 17 00:00:00 2001 From: Hyuna Park Date: Thu, 25 Nov 2021 22:47:45 +0900 Subject: [PATCH 8/8] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=A0=9C=EA=B1=B0=20(#243)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx index 1bdd580..c6cf1b6 100644 --- a/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx +++ b/itda-front/src/components/MyPage/MyPageInfo/MyInfoEditForm.tsx @@ -17,7 +17,7 @@ const MyInfoEditForm = () => { newPassword: "", newPasswordConfirm: "", }); - // !--------api로 받아오는 initial 사용자 정보 - 임시 mock 데이터. 실제 api가져오는 로직으로 바꿔야함. + const [userInfo, setUserInfo] = useState>({ name: "", telephone: "", @@ -25,7 +25,6 @@ const MyInfoEditForm = () => { password: "", }); - // ! 사용자로부터 입력받는 input 데이터 (input들의 상태를 관리) const [userInputData, setUserInputData] = useState({ name: "", telephone: "", @@ -138,6 +137,10 @@ const MyInfoEditForm = () => { const handleChangeUserInfoButtonClick = () => { console.log("회원정보수정 페이지 클릭됌"); + for(let key in userInputData) { + // todo: 빈 값이 있다면 어느 인풋이 비어 있는지 찾고, setMyInfoError 로 해당 인풋에 에러메세지 보여주기 + // userInputData[key] === "" && alert('작성되지 않은 항목이 있습니다.') + } // myPageAPI.user.updateUserInfo(userInfo); };