Skip to content

Commit a2867fa

Browse files
seojeongmseojeongm
committed
style: 회원 탈퇴, 이메일/비밀번호 변경 페이지 UI 통일
1 parent 5e1cf6b commit a2867fa

3 files changed

Lines changed: 15 additions & 13 deletions

File tree

‎src/pages/settings/DeleteAccountPage.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const DeleteAccountPage = () => {
6060
return (
6161
<div className="mt-20 flex min-h-screen flex-col items-center">
6262
<h2 className="text-36px-semibold">회원 탈퇴</h2>
63+
<p className="text-24px-medium text-black-70">탈퇴 시 계정이 삭제됩니다.</p>
6364

6465
<form onSubmit={handleOpenModal} className="mt-22 w-[432px] space-y-6">
6566
<div>
@@ -69,7 +70,7 @@ const DeleteAccountPage = () => {
6970
<input
7071
id="password"
7172
type="password"
72-
className="text-24px-medium border-black-30 placeholder-black-30 h-[68px] w-full rounded-[8px] border px-3 py-2 outline-none"
73+
className="hover:border-main focus:ring-main border-black-30 text-24px-medium placeholder-black-30 mt-2 h-[68px] w-full rounded-[8px] border px-3 py-2 outline-none focus:ring-1"
7374
placeholder="비밀번호를 입력해주세요"
7475
value={password}
7576
onChange={(e) => setPassword(e.target.value)}

‎src/pages/settings/EmailChangePage.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,9 @@ const EmailChangePage = () => {
4040
return (
4141
<div className="mt-20 flex min-h-screen flex-col items-center">
4242
<h2 className="text-36px-semibold">이메일 변경</h2>
43+
<p className="text-24px-medium text-black-70">변경하실 새로운 이메일을 설정해 주세요.</p>
4344

44-
<form className="mt-22 w-[432px] space-y-6" onSubmit={handleSubmit}>
45+
<form className="mt-10 w-[432px] space-y-6" onSubmit={handleSubmit}>
4546
{/* 새 이메일 입력 */}
4647
<div>
4748
<label htmlFor="newEmail" className="text-24px-medium">
@@ -50,8 +51,8 @@ const EmailChangePage = () => {
5051
<input
5152
id="newEmail"
5253
type="email"
53-
className="border-black-30 placeholder-black-30 text-24px-medium h-[68px] w-full rounded-[8px] border px-3 py-2 outline-none"
54-
placeholder="새 이메일을 입력해주세요"
54+
className="hover:border-main focus:ring-main border-black-30 text-24px-medium placeholder-black-30 mt-2 h-[68px] w-full rounded-[8px] border px-3 py-2 outline-none focus:ring-1"
55+
placeholder="새 이메일을 입력해 주세요"
5556
value={newEmail}
5657
onChange={(e) => setNewEmail(e.target.value)}
5758
autoComplete="email"
@@ -66,8 +67,8 @@ const EmailChangePage = () => {
6667
<input
6768
id="currentPassword"
6869
type="password"
69-
className="border-black-30 text-24px-medium placeholder-black-30 h-[68px] w-full rounded-[8px] border px-3 py-2 outline-none"
70-
placeholder="현재 비밀번호를 입력해주세요"
70+
className="hover:border-main focus:ring-main border-black-30 text-24px-medium placeholder-black-30 mt-2 h-[68px] w-full rounded-[8px] border px-3 py-2 outline-none focus:ring-1"
71+
placeholder="현재 비밀번호를 입력해 주세요"
7172
value={currentPassword}
7273
onChange={(e) => setCurrentPassword(e.target.value)}
7374
autoComplete="current-password"

‎src/pages/settings/PasswordChangePage.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const PasswordChangePage = () => {
3636
return (
3737
<div className="mt-20 flex min-h-screen flex-col items-center">
3838
<h2 className="text-36px-semibold">비밀번호 변경</h2>
39-
<p className="text-24px-medium text-black-70">변경하실 새로운 비밀번호를 설정해주세요.</p>
39+
<p className="text-24px-medium text-black-70">변경하실 새로운 비밀번호를 설정해 주세요.</p>
4040

4141
<form onSubmit={onSubmit} className="mt-12 w-[432px] space-y-6">
4242
{/* 현재 비밀번호 */}
@@ -47,8 +47,8 @@ const PasswordChangePage = () => {
4747
<input
4848
id="current"
4949
type="password"
50-
className="border-black-30 text-24px-medium placeholder-black-30 h-[68px] w-full rounded-[8px] border px-3 py-2 outline-none"
51-
placeholder="현재 비밀번호를 입력해주세요"
50+
className="hover:border-main focus:ring-main border-black-30 text-24px-medium placeholder-black-30 mt-2 h-[68px] w-full rounded-[8px] border px-3 py-2 outline-none focus:ring-1"
51+
placeholder="현재 비밀번호를 입력해 주세요"
5252
value={currentPassword}
5353
onChange={(e) => setCurrentPassword(e.target.value)}
5454
/>
@@ -62,8 +62,8 @@ const PasswordChangePage = () => {
6262
<input
6363
id="password"
6464
type="password"
65-
className="border-black-30 text-24px-medium placeholder-black-30 h-[68px] w-full rounded-[8px] border px-3 py-2 outline-none"
66-
placeholder="새 비밀번호를 입력해주세요"
65+
className="hover:border-main focus:ring-main border-black-30 text-24px-medium placeholder-black-30 mt-2 h-[68px] w-full rounded-[8px] border px-3 py-2 outline-none focus:ring-1"
66+
placeholder="새 비밀번호를 입력해 주세요"
6767
value={newPassword}
6868
onChange={(e) => setNewPassword(e.target.value)}
6969
/>
@@ -77,8 +77,8 @@ const PasswordChangePage = () => {
7777
<input
7878
id="confirm"
7979
type="password"
80-
className="border-black-30 text-24px-medium placeholder-black-30 h-[68px] w-full rounded-[8px] border px-3 py-2 outline-none"
81-
placeholder="비밀번호를 다시 입력해주세요"
80+
className="hover:border-main focus:ring-main border-black-30 text-24px-medium placeholder-black-30 mt-2 h-[68px] w-full rounded-[8px] border px-3 py-2 outline-none focus:ring-1"
81+
placeholder="비밀번호를 다시 입력해 주세요"
8282
value={confirmPassword}
8383
onChange={(e) => setConfirmPassword(e.target.value)}
8484
/>

0 commit comments

Comments
 (0)