Skip to content

Commit

Permalink
Merge pull request StudyBadge-TenTen#55 from StudyBadge-TenTen/develop
Browse files Browse the repository at this point in the history 
[StudyBadge_FE StudyBadge-TenTen#50 ]: 디버깅 + 추가 기능 구현
  • Loading branch information
@rabyeoljji
rabyeoljji authored Jul 29, 2024
2 parents 9e34fea + 5d86872 commit a8efcac
Show file tree
Hide file tree
Showing 35 changed files with 995 additions and 746 deletions.
94 changes: 49 additions & 45 deletions src/components/auth/LoginUser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
import NaverLogin from "./NaverLogin";
import KakaoLogin from "./KakaoLogin";
import { useAuthStore } from "../../store/auth-store";
import PageScrollTop from "../common/PageScrollTop";

const LoginUser: React.FC = () => {
const navigate = useNavigate();
Expand Down Expand Up @@ -36,53 +37,56 @@ const LoginUser: React.FC = () => {
};

return (
<div className="flex flex-col justify-center items-center mt-24 mb-20 w-4/5">
<h1 className="text-3xl text-Blue-2 font-bold mb-12">LOGIN</h1>
<form className="w-full flex flex-col justify-center items-center mb-10" onSubmit={submitLogin}>
<div className="sm:w-96 flex justify-between items-center my-2">
<label className="w-16 text-Blue-2">이메일</label>
<input
type="email"
name="email"
className="input w-40 sm:w-56 sm:ml-12 placeholder:text-slate-400 placeholder:text-xs"
placeholder="[email protected]"
value={email}
onChange={handleChange}
/>
<>
<PageScrollTop />
<div className="flex flex-col justify-center items-center mt-24 mb-20 w-4/5">
<h1 className="text-3xl text-Blue-2 font-bold mb-12">LOGIN</h1>
<form className="w-full flex flex-col justify-center items-center mb-10" onSubmit={submitLogin}>
<div className="sm:w-96 flex justify-between items-center my-2">
<label className="w-16 text-Blue-2">이메일</label>
<input
type="email"
name="email"
className="input w-40 sm:w-56 sm:ml-12 placeholder:text-slate-400 placeholder:text-xs"
placeholder="[email protected]"
value={email}
onChange={handleChange}
/>
</div>
<div className="sm:w-96 flex justify-between items-center mb-2">
<label className="w-16 text-Blue-2">비밀번호</label>
<input
type="password"
name="password"
className="input w-40 sm:w-56 sm:ml-12 placeholder:text-xs"
placeholder="비밀번호를 입력해주세요"
value={password}
onChange={handleChange}
/>
</div>
<button
type="submit"
className="w-[183px] md:w-[300px] btn-blue text-white py-2 mt-6 hover:bg-blue-600 transition-all"
>
LOGIN
</button>
</form>
<NaverLogin />
<KakaoLogin />
<div className="flex justify-between items-center w-full max-w-80 mb-12">
<button type="button" className="btn-blue w-24 mt-12 transition-all" onClick={moveSignUpPage}>
회원가입
</button>
<button
type="button"
className="btn-blue w-24 mt-12 transition-all"
onClick={() => navigate("/sendEmail_PasswordReset")}
>
비밀번호 재설정
</button>
</div>
<div className="sm:w-96 flex justify-between items-center mb-2">
<label className="w-16 text-Blue-2">비밀번호</label>
<input
type="password"
name="password"
className="input w-40 sm:w-56 sm:ml-12 placeholder:text-xs"
placeholder="비밀번호를 입력해주세요"
value={password}
onChange={handleChange}
/>
</div>
<button
type="submit"
className="w-[183px] md:w-[300px] btn-blue text-white py-2 mt-6 hover:bg-blue-600 transition-all"
>
LOGIN
</button>
</form>
<NaverLogin />
<KakaoLogin />
<div className="flex justify-between items-center w-full max-w-80 mb-12">
<button type="button" className="btn-blue w-24 mt-12 transition-all" onClick={moveSignUpPage}>
회원가입
</button>
<button
type="button"
className="btn-blue w-24 mt-12 transition-all"
onClick={() => navigate("/sendEmail_PasswordReset")}
>
비밀번호 재설정
</button>
</div>
</div>
</>
);
};

Expand Down
35 changes: 35 additions & 0 deletions src/components/auth/MailAuth.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { useNavigate, useSearchParams } from "react-router-dom";
import Modal from "../common/Modal";
import { getAuthEmail } from "@/services/auth-api";

const MailAuth = (): JSX.Element => {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const email = searchParams.get("email");
const code = searchParams.get("code");

const handleClick = async () => {
if (email && code) {
try {
await getAuthEmail(email, code);
navigate("/login");
} catch (error) {
alert("이메일 인증에 실패하였습니다.");
navigate("/");
}
}
};

return (
<Modal>
<div className="flex flex-col justify-center items-center">
이메일 인증을 위해 확인 버튼을 눌러주세요
<button onClick={() => handleClick()} className="btn-blue mt-4 w-10">
확인
</button>
</div>
</Modal>
);
};

export default MailAuth;
54 changes: 29 additions & 25 deletions src/components/auth/PasswordReset.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { usePasswordResetStore } from "../../store/auth-store";
import { postVerificationEmail } from "@/services/auth-api";
import { useLocation } from "react-router-dom";
import PageScrollTop from "../common/PageScrollTop";

const PasswordReset: React.FC = () => {
const { email, setEmail } = usePasswordResetStore();
Expand All @@ -25,33 +26,36 @@ const PasswordReset: React.FC = () => {
};

return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div className="w-full max-w-md bg-white rounded-[50px] shadow-card p-20 py-24">
<div>
<h2 className="text-2xl font-bold text-Blue-2 mb-4 text-center">비밀번호 초기화</h2>
<form onSubmit={sendVerificationCode} className="flex flex-col">
<div className="mb-4">
<label htmlFor="email" className="block text-Blue-2 text-sm font-bold mb-2">
이메일:
</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="input"
/>
</div>
<button
type="submit"
className="btn-blue bg-blue-500 hover:btn-blue bg-blue-700 text-white font-bold focus:outline-none focus:shadow-outline mt-4"
>
인증 코드 전송
</button>
</form>
<>
<PageScrollTop />
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div className="w-full max-w-md bg-white rounded-[50px] shadow-card p-20 py-24">
<div>
<h2 className="text-2xl font-bold text-Blue-2 mb-4 text-center">비밀번호 초기화</h2>
<form onSubmit={sendVerificationCode} className="flex flex-col">
<div className="mb-4">
<label htmlFor="email" className="block text-Blue-2 text-sm font-bold mb-2">
이메일:
</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="input"
/>
</div>
<button
type="submit"
className="btn-blue bg-blue-500 hover:btn-blue bg-blue-700 text-white font-bold focus:outline-none focus:shadow-outline mt-4"
>
인증 코드 전송
</button>
</form>
</div>
</div>
</div>
</div>
</>
);
};

Expand Down
129 changes: 71 additions & 58 deletions src/components/auth/SignUpUser.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import React, { useEffect, useState } from "react";
import React, { 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";

const SignUp: React.FC = () => {
const formListFirst = ["이메일", "이름", "비밀번호", "비밀번호확인"];
const formListSecond = ["계좌번호", "닉네임", "소개"];
const [isSubmitted, setIsSubmitted] = useState(false);
const authStore = useAuthStore();

useEffect(() => {
console.log(authStore);
}, [authStore]);
// useEffect(() => {
// console.log(authStore);
// }, [authStore]);

const validateForm = (): boolean => {
let result = true;
Expand Down Expand Up @@ -55,10 +56,19 @@ const SignUp: React.FC = () => {
e.preventDefault();
if (!validateForm()) return;
try {
await authStore.signUp();
setIsSubmitted(true);
} catch (error) {
const result = await authStore.signUp();
console.log("signUp()호출 결과 : " + result); // 서버 응답 체크 로그

if (result) {
alert("회원가입이 완료되었습니다.");
authStore.reset();
setIsSubmitted(true);
} else {
alert("이미 가입되어 있는 이메일 계정입니다.");
}
} catch (error: any) {
console.error("회원가입 실패:", error);
alert("회원가입에 실패하였습니다. 나중에 다시 시도해 주세요.");
}
};

Expand All @@ -72,69 +82,72 @@ const SignUp: React.FC = () => {
}

return (
<form className="flex flex-col justify-center items-center mt-24 mb-20 w-4/5" onSubmit={handleSubmit}>
<h1 className="text-3xl text-Blue-2 font-bold mb-12">회원가입</h1>
<p className="mb-10 text-sm text-Red-2">* 항목은 필수 입력 항목입니다.</p>
{formListFirst.map((formName) => (
<div key={formName} className="w-full sm:w-96 flex justify-between items-center mb-6">
<label className="text-Blue-2">
{formName}
<span>*</span>
</label>
<input
type={nameToType(formName)}
id={formName}
name={formName}
className="input w-44 sm:w-56 sm:ml-12 placeholder:text-slate-400 placeholder:text-xs"
placeholder={returnPlaceholder(formName)}
value={authStore[nameToField(formName)] as string}
onChange={(e) => handleChange(e, formName)}
/>
</div>
))}
<select
name="accountBank"
id="accountBank"
className="w-fit p-1 border border-solid border-Gray-2 rounded-[10px] mt-8 mb-2"
value={authStore.accountBank}
onChange={(e) => handleChange(e, "금융기관")}
>
<option value="">-- 금융기관을 선택해주세요 --</option>
{BANK_LIST.map((bank) => (
<option key={bank} value={bank}>
{bank}
</option>
))}
</select>
{formListSecond.map((formName) => (
<React.Fragment key={formName}>
{formName === "계좌번호" && (
<div className="w-full max-w-96 text-xs text-Gray-4 mb-2">계좌번호는 환급금 송금을 위한 항목입니다.</div>
)}
<div
key={formName}
className={`w-full sm:w-96 flex justify-between items-center ${formName === "계좌번호" ? "mb-14" : "mb-6"}`}
>
<>
<PageScrollTop />
<form className="flex flex-col justify-center items-center mt-24 mb-20 w-4/5" onSubmit={handleSubmit}>
<h1 className="text-3xl text-Blue-2 font-bold mb-12">회원가입</h1>
<p className="mb-10 text-sm text-Red-2">* 항목은 필수 입력 항목입니다.</p>
{formListFirst.map((formName) => (
<div key={formName} className="w-full sm:w-96 flex justify-between items-center mb-6">
<label className="text-Blue-2">
{formName}
{formName !== "소개" && <span>*</span>}
<span>*</span>
</label>
<input
type={nameToType(formName)}
id={formName}
name={formName}
className={`input w-44 sm:w-56 sm:ml-12 placeholder:text-slate-400 placeholder:text-xs`}
className="input w-44 sm:w-56 sm:ml-12 placeholder:text-slate-400 placeholder:text-xs"
placeholder={returnPlaceholder(formName)}
value={authStore[nameToField(formName)] as string}
onChange={(e) => handleChange(e, formName)}
/>
</div>
</React.Fragment>
))}
<button type="submit" className="btn-blue hover:bg-blue-700 text-white mt-10">
회원가입
</button>
</form>
))}
<select
name="accountBank"
id="accountBank"
className="w-fit p-1 border border-solid border-Gray-2 rounded-[10px] mt-8 mb-2"
value={authStore.accountBank}
onChange={(e) => handleChange(e, "금융기관")}
>
<option value="">-- 금융기관을 선택해주세요 --</option>
{BANK_LIST.map((bank) => (
<option key={bank} value={bank}>
{bank}
</option>
))}
</select>
{formListSecond.map((formName) => (
<React.Fragment key={formName}>
{formName === "계좌번호" && (
<div className="w-full max-w-96 text-xs text-Gray-4 mb-2">계좌번호는 환급금 송금을 위한 항목입니다.</div>
)}
<div
key={formName}
className={`w-full sm:w-96 flex justify-between items-center ${formName === "계좌번호" ? "mb-14" : "mb-6"}`}
>
<label className="text-Blue-2">
{formName}
{formName !== "소개" && <span>*</span>}
</label>
<input
type={nameToType(formName)}
id={formName}
name={formName}
className={`input w-44 sm:w-56 sm:ml-12 placeholder:text-slate-400 placeholder:text-xs`}
placeholder={returnPlaceholder(formName)}
value={authStore[nameToField(formName)] as string}
onChange={(e) => handleChange(e, formName)}
/>
</div>
</React.Fragment>
))}
<button type="submit" className="btn-blue hover:bg-blue-700 text-white mt-10">
회원가입
</button>
</form>
</>
);
};

Expand Down
Loading

0 comments on commit a8efcac

Please sign in to comment.