Skip to content

Commit 3cab637

Browse files
Danto7632Danto7632
authored
Merge pull request #48 from DMU-DebugVisual/sunwoong
UI 개선 및 기능 추가
2 parents a9038d0 + 7aa6a6e commit 3cab637

File tree

7 files changed

+228
-110
lines changed

7 files changed

+228
-110
lines changed

‎public/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27+
<!-- ✅ Open Graph (SNS 미리보기) -->
28+
<meta property="og:type" content="website" />
29+
<meta property="og:title" content="Zivorp | 함께 배우는 개발 커뮤니티" />
30+
<meta property="og:description" content="Zivorp는 개발자들이 함께 학습하고 공유하는 공간입니다." />
31+
<meta property="og:image" content="%PUBLIC_URL%/logo2.png" />
32+
<meta property="og:url" content="https://gptonline.ai/ko/" />
2733
<title>Zivorp</title>
2834
</head>
2935
<body>

‎public/logo2.png‎

4.53 MB
Loading

‎src/assets/logo4.png‎

1.41 MB
Loading

‎src/components/community/Community.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -373,17 +373,20 @@ html {
373373
}
374374

375375
.post-card {
376+
cursor: pointer;
376377
background-color: transparent;
377378
box-shadow: none;
378379
border-radius: 0;
379380
padding: 12px 0;
380381
border-bottom: 1px solid #eaeaea;
382+
381383
}
382384

383385
.post-card:first-child {
384386
border-top: 1px solid #eaeaea;
385387
}
386388

389+
387390
.post-meta {
388391
display: flex;
389392
flex-direction: column;
@@ -529,6 +532,7 @@ span.tag {
529532
font-size: 12px !important;
530533
font-weight: 500;
531534
margin-bottom: 2px;
535+
cursor: pointer;
532536
}
533537

534538
.popular-posts .post-author {

‎src/components/login/Login.css‎

Lines changed: 142 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@
4343
}
4444

4545
.login-form input {
46-
width: 340px;
46+
width: 100%; /* 🔥 고정 340px 제거 */
47+
max-width: 420px; /* ✅ 원하면 제한만 두기 */
4748
padding: 0.75rem 1rem;
4849
font-size: 0.9rem;
4950
border: 1px solid #ccc;
@@ -52,8 +53,9 @@
5253
display: block;
5354
}
5455

56+
5557
.login-form button {
56-
width: 340px;
58+
width: 300px;
5759
padding: 0.85rem;
5860
font-size: 0.9rem;
5961
background-color: #6a1b9a;
@@ -114,39 +116,42 @@
114116
.social-buttons {
115117
display: flex;
116118
justify-content: center;
117-
gap: 1rem;
118-
margin-top: 1rem;
119+
gap: 0.6rem;
120+
width: 100%;
121+
max-width: 325px;
119122
}
120123

121124
.social-button {
122-
width: 24px;
123-
height: 48px;
124-
padding: 0;
125-
border: none;
126-
border-radius: 12px;
127-
background-color: #f5f5f5;
125+
flex: 1;
128126
display: flex;
129127
align-items: center;
130128
justify-content: center;
129+
gap: 0.5rem;
130+
padding: 0.65rem;
131+
font-size: 0.95rem;
132+
font-weight: 500;
133+
border-radius: 6px;
134+
border: 1px solid #ddd;
135+
background-color: #fcfcfc; /* 더 밝게 */
131136
cursor: pointer;
132-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
133-
transition: transform 0.2s ease;
134-
}
135-
136-
.social-button:hover {
137-
transform: translateY(-2px);
137+
transition: background-color 0.2s;
138138
}
139139

140140
.social-button img {
141-
width: 30px;
142-
height: 30px;
141+
width: 24px;
142+
height: 24px;
143143
object-fit: contain;
144144
display: inline-block;
145145
vertical-align: middle;
146146
}
147147

148+
.social-button:hover {
149+
background-color: #ededed;
150+
}
151+
152+
.social-button.google,
148153
.social-button.github {
149-
background-color: #f5f5f5; /* 라이트 모드용 */
154+
background-color: #fcfcfc;
150155
}
151156

152157

@@ -207,51 +212,82 @@
207212
color: #ccc;
208213
}
209214

210-
211-
/* 회원가입 스타일 */
212215
.login-logo {
213216
width: 150px;
214217
height: auto;
215218
display: block;
216219
margin: 0 auto 0.5rem;
217220
}
221+
.login-password-wrapper {
222+
position: relative;
223+
width: 100% !important;
224+
max-width: 420px; /* 적절한 최대 너비 */
225+
margin: 0 auto; /* 중앙 정렬 */
226+
}
227+
228+
.login-password-wrapper input {
229+
width: 100%; /* 부모(.login-password-wrapper)에 맞춤 */
230+
height: 42px;
231+
padding: 0.75rem 2.5rem 0.75rem 1rem;
232+
box-sizing: border-box;
233+
font-size: 0.9rem;
234+
}
235+
236+
237+
.login-toggle-password-btn {
238+
position: absolute;
239+
top: 50%;
240+
right: 12px;
241+
transform: translateY(-50%);
242+
cursor: pointer;
243+
font-size: 1.1rem;
244+
color: #888;
245+
display: flex;
246+
align-items: center;
247+
justify-content: center;
248+
width: 24px;
249+
height: 24px;
250+
}
251+
218252

253+
/* 회원가입 스타일 */
219254
.signup-container {
220255
display: flex;
221256
flex-direction: column;
222257
align-items: center;
223258
justify-content: center;
224-
padding: 2rem 1rem;
259+
padding: 0 1rem 2rem;
225260
min-height: 100vh;
226261
background-color: #ffffff;
262+
margin-top: -2rem; /* 폼 전체를 위로 */
227263
}
228264

229265
.signup-title {
230-
font-size: 1.7rem;
266+
font-size: 1.4rem;
231267
font-weight: bold;
232268
text-align: center;
233269
margin-bottom: 0.2rem;
234270
}
235271

236272
.signup-subtitle {
237273
text-align: center;
238-
font-size: 1rem;
274+
font-size: 0.9rem;
239275
color: #666;
240-
margin-bottom: 1.5rem;
276+
margin-bottom: 1.7rem;
277+
margin-top: 0.2rem;
241278
}
242279

243280
.signup-form {
244281
width: 100%;
245-
max-width: 325px;
282+
max-width: 300px;
246283
display: flex;
247284
flex-direction: column;
248285
gap: 0.6rem;
249286
}
250287

251288
.signup-form label {
252-
font-size: 1rem;
253-
font-weight: 600;
254-
margin-bottom: 0.05rem;
289+
font-size: 0.85rem;
290+
font-weight: 500;
255291
display: block;
256292
}
257293

@@ -264,47 +300,101 @@
264300
border: 1px solid #ccc;
265301
border-radius: 5px;
266302
box-sizing: border-box;
303+
height: 42px;
304+
267305
}
268306

269-
.form-guide {
270-
font-size: 0.9rem;
307+
/* 공통 안내문 스타일 */
308+
.password-rules,
309+
.email-guide,
310+
.confirm-password {
311+
font-size: 0.8rem;
271312
color: #999;
272-
margin-top: 0.1rem;
273-
line-height: 1.3;
313+
margin-bottom: 0.5rem;
314+
line-height: 1.6;
315+
list-style: none;
316+
padding-left: 0;
317+
}
318+
319+
/* 성공 시 */
320+
.valid {
321+
color: green;
274322
}
275323

276-
.signup-check {
324+
/* 실패 시 */
325+
.invalid {
326+
color: red;
327+
}
328+
329+
.signup-benefit {
277330
display: flex;
278331
align-items: flex-start;
279332
gap: 0.5rem;
280-
font-size: 0.7rem;
333+
font-size: 0.4rem;
334+
color: #444;
281335
line-height: 1.4;
282-
margin-top: 0.6rem;
283-
width: 100%;
336+
justify-content: center;
284337
}
285338

286-
.signup-check input[type="checkbox"] {
287-
margin-top: 0.2rem;
339+
.signup-benefit input[type="checkbox"] {
288340
flex-shrink: 0;
289341
}
290342

343+
.benefits-label {
344+
font-size: 0.6rem !important;
345+
color: #444;
346+
}
347+
291348
.signup-check label {
292349
flex: 1;
293350
line-height: 1.4;
294-
font-size: 0.75rem;
351+
font-size: 0.7rem;
295352
color: #444;
296353
}
354+
.signup-benefit input[type="checkbox"] {
355+
appearance: none;
356+
width: 16px;
357+
height: 16px;
358+
border: 1px solid #aaa;
359+
border-radius: 3px;
360+
background-color: #fff;
361+
cursor: pointer;
362+
position: relative;
363+
}
364+
365+
.signup-benefit input[type="checkbox"]:checked {
366+
background-color: #8e24aa !important;
367+
border-color: #8e24aa !important;
368+
}
369+
370+
.signup-benefit input[type="checkbox"]::after {
371+
content: "";
372+
position: absolute;
373+
width: 4px;
374+
height: 8px;
375+
border: solid white;
376+
border-width: 0 2px 2px 0;
377+
transform: rotate(45deg);
378+
top: 2px;
379+
left: 5px;
380+
display: none;
381+
}
382+
383+
.signup-benefit input[type="checkbox"]:checked::after {
384+
display: block;
385+
}
386+
297387

298388
.signup-button {
299389
background-color: #8e24aa;
300390
color: white;
301-
padding: 0.85rem;
391+
padding: 0.75rem;
302392
font-size: 0.95rem;
303393
font-weight: 600;
304394
border: none;
305395
border-radius: 6px;
306396
cursor: pointer;
307-
margin-top: 0.4rem;
397+
margin-top: 1.3rem;
308398
}
309399

310400
.signup-button:hover {
@@ -419,3 +509,13 @@
419509
font-size: 1.2rem;
420510
}
421511

512+
.logo-wrapper {
513+
display: flex;
514+
justify-content: center;
515+
margin-bottom: 1rem;
516+
}
517+
518+
.signup-logo {
519+
max-width: 120px;
520+
height: auto;
521+
}

‎src/components/login/Login.jsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { useState } from 'react';
22
import axios from 'axios';
33
import config from '../../config';
4+
import '../login/Login.css';
5+
import { FaEye, FaEyeSlash } from 'react-icons/fa';
46
import { useNavigate } from 'react-router-dom';
57
import logoImage from '../../assets/logo3.png';
68
import googleIcon from '../../assets/google.png';
@@ -11,6 +13,7 @@ function Login({ onClose, onLoginSuccess }) {
1113
username: '',
1214
password: '',
1315
});
16+
const [showPassword, setShowPassword] = useState(false);
1417

1518
const navigate = useNavigate();
1619

@@ -61,15 +64,22 @@ function Login({ onClose, onLoginSuccess }) {
6164
required
6265
/>
6366

64-
<div className="password-input-wrapper">
67+
<div className="login-password-wrapper">
6568
<input
6669
id="password"
67-
type="password"
70+
type={showPassword ? "text" : "password"}
6871
placeholder="비밀번호"
6972
value={formData.password}
7073
onChange={handleChange}
7174
required
7275
/>
76+
<span
77+
className="login-toggle-password-btn"
78+
onClick={() => setShowPassword(prev => !prev)}
79+
>
80+
{showPassword ? <FaEyeSlash /> : <FaEye />}
81+
</span>
82+
7383
</div>
7484

7585
<button type="submit">로그인</button>
@@ -96,9 +106,11 @@ function Login({ onClose, onLoginSuccess }) {
96106
<div className="social-buttons">
97107
<button type="button" className="social-button google">
98108
<img src={googleIcon} alt="Google 로그인" />
109+
<span>Google</span>
99110
</button>
100111
<button type="button" className="social-button github">
101112
<img src={githubIcon} alt="Github 로그인" />
113+
<span>Github</span>
102114
</button>
103115
</div>
104116
</div>

0 commit comments

Comments
 (0)