Skip to content

Commit 8739a0f

Browse files
chaesunwoongchaesunwoong
authored
Merge pull request #49 from DMU-DebugVisual/sunwoong
회원가입 페이지 및 OG 미리보기 수정
2 parents 3cab637 + 11464ca commit 8739a0f

File tree

3 files changed

+76
-16
lines changed

3 files changed

+76
-16
lines changed

‎public/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@
2828
<meta property="og:type" content="website" />
2929
<meta property="og:title" content="Zivorp | 함께 배우는 개발 커뮤니티" />
3030
<meta property="og:description" content="Zivorp는 개발자들이 함께 학습하고 공유하는 공간입니다." />
31-
<meta property="og:image" content="%PUBLIC_URL%/logo2.png" />
31+
<meta property="og:image" content="https://gptonline.ai/logo2.png" />
3232
<meta property="og:url" content="https://gptonline.ai/ko/" />
33+
3334
<title>Zivorp</title>
3435
</head>
3536
<body>

‎src/components/login/Login.css‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -255,9 +255,9 @@
255255
display: flex;
256256
flex-direction: column;
257257
align-items: center;
258-
justify-content: center;
259-
padding: 0 1rem 2rem;
260-
min-height: 100vh;
258+
/*justify-content: center; */
259+
padding: 6rem 1rem 2rem;
260+
min-height: 103vh;
261261
background-color: #ffffff;
262262
margin-top: -2rem; /* 폼 전체를 위로 */
263263
}
@@ -282,7 +282,7 @@
282282
max-width: 300px;
283283
display: flex;
284284
flex-direction: column;
285-
gap: 0.6rem;
285+
gap: 0.4rem;
286286
}
287287

288288
.signup-form label {
@@ -315,6 +315,13 @@
315315
list-style: none;
316316
padding-left: 0;
317317
}
318+
.email-guide {
319+
font-size: 0.8rem;
320+
color: #999;
321+
line-height: 1.4;
322+
margin-top: 0;
323+
324+
}
318325

319326
/* 성공 시 */
320327
.valid {
@@ -436,9 +443,15 @@
436443
border-radius: 5px;
437444
border: 1px solid #ccc;
438445
background-color: #f1f1f1;
439-
cursor: not-allowed;
446+
cursor: pointer; /* 👈 이 부분 변경 */
447+
transition: background-color 0.2s ease;
440448
}
441449

450+
.social-buttons button:hover {
451+
background-color: #e0e0e0; /* 👈 hover 시 배경 어둡게 */
452+
}
453+
454+
442455
.dark-mode .signup-container {
443456
background-color: #1e1e1e;
444457
color: #f0f0f0;

‎src/components/signup/SignUp.jsx‎

Lines changed: 56 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,18 +56,41 @@ function SignUp() {
5656

5757
<h1 className="signup-title">회원가입</h1>
5858
<p className="signup-subtitle">계정을 만들고 코드 시각화를 시작하세요</p>
59+
5960
<form className="signup-form" onSubmit={handleSubmit}>
6061
<label htmlFor="email">이메일</label>
61-
<input id="email" type="email" placeholder="name@example.com" value={formData.email} onChange={handleChange} required />
62+
<input
63+
id="email"
64+
type="email"
65+
placeholder="name@example.com"
66+
value={formData.email}
67+
onChange={handleChange}
68+
required
69+
style={{ marginBottom: emailTouched && !isEmailValid ? '0.2rem' : '1rem' }}
70+
/>
71+
6272
{emailTouched && !isEmailValid && (
6373
<div className="email-guide invalid">❌ 이메일 형식이 올바르지 않습니다.</div>
6474
)}
6575

66-
<label htmlFor="password">비밀번호</label>
6776

77+
<label htmlFor="password">비밀번호</label>
6878
<div className="password-input-wrapper">
69-
<input id="password" type={showPassword ? 'text' : 'password'} placeholder="********" value={formData.password} onChange={handleChange} required />
70-
<button type="button" className="toggle-password-btn" onClick={() => setShowPassword(prev => !prev)}>{showPassword ? <FaEyeSlash /> : <FaEye />}</button>
79+
<input
80+
id="password"
81+
type={showPassword ? 'text' : 'password'}
82+
placeholder="********"
83+
value={formData.password}
84+
onChange={handleChange}
85+
required
86+
/>
87+
<button
88+
type="button"
89+
className="toggle-password-btn"
90+
onClick={() => setShowPassword(prev => !prev)}
91+
>
92+
{showPassword ? <FaEyeSlash /> : <FaEye />}
93+
</button>
7194
</div>
7295

7396
<ul className="password-rules">
@@ -84,14 +107,31 @@ function SignUp() {
84107

85108
<label htmlFor="confirmPassword">비밀번호 확인</label>
86109
<div className="password-input-wrapper">
87-
<input id="confirmPassword" type={showConfirmPassword ? 'text' : 'password'} placeholder="********" value={formData.confirmPassword} onChange={handleChange} required />
88-
<button type="button" className="toggle-password-btn" onClick={() => setShowConfirmPassword(prev => !prev)}>{showConfirmPassword ? <FaEyeSlash /> : <FaEye />}</button>
110+
<input
111+
id="confirmPassword"
112+
type={showConfirmPassword ? 'text' : 'password'}
113+
placeholder="********"
114+
value={formData.confirmPassword}
115+
onChange={handleChange}
116+
required
117+
/>
118+
<button
119+
type="button"
120+
className="toggle-password-btn"
121+
onClick={() => setShowConfirmPassword(prev => !prev)}
122+
>
123+
{showConfirmPassword ? <FaEyeSlash /> : <FaEye />}
124+
</button>
89125
</div>
90126
{formData.confirmPassword && !isPasswordMatch && (
91127
<div className="confirm-password invalid">❌ 비밀번호가 일치하지 않습니다.</div>
92128
)}
93129

94-
<button type="submit" className="signup-button" disabled={!(isLengthValid && hasTwoTypes && noRepeatThree && isPasswordMatch && isEmailValid)}>
130+
<button
131+
type="submit"
132+
className="signup-button"
133+
disabled={!(isLengthValid && hasTwoTypes && noRepeatThree && isPasswordMatch && isEmailValid)}
134+
>
95135
가입하기
96136
</button>
97137

@@ -100,19 +140,25 @@ function SignUp() {
100140
가입 시, 통합 계정 및 서비스 이용약관, 개인정보 처리방침에 동의하는 것으로 간주합니다.
101141
</label>
102142
</div>
143+
103144
<div className="signup-benefit">
104145
<input type="checkbox" id="benefits" defaultChecked />
105146
<label htmlFor="benefits" className="benefits-label">
106147
통합회원 할인 혜택 및 유용한 채용 소식을 받아볼래요.
107148
</label>
108149
</div>
109-
110150
</form>
111151

112152
<div className="divider">간편 회원가입</div>
113153
<div className="social-buttons">
114-
<button type="button" className="social-button google"><img src={googleIcon} alt="Google 로그인" /><span>Google</span></button>
115-
<button type="button" className="social-button github"><img src={githubIcon} alt="Github 로그인" /><span>Github</span></button>
154+
<button type="button" className="social-button google">
155+
<img src={googleIcon} alt="Google 로그인" />
156+
<span>Google</span>
157+
</button>
158+
<button type="button" className="social-button github">
159+
<img src={githubIcon} alt="Github 로그인" />
160+
<span>Github</span>
161+
</button>
116162
</div>
117163
</div>
118164
);

0 commit comments

Comments
 (0)