Skip to content

로그인 회원가입 구현 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
seungjael508-oss wants to merge 9 commits into
base: node
Choose a base branch
from
Open

로그인 회원가입 구현 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
80f8f82
로그인 회원가입 구현
Mar 31, 2026
dd040e7
로그인,회원가입 기준
Mar 31, 2026
2a140c2
로그인 회원가입 ul 수정
Mar 31, 2026
6acb3e6
최종 미션 완성
Mar 31, 2026
aa7f06b
Update login.html
seungjael508-oss Mar 31, 2026
a9f9e12
인덱스 추가
Mar 31, 2026
8740417
수정 중입니다.
Mar 31, 2026
b61fc66
미션1 추가
Apr 2, 2026
62d4ea6
미션폴더 정상화
Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="0; url=login.html" />
<title>dlehdwnd...</title>
</head>

<body>
<p>로그인 페이지로 이동 중 입니다.</p>
</body>
</html>
74 changes: 74 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - 로그인</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="auth-container">
<section class="auth-card">
<div class="auth-logo">
<img src="logo.png" alt="판다마켓 로고" class="card-logo-icon" />
<h1 class="card-logo-text">판다마켓</h1>
</div>

<form class="auth-form" onsubmit="return false;">
<div class="form-group">
<label for="login-email">이메일</label>
<input type="email" id="login-email" placeholder="이메일을 입력해 주세요"/>
</div>

<div class="form-group">
<label for="login-password">비밀번호</label>
<div class="password-wrap">
<input type="password" id="login-password" placeholder="비밀번호를 입력해 주세요"/>
<button type="button" class="eye-btn" onclick="togglePassword('login-password', this)"
aria-label="비밀번호 보기">👁</button>
</div>
</div>

<button type="submit" class="btn-primary">로그인</button>
</form>

<div class="sns-section">
<p class="sns-label">간편 로그인하기</p>

<div class="sns-box">
<a href="https://www.google.com/" target="_blank" class="sns-icon google-btn"aria-label="구글 로그인">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
</a>

<a href="https://www.kakaocorp.com/page/" target="_blank" class="sns-icon kakao-btn" aria-label="카카오 로그인">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path fill="#3C1E1E" d="M12 3C6.48 3 2 6.48 2 10.8c0 2.72 1.6 5.12 4 6.56L5 21l4.28-2.84C10.12 18.36 11.04 18.5 12 18.5c5.52 0 10-3.36 10-7.7S17.52 3 12 3z"/>
</svg>
</a>
</div>
</div>

<p class="auth-switch">판다마켓이 처음이신가요 <a href="signup.html">회원가입</a>
</p>
</section>
</main>

<script>
function togglePassword(id, btn) {
const input = document.getElementById(id);
if (input.type === "password") {
input.type = "text";
btn.textContent = "🙈";
} else {
input.type = "password";
btn.textContent = "👁";
}
}
</script>
</body>
</html>
Binary file added logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
153 changes: 153 additions & 0 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓 - 회원가입</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="auth-container">
<section class="auth-card">
<div class="auth-logo">
<img src="logo.png" alt="판다마켓 로고" class="card-logo-icon" />
<h1 class="card-logo-text">판다마켓</h1>
</div>

<form class="auth-form" onsubmit="return false;">
<div class="form-group">
<label for="signup-email">이메일</label>
<input
type="email"
id="signup-email"
placeholder="이메일을 입력해 주세요"
/>
</div>

<div class="form-group">
<label for="signup-nickname">닉네임</label>
<input
type="text"
id="signup-nickname"
placeholder="닉네임을 입력해 주세요"
/>
</div>

<div class="form-group">
<label for="signup-password">비밀번호</label>
<div class="password-wrap">
<input
type="password"
id="signup-password"
placeholder="비밀번호를 입력해 주세요"
/>
<button
type="button"
class="eye-btn"
onclick="togglePassword('signup-password', this)"
aria-label="비밀번호 보기"
>
👁
</button>
</div>
</div>

<div class="form-group">
<label for="signup-password-check">비밀번호 확인</label>
<div class="password-wrap">
<input
type="password"
id="signup-password-check"
placeholder="비밀번호를 다시 한 번 입력해 주세요"
/>
<button
type="button"
class="eye-btn"
onclick="togglePassword('signup-password-check', this)"
aria-label="비밀번호 확인 보기"
>
👁
</button>
</div>
</div>

<button type="submit" class="btn-primary">회원가입</button>
</form>

<div class="sns-section">
<p class="sns-label">간편 로그인하기</p>

<div class="sns-box">
<a
href="https://www.google.com/"
target="_blank"
class="sns-icon google-btn"
aria-label="구글 로그인"
>
<svg
viewBox="0 0 24 24"
width="20"
height="20"
aria-hidden="true"
>
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="#FBBC05"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
</a>

<a
href="https://www.kakaocorp.com/page/"
target="_blank"
class="sns-icon kakao-btn"
aria-label="카카오 로그인"
>
<svg
viewBox="0 0 24 24"
width="20"
height="20"
aria-hidden="true"
>
<path
fill="#3C1E1E"
d="M12 3C6.48 3 2 6.48 2 10.8c0 2.72 1.6 5.12 4 6.56L5 21l4.28-2.84C10.12 18.36 11.04 18.5 12 18.5c5.52 0 10-3.36 10-7.7S17.52 3 12 3z"
/>
</svg>
</a>
</div>
</div>

<p class="auth-switch">
이미 회원이신가요?
<a href="login.html">로그인</a>
</p>
</section>
</main>

<script>
function togglePassword(id, btn) {
const input = document.getElementById(id);
if (input.type === "password") {
input.type = "text";
btn.textContent = "🙈";
} else {
input.type = "password";
btn.textContent = "👁";
}
}
</script>
</body>
</html>
Loading