Skip to content

Commit 28ba77e

Browse files
Kim-buyeonKim-buyeon
committed
인증과 관련된 UI 구현완료
1 parent 175b589 commit 28ba77e

7 files changed

Lines changed: 245 additions & 21 deletions

File tree

‎package-lock.json‎

Lines changed: 0 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const router = createBrowserRouter([
4747
{
4848
path: "/menurecommendation",
4949
element: <MenuRecommendationPage />,
50-
},
50+
}
5151
]);
5252

5353
export const App = () => {

‎src/components/LoginPopup/FindId/FindId.jsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import "../style.css"; // 기존 CSS 파일 경로 유지
2+
import { useState } from "react";
3+
import { isNotEmpty } from "../../util/validation";
4+
5+
function FindId({ onClose, onSwitchToLogin }) {
6+
const [formState, setFormState] = useState({ errors: {} });
7+
8+
async function handleSubmit(event) {
9+
event.preventDefault();
10+
11+
const formData = new FormData(event.target);
12+
const email = formData.get("email");
13+
const birthDate = formData.get("birthDate");
14+
15+
const errors = {};
16+
17+
if (!isNotEmpty(birthDate)) {
18+
errors.birthDate = "생년월일을 선택해주세요.";
19+
}
20+
21+
if (Object.keys(errors).length > 0) {
22+
setFormState({ errors });
23+
return;
24+
}
25+
26+
//여기는 나중에 백앤드 로직
27+
const storedUsersString = localStorage.getItem("registeredUsers");
28+
if (storedUsersString) {
29+
try {
30+
const users = JSON.parse(storedUsersString);
31+
32+
const foundUser = Array.isArray(users)
33+
? users.find(user => user.email === email && user.birthDate === birthDate)
34+
: null;
35+
36+
if (foundUser) {
37+
alert(`찾은 아이디: ${foundUser.username}`);
38+
39+
setFormState({ errors: {}, success: true, userId: foundUser.username });
40+
} else {
41+
alert("입력하신 정보와 일치하는 아이디를 찾을 수 없습니다.");
42+
}
43+
44+
} catch (error) {
45+
console.error("데이터 파싱 에러:", error);
46+
alert("회원 정보를 불러오는 중 오류가 발생했습니다.");
47+
}
48+
} else {
49+
alert("가입된 회원 정보가 없습니다.");
50+
}
51+
}
52+
53+
return (
54+
<div className="login-popup-overlay" onClick={onClose}>
55+
<div className="login-popup-container" onClick={(e) => e.stopPropagation()}>
56+
<button className="login-popup-close" onClick={onClose}>×</button>
57+
<div className="login-popup-header">
58+
<h2 className="login-popup-title">아이디 찾기</h2>
59+
</div>
60+
61+
<form className="login-popup-form" onSubmit={handleSubmit}>
62+
<label htmlFor="email" className="login-popup-label">이메일</label>
63+
<input type="email" placeholder="이메일 입력" className="login-popup-input" name="email" required/>
64+
65+
<label htmlFor="birthDate" className="login-popup-label">생년월일</label>
66+
<input name="birthDate" type="date" placeholder="생년 입력" className="login-popup-input" required/>
67+
68+
{formState.errors.birthDate && (
69+
<p style={{color: 'red', fontSize: '12px', marginTop: '4px'}}>{formState.errors.birthDate}</p>
70+
)}
71+
72+
<button className="login-popup-submit-btn">
73+
아이디 찾기
74+
</button>
75+
</form>
76+
77+
<div className="login-popup-footer">
78+
<span onClick={onSwitchToLogin} className="login-popup-footer-text" style={{marginTop : 5, cursor: 'pointer'}}>
79+
로그인으로 돌아가기
80+
</span>
81+
</div>
82+
</div>
83+
</div>
84+
);
85+
}
86+
87+
export default FindId;

‎src/components/LoginPopup/FindPassword/FindPassword.jsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import "../style.css"
2+
function FindPassword({ onClose, onSwitchToLogin }) {
3+
4+
const handleSubmit = (e) => {
5+
e.preventDefault();
6+
const formData = new FormData(e.target);
7+
const id = formData.get("id"); // input name="id"
8+
9+
// 로컬스토리지에서 비밀번호 찾기 로직
10+
//나중에 백앤드 로직으로 전환
11+
//이메일로 임시비밀번호 확인
12+
const storedUsersString = localStorage.getItem("registeredUsers");
13+
if (storedUsersString) {
14+
const users = JSON.parse(storedUsersString);
15+
const foundUser = Array.isArray(users)
16+
? users.find(user => user.username === id)
17+
: null;
18+
19+
if (foundUser) {
20+
alert(`회원님의 비밀번호는 ${foundUser.password} 입니다.`);
21+
} else {
22+
alert("일치하는 회원 정보를 찾을 수 없습니다.");
23+
}
24+
} else {
25+
alert("가입된 회원 정보가 없습니다.");
26+
}
27+
};
28+
29+
return (
30+
<div className="login-popup-overlay" onClick={onClose}>
31+
<div className="login-popup-container" onClick={(e) => e.stopPropagation()}>
32+
<button className="login-popup-close" onClick={onClose}>×</button>
33+
<div className="login-popup-header">
34+
<h2 className="login-popup-title">비밀번호 찾기</h2>
35+
</div>
36+
<form className="login-popup-form" onSubmit={handleSubmit}>
37+
<label htmlFor="id" className="login-popup-label">아이디</label>
38+
<input
39+
type="text"
40+
placeholder="아이디 입력"
41+
className="login-popup-input"
42+
name="id"
43+
required
44+
/>
45+
46+
<button className="login-popup-submit-btn">
47+
비밀번호 찾기
48+
</button>
49+
</form>
50+
51+
<div className="login-popup-footer">
52+
<span onClick={onSwitchToLogin} className="login-popup-footer-text" style={{marginTop : 5}}>
53+
로그인으로 돌아가기
54+
</span>
55+
</div>
56+
</div>
57+
</div>
58+
);
59+
}
60+
61+
export default FindPassword;

‎src/components/LoginPopup/LoginPopup.jsx‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React, { useState } from "react";
22
import { useAuth } from "../../contexts/AuthContext";
33
import "./style.css";
44

5-
export const LoginPopup = ({ onClose, onSwitchToSignup }) => {
6-
const [email, setEmail] = useState(""); // Changed to email
5+
export const LoginPopup = ({ onClose, onSwitchToSignup,onSwitchToFindId,onSwitchToFindPassword }) => {
6+
const [id, setId] = useState(""); // Changed to email
77
const [password, setPassword] = useState("");
88
const { login } = useAuth();
99

@@ -23,16 +23,16 @@ export const LoginPopup = ({ onClose, onSwitchToSignup }) => {
2323
// Simulating backend validation with localStorage
2424
const mockUsers = JSON.parse(localStorage.getItem("registeredUsers") || "[]");
2525
const foundUser = mockUsers.find(
26-
(u) => u.email === email && u.password === password // Validate by email
26+
(u) => u.username === id && u.password === password // Validate by userId
2727
);
2828

2929
if (foundUser) {
30-
const userData = { username: foundUser.username, email: foundUser.email }; // Store username for display
30+
const userData = { username: foundUser.username, email: foundUser.email };
3131
login(userData);
3232
console.log("Login successful:", userData);
3333
onClose();
3434
} else {
35-
alert("이메일 또는 비밀번호가 일치하지 않습니다.");
35+
alert("아이디 또는 비밀번호가 일치하지 않습니다.");
3636
}
3737
};
3838

@@ -47,13 +47,13 @@ export const LoginPopup = ({ onClose, onSwitchToSignup }) => {
4747

4848
<form className="login-popup-form" onSubmit={handleLogin}>
4949
<div className="login-popup-input-group">
50-
<label className="login-popup-label">이메일</label> {/* Changed label */}
50+
<label className="login-popup-label">아이디</label> {/* Changed label */}
5151
<input
52-
type="email" // Changed type to email
52+
type="text" // Changed type to email
5353
className="login-popup-input"
54-
value={email} // Changed value to email
55-
onChange={(e) => setEmail(e.target.value)} // Changed onChange to setEmail
56-
placeholder="이메일을 입력하세요" // Changed placeholder
54+
value={id} // Changed value to email
55+
onChange={(e) => setId(e.target.value)} // Changed onChange to setId
56+
placeholder="아이디를 입력하세요" // Changed placeholder
5757
required
5858
/>
5959
</div>
@@ -84,6 +84,23 @@ export const LoginPopup = ({ onClose, onSwitchToSignup }) => {
8484
회원가입
8585
</button>
8686
</div>
87+
<div className="login-popup-footer">
88+
<span className="login-popup-footer-text">계정 찾기</span>
89+
<button
90+
type="button"
91+
className="login-popup-signup-btn"
92+
onClick={onSwitchToFindId}
93+
>
94+
아이디 찾기
95+
</button>
96+
<button
97+
type="button"
98+
className="login-popup-signup-btn"
99+
onClick={onSwitchToFindPassword}
100+
>
101+
비밀번호 찾기
102+
</button>
103+
</div>
87104
</form>
88105
</div>
89106
</div>

‎src/components/util/validation.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
export function isEmail(value) {
2+
return value.includes('@');
3+
}
4+
5+
export function isNotEmpty(value) {
6+
return value.trim() !== '';
7+
}
8+
9+
export function hasMinLength(value, minLength) {
10+
return value.length >= minLength;
11+
}
12+
13+
export function isEqualToOtherValue(value, otherValue) {
14+
return value === otherValue;
15+
}
16+
export function isIdValid(value) {
17+
if (!value || typeof value !== 'string') {
18+
return false;
19+
}
20+
21+
const regExp = /^[a-zA-Z0-9]+$/;
22+
23+
return regExp.test(value);
24+
}
25+
26+
export function isPasswordValid(value) {
27+
if (!value || typeof value !== 'string') {
28+
return false;
29+
}
30+
31+
const regExp = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*?_])[a-zA-Z0-9!@#$%^&*?_]{8,20}$/;
32+
33+
return regExp.test(value);
34+
}

0 commit comments

Comments
 (0)