Skip to content

Commit

Permalink
Merge pull request StudyBadge-TenTen#147 from StudyBadge-TenTen/test
Browse files Browse the repository at this point in the history 
[StudyBadge_FE StudyBadge-TenTen#146 ]: 계좌인증 로직 추가
  • Loading branch information
@rabyeoljji
rabyeoljji authored Aug 19, 2024
2 parents 891bd5f + e85cd52 commit 6c1e734
Show file tree
Hide file tree
Showing 13 changed files with 272 additions and 196 deletions.
2 changes: 2 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"source.fixAll.eslint": "always"
},
"cSpell.words": [
"ACCESSTOKEN",
"appkey",
"autoload",
"BRANDPAY",
Expand All @@ -16,6 +17,7 @@
"latlng",
"Naver",
"Noti",
"REFRESHTOKEN",
"tailwindcss",
"tanstack",
"tosspayments",
Expand Down
146 changes: 71 additions & 75 deletions src/components/auth/SignUpUser.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { useAuthStore } from "../../store/auth-store";
import { nameToField, nameToType, returnPlaceholder } from "../../utils/transform-function";
import { BANK_LIST } from "../../constants/bank-list";
import PageScrollTop from "../common/PageScrollTop";
import { CustomErrorType } from "@/types/common";
import axios from "axios";
// import { getAccountVerification } from "@/services/auth-api";
import { getAccountVerification } from "@/services/auth-api";

const SignUp: React.FC = () => {
const formListFirst = ["이메일", "이름", "비밀번호", "비밀번호확인"];
Expand All @@ -14,52 +14,47 @@ const SignUp: React.FC = () => {
const [isSubmitted, setIsSubmitted] = useState(false);
const authStore = useAuthStore();

// const verifyAccount = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
// e.stopPropagation();
// e.preventDefault();
// const bank = BANK_LIST.find((bankObj) => bankObj.name === authStore.accountBank);
useEffect(() => {
if (isAccountVerified) {
authStore.setField("isAccountCert", true);
}
}, [isAccountVerified]);

// if (!authStore.name) {
// alert("계좌 인증을 위해 이름을 작성해주시기 바랍니다.");
// return;
// }
const verifyAccount = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
e.preventDefault();
const bank = BANK_LIST.find((bankObj) => bankObj.name === authStore.accountBank);

// if (bank && authStore.account && authStore.name) {
// try {
// const response = await getAccountVerification(bank.code, authStore.account, authStore.name);
// if (axios.isAxiosError(response)) {
// const error = response.response?.data as CustomErrorType;
// alert(error.message);
// setIsAccountVerified(() => false);
// } else {
// if (response.data.accountHolder === authStore.name) {
// alert("계좌번호 인증에 성공하였습니다");
// setIsAccountVerified(() => true);
// } else {
// alert("본인 명의의 계좌가 아닙니다. 입력한 이름과 계좌 소유주명이 동일하지 않습니다.");
// setIsAccountVerified(() => false);
// }
// }
// } catch (error) {
// if (axios.isAxiosError(error)) {
// const customError = error.response?.data as CustomErrorType;
// alert(customError.message);
// setIsAccountVerified(() => false);
// } else {
// alert(
// "계좌번호 인증에 문제가 발생하였습니다. 문제가 반복될 경우 [email protected] 해당 주소로 문의 메일을 보내주시면 감사하겠습니다.",
// );
// setIsAccountVerified(() => false);
// }
// }
// } else if (!bank) {
// alert("선택한 은행이 존재하지 않습니다.");
// return;
// } else if (!authStore.account) {
// alert("계좌번호를 입력해주세요");
// return;
// }
// };
if (!authStore.name) {
alert("계좌 인증을 위해 이름을 작성해주시기 바랍니다.");
return;
}

if (bank && authStore.account && authStore.name) {
try {
await getAccountVerification(bank.code, authStore.account, authStore.name);
alert("계좌번호 인증에 성공하였습니다");
setIsAccountVerified(() => true);
} catch (error) {
if (axios.isAxiosError(error)) {
const customError = error.response?.data as CustomErrorType;
alert(customError.message);
setIsAccountVerified(() => false);
} else {
alert(
"계좌번호 인증에 문제가 발생하였습니다. 문제가 반복될 경우 [email protected] 해당 주소로 문의 메일을 보내주시면 감사하겠습니다.",
);
setIsAccountVerified(() => false);
}
}
} else if (!bank) {
alert("선택한 은행이 존재하지 않습니다.");
return;
} else if (!authStore.account) {
alert("계좌번호를 입력해주세요");
return;
}
};

const validateForm = (): boolean => {
let result = true;
Expand All @@ -78,11 +73,10 @@ const SignUp: React.FC = () => {
} else if (!authStore.account) {
alert("계좌번호 입력은 필수입니다.");
result = false;
}
// else if (!isAccountVerified) {
// alert("계좌 인증이 필요합니다");
// }
else if (!authStore.password) {
} else if (!isAccountVerified) {
alert("계좌 인증이 필요합니다");
result = false;
} else if (!authStore.password) {
alert("비밀번호 입력은 필수입니다.");
result = false;
} else if (authStore.password !== authStore.checkPassword) {
Expand All @@ -108,28 +102,32 @@ const SignUp: React.FC = () => {
setIsAccountVerified(() => false);
}
}
if (e.target.id === "이름") {
if (isAccountVerified) {
setIsAccountVerified(() => false);
}
}
authStore.setField(nameToField(formName), e.target.value);
};

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!validateForm()) return;
try {
const response = await authStore.signUp();
if (!response) {
alert("회원가입이 완료되었습니다.");
authStore.reset();
setIsSubmitted(true);
}
if (axios.isAxiosError(response)) {
const error = response.response?.data as CustomErrorType;
alert(error.message);
}
await authStore.signUp();
alert("회원가입이 완료되었습니다.");
authStore.reset();
setIsSubmitted(true);
} catch (error: any) {
console.error("회원가입 실패:", error);
alert(
"회원가입에 실패하였습니다. 나중에 다시 시도해 주세요. 문제가 반복될 경우 [email protected] 해당 주소로 문의 메일을 보내주시면 감사하겠습니다.",
);
if (axios.isAxiosError(error)) {
const customError = error.response?.data as CustomErrorType;
alert(customError.message);
} else {
console.error("회원가입 실패:", error);
alert(
"회원가입에 실패하였습니다. 나중에 다시 시도해 주세요. 문제가 반복될 경우 [email protected] 해당 주소로 문의 메일을 보내주시면 감사하겠습니다.",
);
}
}
};

Expand Down Expand Up @@ -199,16 +197,14 @@ const SignUp: React.FC = () => {
onChange={(e) => handleChange(e, formName)}
/>
</div>
{
// formName === "계좌번호" &&
// (isAccountVerified ? (
// <div className="text-Green-1 mb-14">계좌인증완료</div>
// ) : (
// <button type="button" onClick={(e) => verifyAccount(e)} className="btn-blue mb-14">
// 계좌번호 인증
// </button>
// ))
}
{formName === "계좌번호" &&
(isAccountVerified ? (
<div className="px-4 py-3 text-sm text-Green-1 mb-14">계좌인증완료</div>
) : (
<button type="button" onClick={(e) => verifyAccount(e)} className="btn-blue mb-14">
계좌번호 인증
</button>
))}
</React.Fragment>
))}
<button type="submit" className="btn-blue hover:bg-blue-700 text-white mt-10">
Expand Down
108 changes: 50 additions & 58 deletions src/components/profile/ProfileEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import axios from "axios";
import { useAuthStore } from "../../store/auth-store";
import { useNavigate } from "react-router";
import { CustomErrorType } from "@/types/common";
// import { getAccountVerification } from "@/services/auth-api";
import { getAccountVerification } from "@/services/auth-api";

const ProfileEdit = ({ userInfo }: { userInfo: UserInfoType }): JSX.Element => {
// todo: 회원가입 시 정했던 닉네임이랑 소개 등 글자수 제한 반영하기
Expand Down Expand Up @@ -40,6 +40,11 @@ const ProfileEdit = ({ userInfo }: { userInfo: UserInfoType }): JSX.Element => {
accountBank: userInfo.accountBank,
imgUrl: userInfo.imgUrl,
}));
if (userInfo.isAccountCert) {
setIsAccountVerified(() => true);
} else {
setIsAccountVerified(() => false);
}
}
}, [userInfo]);

Expand Down Expand Up @@ -115,47 +120,36 @@ const ProfileEdit = ({ userInfo }: { userInfo: UserInfoType }): JSX.Element => {
};

// 계좌 인증하는 함수
// const verifyAccount = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
// e.stopPropagation();
// e.preventDefault();
// const bank = BANK_LIST.find((bankObj) => bankObj.name === profileInfo.accountBank);
const verifyAccount = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.stopPropagation();
e.preventDefault();
const bank = BANK_LIST.find((bankObj) => bankObj.name === profileInfo.accountBank);

// if (bank && profileInfo.account) {
// try {
// const response = await getAccountVerification(bank.code, profileInfo.account);
// if (axios.isAxiosError(response)) {
// const error = response.response?.data as CustomErrorType;
// alert(error.message);
// setIsAccountVerified(() => false);
// } else {
// if (response.data.accountHolder === userInfo.name) {
// alert("계좌번호 인증에 성공하였습니다");
// setIsAccountVerified(() => true);
// } else {
// alert("본인 명의의 계좌가 아닙니다. 입력한 이름과 계좌 소유주명이 동일하지 않습니다.");
// setIsAccountVerified(() => false);
// }
// }
// } catch (error) {
// if (axios.isAxiosError(error)) {
// const customError = error.response?.data as CustomErrorType;
// alert(customError.message);
// setIsAccountVerified(() => false);
// } else {
// alert(
// "계좌번호 인증에 문제가 발생하였습니다. 문제가 반복될 경우 [email protected] 해당 주소로 문의 메일을 보내주시면 감사하겠습니다.",
// );
// setIsAccountVerified(() => false);
// }
// }
// } else if (!bank) {
// alert("선택한 은행이 존재하지 않습니다.");
// return;
// } else if (!profileInfo.account) {
// alert("계좌번호를 입력해주세요");
// return;
// }
// };
if (bank && profileInfo.account) {
try {
await getAccountVerification(bank.code, profileInfo.account);
alert("계좌번호 인증에 성공하였습니다");
setIsAccountVerified(() => true);
} catch (error) {
if (axios.isAxiosError(error)) {
const customError = error.response?.data as CustomErrorType;
alert(customError.message);
setIsAccountVerified(() => false);
} else {
alert(
"계좌번호 인증에 문제가 발생하였습니다. 문제가 반복될 경우 [email protected] 해당 주소로 문의 메일을 보내주시면 감사하겠습니다.",
);
setIsAccountVerified(() => false);
}
}
} else if (!bank) {
alert("선택한 은행이 존재하지 않습니다.");
return;
} else if (!profileInfo.account) {
alert("계좌번호를 입력해주세요");
return;
}
};

// 프로필 수정을 저장할 때 반영하도록 하는 함수
const handleSaveClick = async (
Expand Down Expand Up @@ -190,14 +184,14 @@ const ProfileEdit = ({ userInfo }: { userInfo: UserInfoType }): JSX.Element => {
}
}

// if (!isAccountVerified) {
// alert("계좌 인증이 필요합니다");
// if (accountRef.current) {
// accountRef.current.classList.add("outline-Red-2");
// accountRef.current.focus();
// }
// return;
// }
if (!isAccountVerified) {
alert("계좌 인증이 필요합니다");
if (accountRef.current) {
accountRef.current.classList.add("outline-Red-2");
accountRef.current.focus();
}
return;
}

if (nicknameRef.current) {
if (!nicknameRef.current.value) {
Expand Down Expand Up @@ -339,15 +333,13 @@ const ProfileEdit = ({ userInfo }: { userInfo: UserInfoType }): JSX.Element => {
</option>
))}
</select>
{
// isAccountVerified ? (
// <div className="text-Green-1 mb-14">계좌인증완료</div>
// ) : (
// <button type="button" onClick={(e) => verifyAccount(e)} className="btn-blue w-24 mt-2 ml-4">
// 계좌번호 인증
// </button>
// )
}
{isAccountVerified ? (
<div className="px-4 py-3 text-sm text-Green-1 mb-14 mt-2 ml-4">계좌인증완료</div>
) : (
<button type="button" onClick={(e) => verifyAccount(e)} className="btn-blue w-24 mt-2 ml-4">
계좌번호 인증
</button>
)}
</div>
<button
type="submit"
Expand Down
6 changes: 6 additions & 0 deletions src/hooks/useSSE.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ export const useSSE = () => {
}, [setField]);

useEffect(() => {
// 목데이터용 코드 (서버 없이 msw 이용 시 sse 연결하지 않음)
if (accessToken) {
console.log("useSSE - 현재 로그인상태가 아닙니다. 로그인 상태가 아닐 경우, 재연결하지 않음");
return;
}

// 로그인 상태가 아닐 경우, 재연결하지 않음
if (isLoginFailed || !accessToken) {
console.log("useSSE - 현재 로그인상태가 아닙니다. 로그인 상태가 아닐 경우, 재연결하지 않음");
Expand Down
7 changes: 4 additions & 3 deletions src/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import App from "./App.tsx";
import "./index.css";
// import { worker } from "./mocks/worker.ts";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// import { setAccessToken, setRefreshToken } from "./utils/cookie.ts";

// if (import.meta.env.DEV) {
// worker.start();
// }
// worker.start();
// setAccessToken(import.meta.env.VITE_APP_ACCESSTOKEN);
// setRefreshToken(import.meta.env.VITE_APP_REFRESHTOKEN);

const queryClient = new QueryClient();

Expand Down
Loading

0 comments on commit 6c1e734

Please sign in to comment.