API 재활용1
This commit is contained in:
wallace
@@ -5,6 +5,7 @@ import IdFindDone from "./IdFindDone";
|
||||
import IdFindFailed from "./IdFindFailed";
|
||||
import FindIdOption from "./FindIdOption";
|
||||
import LoginInputSvg from "@/app/svgs/inputformx";
|
||||
import apiService from "@/app/lib/apiService";
|
||||
|
||||
export default function FindIdPage() {
|
||||
const [isDoneOpen, setIsDoneOpen] = useState(false);
|
||||
@@ -49,58 +50,19 @@ export default function FindIdPage() {
|
||||
if (!validateAll()) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('https://hrdi.coconutmeet.net/auth/find-id', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: name,
|
||||
phone: phone,
|
||||
}),
|
||||
});
|
||||
const response = await apiService.findUserId(name, phone);
|
||||
const data = response.data;
|
||||
|
||||
if (!response.ok) {
|
||||
let errorMessage = `아이디 찾기 실패 (${response.status})`;
|
||||
try {
|
||||
const errorData = await response.json();
|
||||
if (errorData.error) {
|
||||
errorMessage = errorData.error;
|
||||
} else if (errorData.message) {
|
||||
errorMessage = errorData.message;
|
||||
} else if (response.statusText) {
|
||||
errorMessage = `${response.statusText} (${response.status})`;
|
||||
}
|
||||
} catch (parseError) {
|
||||
if (response.statusText) {
|
||||
errorMessage = `${response.statusText} (${response.status})`;
|
||||
}
|
||||
}
|
||||
console.error('아이디 찾기 실패:', errorMessage);
|
||||
setIsFailedOpen(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// body의 emails 배열에서 첫 번째 이메일 가져오기
|
||||
if (data.emails && Array.isArray(data.emails) && data.emails.length > 0) {
|
||||
setFoundUserId(data.emails[0]);
|
||||
} else if (data.email) {
|
||||
setFoundUserId(data.email);
|
||||
}
|
||||
|
||||
// 가입일 정보는 API 응답에 없음
|
||||
// // header의 date 값 가져오기
|
||||
// const headerDate = response.headers.get('date');
|
||||
// if (headerDate) {
|
||||
// setJoinedAt(formatJoinedAt(headerDate));
|
||||
// }
|
||||
|
||||
|
||||
setIsDoneOpen(true);
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.';
|
||||
console.error('아이디 찾기 오류:', errorMessage);
|
||||
console.error('아이디 찾기 오류:', error);
|
||||
setIsFailedOpen(true);
|
||||
}
|
||||
}
|
||||
@@ -121,115 +83,113 @@ export default function FindIdPage() {
|
||||
<div className="flex-1 flex items-center justify-center w-full py-6">
|
||||
<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full relative">
|
||||
|
||||
<div className="my-15 flex flex-col items-center">
|
||||
<div className="text-[24px] font-extrabold leading-[150%] text-neutral-700">
|
||||
아이디 찾기
|
||||
</div>
|
||||
<p className="text-[18px] leading-[150%] text-[#6c7682] mt-[8px] text-center">
|
||||
가입 시 등록한 회원정보를 입력해 주세요.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-[15px] font-semibold text-[#6c7682]">
|
||||
이름
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
setName(e.target.value);
|
||||
if (errors.name) {
|
||||
setErrors((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next.name;
|
||||
return next;
|
||||
});
|
||||
}
|
||||
}}
|
||||
onFocus={() => setFocused((p) => ({ ...p, name: true }))}
|
||||
onBlur={() => setFocused((p) => ({ ...p, name: false }))}
|
||||
placeholder="이름을 입력해 주세요."
|
||||
className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] mt-3 border focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${
|
||||
errors.name
|
||||
? "border-error focus:border-error"
|
||||
: "border-neutral-40 focus:border-neutral-700"
|
||||
}`}
|
||||
/>
|
||||
{name.trim().length > 0 && focused.name && (
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
setName("");
|
||||
}}
|
||||
aria-label="입력 지우기"
|
||||
className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
|
||||
<LoginInputSvg />
|
||||
</button>
|
||||
)}
|
||||
<div className="my-15 flex flex-col items-center">
|
||||
<div className="text-[24px] font-extrabold leading-[150%] text-neutral-700">
|
||||
아이디 찾기
|
||||
</div>
|
||||
{errors.name && <p className="text-error text-[13px] leading-tight">{errors.name}</p>}
|
||||
<p className="text-[18px] leading-[150%] text-[#6c7682] mt-[8px] text-center">
|
||||
가입 시 등록한 회원정보를 입력해 주세요.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 mt-6">
|
||||
<label htmlFor="phone" className="text-[15px] font-semibold text-[#6c7682]">
|
||||
휴대폰 번호
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
inputMode="numeric"
|
||||
value={formatPhoneNumber(phone)}
|
||||
onChange={(e) => {
|
||||
const numbersOnly = e.target.value.replace(/[^0-9]/g, "");
|
||||
setPhone(numbersOnly);
|
||||
if (errors.phone) {
|
||||
setErrors((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next.phone;
|
||||
return next;
|
||||
});
|
||||
}
|
||||
}}
|
||||
onFocus={() => setFocused((p) => ({ ...p, phone: true }))}
|
||||
onBlur={() => setFocused((p) => ({ ...p, phone: false }))}
|
||||
placeholder="-없이 입력해 주세요."
|
||||
className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border mt-3 focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${
|
||||
errors.phone
|
||||
? "border-error focus:border-error"
|
||||
: "border-neutral-40 focus:border-neutral-700"
|
||||
}`}
|
||||
/>
|
||||
{phone.length > 0 && focused.phone && (
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
setPhone("");
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-[15px] font-semibold text-[#6c7682]">
|
||||
이름
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
value={name}
|
||||
onChange={(e) => {
|
||||
setName(e.target.value);
|
||||
if (errors.name) {
|
||||
setErrors((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next.name;
|
||||
return next;
|
||||
});
|
||||
}
|
||||
}}
|
||||
aria-label="입력 지우기"
|
||||
className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
|
||||
<LoginInputSvg />
|
||||
</button>
|
||||
)}
|
||||
onFocus={() => setFocused((p) => ({ ...p, name: true }))}
|
||||
onBlur={() => setFocused((p) => ({ ...p, name: false }))}
|
||||
placeholder="이름을 입력해 주세요."
|
||||
className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] mt-3 border focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${errors.name
|
||||
? "border-error focus:border-error"
|
||||
: "border-neutral-40 focus:border-neutral-700"
|
||||
}`}
|
||||
/>
|
||||
{name.trim().length > 0 && focused.name && (
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
setName("");
|
||||
}}
|
||||
aria-label="입력 지우기"
|
||||
className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
|
||||
<LoginInputSvg />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.name && <p className="text-error text-[13px] leading-tight">{errors.name}</p>}
|
||||
</div>
|
||||
{errors.phone && <p className="text-error text-[13px] leading-tight">{errors.phone}</p>}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className={`h-[56px] w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer mb-3 hover:bg-[#1F2B91] mt-[60px] ${canSubmit ? "bg-active-button" : "bg-inactive-button"}`}>
|
||||
다음
|
||||
</button>
|
||||
<div className="space-y-2 mt-6">
|
||||
<label htmlFor="phone" className="text-[15px] font-semibold text-[#6c7682]">
|
||||
휴대폰 번호
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
inputMode="numeric"
|
||||
value={formatPhoneNumber(phone)}
|
||||
onChange={(e) => {
|
||||
const numbersOnly = e.target.value.replace(/[^0-9]/g, "");
|
||||
setPhone(numbersOnly);
|
||||
if (errors.phone) {
|
||||
setErrors((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next.phone;
|
||||
return next;
|
||||
});
|
||||
}
|
||||
}}
|
||||
onFocus={() => setFocused((p) => ({ ...p, phone: true }))}
|
||||
onBlur={() => setFocused((p) => ({ ...p, phone: false }))}
|
||||
placeholder="-없이 입력해 주세요."
|
||||
className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border mt-3 focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${errors.phone
|
||||
? "border-error focus:border-error"
|
||||
: "border-neutral-40 focus:border-neutral-700"
|
||||
}`}
|
||||
/>
|
||||
{phone.length > 0 && focused.phone && (
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
setPhone("");
|
||||
}}
|
||||
aria-label="입력 지우기"
|
||||
className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
|
||||
<LoginInputSvg />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors.phone && <p className="text-error text-[13px] leading-tight">{errors.phone}</p>}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className={`h-[56px] w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer mb-3 hover:bg-[#1F2B91] mt-[60px] ${canSubmit ? "bg-active-button" : "bg-inactive-button"}`}>
|
||||
다음
|
||||
</button>
|
||||
|
||||
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user