diff --git a/src/pages/SignupPage/SignupPage.style.ts b/src/pages/SignupPage/SignupPage.style.ts index 394be4d..4a18c0e 100644 --- a/src/pages/SignupPage/SignupPage.style.ts +++ b/src/pages/SignupPage/SignupPage.style.ts @@ -105,7 +105,7 @@ export const SignupContainer = styled.div` export const Title = styled.h1` color: #171A1F; text-align: center; - font-family: Archivo; + font-family: Pretendard; font-size: 32px; font-style: normal; font-weight: 700; @@ -114,7 +114,7 @@ export const Title = styled.h1` export const Subtitle = styled.h2` color: #323842; text-align: center; - font-family: Archivo; + font-family: Pretendard; font-size: 20px; font-style: normal; font-weight: 600; @@ -123,6 +123,7 @@ export const Subtitle = styled.h2` export const FormGroup = styled.div` margin-bottom: 1rem; + min-width: 400px; `; export const Label = styled.label` @@ -150,13 +151,14 @@ export const PasswordContainer = styled.div` export const ToggleVisibility = styled.button` position: absolute; - right: 10px; + right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #888; + outline: none; `; export const SubmitButton = styled.button` @@ -218,9 +220,26 @@ export const WalletButton = styled.button` export const SuccessMessage = styled.h1` color: #171A1F; -font-family: Archivo; +font-family: Pretendard; font-size: 32px; font-style: normal; font-weight: 700; line-height: 48px; /* 150% */ +`; + +export const EyeIcon = styled.div` + position: absolute; + right: 5px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + color: #777; + outline: none; +`; + +export const Form = styled.form` + display: flex; + flex-direction: column; + align-items: center; + width: 100%; `; \ No newline at end of file diff --git a/src/pages/SignupPage/SignupPage.tsx b/src/pages/SignupPage/SignupPage.tsx index f5df229..e61bc33 100644 --- a/src/pages/SignupPage/SignupPage.tsx +++ b/src/pages/SignupPage/SignupPage.tsx @@ -10,7 +10,8 @@ import { Main, ProgressBarContainer, Navigation, NavButton, Indicators, Dot, SignupContainer, Title, Subtitle, FormGroup, Label, Input, PasswordContainer, ToggleVisibility, SubmitButton, ForgotPassword, - ForgotLink, WalletButton, WalletButtonContainer, WalletContainer, SuccessMessage + ForgotLink, WalletButton, WalletButtonContainer, WalletContainer, SuccessMessage, + EyeIcon, Form } from './SignupPage.style'; // Component Interfaces @@ -37,7 +38,6 @@ const ProgressBar: React.FC = ({ currentStep, totalSteps }) => const SignupForm: React.FC<{ handleNext: () => void; formData: any; setFormData: any }> = ({ handleNext, formData, setFormData }) => { let navigate = useNavigate(); - const [showPassword, setShowPassword] = useState(false); const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; @@ -55,7 +55,7 @@ const SignupForm: React.FC<{ handleNext: () => void; formData: any; setFormData: 회원가입 회원 정보 입력 -
+ void; formData: any; setFormData: void; formData: any; setFormData: - setShowPassword(!showPassword)} - > - 👁️ + + + + + + + {handleNext();}}>다음 -
+ 이미 계정이 있으신가요? navigate('/')}>로그인 @@ -178,8 +178,8 @@ const SuccessForm: React.FC<{ formData: any }> = ({ formData }) => { - {formData.name}님의 지갑이

- 연동 완료되었습니다! + {formData.name}님의 지갑 연동이

+ 완료되었습니다!