Skip to content

Commit

Permalink
Merge pull request #17 from 4bujak-4bujak/fix/mypage
Browse files Browse the repository at this point in the history 
fix: mypage UI fix + token fix
  • Loading branch information
@eun-hak
eun-hak authored May 27, 2024
2 parents 881916f + a7b7278 commit 4d07ff3
Show file tree
Hide file tree
Showing 8 changed files with 229 additions and 213 deletions.
2 changes: 2 additions & 0 deletions src/api/types/auth.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ export interface IUserInfo {
memberNickName: string;
memberSmsAgree: string;
imageUrl?: string;
memberPhone: string;
companyName: string;
}

export interface IWithdraw {
Expand Down
2 changes: 1 addition & 1 deletion src/hook/useLogin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const useLogin = () => {
const [error, setError] = useState('');
const onSuccess = (data: UserLoginType) => {
const { accessToken } = data.data;
const cookieOptions = { path: '/', maxAge: 60 * 15 };
const cookieOptions = { path: '/', maxAge: 600000 * 15 };

setCookie('token', accessToken, cookieOptions);

Expand Down
237 changes: 120 additions & 117 deletions src/pages/mypage/changepassword/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,140 +55,143 @@ export default function PasswordChange() {
const isNextButtonEnabled =
currentPasswordVerified && newPassword && newPassword === newPasswordConfirm;
return (
<div className="flex items-center justify-center w-full bg-gray-100">
<div className="w-full bg-white p-6 rounded-lg">
{/* <Link href="/mypage">
<div className="flex items-center justify-center w-full ">
<div className="w-full max-w-md flex flex-col items-center justify-center ]">
<div className="w-full bg-white p-6 rounded-lg">
{/* <Link href="/mypage">
<img
src="/mypage/passwordchange/BackArrow.svg"
alt="Back"
className="mb-10 cursor-pointer mt-[50px]"
/>
</Link> */}

<BackArrow width="40px" height="24px" />
<h2 className="text-2xl font-bold ">새로 사용할 </h2>
<h2 className="text-2xl font-bold mb-[62px]"> 비밀번호를 설정해주세요. </h2>
<BackArrow width="40px" height="24px" />
<h2 className=" mt-[23px] text-2xl font-bold ">새로 사용할 </h2>
<h2 className="text-2xl font-bold mb-[62px]"> 비밀번호를 설정해주세요. </h2>

<form onSubmit={handleSubmit(onSubmit)} className="">
{/* Current Password Field */}
<div className="mb-[24px]">
<label className=" text-neutral-600 text-base font-semibold mb-2 flex flex-row justify-start">
기존 비밀번호
<img
src="/mypage/passwordchange/YellowEllipse.svg"
alt="Required"
className="inline ml-1 w-2 h-2"
/>
{errors.currentPassword && (
<p className="text-red-500 mt-1 text-xs ml-[130px]">
{errors.currentPassword.message as string}
</p>
)}
</label>
<form onSubmit={handleSubmit(onSubmit)} className="">
{/* Current Password Field */}
<div className="mb-[24px]">
<label className=" text-neutral-600 text-base font-semibold mb-2 flex flex-row justify-start">
<div className="">기존 비밀번호</div>

<div className="flex items-center border-b border-gray-300">
<input
type="password"
className="w-full px-1 py-2 bg-transparent outline-none placeholder-gray-400"
placeholder="기존 비밀번호를 인증해 주세요."
{...register('currentPassword', {})}
disabled={currentPasswordVerified}
/>
<img
src="/mypage/passwordchange/YellowEllipse.svg"
alt="Required"
className="inline ml-1 w-2 h-2"
/>
{errors.currentPassword && (
<p className="text-red-500 mt-1 text-xs ml-[120px]">
{errors.currentPassword.message as string}
</p>
)}
</label>

<button
type="button"
onClick={verifyCurrentPassword}
className={` h-[31px] px-3.5 py-1.5 rounded border justify-center items-center border-neutral-300 gap-2.5 flex ${currentPasswordVerified ? 'w-[103px] bg-neutral-600' : 'w-[83px] bg-white rounded border border-neutral-300'} `}>
<div
className={`text-center text-zinc-400 text-sm font-light font-['Pretendard']`}>
{passwordVerifiedButton}
</div>
</button>
</div>
</div>
<div className="flex items-center border-b border-gray-300">
<input
type="password"
className="w-full px-1 py-2 bg-transparent outline-none placeholder-gray-400"
placeholder="기존 비밀번호를 인증해 주세요."
{...register('currentPassword', {})}
disabled={currentPasswordVerified}
/>

{/* New Password Field */}
<div className="mb-[24px]">
<label className="flex flex-row justify-start text-neutral-600 text-base font-semibold mb-2">
새 비밀번호
<img
src="/mypage/passwordchange/YellowEllipse.svg"
alt="Required"
className="inline ml-1 w-2 h-2 mb-3"
/>
{errors.newPassword && (
<p className="text-red-500 mt-1 text-xs ml-[90px] ">
{errors.newPassword.message as string}
</p>
)}
</label>
<div className="flex items-center border-b border-gray-300">
<input
type="password"
className="w-full px-4 py-2 bg-transparent outline-none placeholder-gray-400"
placeholder="사용할 비밀번호를 입력해 주세요."
{...register('newPassword', {
// minLength: { value: 8, message: '비밀번호는 8자리 이상이어야 합니다.' },
pattern: {
value: /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])/,
message: '*조건에 충족되지 않습니다'
}
})}
disabled={!currentPasswordVerified}
/>
<button
type="button"
onClick={verifyCurrentPassword}
className={` h-[31px] px-3.5 py-1.5 rounded border justify-center items-center border-neutral-300 gap-2.5 flex ${currentPasswordVerified ? 'w-[103px] bg-neutral-600' : 'w-[83px] bg-white rounded border border-neutral-300'} `}>
<div
className={` w-[60px] text-center text-zinc-400 text-sm font-light font-['Pretendard']`}>
{passwordVerifiedButton}
</div>
</button>
</div>
</div>

<p className="text-gray-500 text-xs mt-1">
<img
src="/mypage/passwordchange/WarnEllipse.svg"
alt="Warning"
className="inline mr-1 w-3 h-3"
/>
영문, 숫자, 특수문자 중 2가지 이상 조합 8-16자리
</p>
</div>
{/* New Password Field */}
<div className="mb-[24px]">
<label className="flex flex-row justify-start text-neutral-600 text-base font-semibold mb-2">
새 비밀번호
<img
src="/mypage/passwordchange/YellowEllipse.svg"
alt="Required"
className="inline ml-1 w-2 h-2 mb-3"
/>
{errors.newPassword && (
<p className="text-red-500 mt-1 text-xs ml-[90px] ">
{errors.newPassword.message as string}
</p>
)}
</label>
<div className="flex items-center border-b border-gray-300">
<input
type="password"
className="w-full px-1 py-2 bg-transparent outline-none placeholder-gray-400"
placeholder="사용할 비밀번호를 입력해 주세요."
{...register('newPassword', {
// minLength: { value: 8, message: '비밀번호는 8자리 이상이어야 합니다.' },
pattern: {
value: /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])/,
message: '*조건에 충족되지 않습니다'
}
})}
disabled={!currentPasswordVerified}
/>
</div>

{/* Confirm New Password Field */}
<div className="mb-[24px]">
<label className="flex flex-row justify-start text-neutral-600 text-base font-semibold mb-2">
새 비밀번호 확인
<img
src="/mypage/passwordchange/YellowEllipse.svg"
alt="Required"
className="inline ml-1 w-2 h-2"
/>
{errors.newPasswordConfirm && (
<p className="text-red-500 mt-1 text-xs ml-[110px]">
{errors.newPasswordConfirm.message as string}
</p>
)}
</label>
<div className="flex items-center border-b border-gray-300">
<input
type="password"
className="w-full px-4 py-2 bg-transparent outline-none placeholder-gray-400"
placeholder="위와 같은 비밀번호를 입력해 주세요."
{...register('newPasswordConfirm', {
validate: (value) =>
value === watch('newPassword') || '*일치하지 않습니다.'
})}
disabled={!currentPasswordVerified}
/>
<p className="text-gray-500 text-xs mt-1">
<img
src="/mypage/passwordchange/WarnEllipse.svg"
alt="Warning"
className="inline mr-1 w-3 h-3"
/>
영문, 숫자, 특수문자 중 2가지 이상 조합 8-16자리
</p>
</div>
</div>

{/* Next Button */}

<button
type="submit"
className={`w-full h-12 mt-[150px] rounded-lg border border-neutral-300 text-white ${isNextButtonEnabled ? 'bg-indigo-700' : 'bg-white'}`}
disabled={!isNextButtonEnabled}>
<div
className={`text-center text-[15px] font-normal font-['Pretendard'] leading-snug ${isNextButtonEnabled ? 'text-white' : 'text-zinc-400'}`}>
다음
{/* Confirm New Password Field */}
<div className="mb-[24px]">
<label className="flex flex-row justify-start text-neutral-600 text-base font-semibold mb-2">
새 비밀번호 확인
<img
src="/mypage/passwordchange/YellowEllipse.svg"
alt="Required"
className="inline ml-1 w-2 h-2"
/>
{errors.newPasswordConfirm && (
<p className="text-red-500 mt-1 text-xs ml-[100px]">
{errors.newPasswordConfirm.message as string}
</p>
)}
</label>
<div className="flex items-center border-b border-gray-300">
<input
type="password"
className="w-full px-1 py-2 bg-transparent outline-none placeholder-gray-400"
placeholder="위와 같은 비밀번호를 입력해 주세요."
{...register('newPasswordConfirm', {
validate: (value) =>
value === watch('newPassword') || '*일치하지 않습니다.'
})}
disabled={!currentPasswordVerified}
/>
</div>
</div>
</button>
</form>

{/* Next Button */}

<button
type="submit"
className={`w-full h-12 mt-[150px] rounded-lg border border-neutral-300 text-white ${isNextButtonEnabled ? 'bg-indigo-700' : 'bg-white'}`}
disabled={!isNextButtonEnabled}>
<div
className={`text-center text-[15px] font-normal font-['Pretendard'] leading-snug ${isNextButtonEnabled ? 'text-white' : 'text-zinc-400'}`}>
다음
</div>
</button>
</form>
</div>
</div>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions src/pages/mypage/changeprofile/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function Profile() {

//api나오면 zustand 로직으로 수정
const [fileUrl, setFileUrl] = useState<string | null>(null);
const [contact] = useState('010-1234-5678');
// const [contact] = useState('010-1234-5678');

const member = useMember();
const job = getTitleFromDescription(jobPosition, member.memberJob);
Expand Down Expand Up @@ -136,7 +136,7 @@ export default function Profile() {
연락처
</label>
<div className="w-full h-12 px-4 py-2 bg-stone-50 rounded-lg border border-neutral-300 flex items-center">
<span className="text-neutral-400 text-sm">{contact}</span>
<span className="text-neutral-400 text-sm">{member.memberPhone}</span>
</div>
</div>
</form>
Expand Down
Loading

0 comments on commit 4d07ff3

Please sign in to comment.