Skip to content

Commit

Permalink
✨ Feat: 아이디/비밀번호 찾기 구현 #90
Browse files Browse the repository at this point in the history
  • Loading branch information
@gd06070
gd06070 committed Dec 19, 2024
1 parent 2aecb22 commit 2316f18
Show file tree
Hide file tree
Showing 2 changed files with 235 additions and 0 deletions.
160 changes: 160 additions & 0 deletions src/pages/FindMyIdAndPassword.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
import { useState } from 'react';
import { findId, findPassword } from '../api/userApi';
import FindResult from './FindResult';

const FindMyIdAndPassword = () => {
const [nickname, setNickname] = useState('');
const [email, setEmail] = useState('');
const [userId, setUserId] = useState('');
const [isSuccess, setIsSuccess] = useState(false);
const [error, setError] = useState(null);
const [activeTab, setActiveTab] = useState('findId');
const [showResult, setShowResult] = useState(false); // 결과 화면 표시 여부

const handleFindPassword = async () => {
try {
await findPassword(email, userId);
setIsSuccess(true);
setError(null);
setShowResult(true);
} catch (error) {
setIsSuccess(false);
setError('입력한 아이디 혹은 이메일과 일치하는 정보가 없습니다.');
setShowResult(true);
}
};

const handleFindId = async () => {
try {
const result = await findId(email, nickname);
setUserId(result);
setIsSuccess(true);
setError(null);
setShowResult(true);
} catch (error) {
setUserId('');
setIsSuccess(false);
setError('입력한 이메일 혹은 닉네임과 일치하는 정보가 없습니다.');
setShowResult(true);
}
};

const handleTabClick = (tab) => {
setActiveTab(tab);
setError(null);
setIsSuccess(false);
setUserId('');
setShowResult(false);
};

const handleSubmit = (e) => {
e.preventDefault();
if (activeTab === 'findId') {
handleFindId();
} else {
handleFindPassword();
}
};

return (
<div className="tab-menu">
{!showResult ? (
<>
<div className="tabs">
<div
className={`tab ${activeTab === 'findId' ? 'active' : ''}`}
onClick={() => handleTabClick('findId')}
>
아이디 찾기
</div>
<div
className={`tab ${activeTab === 'findPassword' ? 'active' : ''}`}
onClick={() => handleTabClick('findPassword')}
>
비밀번호 찾기
</div>
</div>
<div className="form">
{activeTab === 'findId' ? (
<>
<div className="form-group">
<label htmlFor="nickname">닉네임</label>
<input
id="nickname"
className="input-first"
type="text"
placeholder="닉네임을 입력하세요"
value={nickname}
onChange={(e) =>
setNickname(e.target.value)
}
/>
</div>
<div className="form-group">
<label htmlFor="email">이메일</label>
<input
id="email"
className="input-second"
type="email"
placeholder="이메일을 입력하세요"
value={email}
onChange={(e) =>
setEmail(e.target.value)
}
/>
</div>
</>
) : (
<>
<div className="form-group">
<label htmlFor="userId">아이디</label>
<input
id="userId"
className="input-first"
type="text"
placeholder="아이디를 입력하세요"
value={userId}
onChange={(e) =>
setUserId(e.target.value)
}
/>
</div>
<div className="form-group">
<label htmlFor="email">이메일</label>
<input
id="email"
className="input-second"
type="email"
placeholder="이메일을 입력하세요"
value={email}
onChange={(e) =>
setEmail(e.target.value)
}
/>
</div>
</>
)}
<button
className="submit-button"
type="submit"
onClick={handleSubmit}
>
{activeTab === 'findId'
? '아이디 찾기'
: '비밀번호 찾기'}
</button>
</div>
</>
) : (
<FindResult
email={email}
userId={userId}
isSuccess={isSuccess}
activeTab={activeTab}
/>
)}
</div>
);
};

export default FindMyIdAndPassword;
75 changes: 75 additions & 0 deletions src/pages/FindResult.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
const FindResult = ({ email, userId, isSuccess, activeTab }) => {
return (
<div className="find-result">
<div className="find-result-top-group">
<span className="check-result-text">
{activeTab === 'findId' ? '아이디 확인' : '비밀번호 확인'}
</span>
<span className="find-result-notification-text">
{activeTab === 'findId'
? '입력하신 정보와 일치하는 아이디는 다음과 같습니다.'
: isSuccess
? '임시 비밀번호를 이메일로 전송했습니다. 이메일을 못 받으셨다면 스팸 메일함을 확인해주세요!'
: '입력하신 정보와 일치하는 계정을 찾을 수 없습니다. 다시 확인하고 시도해주세요.'}
</span>
</div>

<div className="find-result-wrapper">
{isSuccess ? (
<div className="find-result-wrapper-section">
{activeTab === 'findId' ? (
<div className="find-result-wrapper-bottom-group1">
<span className="split-text1">
고객님의 아이디는{' '}
</span>
<span className="found-info-text">
{userId}
</span>
<span className="split-text2">입니다.</span>
</div>
) : (
<div className="find-result-wrapper-bottom-group1">
<div className="find-result-wrapper-bottom-group2">
<span className="split-text1">
전송된 이메일은{' '}
</span>
<span className="found-info-text">
{email}
</span>
<span className="split-text2">입니다.</span>
</div>
<p>
아래 버튼을 클릭하면 메인 페이지로
이동합니다.
</p>
</div>
)}
<button
className="main-redirect-button"
onClick={() => (window.location.href = '/')}
>
<span id="main-redirect">메인으로</span>
</button>
</div>
) : (
<div className="find-result-wrapper-section">
<span className="not-found-text">
{activeTab === 'findId'
? '입력하신 정보와 일치하는 아이디를 찾을 수 없습니다. 다시 확인하고 시도해주세요.'
: '입력하신 정보와 일치하는 계정을 찾을 수 없습니다. 다시 확인하고 시도해주세요.'}
</span>
<p>아래 버튼을 클릭하면 메인 페이지로 이동합니다.</p>
<button
className="main-redirect-button"
onClick={() => (window.location.href = '/')}
>
<span id="main-redirect">메인으로</span>
</button>
</div>
)}
</div>
</div>
);
};

export default FindResult;

0 comments on commit 2316f18

Please sign in to comment.