From 44fe2f8cd80f071fe78c5c454cabd066032345d4 Mon Sep 17 00:00:00 2001
From: YuJin Lee <ekfzha8020@gmail.com>
Date: Sun, 23 Mar 2025 02:03:44 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20eye=20icon,=20align-items=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SignupPage/SignupPage.style.ts | 27 ++++++++++++++++++++----
 src/pages/SignupPage/SignupPage.tsx      | 19 ++++++++++-------
 2 files changed, 34 insertions(+), 12 deletions(-)

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..e41bce1 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
@@ -55,7 +56,7 @@ const SignupForm: React.FC<{ handleNext: () => void; formData: any; setFormData:
       <Title>회원가입</Title>
       <Subtitle>회원 정보 입력</Subtitle>
       
-      <form onSubmit={handleSubmit}>
+      <Form onSubmit={handleSubmit}>
         <FormGroup>
           <Label htmlFor="name">이름</Label>
           <Input 
@@ -105,17 +106,19 @@ const SignupForm: React.FC<{ handleNext: () => void; formData: any; setFormData:
               value={formData.confirmPassword}
               onChange={handleChange}
             />
-            <ToggleVisibility 
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-            >
-              👁️
+            <ToggleVisibility >
+              <EyeIcon>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                  <circle cx="12" cy="12" r="3"></circle>
+                </svg>
+              </EyeIcon>
             </ToggleVisibility>
           </PasswordContainer>
         </FormGroup>
         
         <SubmitButton type="button" onClick={() => {handleNext();}}>다음</SubmitButton>
-      </form>
+      </Form>
       
       <ForgotPassword>
         이미 계정이 있으신가요?<ForgotLink onClick={() => navigate('/')}>로그인</ForgotLink>

From 5beda987f1f008e122c6edbecd16f89862b53bda Mon Sep 17 00:00:00 2001
From: YuJin Lee <ekfzha8020@gmail.com>
Date: Sun, 23 Mar 2025 02:06:55 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20success=20msg=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SignupPage/SignupPage.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/pages/SignupPage/SignupPage.tsx b/src/pages/SignupPage/SignupPage.tsx
index e41bce1..e61bc33 100644
--- a/src/pages/SignupPage/SignupPage.tsx
+++ b/src/pages/SignupPage/SignupPage.tsx
@@ -38,7 +38,6 @@ const ProgressBar: React.FC<ProgressBarProps> = ({ 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<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -85,7 +84,6 @@ const SignupForm: React.FC<{ handleNext: () => void; formData: any; setFormData:
           <Label htmlFor="password">비밀번호</Label>
           <PasswordContainer>
             <Input 
-              type={showPassword ? "text" : "password"} 
               id="password" 
               name="password"
               placeholder="비밀번호를 입력해주세요."
@@ -99,7 +97,6 @@ const SignupForm: React.FC<{ handleNext: () => void; formData: any; setFormData:
           <Label htmlFor="confirmPassword">비밀번호 확인</Label>
           <PasswordContainer>
             <Input 
-              type={showPassword ? "text" : "password"} 
               id="confirmPassword" 
               name="confirmPassword"
               placeholder="비밀번호를 입력해주세요."
@@ -181,8 +178,8 @@ const SuccessForm: React.FC<{ formData: any }> = ({ formData }) => {
           <img src={SuccessIcon}></img>
           <WalletButtonContainer>
             <SuccessMessage>
-              {formData.name}님의 지갑이 <br></br>
-              연동 완료되었습니다!
+              {formData.name}님의 지갑 연동이 <br></br>
+              완료되었습니다!
             </SuccessMessage>
           </WalletButtonContainer>
         </WalletContainer>